スクリプトのお勉強 技術

小ネタ: JavaScriptにてBase64エンコード/デコードする方法

投稿日:

小ネタです。JavaScriptにてBase64エンコード/デコードをしようとして、意外と詰まったので、メモ的に方法を書いておきます。

結論: js-base64ライブラリを使用する

これだけです。。検索するとbtoa/atobを使う方法が多いですが、日本語を使うとエラーになったりしたので、これに落ち着きました。

$ npm install --save js-base64

Svelteで具体的に作ってみる

Svelteで書いてみると以下の感じになります。

base64.svelte

<script lang="ts">
    import { Base64 } from 'js-base64';
    var b64content = Base64.encode("content");
    var asciicontent = Base64.decode(b64content);
</script>

Content: {asciicontent} <br>

Base64: {b64content} <br>

root.svelte(抜粋)

<script>
  import Base64Test from './base64.svelte';
</script>
  <Base64Test />

画面

画面は以下になります。”content”という文字列をBase64エンコードしていることと、デコードできていることが分かります。

-スクリプトのお勉強, 技術

執筆者:

関連記事

WSL2 と Dev Container で実現する快適な Python 開発環境

WSL2 と Dev Container で実現する快適な Python 開発環境 はじめに こんにちは!今回は、WSL2 (Windows Subsystem for Linux 2) と Visu …

Vue.js 導入編

1.はじめに 近年、web関係で「クライアントサイドJavaScript」というのがトレンドになっているそうです。 「クライアントサイドJavaScript」と、従来のWebアプリケーションとの違いは …

SPAMチェック for OCN の開発

前回、Thunderbirdプラグインの概要を書いたので、今回は開発したプラグインについて書きます。 SPAMチェック for OCNとは 以下の機能を持ったThunderbirdのアドオン(プラグイ …

Vue.jsをbetter jQueryとして使う!FastAPI+Vue.jsと生成AIで作る住所録アプリ

昔あるところに。。 昔、jquery全盛で、Vue.jsが出てきたすぐに「これはjqueryを駆逐できるかも」と思ってjqueryの実装をVue.jsに変えようとしたことがあります。 結局全部を変えた …

リモート実家帰りしてみる

このご時世、実家には直接帰れないけど、1月には一応実家帰り的な感じでリモート実家帰りをしようかと思いました。 リモートは大変。。 一応実家には自分で設置したインターネットや無線LANがあるので、Zoo …

google オプトアウト Click here to opt-out.