JavaScriptの文字コードを変換(デコード)する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの文字コードを変換(デコード)する方法について現役エンジニアが解説しています。文字コードのデコード(変換)を行うにはfromCharCode()メソッドを使用します。また、デコードに役立つライブラリとしてencoding.jsを解説しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの文字コードを変換(デコード)する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptの文字コードを変換(デコード)する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptの文字コードとは

そもそも文字コードとはなにかというと、コンピュータ内で使用している、0と1の数値のみで構成される「機械語」を人が読める「文字」に変換するための規約になります。

JavaScriptで主に使用する文字コードは

  • ASCII
  • Unicode(UTF-8)
  • Shift-JIS

の三種類になります。

JavaScriptの文字コードの確認方法

文字列内の1文字の文字コードを確認するためにはcharCodeAtメソッドを使用します。

 

文字列.charCodeAt(数値)

 

で確認することが可能です。

引数には、対象とする文字列内の一文字のシーケンスを設定することができます。

文字列の1文字目の文字コードを取得

"ABあいう".charCodeAt(0)
// 65

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptの文字コードを変換(デコード)する方法

文字コードのデコードを行うにはfromCharCode()メソッドを使用します。

String.fromCharCode(数値)

で確認することが可能です。

引数の部分の数値はUTF-16コードユニットを表す数値のシーケンスを設定することができます。

範囲は0から65535 (0xFFFF)までです。

String.fromCharCode(65)
// "A"

 

JavaScriptの文字コードを変換(デコード)に役立つライブラリ

encoding.js

JavaScriptで文字コード変換を楽に行えるライブラリになります。

ライブラリ読み込み

 

<script src="encoding.js"></script>

 

読み込みを行うと、Encodingというオブジェクトがグローバルに定義されます。

// UTF-8のデータをShift_JISに変換する

var utf8array = ["あああ","いいい","ううう"]

var sjisArray = Encoding.convert(utf8Array, 'SJIS', 'UTF8');

// 自動判別で変換 (AUTO detect)

var sjisArray = Encoding.convert(utf8Array, 'SJIS');

// or

var sjisArray = Encoding.convert(utf8Array, 'SJIS', 'AUTO');

// 文字コード判別 (戻り値は下の返却値のいずれか)

var detected = Encoding.detect(utf8Array);

if (detected === 'UTF8') { console.log('Encoding is UTF-8'); }

// 返却値

'UTF32' (detect only)
'UTF16'
'UTF16BE'
'UTF16LE'
'BINARY' (detect only)
'ASCII' (detect only)
'JIS'
'UTF8'
'EUCJP'
'SJIS'
'UNICODE' (JavaScript Unicode Array)

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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