スクリプトのお勉強 技術

小ネタ: 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エンコードしていることと、デコードできていることが分かります。

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

執筆者:

関連記事

seaborn + Pandas + Python によるグラフ描画(その2: グラフ描画編)

前回の続き 前回の続きです。 折れ線グラフ まずは折れ線グラフを描画したいと思います。 描画するのは以下です。 運用商品(4つ)日経平均 以下で起動します。引数(dataset-2017-201908 …

React.js の Ant Design使ってみる(DateTimePicker編)

DateTimePickerサンプル DateTimePickerを使うサンプルで、いいのがなかなかないです。Dateだけとか、Timeだけってのはあるのですが。 ということで作ってみようと思いました …

vscodeのRemote Developmentで「権限がない」と怒られた時

小ネタです。 vscodeのRemote Developmentにてパスワードなしログイン vscodeは時々使うのですが、リモート開発するのにRemote Developmentが便利なので使ってま …

go 1.16 でviperを使って設定ファイルを読みだすプログラムを作ってみた

他にたくさんあるけど こんな感じの内容はたくさんあると思いますが、、goの初心者がなんとなくgoの手習いとして、まずは設定ファイルを読みだすことをしてみようと思いました。 go動作環境 windows …

Nuxt.jsのFormで入力/確認/完了フォームを作成してみた(その2)

前回の記事の続きです。以下について書いていきます。この記事で終わりのはず? バリデーション機能(主にIPアドレスのバリデーション追加)画面 バリデーション機能 バリデーション機能は、vee-valid …

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