30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

JavaScript

Web API で文字列を可逆圧縮する

この記事では、 Web API で文字列の可逆圧縮を行う方法について書いていく。 任意の文字列を圧縮し、そして圧縮された文字列のリテラル表現から元の文字列を復元できることを目指す。 以前書いたように、 Node.js なら文字列の可逆圧縮は簡単に行える。 numb…

JavaScript で Base64

この記事では Base64 やbtoa、そしてbtoaの挙動を理解するために必要な Latin1 について説明していく。 この記事に出てくるコードの動作確認は以下の環境で行った。 Deno 1.28.3 TypeScript 4.8.3 概要 Base64 はデータのエンコード方式の一種。 全てのデー…

JavaScript における文字コードの初歩

この記事では、 JavaScript で文字コードを扱う際に知っておくべき概念である Code Point や Code Unit、サロゲートペア、といったものについて説明していく。 また、具体的にそれらの概念を使ってどのようにコードを書いていくのかについても扱う。 この記…

Web Worker (Dedicated Worker) によるマルチスレッド処理

JavaScript は基本的にシングルスレッドであり、並列処理を行うことはできない。 そのため何か重たい処理があると、それによってメインスレッドが専有されてしまい、後続の処理が遅延してしまう。 その結果、ウェブアプリの速度や操作性に悪影響を与えてしま…

requestIdleCallback を使って優先度の低い処理を後回しにする

ブラウザ内部で行われる処理は、基本的にシングルスレッドで行われる。 そのため、処理に時間がかかるタスクがひとつあると、後続のタスクの処理がその分だけ遅れることになる。 この「タスク」には、JavaScript の実行も含まれるし、画面の描画、ユーザーの…

Escodegen でサロゲートペアを扱う

Escodegen は AST からソースコードを生成する npm パッケージ。 互換性のある AST を渡せば自動的にソースコードを生成してくれるのであまり悩むことはないのだが、絵文字などのサロゲートペアを扱うときには注意が必要になる。 Power Assert Deno の開発時…

AST で JavaScript のコードを変換する

ソースコードを AST(抽象構文木)と呼ばれるデータ構造に変換することで、ソースコードの検証や変換をプログラムによって行えるようになる。 例えば ESLint では、ソースコードを AST に変換して、それに対してチェックを行っている。 また、V8 などの Java…

script タグの書き方でウェブベージの表示速度やスクリプトの実行順序はどう変化するのか

ウェブベージで JavaScript ファイルを読み込むためには<script>タグを使うが、その際にasync属性やdefer属性を設定することができる。 そして、これらの属性を使うかどうかで、ウェブベージの表示速度や JavaScript ファイルの実行順序に違いが生まれる。 この記事…

ルーティング機能を自作して学ぶ History API

History API は、HTML5 で導入された API。 これを使うことで、JavaScript で URL の履歴を管理できるようになる。 多くの場合、そういった操作は React Router や Vue Router などのルーティングライブラリを通して行うことになる。そのため、History API …

Cookie 概説

Cookie とは、HTTP でステートフルなやり取りを実現するために、ブラウザとサーバ間で情報を送受信する仕組みである。 HTTP は本来ステートレスなプロトコルである。そのため、同一のユーザーが連続でリクエストを行っても、それぞれ独立したリクエストであ…

IE11 で API と非同期通信を行うためのコード

年に1回くらいは必要になりそうだけど絶対に忘れてしまうと思うので、検証済みのコードを自分用に記録しておく。 APIを叩くコードを、IE11でも動くように書く。 何らかの理由で Babel によるトランスパイルが出来ない、したくない状況を想定している。 基本…

フロントエンドでバイナリファイルを扱うためのBlobオブジェクトとFileオブジェクト

このエントリで紹介するBlobやFile、FileReaderはHTML5で利用可能になったAPIで、ECMAScriptで定義されているわけではない。 そのため、Node.jsには存在せず、ブラウザ環境でのみ利用できる。 Blob Blobは、バイナリデータを表すimmutableなオブジェクト。 c…

JavaScriptのショートサーキット評価

ほとんどのプログラミング言語には、ANDやORを表す論理演算子が用意されている。 そして、左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価(短絡評価)という。 例えば、A AND Bという論理式があっ…

JavaScriptやejsにおけるエスケープについて

JavaScriptやejsでエスケープを実現する方法としてencodeURIComponent()や<%= %>があるが、その挙動を正確には理解していなかったので、調べてみた。 まず、具体的にどんな機能なのかを調べ、次に、どのようなケースで使うのかを確認する。 機能 encodeURI()…