single-html-apps

ブラウザ上で動作する単一ファイルのHTMLアプリケーション（ゲーム、ツールなど）をまとめたリポジトリです。 HTML/CSS/JavaScript が 1 つのファイルに完結しているため、サーバー環境なしでローカルですぐに実行・確認できます。

特徴

• 単一ファイル完結: 1 つの HTML ファイルにすべてのコード（HTML/CSS/JS）が含まれています。
• 環境構築不要: Web サーバーや Node.js などの環境構築は一切不要です。
• 簡単実行: ブラウザにドラッグ＆ドロップするだけで動かせます。

アプリ一覧

アプリ名	説明
Random Picker	改行区切りで入力したテキストからランダムで1つを選ぶツール

使い方

1. このリポジトリをクローンまたはダウンロードします。
2. apps/<app-name>/generated/index.html をブラウザ（Chrome, Edge, Safari, Firefox など）で開いてください。

開発とテスト

リポジトリ内のロジックと生成物の健全性を保つため、TypeScript・Vitest・Playwright を使った検証を導入しています。

標準コマンド

1. Node.js の準備: 安定版の Node.js が必要です。（fnm 等のバージョン管理ツールの利用を推奨します）
2. 依存関係のインストール:

   npm install
   

3. アプリ生成:

   npm run build
   

4. 一括検証:

   npm run precommit
   

npm run build は scripts/build-all.ts に並べた node .../build.ts を順番に実行します。 npm run precommit は整形、型チェック、Vitest、build、Playwright をまとめて実行する標準コマンドです。

補助コマンド

Git 管理対象のファイルを 1 枚の Markdown にまとめたい場合は、次のコマンドを使えます。

npm run concat

このコマンドはリポジトリのルートディレクトリを対象にして、generated/concat.txt に出力します。 未追跡のファイルも収集対象に含めるため、git add 前の新規ファイルもそのまま確認できます。

個別コマンド

npm run tscheck
npm run test:unit
npm run test
npm run test:e2e

npm run tscheck は scripts/typecheck-all.ts に並べた tsc --noEmit -p ... を順番に実行します。 npm run test:unit は JSDOM を使用し、src/ のロジックと generated/index.html の挙動を検証します。 npm run test は test:unit のあとに test:e2e を実行します。

E2Eテスト (Playwright)

1. ブラウザをインストールします。

   npx playwright install chromium
   

2. E2E テストを実行します。

   npm run test:e2e
   

npm run test:e2e と npm run test:e2e:headed は、Playwright 実行前に build ランナーで最新の generated/index.html を再生成します。

ヘッドありで確認したい場合:

npm run test:e2e:headed