JavaScript

プログラムで「先に入れたものから順に取り出す」キュー（Queue）を作りたい場面は、よくあります。ログのバッファ、イベントの待ち行列、センサー値の直近 N 件——どれも Queue です。 JavaScript なら、配列ひとつで素直に書けます。push で末尾に足し、shift で先頭を取り出す。 class NaiveQueue { constructor(cap){ this.cap = cap; this.data = []; } enqueue(x){ if(this.data.length >= this.cap) return false; this.data.push(x); return true; } dequeue(){ return this.data.length ? this.data.shift() : undefined; } } 短くて分かりやすい。でもこのやり方には、要素数が増えると効いてくる弱点があります。 弱点：先頭を取り出すたびに、全部が前へずれる 配列の先頭（index 0）を取り出すと、残りの要素はすべて1つ前へ詰め直されます。2番目が先頭へ、3番目が2番目へ……と、全員が席を1つずつ移動する。これが shift の正体です。 要素が4個なら4個ぶん、1万個なら1万個ぶん動かす。つまり dequeue 1回のコストが、入っている要素数に比例して重くなります（$O(n)$）。enqueue は末尾に足すだけなので軽いのに、取り出す側が足を引っ張るわけです。 中身は1バイトも変わらないのに、「席をずらす」ためだけに大量のコピーが走る。動かしたいのは「どこが先頭か」という目印だけのはずです。 リングバッファ：配列を「輪」に見立てる そこで、固定長の配列を用意して、それを輪のように使います。これがリングバッファです。 考え方はシンプルで、配列を伸び縮みさせる代わりに、2つの数だけを動かします。 head … いま先頭がある位置（次に取り出す場所） count … いま入っている要素数 enqueue は、空いている次の位置 (head + count) % cap に書いて count を1増やすだけ。dequeue は、head の中身を読んで head を1つ先に進め、count を1減らすだけ。要素は1つも動きません。 右端まで埋まったら、% cap（剰余）のおかげで自動的に 0 番へ戻ります。輪をぐるぐる回りながら、書く位置と読む位置の目印だけがずれていく。配列そのものは最初から最後まで同じ大きさのままです。 class RingQueue { constructor(cap){ this.cap = cap; this.data = new Array(cap); this.head = 0; this.count = 0; } enqueue(x){ if(this.count >= this.cap) return false; // 満杯 this.data[(this.head + this.count) % this.cap] = x; this.count++; return true; } dequeue(){ if(this.count === 0) return undefined; // 空 const x = this.data[this.head]; this.data[this.head] = undefined; // 取り出した参照を残さない（GCのため） this.head = (this.head + 1) % this.cap; // 先頭の目印を進めるだけ this.count--; return x; } } shift のような全体の詰め直しがどこにもありません。dequeue がやるのは足し算と剰余だけなので、入っている要素数に関係なく一定の手数（$O(1)$）で終わります。 ...

配列を「左に k 個ぶん回したい」場面があります。 [A, B, C, D, E, F, G] を 2 つ左に回すと [C, D, E, F, G, A, B]。先頭の何個かが、そっくり後ろへ回り込むイメージです。リングバッファ 、文字列のローテーション、表示行の巻き戻し——地味ですがよく出てきます。 素直にやるなら、回したあとの並びを別の配列に書き出して、それで元を置き換えれば終わりです。ただ、それだと配列がもう1本ぶん、まるごとメモリに要ります。動かしたいのは「順番」だけなのに、です。 この記事では、別配列を一切使わず、その場（in-place）で配列を回す方法を2つ紹介します。3回ひっくり返すだけのリバーサル法と、$\gcd(n,k)$ 本の鎖で穴を歩かせるジャグリング法。最後に、両方をブラウザだけで動くビジュアライザで実際に触って確かめます。 この記事は、画像をリネームだけで並び替える「玉突き方式」 の続編にあたります。あちらで出てきた「穴を歩かせる」手口が、今回のジャグリング法でそのまま効いてきます。 まず、素朴なやり方とその代償 いちばん分かりやすいのは、結果を別配列へ書くやり方です。 function rotateLeftCopy(a, k){ const n = a.length; k = ((k % n) + n) % n; // 負の k も正の回転量に正規化 const out = new Array(n); for(let i = 0; i < n; i++){ out[i] = a[(i + k) % n]; // マス i には「元の (i+k) 番目」が来る } return out; } これは正しく動きます。ただ、out という長さ $n$ の別配列が要ります。要素が重かったり本数が多かったりすると、この「もう1本」が効いてきます。 やりたいのは並べ替えだけ。中身は1つも変わりません。だったら、追加メモリ $O(1)$（作業用の変数1個ぶん）で済ませたい。ここからが本題です。 方法1：リバーサル法（3回ひっくり返すだけ） 最初に紹介するのは、拍子抜けするほど単純な方法です。左回転 k は、次の3回の部分反転に分解できます。 前半 k 個を反転する 後半 n−k 個を反転する 全体を反転する [A, B, C, D, E, F, G] を k=2 で左に回す例で追ってみます。 ...

通し番号のついた画像の束を、別の順番に並べ替えたい場面があります。 1.png から 7.png まで並んでいて、これを「5番を先頭へ持ってきて、残りを1つずつ後ろへずらす」といった具合に組み替えたい。素直にやるなら、新しい順番でファイルを全部コピーし直せば終わりです。 ただ、枚数が多かったり1枚が重かったりすると、コピーは時間も容量も食います。中身は1バイトも変わらないのに、です。動かしたいのは「順番」だけ。だったら、ファイル名（通し番号）を付け替えるリネームだけで並べ替えたい。 この記事では、そのリネームの順番をどう決めるかを考えます。素朴なスワップ方式と、少し賢い玉突き方式（循環置換）を比べて、同じ並び替えでも手数がどれだけ変わるかを、最後にブラウザだけで動くビジュアライザで実際に触って確かめます。 まず、リネームには落とし穴がある 「1番には今の5番の画像を、2番には今の1番の画像を…」と指示があったとして、思いつくまま 5番→1番 のように上書きリネームしていくと、すぐに事故が起きます。 上書きされた先の画像は、その瞬間に消えます。並び替えのつもりが、画像の破壊になってしまう。 これを避けるには、動かす1枚をいったん別の場所（temp）に逃がしてから動かします。逃がした跡地には「穴」が空きます。実は、この穴をどう埋めていくかが戦略の分かれ道です。 ここからは説明をシンプルにするため、7枚の画像にそれぞれ A〜G の中身が入っているとして話を進めます。スロット 1 には A、2 には B…という初期状態です。 並び替えの指示は、"並び先スロット": "元スロット" という対応表で表します。 { // 5番(E)を先頭へ。1〜5を1つずつ後ろへずらし、6番(F)と7番(G)は入れ替え "1": "5", // 1番には 元5(E) を持ってくる "2": "1", "3": "2", "4": "3", "5": "4", "6": "7", "7": "6" } 値（右側）が 1〜7 を1回ずつ全部使っていれば、画像が消えも増えもしない正しい並び替えです。重複や抜けがあれば、それは「同じ画像を2か所へ」「どこにも置かれず消える画像がある」というバグなので、実行前に弾きます。 素朴なやり方：スワップ方式 いちばん分かりやすいのは、1番から順番に定位置を埋めていくやり方です。 スロット 1 を見て、「ここに来るべき画像は今どこにあるか」を調べ、そこと交換する。次に 2 を見て…と、番号順に確定させていきます。「ここに来るべき画像が今どこか」は、画像の現在地を覚えておく loc という表で追跡します。 問題は、1回の交換にリネームが3回かかることです。temp に逃がして、欲しい画像を運んで、temp の中身を空いた場所へ戻す。これで3手です。 番号順に処理するので追いやすい反面、交換のたびに必ず temp への往復が発生します。交換が増えるほど、この「3手」がそのまま積み上がっていきます。 少し賢いやり方：玉突き方式（循環置換） 玉突き方式は、並び替えを最初に鎖（サイクル）として捉え直します。 さっきの指示を「誰が誰の場所を欲しがっているか」で辿ると、1→5→4→3→2 と一本の鎖になります。「1番が欲しいのは5番の画像、5番が欲しいのは4番の画像、4番が欲しいのは3番…」と繋がって、最後は2番が1番の画像を欲しがって輪が閉じます。6 と 7 はお互いを欲しがる、長さ2の短い鎖です。 鎖さえ作れれば、あとは穴を歩かせるだけです。 鎖の先頭の1枚（A）を temp へ逃がす。そこに穴が空く。 今ある穴に「そこへ入るべき1枚」を運ぶ。運んだ跡地が次の穴になる。 これを繰り返すと、穴が鎖の上を一歩ずつ歩いていく。最後に temp の1枚を戻して、その鎖は完了。 ポイントは、穴に入った画像はそのまま最終位置だということです。一度置いたら二度と動かしません。スワップ方式のように毎回 temp へ往復しないので、temp を使うのは1つの鎖につき1回だけで済みます。 ...

Playwrightを触ってみて、これはかなり使えるのではないかと思いました。 UIテストの道具として便利なのはもちろんですが、AIにコードを書かせる機会が増えるほど、意図していない場所が壊れていないかを機械的に確認する仕組みが欲しくなります。 特に個人開発では、リリース前に毎回ブラウザを開いて、 トップページが開くか フォームを送信できるか 検索やフィルタが動くか 登録、編集、削除の主要な流れが壊れていないか AIに直してもらった場所以外が壊れていないか といった確認を手でやりがちです。最初は数分でも、画面や機能が増えると抜け漏れが出ます。 Playwrightは、この「毎回ブラウザでやっている確認」をコードにして、同じ条件で繰り返し実行できるE2Eテストの道具です。スクリーンショットや動画も残せるので、テストだけでなく、YouTubeや記事用に動作説明の素材を作る用途にも使えそうです。 この記事では、React + Viteで作った問い合わせフォーム を例に、Playwrightを入れてフォーム操作を自動確認するところまでを書きます。 全体像は、手動確認をテストコードに置き換え、ブラウザで自動実行し、失敗時はレポートやtraceで原因を追う流れです。 Playwrightとは Playwrightは、ブラウザを自動操作してWebアプリの動きを確認できるE2Eテストフレームワークです。 E2EはEnd to Endの略で、ユーザーが実際に画面を開いて操作する流れに近い形でテストします。たとえば、次のような操作をコードで書けます。 ページを開く 入力欄に文字を入れる ボタンを押す 検索結果が表示されることを確認する フォーム送信後のメッセージを確認する 単体テストが関数や部品単位の確認に向いているのに対して、Playwrightは「画面上で主要な操作が最後まで通るか」を確認する用途に向いています。 PlaywrightはChromium、Firefox、WebKitを扱えます。ただし、初めて導入する段階では、いきなり全ブラウザを対象にしなくても大丈夫です。まずはChromiumだけで、リリース前に毎回手で確認している重要な操作を1つ自動化するところから始めると進めやすいです。 触って便利だと感じたところ まだ深く使い込んでいるわけではありませんが、触ってすぐ便利だと感じたのは次のあたりです。 クリックや入力の前に、要素が操作可能になるまで待ってくれる expect を使って画面上の見出し、ボタン、メッセージを確認できる 失敗時のスクリーンショット、動画、trace、HTMLレポートを残せる UI Modeで、ブラウザの動きを見ながらテストを書ける 開発サーバーの起動を webServer でまとめられる Chromium、Firefox、WebKitを同じテストで確認できる AIにコードを直してもらったあと、「指示した箇所は直ったが、別のフォームが壊れた」ということは普通に起きます。Playwrightで主要フローだけでも自動確認しておけば、その手戻りに気づきやすくなります。 最初はフォーム送信だけでもよい Playwrightを入れると、つい全画面を自動化したくなります。ただ、最初から広げるとテストを書くこと自体が重くなります。 まずは、今回の問い合わせフォームのように、壊れると困る操作を1つだけ選ぶくらいでよさそうです。 ページが開ける フォームへ入力できる 送信後の結果が表示される これだけでも、リリース前に毎回手で確認していた作業を1つ減らせます。慣れてきたら、検索、登録、編集などに広げれば十分だと思います。 React + ViteフォームにPlaywrightを入れる 今回は、React + Viteで作った小さな問い合わせフォームを例にします。 以降のコマンドは、React + Viteフォームアプリのプロジェクト直下で実行する前提です。 まず、Playwright Testを開発依存として追加します。 npm install -D @playwright/test 初回はブラウザも入れます。まずはChromiumだけで十分です。 npx playwright install chromium 新規プロジェクトでひな形ごと作りたい場合は、公式の npm init playwright@latest から始めてもよいです。この記事では、既存のReact + Viteアプリへ手で追加する流れにします。 ...

Reactと合わせてよく見かける、Viteって何だろう。Next.jsとは何が違うんだろう。 そんなところで少し疑問に思ったので、さらっと学習してみました。 AIによって生成されたアーキテクチャやソースコードで意味が分からないままだと、あとで自分で直したいときに困ったことになります。 AIに改修を任せる場合でも、レビューは必要ですから、最低限の知識は入れておきたいですよね。 さて今回は、React + Viteで小さな問い合わせフォームを作りながら、React、Vite、Next.jsの役割を整理してみました。 まずReact、Vite、Next.jsの役割を整理 最初に混乱しやすいのは、React、Vite、Next.jsがどの部分を扱っているのかよく分からないこと。 実際には、担当している範囲が違います。 ざっくり分けると、次のようになります。 名前 役割 この記事での見方 React UIを作るライブラリ 画面をコンポーネントとして作る Vite 開発サーバーとビルドの道具 Reactアプリを快適に開発し、公開用ファイルへまとめる Next.js Reactベースのフレームワーク ルーティング、SSR / SSG、サーバー側処理なども含めてアプリを作る なるほど、Next.jsはReactを元に増強したフレームワークなのですね。一方でViteはビルドなどやりやすいようにしてくれる、開発支援ツールといったところでしょうか？ もちろんReactは、画面を部品として組み立てるためのライブラリです。コンポーネント、JSX、state、イベント処理といった考え方が中心になります。 Viteは、Reactアプリを開発するときの開発サーバーや、本番公開用のビルドを担当する道具です。ちなみに Vite は「ヴィート」と読みます。保存した変更を素早くブラウザに反映するHMR (ホット・モジュール・リプレイスメント)も、Viteのありがたさを感じやすい部分です。とはいえ、今時この手のツールは当たり前すぎて、あまり意識していなかったようです。 Next.jsは、Reactを土台にしたフレームワークです。ファイルベースのルーティング、SSR、SSG、Route Handlersなど、アプリ全体を作るための機能をまとめて持っています。SSR、つまりサーバーサイドレンダリングですが、ここら辺が Next.js の魅力といったところでしょうか。 さて今回は、学習用に小さなフォームアプリをReact + Viteで作ってみます。SPA（シングルページアプリケーション）ですが、ペラ１のめちゃ簡単なUIのみで、メールサーバーも何もないのであしからず。 React + Viteプロジェクトを作る それではプロジェクトを作成して実装していきましょう。 Vite公式のGetting Startedでは、npm create vite@latest からプロジェクトを作れます。 Vite 8系ではNode.js 20.19+ または 22.12+ が必要です。古いNode.jsを使っている場合は、先に更新しておきます。 まずはNode.jsのバージョンを確認します。 node -v 次に、Reactテンプレートでプロジェクトを作ります。 npm create vite@latest react-vite-form-app -- --template react cd react-vite-form-app npm install npm run dev 対話形式で進める場合は、次のように選びます。 ...

Hugo のような静的サイトは、HTML を配信するだけならとても軽いのですが、 POST /api/... のような 小さい受付口 を足したくなることがあります。 例えば次のような用途です。 記事末尾の軽いリアクション お問い合わせの簡易受付 Slack への通知トリガー ちょっとした webhook の受け口 このとき、サイト全体を動的構成へ寄せるほどではないが、POST /api/... だけは欲しい、という場面があります。 そういう用途にちょうどよいのが Cloudflare Worker です。 今回は、Hugo サイトに軽いリアクション導線を追加した実例をもとに、 Cloudflare Worker + D1 + Slack でサーバーレスな受付口を作る方法 を、実際のファイルと設定をそのまま出しながらまとめます。 Cloudflare Worker と D1 は何をするものか まず役割を分けておきます。 Cloudflare Worker Cloudflare Worker は、Cloudflare のエッジ上で動くサーバーレス実行環境です。 ざっくり言うと、Cloudflare 側に小さな API を置ける仕組み です。 今回の用途では、POST /api/like を Worker で受けます。 Cloudflare D1 Cloudflare D1 は、Cloudflare が提供している SQL データベースです。 SQLite に近い感覚で使え、Worker から直接読み書きできます。 今回の用途では、次のようなイベント記録を保存します。 どの記事に対するリアクションか 同じ visitor がすでに送っていないか いつ送られたか Slack Incoming Webhook 通知先です。 新しいイベントがあったときだけ Slack に飛ばします。 ...

個人事業主・フリーランスの方は、確定申告の時期になりましたね。私はAmazonで購入することが多く、領収書を電子保存しておく必要があります。ところが、これまで使っていたChrome拡張（Amazon領収書一括印刷系）が動かなくなってしまいました。 そこで仕方なく、Amazonの注文履歴から「領収書等」→「印刷可能な注文概要」を開き、黄色の「印刷」ボタンを押してPDF保存……という作業をひたすら繰り返していました。 さらに困るのが、PDF保存時のファイル名がデフォルトで「注文の詳細.pdf」などになってしまう点です。注文番号（例：XXX-XXXXXXX-XXXXXX）をファイル名にしたいので、毎回注文番号をコピーしてファイル名に貼り付けてから保存していました。これが地味に面倒でした。 「注文番号をDOMから拾って、印刷まで自動化できそうだな」と思い、ChatGPTに相談して作ったのが以下のブックマークレットです。 （ブックマークのURL欄に javascript: から始まるコードを貼り付けて実行する、あのやつです。） javascript:(()=>{const old=document.title;const re=/\b(?:\d{3}|[A-Z]\d{2})-\d{7}-\d{7}\b/;const m=document.body&&document.body.innerText&&document.body.innerText.match(re);const id=(m&&m[0])||prompt("注文番号(例: 250-3207065-8648623 / D01-5274236-7074631)");if(!id)return;document.title=id;window.addEventListener("afterprint",()=>{document.title=old},{once:true});window.print();})(); Note ブックマークは「ページを保存する場所」ではなく、実は“自分だけのショートカットキー”にもできます。 URL欄に javascript: を入れるだけで、ページ上の定型作業をワンクリックで実行可能。 拡張機能みたいにストア審査もアップデート追従も不要で、壊れにくいのが強みです。 必要なページでだけ動くので、普段のブラウジングを汚さないのも地味に便利。 小さな自動化を積み上げると、ブラウザが“作業ツール”に変わります。 使い方 Chromeのブックマークに「新しいブックマーク」を追加します ※図① 名前は適当に付けて、URL欄に上のコードをそのまま貼り付けます Amazonの領収書（印刷可能な注文概要）ページを開いた状態で、そのブックマークを実行します 印刷画面が開くので「PDFとして保存」を選ぶと、ファイル名に注文番号が入った状態になっているはずです ※図② これなら、手作業で1年分の領収書を保存する場合でも、そこまで苦にならないと思います。 参考になればうれしいです。 追記：注文日も拾って YYYYMMDD_注文番号 で保存する PDFのファイル名を注文番号だけでなく、注文日も付けて 20251231_503-1737382-0797449 のようにすると、Finderでソートしやすく後から探すのがさらにラクになります。 印刷ページ内の「注文日 2025年12月31日」をパースして、ファイル名の先頭に付ける版はこちらです。 javascript:(()=>{const old=document.title;const orderRe=/\b(?:\d{3}|[A-Z]\d{2})-\d{7}-\d{7}\b/;const dateNearRe=/注文日[\s\S]{0,80}?(\d{4})年(\d{1,2})月(\d{1,2})日/;const dateRe=/(\d{4})年(\d{1,2})月(\d{1,2})日/;const t=document.body&&document.body.innerText||"";const om=t.match(orderRe);const dm=t.match(dateNearRe)||t.match(dateRe);const orderId=om?.[0]||prompt("注文番号(例: 250-3207065-8648623 / D01-5274236-7074631)");if(!orderId)return;const y=dm?.[1],m=dm?.[2],d=dm?.[3];const pad=n=>String(n).padStart(2,"0");const prefix=(y&&m&&d)?`${y}${pad(m)}${pad(d)}_`:"";document.title=`${prefix}${orderId}`;window.addEventListener("afterprint",()=>{document.title=old},{once:true});window.print();})(); これで、保存ダイアログを開いた時点でファイル名が YYYYMMDD_注文番号 になっているはずです。注文日が見つからないページでも、注文番号だけで動くようにしてあります。 ちなみに上のコードを整形すると次のようになります。 javascript:(() => { const old = document.title; const orderRe = /\b(?:\d{3}|[A-Z]\d{2})-\d{7}-\d{7}\b/; const dateNearRe = /注文日[\s\S]{0,80}?(\d{4})年(\d{1,2})月(\d{1,2})日/; const dateRe = /(\d{4})年(\d{1,2})月(\d{1,2})日/; const t = document.body && document.body.innerText || ""; const om = t.match(orderRe); const dm = t.match(dateNearRe) || t.match(dateRe); const orderId = om?.[0] || prompt("注文番号(例: 250-3207065-8648623 / D01-5274236-7074631)"); if (!orderId) return; const y = dm?.[1], m = dm?.[2], d = dm?.[3]; const pad = n => String(n).padStart(2, "0"); const prefix = (y && m && d) ? `${y}${pad(m)}${pad(d)}_` : ""; document.title = `${prefix}${orderId}`; window.addEventListener("afterprint", () => { document.title = old }, {once: true}); window.print(); })(); 注意点 Amazon側のページ構成やリンク文言（「領収書」「領収書等」など）は変更されることがあります。ブックマークレットが動かなくなったら、まず実際のページ表記を確認してください。 一度に大量の注文を処理するとタブやダイアログが増えるので、数件ずつ実行するのが安全です。 関連記事 C++でOpenCVをはじめる｜撮影したレシートを自動でトリミング … 紙のレシートを撮影して自動でトリミング・補正する画像処理の例 バニラJSのモダンな書き方・チートシート … ブックマークレットを書くときのJavaScript逆引きに Cloudflare Workerでサーバーレスな受付口を作る … 静的サイトに小さな処理を足したいとき 関連商品をAmazonで探す 確定申告ソフトをAmazonで探す ドキュメントスキャナーをAmazonで探す JavaScript入門書をAmazonで探す

React や Vue などのフレームワークを使わず、ブラウザ標準のJavaScriptだけで書くとき（いわゆるバニラJS）に毎回調べがちな構文をまとめました。非同期処理・配列操作・オブジェクトコピー・DOM操作・ストレージなど、実務でよく使うパターンを用途別に整理しています。Node.js でも動く構文は多いですが、主にブラウザ環境を想定しています。 ストレージ — sessionStorage / localStorage sessionStorage.setItem('myData', '保存したい内容'); // 保存 const savedData = sessionStorage.getItem('myData'); // 読み出す sessionStorage.removeItem('myData'); // 削除 sessionStorage.clear(); // 全て削除 sessionStorage は同一タブ内でのみ保持され、タブを閉じると破棄されます。最大容量はブラウザによりますがおおむね5MB。保存形式は文字列のみなので、オブジェクトを保存したい場合は JSON.stringify() で変換が必要です。 sessionStorage を localStorage に書き換えるとデータを永続化できます。 オブジェクトの凍結 — Object.freeze const Trial = { ok: true, ng: false }; Object.freeze(Trial); // オブジェクトを凍結 Trial.ok = false; // 非 strict mode ではエラーにならないが値は変わらない（strict mode では TypeError） console.log(Trial.ok); // true const ではプロパティの書き換えを防げません。Object.freeze() はトップレベルのプロパティ変更を防ぎますが、浅い凍結なので入れ子のオブジェクトは変更できます。JS で Enum を表現したいときに便利です。 非同期処理 — fetch / async / await async function fetchUser(userId) { const response = await fetch(`/api/user/${userId}`); if (!response.ok) throw new Error("通信エラー"); const data = await response.json(); return data; } fetchUser(1).then(user => { console.log(user.name); }).catch(err => { console.error(err); }); fetch() はブラウザ組み込みのHTTP通信APIです。await で非同期処理の完了を待てるため、Promise のチェーンよりも読みやすくなります。await を使う関数は async で宣言する必要があります。 ...