JavaScript

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 で宣言する必要があります。 ...