スクリプトのお勉強 技術

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

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

執筆者:

関連記事

VPN

VPNとは VPNとは、「Virtual Private Network」の略です。仮想的なネットワークを構成する技術の総称で、主に専用線の構築や、通信路の暗号化に使用します。 技術 よく使用されるV …

CentOS7 + Django2.2 + uwsgi + nginx 連携方法

Djangoとnginx連携方法 以前はApache経由で連携しましたが、今回はnginxと連携する方法を記述します。 環境 設定した環境は以下です。 OS: CentOS7Python3.6.8 ( …

小ネタ: Ansible , with_itemsをloopに変える方法

とっても小さい小ネタです。 Ansible 2.4(今現在) -> Ansible 2.9に変えたい Ansibleを使用していますが、だいたい2.4ぐらいを使っています。流石にバージョンアップしない …

Dockerを使用してGo言語の開発環境を構築する

なんとなくGolangのブロジェクトに機能追加しようと思いました。 Golangの開発用に、Dockerfile等を準備する手順を書いておこうと思います。 サンプルにnfpm サンプルとして、Fork …

svelteのUIライブラリを使用してみる(TreeView)

前回の続きで、まずは、TreeViewを実現してみます。 Carbon Components Svelte svelteのUIライブラリにCarbon Components Svelteを使用してみま …

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