【JavaScript入門】Base64でサイトのパフォーマンスをアップさせよう

こんにちは! ライターのナナミです。

みなさん、Base64というものをご存知ですか?
今初めて知った!なんて方もいるかもしれませんね。

このBase64、うまく使うとサイトの読み込みを軽くしたり、色々と活用することができるんです!

でもBase64って何だろう…
Base64でどんなことに使えるのか知りたい!

今回はそんな方必見、Base64を解説していきましょう。

この記事は下記の流れで進めていきます。

【基礎】Base64とは何か
【基礎】エンコードとデコードとは
【基礎】文字をBase64にエンコードする方法
【基礎】Base64の文字列をデコードする方法
【発展】画像をエンコード・デコードする方法

Base64を使いこなせるようになって、サイトのパフォーマンスアップをしていきましょう!

Base64とは?

Base64とは、エンコード方式の1つです。
これを使うことで、文字列や画像、音楽などを64個の文字で作られたデータにすることができます。

ちょっと細かく見ていきましょう。

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

まずはエンコードデコードをおさらいしていきましょう!

エンコードとは日本語にすると符号化という意味です。
プログラミングの世界では、データをルールに基づいて変換することを指します。

エンコードをすることで、データを扱いやすくしたり、使用している言語やツールで扱える形に変えたりすることができるのです。

そしてエンコードしたものは、元のデータに戻すことができます
この「元に戻す」という行為をデコードと言います。

エンコードとデコードは相互関係にあるというわけです。
両方しっかり覚えておきましょう!

使うとどうなる?

ではそんなエンコードのルールの一つ、Base64を使うとどうなるのでしょう。

具体的にはこんな感じになります。

Hello, world

//↓base64 encode

YmFzZTY0ZW5jb2Rl

文字列が変換されているのがわかりますね。

Base64は64進数を指す言葉です。
つまり、64種類の文字を組み合わせて表現されています。

使われているのは、アルファベット(a~z, A~z)数字(0~9)一部の記号(+,/)です。
これで合計64種類ですね。

ただし、データの長さを揃えるために=も使われているので、厳密には65種類の文字で構成されています。

データ化した時の中身を表現するのが64種類の文字、ということです。

どんな時に使う?

Base64は、そもそもメールに添付された画像や音楽などを送る時に使われていたものです。

となると、WEBサイトにはあまり関係なさそうですよね?

実は、活躍の場面があるんです!

画像をbase64にエンコードしておけば、アクセスした際のリクエスト数を減らすことができます

普通に画像を配置する時は、ファイルの場所を指定しますよね。

つまり、別のファイルへアクセスする必要があるわけです。

しかしbase64にしておけば、文字列に画像自体のデータがある状態になります。

この位置に黒い点があって、この位置は白くて…という情報が、全部文字列化されている状態です。

つまりbase64を使うことにより、画像表示のためのアクセスを減らすことができます。

結果、サイトのパフォーマンスを上げることができるのです!

文字をBase64にエンコードする

では、JavaScriptでBase64にエンコードする方法を見ていきましょう。

まずは手軽な文字列のエンコードから解説していきますね。

JavaScriptには、文字列をbase64にエンコードするためのメソッドbtoaが用意されています。
これを使えば一発で変換してくれるのです。

var encodedData = window.btoa("Hello, world");

console.log(encodedData);

実行結果

YmFzZTY0ZW5jb2Rl

たった1行!簡単ですね。

文字をBase64からデコードする

もちろん、JavaScriptで文字列をデコードすることも可能です。
atobというメソッドを使います。

var encodedData = window.btoa("Hello, world");
var decodedData = window.atob(encodedData);

console.log(decodedData);

実行結果

Hello, world

ばっちり元に戻すことができました。

画像をエンコード・デコードする

文字列のエンコードやデコードはとても簡単ですね!

しかし画像のエンコード、デコードは一筋縄ではいきません。

かなりややこしいので、下記のような変換サイトを使うのが一番お手軽です。

>>画像をbase64に変換してくれるサイト

どうしても自分で、JavaScriptで実装したい!
という方は、下記の記事などを参考にチャレンジしてみてください。

>>JavaScriptで画像をbase64に変換する方法解説

まとめ

いかがでしたか?

細かいテクニックですが、ちょっとでもサイトのパフォーマンスが上がると、ユーザーの評価も大きく変わっていきます。
ぜひBase64を活用して、ユーザーに評価されるサイトを作ってみてくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説