1. 導入：なぜencodeURIComponentが必要なのか？
Web開発をしていると、検索ワードやユーザー名などの「日本語」をURLのパラメータとして送信したい場面が出てきます。しかし、URLに直接日本語や記号を記述すると、ブラウザが正しく解釈できなかったり、サーバー側で文字化けが発生したりします。この課題を解決するのが encodeURIComponent です。これを使うことで、URLとして安全な文字列に変換し、エラーを防ぐことができます。
2. 基礎知識：URLエンコードとは何か？
URLには「使用できる文字（アルファベット、数字、特定の記号）」というルールがあります。日本語のような全角文字や、URLの区切りに使われる記号（&、?、=など）をそのままURLに含めると、システムが混乱してしまいます。
そこで、それらの文字を「%」と英数字の組み合わせに変換する仕組みを「URLエンコード」と呼びます。encodeURIComponent は、JavaScriptでこの変換を簡単に行うための標準的な関数です。
3. 実装・解決策：安全なURLを作成する手順
手順は非常にシンプルです。
1. 送信したいデータ（文字列）を用意する。
2. その文字列を encodeURIComponent() で囲む。
3. 変換された文字列をURLのパラメータ部分に連結する。
こうすることで、どんな文字が含まれていても、URLの構造を壊さずにデータを送ることが可能になります。
4. サンプルプログラム：実際に試してみよう
以下のコードをブラウザのコンソール（F12キーを押してコンソールタブ）に貼り付けてみてください。
// 送信したいデータ（日本語と記号を含む）
const userInput = "こんにちは！&元気ですか？";
// encodeURIComponentを使って安全な文字列に変換
const encodedData = encodeURIComponent(userInput);
// URLの一部として組み立てる
const baseUrl = "https://example.com/search?q=";
const finalUrl = baseUrl + encodedData;
// 結果を表示
console.log("変換前:", userInput);
console.log("変換後:", encodedData); // 日本語が%XXの形式に変わります
console.log("完成したURL:", finalUrl);
5. 応用・注意点：現場で陥りやすい罠
実務で扱う際に注意すべき点がいくつかあります。
・URL全体をエンコードしないこと
よくある間違いとして、URLの全体（https://…など）を一度にエンコードしようとする人がいます。すると「://」や「/」まで変換されてしまい、正しいURLではなくなります。必ず「パラメータの値（?以降のデータ部分）」だけを個別にエンコードするのが鉄則です。
・逆の処理「decodeURIComponent」
サーバーから受け取ったデータを元の日本語に戻したい場合は、decodeURIComponent() を使用します。送信側と受信側でこれらをセットで使うことを覚えておきましょう。
・特殊な記号の扱い
encodeURIComponentはほぼ全ての文字を変換しますが、一部の記号（!、’、(、)、）などは変換しないことがあります。これらも完全に変換したい場合は、さらに工夫が必要になることがありますが、一般的なWeb開発では今回の基本形で十分に対応可能です。