【内部構成】AIだけでサイトをフルスクラッチ？ Syllabus Hack を支える技術の正体

人間は「提案」し、AIは「実装」する

このSyllabus Hackというサイトは、従来の Web サイト制作とは全く異なるプロセスで構築されています。従来の開発では、人間が要件定義から設計、実装、テストまで多くの工程を手作業で行うのが一般的でした。しかし、ここではその大部分をAIが担っています。

私がコードを一から書くことは、ほとんどありません。これは、まるで熟練の職人が弟子に指示を出すように、AIが私の意図を汲み取って具��的な作業を進めるイメージです。

私が行うのは、サイトの構想をAntigravity（AI エージェント）に「提案」することだけです。この「提案」は、単なるアイデア出しにとどまらず、サイトの目的やユーザー体験、求める機能の要件を明確に伝えることを意味します。

「こんな機能が欲しい」「デザインをもっとプレミアムにしてほしい」という私のVibe（ノリ）を AI が解釈し、API を通じて具体的なコードへと変換しています。ここでいう「Vibe」とは、単なる感覚的な指示ではなく、開発者の意図や方向性をAIに伝える抽象度の高い指示を指し、AIがそれを具体的な技術的要件に落とし込む能力が重要になります。

Syllabus Hack を支える 3 つの技術基盤

このサイトは、以下の 3 つの強力な技術の組み合わせで成り立っています。これらの技術は、それぞれが持つ特性を最大限に活かし、連携することでSyllabus Hackの高速かつ効率的な開発を実現しています。

1. Astro ＋ React（UI の土台）

サイト全体のフレームワークにはAstroを採用しています。Astroは、静的サイトジェネレーター（SSG）という技術を基盤としており、事前にHTMLファイルを生成することで、非常に高速な表示速度を実現します。

Astroは、コンテンツ重視のサイトを爆速で構築するのに最適で、AI にとっても構造が非常に分かりやすいのが特徴です。表示速度の速さは、ユーザー体験の向上だけでなく、検索エンジン最適化（SEO）にも有利に働き、試験対策サイトとして多くの人に情報が届くために非常に重要です。IT資格試験においては、Webフレームワークの種類や特性、静的サイト生成の概念が問われることもあり、その理解は実務に直結します。

クイズアプリなどのインタラクティブな機能にはReactを組み込み、動的な体験を実現しています。Reactはコンポーネント指向のJavaScriptライブラリであり、UIの部品化により開発効率を高め、複雑な動的機能も管理しやすくなります。AstroとReactを組み合わせることで、高速な静的コンテンツ配信と、リッチなインタラクティブ機能の両立が可能となり、学習者がスムーズにクイズに取り組める環境を提供しています。

2. Antigravity（現場監督の AI エージェント）

私の右腕として、ファイル操作、ビルド、デバッグ、画像生成まで全ての「実務」をこなすのがAntigravityです。これは単なるAIツールではなく、自律的にタスクを計画・実行・評価・修正できるAIエージェントとして機能します。

私が「こうしたい」とチャットで伝えるだけで、Antigravityは適切なファイルを書き換え、エラーがあれば自ら修正し、ビルドを完了させます。例えば、新しい機能の追��を指示すれば、関連するコードファイルを特定し、変更を加え、テストを実行し、問題があれば修正するといった一連のプロセスを自動で進めます。これは、実務における継続的インテグレーション/デリバリー（CI/CD）パイプラインの自動化にも通じる考え方です。

人間がエディタと向き合う時間を最小限にし、AIが開発をリードするのがSyllabus Hack流のVibe Codingです。このアプローチにより、開発者は細かいコードの実装に時間を費やすのではなく、より高次元な「何をどう作るか」という戦略的な思考に集中できるようになります。試験では、AIによる開発支援ツールや自動化技術に関する知識が問われることもあり、その概念を理解することは現代のITエンジニアにとって必須です。

3. Gemini API ＋ CLI（情報のコンバーター）

試験情報の分析やシラバスの構造化には、GoogleのGemini APIをフル活用しています。Gemini APIは、Googleが開発した大規模言語モデル（LLM）であるGeminiの強力な機能を、プログラミングを通じて利用するためのインターフェースです。これにより、自然言語処理、テキスト生成、要約、情報抽出といった高度なAI処理を自社システムに組み込むことができます。

膨大な PDF の試験要綱を読み込み、瞬時にクイズデータ（JSON）や記事の下書きへと変換する自動化パイプラインを構築しています。このプロセスでは、Gemini APIがPDFからテキストを抽出し、その内容を理解・分析し、必要な情報を構造化されたデータ形式（JSON）に変換します。例えば、特定のキーワードを元にクイズ問題と解答を自動生成したり、試験範囲の概要をまとめた記事の下書きを作成したりします。

人間が手作業で行っていた「シラバスの解釈」という重労働を、AIの処理能力で解決しています。また、この処理を効率的に実行する��めに、コマンドラインインターフェース（CLI）を介してAPIを操作しています。CLIは、テキストベースのコマンドでプログラムを実行するインターフェースであり、自動化スクリプトやバッチ処理に非常に適しています。実務では、データの前処理、コンテンツ生成、情報分析など、AIとCLIの組み合わせによる自動化は、業務効率化の強力な武器となります。

難しいことはしない。API を「駆使」するだけ

技術要項と聞くと難しく感じるかもしれませんが、実態はシンプルです。APIとは、Application Programming Interfaceの略で、異なるソフトウェアやサービスが互いに連携し、データをやり取りするための「窓口」のようなものです。私たちは、この窓口を通じてAIに指示を送り、結果を受け取ります。

人間がやるべきことは、AI に「何を作らせるか」という戦略を立て、API に適切なパラメータを渡すことだけ。この「パラメータを��す」という行為は、AIに対して具体的な指示を与える「プロンプトエンジニアリング」の基礎であり、AIの性能を最大限に引き出すための重要なスキルとなります。

手作業によるコーディングを捨て、AIとの対話（提案）に全力を注ぐ。これは、従来のプログラミングスキルに加え、AIの特性を理解し、効果的に指示を出す「AIディレクション」のようなスキルが求められることを意味します。

これが、膨大な試験範囲をハックするための最短距離なのです。AIを戦略的に活用することで、情報過多な現代において、効率的かつ質の高い学習コンテンツを迅速に提供することが可能になります。

まとめ：今回のポイント

Syllabus Hackは、コードを書かずに「提案」から生まれる AI 駆動型サイトであり、開発のパラダイムを大きく変革しています。
Astro（高速なUI）��Antigravity（自律的なAIエージェント）、Gemini API（高度な情報処理）の 3 本柱が開発のコアを成しています。
人間は「抽象的なビジョン」を提案し、AIは「具体的な実装」を担当することで、開発効率と品質を両立させています。
難しいコーディング知識よりも、AIの能力を理解し、AIとのVibe（ノリ）、つまり効果的な指示を出すスキルが最も重要になります。