TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでURLをエンコードする方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでURLをエンコードする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでURLをエンコードする方法について解説しています。最初にエンコード、デコードとはどういうものかについて説明します。次にencodeURI関数を使ってURLをエンコードする方法、encodeURIComponent関数を使ってURLをエンコードする方法を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでURLをエンコードする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでししょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

URLをエンコードする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

エンコード、デコードとは

エンコードは変換、デコードは変換したものを戻すことを指します。

変換が必要な理由は、webサイトなどのアドレスのURLなどは使える文字や規格が決まっているため、使えない文字の変換が必要になるためです。

また、変換したURLを受け取った側はそのURLを戻して使うという形になります。

 

encodeURI関数を使ってURLをエンコードする方法

JavaScriptには標準でURLをエンコードする関数「encodeURI」が用意されています。

今回は例としてGoogleでテックアカデミーを検索するURLをエンコードしてみましょう。

const url = 'https://www.google.com/search?q=テックアカデミー';
const encodeUrl = encodeURI(url);
//encodeUrlは、https://www.google.com/search?q=%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC

解説

URLには全角文字（上のソースでは「テックアカデミー」）が使えません。

encodeURI(【変換するURL】)とすることでエンコードできるでしょう。

エンコードされたURLはテックアカデミーの部分を「%E3%83・・・」などといった具合に変換しています。

変換されたURLをChromeブラウザのアドレスバーに貼り付けると下記の画像のように、「テックアカデミー」という文字に戻ります。

逆にChromeブラウザのアドレスバーのURLをコピーして、メモ帳などに貼り付けるとエンコードされたURLです。

 

 

[PR] コーディングで副業する方法とは

encodeURIComponent関数を使ってURLをエンコードする方法

encodeURIComponent関数の使い方は、先程のencodeURIと同じです。

その違いは、encodeURIで変換された全角文字に加え/（スラッシュ）や?（ハテナ）などURLで意味を持つ文字も変換されます。

先程のURL「https://www.google.com/search?q=テックアカデミー」をencodeURIで変換したものとencodeURIComponentで変換したものを比べて見ましょう。

encodeURIの場合

https://www.google.com/search?q=%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC

encodeURIComponentの場合

https%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3D%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC

主な使い分けとしては、encodeURIはURL全体に使用するような場合にURLとして機能させる範囲で変換します。

対して、encodeURIComponentは入力画面などでホームページのURLを入力するような場合に、安全に通信するために全体を変換してからPOSTでサーバーに送るケースに使われます。

また、URLのパラメータ部分（?以降の文字）のみに適用する場合などに使用することが可能です。

 

URLをデコードする方法

encodeURI関数でエンコードされた文字は、decodeURI関数でデコード可能です。

そして、encodeURIComponent関数でエンコードされた文字は、decodeURIComponent関数でデコード可能です。

使い方（ソースの書き方）に関しては、関数名が変わるだけであるため使いやすいといえるでしょう。。

 

執筆してくれたメンター

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのfor文を省略形で書く方法を現役エンジニアが解説【初心者向け】

JavaScriptのfor文を省略形で書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptの配列(array)をループ(loop)処理する方法について現役エンジニアが解説【初心者向

JavaScriptの配列(array)をループ(loop)処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
JavaScript

JavaScriptで戻るボタンのイベントハンドラを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptで戻るボタンのイベントハンドラを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
JavaScript

selectボックスで選択された際のイベントをJavaScriptで取得する方法を現役エンジニアが解説【初心者

selectボックスで選択された際のイベントをJavaScriptで取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初...
JavaScript

jQueryのAjax関数を利用したJavaScriptについて現役エンジニアが解説【初心者向け】

jQueryのAjax関数を利用したJavaScriptについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

JavaScriptでスライダーバーを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでスライダーバーを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

