スクリプトのお勉強 技術

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

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

執筆者:

関連記事

使えるチートシート一覧

チートシートとは 普段使うコードとか、よく忘れやすい、コピペするコードを集めた情報です。 自分が使う言語のチートシートを書いておきます。 チートシート集 URL内容https://github.com …

FastAPIでAPIを作ってみる(その1)

勉強として、FastAPIを使用して、実際にAPIを作成し、起動しようと思います。目標としては、本番運用用の設定まで行いたいと思います。 FastAPIとは FastAPIとは、Pythonによる、W …

Githubからお告げ

Githubからお告げが来た お告げってのは大げさですが。 Github にpackage-lock.jsonを置いておくと、Githubが脆弱性検査をして、メールを知らせてくれます。 js-yaml …

Selenium + Python によるアップロードアプリの動作確認プログラム作成

私の周りでは、なぜかSeleniumが流行っている模様です。 私自身は、Webアプリ的なのも作ってますが、あまり使ってなかったので、使ってみようと思います。 前回作成した、Djangoのupload_ …

Mojolicious XML-RPC Pluginの開発(1)

はじめに 最近、お仕事関連で、perlとWebアプリケーションを触っています。 両方一度にお勉強、ということで、perlのWAF(Webアプリケーションフレームワーク)を調べてみようと思いました。 こ …

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