【AIコーディング対決】JavaScript vs TypeScript、安くていいのはどっちだ！？

ソース： https://github.com/mzsima/learn-mcp/tree/main/vibe-skillcheck-js-ts

Model

• gemni-2.5-pro-preview-03-25

結果

javascript win!

ルール

プロジェクトのルートに配置した.rule ファイルに下記のルールを配置。AI Agentに「.ruleを読んでWebアプリを最後まで作り上げて」と指示する。

概要

シンプルなWebベースのTODOリストアプリケーションをHTML、CSS、typescriptで作成してください。

要件

1. 使用技術:
   • HTML
   • CSS (標準的なCSSを使用してください。CSSはHTMLファイル内の<style>タグに記述するか、別途CSSファイルを作成してください。)
   • typescript (フレームワークは使用しないでください)
2. 機能:
   • タスク追加:
     • テキスト入力フィールドと「追加」ボタンを設置してください。
     • 入力フィールドにテキストを入力し、「追加」ボタンをクリックすると、新しいタスクがリストに追加されるようにしてください。
     • 追加後、入力フィールドは空にしてください。
     • 空のテキストは追加できないようにしてください。
   • タスク表示:
     • 追加されたタスクはリスト形式で表示してください。
     • 各タスクには、完了状態を示すチェックボックス、タスク名、削除ボタンを表示してください。
   • タスク完了/未完了切り替え:
     • チェックボックスをクリックすると、タスクの完了/未完了状態が切り替わるようにしてください。
     • 完了したタスクには打ち消し線を表示するなど、視覚的に完了状態がわかるようにしてください。
   • タスク削除:
     • 各タスクの隣にある削除ボタンをクリックすると、そのタスクがリストから削除されるようにしてください。
   • データ永続化:
     • ブラウザのlocalStorageを使用して、タスクの状態（内容、完了/未完了）を保存し、ページをリロードしてもタスクが保持されるようにしてください。
3. UIデザイン (CSSでのスタイリング):
   • 全体レイアウト:
     • ページ全体 (body) の背景色は薄いグレー (#f3f4f6) とし、コンテンツが垂直方向に中央揃えになるようにしてください。
     • コンテナ (divなど) は白い背景 (#ffffff)、適切なパディング (1.5rem程度)、角丸 (border-radius: 0.5rem;)、影 (box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);) をつけ、最大幅 (max-width: 28rem;) を設定し、ページ中央に配置してください。
   • タイトル:
     • h1 タグで “TODOリスト” と表示し、フォントサイズを大きく (font-size: 1.5rem;)、太字 (font-weight: bold;)、下マージン (margin-bottom: 1rem;) をつけ、中央揃え (text-align: center;) にしてください。
   • 入力エリア:
     • 入力フィールドと追加ボタンを横並び (display: flex;) にし、下マージン (margin-bottom: 1rem;) をつけてください。
     • input[type="text"] は、横幅いっぱいに広がるように (flex-grow: 1;) し、パディング (padding: 0.5rem;)、ボーダー (border: 1px solid #ccc;)、左側の角丸 (border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;) を設定してください。フォーカス時に枠線が目立つようにしてください (outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);)。プレースホルダーは「新しいタスクを入力」としてください。
     • 追加ボタン (button) は、背景色を青 (#3b82f6)、文字色を白 (#ffffff)、パディング (padding: 0.5rem 1rem;)、右側の角丸 (border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;) を設定し、ホバー時に背景色が少し濃くなるようにしてください (background-color: #2563eb;)。テキストは「追加」としてください。
   • タスクリスト:
     • ul タグを使用し、リストマーカーを非表示 (list-style: none;)、パディングをリセット (padding: 0;) し、タスク間のスペース (gap: 0.5rem; display: flex; flex-direction: column;) を設定してください。
   • 各タスク (li):
     • 各タスク項目は、要素を中央揃え (display: flex; align-items: center;)、背景色を薄いグレー (#f9fafb)、パディング (padding: 0.5rem;)、角丸 (border-radius: 0.5rem;) を設定してください。
     • チェックボックス (input[type="checkbox"]) には右マージン (margin-right: 0.5rem;) を設定してください。
     • タスク名 (span) は、横幅いっぱいに広がるように (flex-grow: 1;) してください。完了時は打ち消し線 (text-decoration: line-through;) と文字色をグレー (color: #6b7280;) にしてください。
     • 削除ボタン (button) は、背景色を赤 (#ef4444)、文字色を白 (#ffffff)、左右パディング (padding: 0.25rem 0.5rem;)、角丸 (border-radius: 0.5rem;)、小さいフォントサイズ (font-size: 0.75rem;) を設定し、ホバー時に背景色が少し濃くなるようにしてください (background-color: #dc2626;)。左マージン (margin-left: 0.5rem;) を設定してください。テキストは「削除」としてください。
4. その他:
   • typescriptコードには、処理内容がわかるようにコメントを追加してください。
   • CSSはHTMLファイル内の<style>タグに記述するか、別途CSSファイル（例: style.css）として読み込む形式で記述してください。
   • エラーハンドリングは最小限で構いません。