JavaScriptのencodeURI()関数の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのencodeURI()関数の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのencodeURI()関数の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 エンコードとは encodeURI()関数とは 実際に書いてみよう まとめ   エンコードとは URIとは、インターネット上でWebサイトの場所を表す文字列です。URIには使用できる文字が決まっているため、漢字やひらがな、「<>」のような一部の記号は使用できません。よってこれらの文字は変換してURIに記載することになります。これを「エンコード」と呼びます。 一方で、エンコードされた文字列を元に戻すことを「デコード」と呼びます。なお、URIで使用できる文字についてはネットワークの規約である RFC2396 や RFC3986 で定義されています。   [PR] コーディングで副業する方法とはencodeURI()関数とは JavaScriptでURIエンコードを行うのが encodeURI()関数です。 encodeURI()関数の使い方は以下のとおりです。 encodeURI(エンコード前のURI) 結果はエンコードされたURI文字列が返されます。 encodeURI()関数について、詳しくは以下のサイトも参考にしてください。 MDN – encodeURI() エンコードされたURIをデコードするのがdecodeURI()関数です。 decodeURI(エンコードされたURI) decodeURI()関数について、詳しくは以下のサイトも参考にしてください。 MDN – decodeURI()   実際に書いてみよう 今回のサンプルプログラムでは、 encodeURI()関数と decodeURI()関数の使い方について確認します。実行はChromeブラウザーのデベロッパーツールで行います。 はじめにエンコード前のURIとエンコード後のURIを比較してみましょう。 const uri = 'https://test.com/ファイル1_<1>.html'; console.log(uri); const encoded_uri = encodeURI(uri); console.log(encoded_uri); 実行結果は以下のとおりです。カタカナや<>の部分がエンコードされているのが確認できます。 https://test.com/ファイル1_<1>.html https://test.com/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB1_%3C1%3E.html 次に decodeURI() 関数を使って元に戻してみましょう。 const decoded_uri = decodeURI(encoded_uri); console.log(decoded_uri); 実行結果は以下のとおりです。デコードされたことが確認できました。 https://test.com/ファイル1_<1>.html   まとめ 今回の記事ではJavaScriptのencodeURI()関数の使い方を学習しました。   筆者プロフィール 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次エンコード、デコードとはencodeURI関数を使ってURLをエンコードする方法encodeURIComponent関数を使ってURLをエンコードする方法URLをデコードする方法執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

JavaScriptのescape関数とunescape関数の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのescape関数とunescape関数の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのescape関数とunescape関数の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   エンコードとは エンコードとは、平たく言うと変換のことです。 WebサイトのURLなど全角の文字が使えない場所などでは、全角の文字を現す半角文字に変換する必要があります。変換したものは、変換前のものに戻すこともできます。この変換したものを戻すことをデコードと言います。 escape関数とは エンコードをする関数です。 ただし、厳密に非推奨とはなっていないものの消えてゆく方向となっています。また、対応できない文字もあるのであまり使用しないほうが良さそうです。 特にURLなどをエンコードする場合は、encodeURIという関数がありますのでこちらを使用してください。 MDNのescape関数のリファレンスはこちら [PR] コーディングで副業する方法とはescape関数の使い方 JavaScriptに標準で入っている関数なので、そのままescapeと記述することで使えます。第1引数に変換したい文字列を指定することで、変換された文字列が取得できます。 unescape関数とは デコードをする関数です。 こちらは非推奨になっていますので、極力使わないようにしてください。特にURLをデコードする場合は、decodeURIという関数を使うようにしてください。 MDNのunescape関数のリファレンスはこちら unescape関数の使い方 JavaScriptに標準で入っている関数なので、そのままunescapeと記述することで使えます。第1引数にデコードしたい文字列を指定することで、デコードされた文字列が取得できます。 実際に書いてみよう 「あいうえお」という文字をエンコードしてコンソールに出力し、その後、エンコードした文字をデコードして戻したものをコンソールに出力してみます。 let escapeString = escape('あいうえお'); console.log(escapeString); //あいうえお と表示される let decodeString = unescape(escapeString); console.log(decodeString); //あいうえお　と表示される   escape関数とunescape関数の注意点 冒頭の説明でも少し触れましたが、あまり使わないほうがよいということです。 特にURLを扱う際は、エンコードはencodeURI、デコードはdecodeURIを使うようにしてください。関数名が異なるだけで使用方法はescapeとunescapeと同じです。 URLの変換がおかしくなる一例を紹介します。Googleで「テックアカデミージュニア」という文字で検索した場合、テックアカデミージュニアという文字がエンコードされ下記のようなURLになります。 https://www.google.com/search?q=%E3%83%86%E3%83%83%E3%82%AF%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC%E3%82%B8%E3%83%A5%E3%83%8B%E3%82%A2 これをunescapeでデコードすると下記のような文字列になります。 https://www.google.com/search?q=a??a??a?￣a?￠a?≪a??a??a??a?，a?a??a?￠ decodeURIでデコードすると下記のように元の文字列になります。 https://www.google.com/search?q=テックアカデミージュニア エンコードのルールが異なるので当然ではあるものの、知らずに使うとバグになりかねません。 まとめ エンコードはencodeURI、デコードはdecodeURIを使うようにすることで余計な心配をせずにすみますので極力こちらを使ってみてください。 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでURIをエンコードする方法を現役エンジニアが解説【初心者向け】

