フレームワークを整える。

フレームワークの選び方を整える

＝ React か Vue かで迷ったときの「こんな時はコレ」を、5つの質問と比較表で

React・Vue・Svelte・jQuery・Alpine.js・Lit・Preact・Tailwind CSS・Bootstrap の9本を、誕生年・作者（Meta／Evan You／Rich Harris／John Resig／Caleb Porzio／Google／Jason Miller／Tailwind Labs／Twitter 発）・実装方式（仮想 DOM／コンパイラ／DOM ライブラリ／属性駆動／Web Components／CSS）・配布サイズ帯・学習コスト・エコシステム・求人情報・SSR（Next.js／Nuxt／SvelteKit）の有無で比較する早見表と、作るもの・チーム・既存技術・重視点・CSS の5問で上位候補を根拠つきで提案するツール。「こんな時はコレ」の定型カード12枚。学習コスト等の数値は当サイトの相対的な目安と明記。送信ゼロ。

• ● JS 系7本（React／Vue／Svelte／jQuery／Alpine.js／Lit／Preact）と CSS 系2本（Tailwind／Bootstrap）を横断比較
• ● 5問の診断で根拠つきの上位候補（JS 2本＋CSS 1本）を提案
• ● 「こんな時はコレ」の定型カード12枚

HTML/CSS/JS を整える（Playground）

＝ フレームワークなしで、Web の土台がどう動くかを手を動かして確かめる

sandbox="allow-scripts" の srcdoc iframe に HTML・CSS・JavaScript をインライン script として書き込んで実行する Playground。本番 CSP は eval を禁止するがインライン script は許可しているため、この方式でブラウザ本体のエンジンを使う。console/エラーは postMessage で親に転送。Hello World・クリックカウンタ・配列からの DOM 再構築・CSS 変数テーマ切替の4サンプル。停止ボタンで iframe を作り直す。外部ライブラリなし。送信ゼロ。

• ● 4サンプル（Hello World・状態とイベント・一覧描画・CSS 変数のテーマ切替）
• ● HTML/CSS/JS の3タブエディタ（CodeMirror 6）とプレビュー iframe＋console の2カラム
• ● 「■ 停止」でプレビュー iframe を作り直せる

React を整える（Playground）

＝ 「状態が変わると画面が描き直される」仕組みを、コードを書いて確かめる

React 18.3.1（UMD・cdn.jsdelivr.net）をサンドボックス iframe で動かす Playground。JSX は typescript.js 5.9.3 の transpileModule（jsx: React）で React.createElement に変換してから注入。useState のカウンタ・props・一覧描画（map＋key）・useEffect の実行順序の4サンプル。「Preact + htm」タブでは Preact 10.29.8＋htm 3.1.1 を iframe 内 ESM import して JSX 変換なしの同等コードを試せる。console・エラー・停止ボタン。送信ゼロ。

• ● 4サンプル（useState のカウンタ・props・一覧描画 map/key・useEffect の実行順序）
• ● JSX は typescript.js（/typescript/ と同じ処理系）で変換してから実行
• ● 「Preact + htm」タブで JSX 変換なしの同等コードに切り替え

Vue を整える（Playground）

＝ 単一ファイルコンポーネント（.vue）をブラウザ内でコンパイルして動かす

@vue/compiler-sfc 3.5.42（cdn.jsdelivr.net から動的 import）を親ページで動かし、<script setup>＋<template> をコード文字列へ事前コンパイルしてから module script としてサンドボックス iframe に注入する Vue 3 Playground。本番 CSP が new Function を禁止するためランタイムのテンプレートコンパイルは使わない。ref・v-model と @click・v-for・computed の4サンプル。送信ゼロ。

• ● 4サンプル（ref・v-model／@click・v-for・computed）
• ● @vue/compiler-sfc で事前コンパイルしてから実行（CSP の new Function 禁止に対応）
• ● 左エディタ・右プレビュー＋console・停止ボタン

