スクリプトのお勉強 技術

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

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

執筆者:

関連記事

Markdown to HTML(grip)

1.はじめに 最近の文書はほとんどMarkdownで書くのですが、それをHTMLに変換する方法を調べました。 ただし、私がMarkdownと思っている文法は「github-flavored-markd …

Thunderbird プラグインの開発(プラグインでの実現方法)

前回 Thunderbird プラグインの WebExtension版開発方法を調べたので、開発したいプラグインと、WebExtension版プラグインでの実現方法について書いていきます。 開発するプ …

@nifty auひかり タイプVからタイプGに変えてみた

家のインターネットはいままで、光回線ではありましたが、昔のVSDLのままでした。auひかりでいう、マンション タイプVというやつです。 それを近年、リモートワークが増えていることや、半導体需要がなんと …

Nuxt.js – CRUDアプリケーションのフォーム/一覧を作成する

前回で作ったAPIのフロントエンドアプリケーションを作ろうと思います。 どういうアプリ? サンプルとして作ったAPIが住所録的だったので、住所録を作りました。 以下の機能があります。 登録(確認付き) …

Nuxt.js + Element + Responderでのtableサンプル作成

1. はじめに 最近、Webアプリケーションを作成する仕事が、少しずつですがあります。その際に使用するのは、殆どの場合「テーブル」です。 素のtableタグを駆使して作成した場合、テーブル内のセルにも …

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