【実装編】Antigravityとペアプログラミング。Astro+Reactで構築する爆速Webアプリ開発

AstroWind から始まるプロトタイピング

ベースとなるテンプレート AstroWind (PageSpeed Insights 100) をどう拡張したか。

React コンポーネントの組み込みと、ハイブリッドレンダリングの戦略を軽く説明。

なぜAstroを採用したか

シラバスハックは「生成AI×資格試験」がコンセプト。 公式がpdfを配っているなら、それをAIに読ませて問題を作ってもらい、自作の学習テキストができる！━━の考えからスタート。

ならコンテンツとして「出題（クイズ）」は欠かせない。

問題は「どこでどうやって公開するか」だった。

ウェブページを静的サイトなりLPで作成し、アプリ部分をReactなりTypeScriptでデプロイしてお互いをリンクするのが妥当かなーって思っていた。

それをAIに質問すると、 「Astroでいいじゃん」 といわれた。

もっとも強い理由は、スマホでアプリページを見れること、Reactを組み込めるしアプリのページはモバイルファーストだしで、まさに理想通り！

QuizApp コンポーネント (UI/UX)

クイズ出題機能については、ユーザー体験を中心に据えたUI設計（は建前）。主に考えたのは、 サーバーへの負荷を極力抑えること 。

サーバー上でスクリプトを動かす「ウェブアプリ形式」だと、負荷があるしユーザーの環境に依存する形にもなる。 コンセプト通りに、AIを使って問題を生成する道もあるけど、APIコストを考えるといつまで経っても赤字の未来しか見えない。

クイズ出題アプリは、あらかじめjsonファイルに「問題・選択肢・答え・間違った場合の補足」などのデータをまとめておいて、そこから任意で選んでいる感じに。

AI「これがもっとも軽いと思います」

機能性を追加

……だけでは学習にならないよね、と。

ユーザーが間違った問題はキャッシュして、出題ジャンルと照合し、「苦手なジャンル」を見つけられるように。ノー勉強で正解したのは「基礎が出来ている」わけだし、そこで間違ったなら「覚える必要がある」と判断することができる。

IPA資格試験の学習テキストは書店でも多く売っているが、間違った問題から苦手ジャンルを見極めるには、 自分で気づかないといけない 。

ここをプログラムで解決することが出来たのは大きいと思っている。だって、 コードが解れば誰でも作れる ってことですよ。

Antigravity との「意思疎通」

AIとの共同作業において、どのように指示を出し、どのようにレスポンスを得たか。

• MultiReplaceFileContent を駆使した一括リファクタリング。
• デザイン提案から修正までのスピード感。
• 人間が考えるべき「戦略」と、AIに任せるべき「実装」。

Astroはテーマを適用するとデザインはそれ準拠になるから、特に変更しなければそのまま使える。テーマに関わるレイアウトはほぼ変更していないかも。

AIにアプリを作らせるための「プロンプトの要」

シラバスハックのようなクイズアプリをAIで実装する際、単に「アプリを作って」では理想の結果は得られません。

以下の3つのステップでプロンプトを構成するのがコツ。

1. データ構造（JSON）の定義

まず最初に、情報の「器」をAIに決定させます。

プロンプト例: 「ITパスポートの試験形式に合わせたクイズデータのJSONスキーマを作成して。フィールドには問題文、4択の選択肢、正解インデックス、そして解説を含めること。複数の分野（ストラテジ、マネジメント、テクノロジ）を識別できるタグも追加して」

2. UIコンポーネントの機能要件

次に、React（またはPreact）などのフロントエンドフレームワークでの振る舞いを細かく指定します。

プロンプト例: 「先ほどのJSONデータを読み込み、1問ずつ表示するPreactコンポーネントを作成して。現在の問題番号、正解数、回答済みの状態をuseStateで管理すること。Tailwind CSSを使用して、モバイルで見やすくダークモードにも対応したモダンなデザインにして」

3. 具体的な「学習ロジック」の組み込み

単純な正誤判定だけでなく、教育的な価値を生むための指示を加えます。

• プロンプト例: 「応用情報技術者の『科目B』のような長いケーススタディに対応できるように、シナリオ表示エリアと設問エリアを分離して。また、ユーザーが間違えた問題だけを抽出して、最後に『間違えた問題リスト』として表示する機能を追加して」

このように、 「データの定義 → 基本動作の構築 → 付加価値の追加」 という順序で指示を出すことで、AI（Gemnini）は設計の意図を正確に汲み取ってくれます。

今後の展望：IPA資格試験を全フォローが目標

現在実装済は「ITパスポート・情報セキュリティマネジメント・基本情報技術者」の3つ。

応用情報以上の高度試験については、シラバスがあるので学習アプリ作成は出来るんだけど、2026年から「全CBT化」になったのが大きな変更点。……でもまだ詳細というか、試験がまだなのでアプリ形式が他のと同じかがわからない。

シラバスがあるから出題内容に大きな変更はないけれど、手書きの記述式など論述問題をキーボード入力する必要がある。なので、知識はあってもタイピングが死ぬほど苦手な人は、思わぬところで苦戦する可能性も━━。

すでに出題アプリの土台はあるから、CBTの結果が出てきてからまた対応しつつ、変更しながら実装していく形になるかなと。