Svelte を整える（Playground）

＝ コンパイル時に「値が変わったら書き換える」コードが生まれる仕組みを体験する

svelte 5.57.0 のコンパイラ（UMD・cdn.jsdelivr.net）を親ページで動かし、.svelte ソースを compile({generate:"client", css:"injected"}) でコード文字列へ変換してから module script としてサンドボックス iframe に注入する Playground。生成コードが要求する svelte/internal/client などのベア指定子は srcdoc の importmap で jsdelivr の実ファイルに解決。$state・イベント・{#each}・$derived の4サンプル。送信ゼロ。

• ● 4サンプル（$state・イベント・{#each}・$derived）
• ● Svelte コンパイラで事前コンパイルしてから実行（CSP の new Function 禁止に対応）
• ● importmap で svelte/internal/client 等を解決するサンドボックス iframe

jQuery を整える（Playground）

＝ $() でつかんでメソッドをつなげる——jQuery の書き味を手を動かして確かめる

jQuery 4.0.0（cdn.jsdelivr.net）をサンドボックス iframe で実行する Playground。Hello World・状態とイベント（.on と $(this)）・一覧描画（appendTo）・アコーディオン（slideToggle とイベント委任 $(document).on）の4サンプル。HTML/JS の2タブ。保守案件や管理画面で今も広く使われる jQuery の書き味を確かめる。送信ゼロ。

• ● 4サンプル（Hello World・状態とイベント・一覧描画・アコーディオン）
• ● [email protected] を cdn.jsdelivr.net から読み込み
• ● HTML/JS の2タブエディタとプレビュー＋console・停止ボタン

Alpine.js を整える（Playground）

＝ HTML の属性を足すだけで動く——Alpine.js（CSP ビルド）の書き味を確かめる

Alpine.js 3.17.1 の CSP ビルド（@alpinejs/csp・eval や new Function を使わない版）をサンドボックス iframe で実行する Playground。標準ビルドの x-data="{...}" は本番 CSP で動かないため、alpine:init 内で Alpine.data() を登録し x-data="名前()" で参照する作法を4サンプル（Hello World・状態とイベント・x-for・検索フィルタ）で解説。送信ゼロ。

• ● 4サンプル（Hello World・状態とイベント・一覧 x-for・検索フィルタ）
• ● @alpinejs/csp 3.17.1 を cdn.jsdelivr.net から読み込み
• ● Alpine.data() で登録して x-data で参照する CSP ビルドの作法を解説

Lit を整える（Playground）

＝ ブラウザ標準のカスタム要素にひと工夫足す——タグとして使えるコンポーネントを作る

Lit 3.3.3（ESM・iframe 内で cdn.jsdelivr.net から直接 import）を動かす Playground。LitElement 継承＋customElements.define・static properties によるリアクティブな状態と render() の再実行・CustomEvent の dispatchEvent・配列を map して繰り返し描画の3サンプル。Web 標準の customElements の上に薄い層を重ねる設計を解説。送信ゼロ。

• ● 3サンプル（カスタム要素の定義・プロパティとイベント・繰り返し描画）
• ● iframe 内で lit の ESM を直接 import（親側のコンパイル不要）
• ● プレビュー＋console・停止ボタン

Tailwind CSS を整える（Playground）

＝ 同じボタンを Tailwind と Bootstrap の両方で書いて見比べる

Tailwind CSS 4.3.3 のブラウザ用ビルド（class から実行時に CSS 生成）と Bootstrap 5.3.8（CSS は親で fetch して <style> に埋め込み・bundle JS を読み込み）をサンドボックス iframe で切り替えて試す Playground。ユーティリティファーストとコンポーネント指向の書き方の違いを、同じボタンの比較サンプルと各4本（ボタン・カード・グリッド・フォーム／モーダル）で確認。送信ゼロ。

• ● Tailwind / Bootstrap のタブ切替
• ● 同じ見た目のボタンの比較サンプル＋各4本
• ● Bootstrap はモーダルなど JS 部品の例も収録

p5.js を整える（Playground）

＝ setup() で準備し draw() を回すだけで絵が動き出す——ブラウザ内で実際に動かす

p5.js 2.3.2（cdn.jsdelivr.net）をサンドボックス iframe で実行する Playground。setup/draw のグローバルモードで、円・マウス追従（mouseX/mouseY）・アニメーション・ランダムウォークの4サンプル。console は postMessage で親に転送。停止ボタンで iframe を破棄して draw ループを止める。送信ゼロ。

• ● 4サンプル（円・マウス追従・アニメーション・ランダムウォーク）
• ● 左エディタ／右プレビュー＋console の2カラム
• ● 「■ 停止」で iframe を破棄して draw() ループを止める

Phaser を整える（Playground）

＝ Scene に図形を置いて create/update で動かす——2D ゲームエンジンをブラウザ内で試す

Phaser 4.2.1（cdn.jsdelivr.net）をサンドボックス iframe で実行する Playground。画像アセットを使わず矩形・円・テキストだけで、シーンと図形・矢印キーで動く四角（createCursorKeys）・当たり判定（Phaser.Geom.Intersects による簡易判定）・クリックで増えるスコアの4サンプル。停止ボタンで iframe を破棄。送信ゼロ。

• ● 4サンプル（シーンと図形・キー入力・当たり判定・スコア表示）
• ● 画像アセット不使用・図形描画のみ
• ● 左エディタ／右プレビュー＋console・停止ボタン

Three.js を整える（Playground）

＝ Scene・Camera・Renderer を組んで回す——3D をブラウザだけで WebGL 描画

three 0.185.1（build/three.module.js を iframe 内で ESM import）で 3D を描く Playground。回る立方体・ライトと材質（MeshStandardMaterial）・複数オブジェクト（Group）・OrbitControls でドラッグ回転／ホイールズームの4サンプル。OrbitControls が要求するベア指定子 three は importmap で解決。停止ボタンで iframe を破棄。送信ゼロ。

• ● 4サンプル（回る立方体・ライトと材質・複数オブジェクト・OrbitControls）
• ● iframe 内で ESM import をそのまま実行・importmap でベア指定子を解決
• ● 左エディタ／右プレビュー＋console・停止ボタン

Flask を整える（Playground）

＝ ルートを書いてリクエストを送る——Python の Web フレームワークをサーバーなしで往復させる

Pyodide 上で Flask 3.1 を動かす Playground。Pyodide に同梱されない Flask 一式（blinker/click/itsdangerous/werkzeug/flask の純 Python wheel 5本・約0.5MB・BSD）は totonoe 自身の /wheels/ から micropip で読み込む。app.test_client() でメソッド・パス・ボディ・Content-Type を指定したリクエストを発行し、ステータス・ヘッダ・本文・print 出力を表示。サーバーは起動しない。送信ゼロ。

• ● 4サンプル（Hello・パスパラメータ・JSON API・POST とフォーム）
• ● メソッド・パス・ボディ・Content-Type を指定して送信、ステータス・ヘッダ・本文を表示
• ● サーバーは起動せず app.test_client() で往復を再現

pytest を整える（Playground）

＝ 落ちるテスト（赤）を直して通るテスト（緑）にする往復を、ブラウザだけで体感する

Pyodide 0.28 同梱の pytest 8 を動かす Playground。仮想 FS に calc.py と test_calc.py を書き、pytest.main(["-q","-p","no:cacheprovider"]) を実行して結果を表示。assert 失敗時の差分表示・@pytest.mark.parametrize・pytest.raises の4サンプル。送信ゼロ。

• ● calc.py（テスト対象）と test_calc.py（テスト）の2タブ
• ● 通る／落ちる／parametrize／pytest.raises の4サンプル
• ● 落ちたテストは assert の差分をそのまま表示

SQLAlchemy を整える（Playground）

＝ SQL を書かずに Python のクラスでデータベースを操作する ORM を、裏側の SQL ごと確かめる

Pyodide 0.28 同梱の SQLAlchemy 2.0 を sqlite:///:memory: で動かす Playground。declarative_base＋Column＋session.query の古典的スタイルで、モデル定義→作成→追加→問い合わせ→1対多リレーションを試し、echo=True の SQL ログを print と同じ時系列で表示。送信ゼロ。

• ● 4サンプル（モデル定義／追加と問い合わせ／1対多リレーション／echo）
• ● echo=True で実際に発行される SQL を表示
• ● 単一エディタ＋出力パネル

Chart.js を整える（Playground）

＝ CSV から棒・折れ線・円・複合グラフを描いて確かめる練習場

Chart.js 4.4.8 を sandbox iframe 内で実行するグラフ描画の練習場。CSV（1行目見出し・1列目ラベル）を親でパースし DATA として注入、JS 設定欄で new Chart(ctx, {type, data, options}) を書く。棒／折れ線／円・ドーナツ／複合（2軸）の4課題。Excel のグラフとの対応表つき。送信ゼロ。

• ● CSV（1行目見出し・1列目ラベル）を自動でグラフ用データに変換
• ● 4課題（棒／折れ線／円・ドーナツ／複合・2軸）
• ● type・data・options という Chart.js の構造を書いて理解

Web Components を整える（Playground）

＝ ライブラリなしで独自の HTML タグを作って動かす練習場

ライブラリ非依存の Web Components（Custom Elements・Shadow DOM）の練習場。HTML（使う側）と JS（customElements.define）の2エディタ。定義と描画／属性（observedAttributes・attributeChangedCallback）／名前付き slot と ::slotted／イベント（CustomEvent・composed）の4課題。Lit との関係を解説し /lit/ と相互リンク。送信ゼロ。

• ● ライブラリなし・ブラウザ標準機能だけで動く
• ● 4課題（定義／属性／slot／イベント）
• ● Shadow DOM の CSS 隔離を実際に確認できる

htmx を整える（Playground）

＝ HTML に属性を足すだけで動く htmx を、サーバーの代わりに JSON で応答するモックで確かめる練習場

htmx.org 2.0.4（cdn.jsdelivr.net）を sandbox iframe で実行する練習場。サーバーが無いため、htmx を読み込む前に XMLHttpRequest をモックに差し替え、「サーバー応答」欄の JSON（{"GET /path":"<p>…</p>"} 形式・メソッド無しは GET）を読んで150ms 後に応答する。POST の本文の各項目は、二重の波括弧で囲んだ項目名（name など）のプレースホルダで応答に差し込める。4課題（hx-get／hx-post とフォーム／hx-trigger／hx-target と hx-swap）。HTML・サーバー応答・CSS の3タブ。送信ゼロ。

• ● 4課題（hx-get／hx-post とフォーム／hx-trigger／hx-target と hx-swap）
• ● サーバー不要。「サーバー応答」欄の JSON を読むモックが応答（POST の項目をプレースホルダで差し込める）
• ● HTML・サーバー応答・CSS の3タブとプレビュー

Preact を整える（Playground）

＝ React と同じ API を、JSX コンパイラなしの htm テンプレートで動かす練習場

htm 3.1.1 の standalone バインディング（Preact 本体を同梱し html・render・useState 等を1ファイルで export）だけを iframe 内で ESM import する練習場。JSX コンパイラは使わない。4課題（コンポーネントと props／useState／リストと key／useEffect のタイマーとクリーンアップ）。FrameworkFit で React との向き不向きを比較。送信ゼロ。

• ● 4課題（コンポーネントと props／useState／リストと key／useEffect のタイマー）
• ● htm の standalone（Preact 同梱）を配信元から ESM import
• ● JSX コンパイラ不要