JavaScriptでURIをエンコードする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでURIをエンコードする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 URIとは URIとURLの違い URIをエンコードする方法 実際に書いてみよう まとめ   URIとは URIとはUniform Resource Identifierの略で、インターネット上に存在するリソースを一意に指定するための値です。リソースはファイルに限らず、音声データや関数(WebAPI)など、様々なものがあります。 [PR] コーディングで副業する方法とはURIとURLの違い URIの具体的な例がURLです。 URLはUniform Resource Locatorの略で、Webページなどのインターネット上における住所を表します。つまり大きな概念としてURIが存在し、その指定方法の1つとしてURLが存在するということになります。 URIとURLの違いについて、詳しくは以下の記事も参考にしてください。 MDN – ウェブ上のリソースの識別 URIをエンコードする方法 URIには使用できる文字が制限されており、ひらがなや漢字などは使用できません。それらの文字をURIで表現する方法が「エンコード」です。エンコードはURIに使用できない文字を一定の規則に従って置換します。エンコードの逆を「デコード」と呼びます。 例えばWikipediaで「エンコード」を検索してみましょう。URIは以下のようになります。 https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89 この末尾の「%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89」が「エンコード」という文字をエンコードした結果です。JavaScriptでURIをエンコードするにはencodeURI()関数を使用します。 encodeURI(URI) 結果はエンコードされた文字列が返されます。 encodeURI()関数について、詳しくは以下の記事も参考にしてください。 MDN – encodeURI() 実際に書いてみよう 今回のサンプルプログラムではJavaScriptでURIをエンコードする方法について確認します。実行はChromeブラウザーのデベロッパーツールで行いましょう。 const uri = 'https://ja.wikipedia.org/wiki/メインページ'; encodeURI(uri); 実行結果は以下のとおりです。 "https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8"   まとめ 今回の記事ではJavaScriptでURIをエンコードする方法を学習しました。 筆者プロフィール 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

PHPで全角文字と半角文字を変換する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで全角文字と半角文字を変換する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで全角文字と半角文字を変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   全角文字や半角文字とは 全角文字とは、現在表示されている日本語表示のような文字を意味します。例えば全角文字の数字の１は１と表示されます。 半角文字とは、全角文字の半分程度のサイズの文字を意味します。例えば半角文字の数字の1は1と表示されます。 全角文字と半角文字の数字を実際に並べて比較するとこのようになります。   １（全角文字） 1（半角文字）   全角文字と半角文字を変換する方法 全角文字と半角文字を変換するためには、 mb_convert_kana()という関数を利用します。 mb_convert_kana()は、PHP4.0.6以降のphp4系、 PHP5系、 PHP7系で利用することが可能です。   基本の書き方 mb_convert_kana ( 変換する文字 , 変換オプション)   解説 mb_convert_kanaの()内に引数を指定することで変換することが可能です。 引数とは、関数を利用する際に指定する値です。引数を変化させることで、柔軟に関数を操作することが可能です。 変換する文字には、実際の文字列を指定してもよいのですが、変数を利用することが多いです。変数とは、値を入れる箱のようなもので、mb_convert_kana関数を利用する前に、変数内に変換したい文字列を格納することで、柔軟性の高い処理が可能になります。 変換オプションに様々なオプション値を指定することで、具体的な変換処理が可能です。   変換オプション例 rを指定すると、 「全角」英字を「半角」に変換することが可能です Rを指定すると、 「半角」英字を「全角」に変換することが可能です nを指定すると、 「全角」数字を「半角」に変換することが可能です N を指定すると、「半角」数字を「全角」に変換することが可能です a を指定すると、「全角」英数字を「半角」に変換することが可能です A を指定すると、「半角」英数字を「全角」に変換することが可能です sを指定すると、 「全角」スペースを「半角」に変換することが可能です S を指定すると、「半角」スペースを「全角」に変換することが可能です kを指定すると、 「全角カタカナ」を「半角カタカナ」に変換することが可能です Kを指定すると 、「半角カタカナ」を「全角カタカナ」に変換することが可能です hを指定すると、 「全角ひらがな」を「半角カタカナ」に変換することが可能です H を指定すると、「半角カタカナ」を「全角ひらがな」に変換することが可能です cを指定すると、 「全角カタカナ」を「全角ひらがな」に変換することが可能です Cを指定すると、 「全角ひらがな」を「全角カタカナ」に変換することが可能です Vを指定すると、 濁点付きの文字を一文字に変換します。注意点として、Vを指定する場合は、KやHと一緒に指定します   [PR] コーディングで副業する方法とは実際に書いてみよう サンプルコード <?php $str = 'ﾃｯｸｱｶﾃﾞﾐｰＴＥＣＨＡＣＡＤＥＭＹ'; $str = mb_convert_kana($str, "KVa"); echo $str; ?>   表示結果 テックアカデミーTECHACADEMY   解説 1行目の<?phpでは、PHPプログラムを開始するということを宣言しています 2行目の$str = ‘ﾃｯｸｱｶﾃﾞﾐｰＴＥＣＨＡＣＡＤＥＭＹ’;では、変数strに、「半角カタカナ」のﾃｯｸｱｶﾃﾞﾐｰと、「全角」英数文字のＴＥＣＨＡＣＡＤＥＭＹを代入しています 3行目の、$str = mb_convert_kana($str, “KVa”);では、2行目で代入した文字である、「半角カタカナ」を「全角カタカナ」に変換し、「全角」英数字を「半角」に変換したあと、変数strに代入しています 4行目のecho $str;では、変数strの中身を表示しています。表示結果では、半角カタカナが全角カタカナに変換され、全角英数文字が半角英数文字に変換された、テックアカデミーTECHACADEMYが表示されています 5行目の?>は省略可能です。PHPの処理が終了することを意味しています   今回は、PHPで全角文字と半角文字を変換する方法について解説しました。   筆者プロフィール 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 地域の職業プログラマー育成活動では、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

