base64とは？意味や使い方をわかりやすく解説

2024年10月21日

プログラミングをしていると、たまに「base64」という言葉を目にすることがあります。

初めてこの用語を聞くと「何のことだろう？」と感じるかもしれません。

特にJavaScriptを使い始めたばかりの方にとっては、

base64がどんな仕組みで、どのように使えるのか理解するのが難しいこともあるでしょう。

この記事では、base64の基本的な意味から、JavaScriptでの使い方までを丁寧に解説します。

サンプルコードも紹介しますので、実際に試して理解を深めてみましょう。

全然わからないので教えてくだされ。

base64とは？

まず、base64とは何かから説明しましょう。

base64は、データをテキスト形式に変換するエンコーディングの方法です。

たとえば、画像やバイナリデータなど、人間が読みやすい文字形式ではないデータを、

そのままでは扱いにくい場面があります。

そうしたときにbase64を使うと、そのデータを「英数字の文字列」に変換することができます。

なんでそんなことを？

base64が必要になる場面はいくつかありますが、代表的なものは以下の通りです

データを安全に送受信したい場合
バイナリデータや画像データをインターネット経由で送信する場合、そのままの形だとエラーが発生したり、誤ってデータが変わってしまう可能性があります。
base64にエンコードすると、テキストデータに変換されるので安全に送受信できます。
ウェブページ内に画像を直接埋め込みたい場合
base64を使って画像をエンコードすれば、HTMLやCSSのコードに画像を直接組み込むことができ、外部の画像ファイルを参照する必要がなくなります。

なるほど、画像をテキストにすることで安全なやりとりができたり、
コード内に直接埋め込んだりできるんやね。

JavaScriptでは、データをbase64に変換したり、逆にbase64から元のデータに戻す操作が簡単に行えます。

ここでは、JavaScriptを使ったbase64エンコードとデコードの基本的なやり方を紹介します。

JavaScriptでテキストデータをbase64にエンコードするには、btoa()という関数を使います。

以下に簡単な例を示します。

const text = "Hello, World!";
const encoded = btoa(text);
console.log(encoded);  // 出力: "SGVsbG8sIFdvcmxkIQ=="

JavaScript

このコードでは、文字列 “Hello, World!” をbase64形式に変換しています。

btoa()はテキストをbase64にエンコードするための関数です。

コンソールに表示された値 “SGVsbG8sIFdvcmxkIQ==” がbase64エンコードされた結果です。

次に、エンコードされたbase64文字列を元のテキストに戻す（デコードする）方法を紹介します。

atob()という関数を使います。

const encodedText = "SGVsbG8sIFdvcmxkIQ==";
const decoded = atob(encodedText);
console.log(decoded);  // 出力: "Hello, World!"

JavaScript

このように、atob()関数を使うことで、

エンコードされたbase64文字列を元の “Hello, World!” というテキストに戻すことができます。

base64は画像をHTMLに直接埋め込む際にもよく使われます。

以下の例では、base64エンコードされた画像をHTMLのimgタグ内に埋め込んで表示しています。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...省略" alt="Example Image">

HTML

src属性の中にbase64でエンコードされた画像データをそのまま記述することで、

外部ファイルを使わずに画像を表示することが可能です。

この方法は小さな画像や、外部の画像ファイルへの依存を避けたい場合に便利です。

base64は便利ですが、いくつかの注意点があります。

データ量が増える
base64エンコードを行うと、データのサイズが約33%ほど増加します。これは、バイナリデータを文字列に変換するために、データの長さが増えるためです。したがって、大きなファイルや画像をbase64にエンコードする場合は、注意が必要です。
セキュリティに注意
base64は暗号化ではなく単なるエンコードなので、誰でもデコードして元のデータを取得できます。機密情報をbase64にエンコードして送信するのは避け、必要な場合は別途暗号化を行うべきです。