HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのWindow btoa()/atob()メソッドとは？Base64エンコード・デコードの基本を解説

HTMLのwindowオブジェクトが提供するbtoa()メソッドは、文字列データをBase64形式の文字列にエンコードします。エンコードされた文字列は、atob()メソッドを使用することで、HTMLドキュメント上で元の文字列にデコード（復元）することが可能です。

なお、メソッド名はそれぞれ「binary to ASCII（btoa）」「ASCII to binary（atob）」に由来しており、セットで使うことでデータの変換と復元を行えます。Base64はメール送信やデータURIなど、テキストとしてバイナリデータを安全に扱いたい場面で広く利用されているエンコード方式です。

構文

btoa()メソッドの基本的な構文は以下の通りです。

window.btoa(エンコードしたい文字列);

それでは、HTMLのwindow btoa()メソッド／atob()メソッドの具体的な使用例を見ていきましょう。

サンプルコード

以下の例では、テキストエリアに入力したメッセージを、ボタンのクリック操作によってエンコード・デコードできます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    ::placeholder {
        color: #000;
    }
</style>
<body>
<h1>HTML Window atob()/btoa() Method</h1>
<textarea placeholder="Enter your message here" cols="30" rows="5"></textarea>
<button onclick="encode()" class="btn">Encode Message</button>
<button onclick="decode()" class="btn">Decode Message</button>
<div class="show"></div>
<script>
    var show = document.querySelector(".show");
    function encode() {
        var encMsg = window.btoa(document.querySelector("textarea").value);
        show.innerHTML = encMsg;
    }
    function decode() {
        var decMsg = window.atob(window.btoa(document.querySelector("textarea").value));
        show.innerHTML = decMsg;
    }
</script>
</body>
</html>

実行結果

HTMLのWindow btoa()/atob()メソッドとは？Base64エンコード・デコードの基本を解説

まず、白いテキストエリアに任意のメッセージを入力し、「Encode Message」ボタンをクリックします。すると、btoa()メソッドによってエンコードされたBase64文字列が画面に表示されます。

HTMLのWindow btoa()/atob()メソッドとは？Base64エンコード・デコードの基本を解説

続いて、「Decode Message」ボタンをクリックすると、atob()メソッドによってデコードされ、入力した元のメッセージが再び表示されます。

HTMLのWindow btoa()/atob()メソッドとは？Base64エンコード・デコードの基本を解説

補足：注意点

btoa()メソッドはラテン文字（Latin1）範囲の文字のみを扱えるため、日本語などのマルチバイト文字をそのまま渡すとエラーになります。その場合は、encodeURIComponent()やTextEncoderなどを組み合わせて事前に変換してからエンコードしてください。

  1. HTML Window moveBy()メソッドの使い方をわかりやすく解説

    HTMLのWindow moveBy()メソッドは、開いているウィンドウを現在の位置から相対的に移動させるためのメソッドです。指定したピクセル数だけ、ウィンドウを水平・垂直方向にずらすことができます。構文moveBy()メソッドの基本的な構文は以下のとおりです。window.moveBy(x,y)引数の意味は次のとおりです。x：ウィンドウを水平方向（横）に移動させる距離（ピクセル単位）。正の値で右へ、負の値で左へ移動します。y：ウィンドウを垂直方向（縦）に移動させる距離（ピクセル単位）。正の値で下へ、負の値で上へ移動します。moveBy()とmoveTo()の違い似たメソッドにwindow.m

  2. HTML DOM Window stop()メソッドの使い方を徹底解説

    HTML DOM の Window stop() メソッドは、ブラウザの「停止」ボタンをクリックしなくても、JavaScript からウィンドウのリソース読み込みを中断できる便利な機能です。ページの読み込み中に特定の条件を満たさない場合など、プログラム側で任意のタイミングで読み込みを止めたいときに活用できます。構文stop() メソッドの基本的な構文は以下のとおりです。window.stop()サンプルコードここでは、HTML DOM Window stop() メソッドの具体的な使用例を紹介します。このサンプルでは、入力された名前が「admin」であれば新しい子ウィンドウを開き、それ以外の場