PHPで文字コードを変換する方法【初心者向け】

PHPで文字コードを変換する方法について解説します。 mb_convert_encoding関数を使って文字コードを変換する書き方について説明しているので、ぜひ理解しておきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで文字コードを変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   文字コードとは 文字コードと言えば一般的には「Shift-JIS」や「UTF-8」などのキーワードを連想される方も多くいると思います。 ですが、これらは正確には符号化方式と呼ばれるものにあたります。 実は文字コードという概念には2つの概念が含まれていて、1つ目は「文字集合」、2つ目は「符号化方式」と呼ばれるものです。 文字集合 まず、「文字集合」とは、その名のとおり文字の集合体と考えてください。 例えば、日本語では「ひらがな」「カタカナ」「漢字」といった様々な種類の文字がありますよね。これらの日本語を表せる文字の集合として有名なのが「JIS X 0208」です。 もちろん、この「JIS X 0208」には中国語やベトナム語などの文字列は含まれていません。 もう一つ有名な文字集合は「Unicode」です。 「Unicode」の特徴は世界中で使われているすべての文字の集合体となっていることです。 もちろん日本語も中国語やベトナム語も含まれています。 そして、これらの文字集合には1つ1つの文字に対して識別するための唯一の番号が振られています。   符号化方式 もうひとつの概念である「符号化方式」とは、文字集合で定義されている各文字に割り当てられている番号に対応するコンピュータが扱う数字の対応表となります。 例えばコンピュータは「あ」等の文字列をUTF-8という「227 129 130」のような数値として認識しています。 例えば、テキストファイルに「あ」と書いてUTF-8で保存した場合は、コンピュータのハードディスクには「227 129 130」という数値が保存されます。 このテキストファイルをエディタで開くときに、エディタは「UTF-8」という文字符号化方式で「227 129 130」を「あ」に変換して表示しています。 最初に述べたように符号化方式には「UTF-8」「Shift-JIS」など多くの種類があります。 「UTF-8」は文字集合「Unicode」に含まれる各文字について、「Shift-JIS」は文字集合「JIS X 0208」に含まれる各文字について、文字集合の各文字に割り当てられている番号とコンピュータが扱う数字の対応表を持っています。   文字コードを変換する方法 mb_convert_encoding( )関数を利用します。 第1引数: 変換する文字列を指定します 第2引数: 変換後の文字コードを指定します 第3引数(省略可): 変換前の文字コードを指定します 省略した場合はmb_internal_encoding()関数で取得できる文字コードが設定されます   参考URL ※指定できる文字コードは下記のドキュメントを参照してください。 php.net-mbstring-encoding   [PR] コーディングで副業する方法とは実際に書いてみよう 下記の例では、実行ファイルの文字コードと内部文字エンコーディングがUTF-8であることを前提とします。 $str = "オリジナル"; //①文字コードを変換して保存してみよう！ // 内部エンコーディング(UTF-8)からEUC-JPに変換します $euc = mb_convert_encoding($str, "EUC-JP"); // UTF-8からSJISに変換します $sjis
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでURLをエンコードする方法を現役エンジニアが解説【初心者向け】