💙
AIでゆっくり学ぶReact② AIの出力したコードを読んで理解する
この記事ではランディングページ制作を例にしてReactを学びつつ、同時にAIツールの使い方も学んでいきます。なお、本記事は連載の第2回で、今後続編を追加していく予定です。前回の記事ははこちら。
ゆっくり着実に学ぶ
連載第1回でも触れましたが、世間一般のAIコーディングでは「これで10倍速！」のように速さを追い求めるノウハウが多く紹介されています。
しかし、この連載では、あえてゆっくりと着実に学ぶことを目指します。なぜなら、急ぐことだけが重要なのではなく、着実に技術を習得することで、できることが増え、自身の成長を実感する喜びも得られると考えるからです。
AIを使ってソースコードを「読む」
AIコーディングツールというと、AIを使ってソースコードを「書く」ことに注目が集まりがちですが、ソースコードを「読む」場面でもAIは力を発揮します。
Claudeの開発元であるAnthropic社による動画Claude Code best practicesの中でも「コードベースと、その履歴を探索する(Explore codebase and history)」ことが紹介されています。
6分25秒付近のスクリーンショット(一部加工)
前回の記事ではVibe Codingに触れましたが、原義どおりのVibe Codingをやっていると、ソースコードを見ないので、一度道を外れると収集がつかなくなりやすいです。
AIコーディングで道を外れることを防ぐには、ソースコードを理解するための基礎知識が必要となってきます。
幸いなことに、AIの力を借りればソースコードを読み解くのも楽になるので、AIが書いたソースコードをAIの力を使って読むというのは、基礎知識をつけるための有用なトレーニング方法です。
Vercel V0で読み解き対象のソースコードを生成
さて、ソースコードを読み解くためには当然ながらソースコードが必要です。本記事では数あるAIコーディングツールの中から、Vercel V0でソースコードを生成します。
V0を利用する理由は以下の通りです。
-
Next.jsの開発元であるVercelが提供している
- 本連載ではReactのフレームワークとしてNext.jsを使います。そのため品質のよいNext.jsソースコードを出力してくれるであろうV0を選びました。
-
GitHub連携で、すぐに開発可能なコードが出力される
- Geminiチャットアプリと違って、V0では完全なReactプロジェクトとしてのソースコードがすぐに入手可能
前回の記事と違ってGeminiチャットアプリを使わなかった理由は、Geminiチャットアプリは単一ファイルの中に部分的なソースコードだけを出力するからです。この形では完全なRectプロジェクトを構成するために追加でひと手間、ふた手間必要になります。
V0ではそんな手間はかからず、GitHub連携で簡単に進められます。これは動画で見たほうがわかりやすいでしょう。以下の動画は生成手順を早送りにしています。
上記動画の中でV0に入力した初期プロンプトはこちら。
プロンプト
Reactでプロフェッショナルな見た目のダークテーマを使った
ランディングページを作ってください。架空のAIサービスのプロモーションです。
2つ目のプロンプトはこちら。
プロンプト
料金セクションを追加してください
動画の最後の方でGitHub連携して、その後GitHubからgit cloneしたソースコードをVS Codeで開いています。
git cloneだけではnode_modules配下の依存パッケージがダウンロードされていないので、pnpm installが必要です。
ターミナル
pnpm install
あとはターミナルから以下のコマンドを入力してください。
ターミナル
pnpm dev
V0で見たのと同じランディングページがローカルのNext.jsで立ち上がります。
連携したGitHubレポジトリはこちら。
AIを使ってソースコードを読み解く: 全体の構成
ソースコードを読み解くには、V0の画面上よりもIDEの方が便利です。私はこの記事を書く際にIDEとしてVS Codeを、そして読み解きをサポートしてくれるAIコーディングツールとしてGemini CLIを使っています。Gemini CLIを選んだのは無料利用枠が十分確保されているからです。
この記事を読んでいるあなたは、好きなツールを使ってください。
それではGemini CLIを立ち上げます。gemini-2.5-proではなくgemini-2.5-flashを指定しているのは、その方がレスポンスが早く動作が軽快だからです。
ターミナル
gemini --model gemini-2.5-flash
まずは初めて見るプロジェクトなので、このように聞いてみます。
プロンプト
このプロジェクトのディレクトリ構成について説明してください。
AIからの出力全体
AIからの出力
このプロジェクトのディレクトリ構成は、Next.jsアプリケーションの典型的な構造に従っています。
* `app/`: Next.jsのApp Routerのルートディレクトリです。アプリケーションの主要なページ（page.tsx）とレイア
ウト（layout.tsx）、グローバルスタイル（globals.css）が配置されています。
* `components/`: アプリケーション全体で再利用されるUIコンポーネントが格納されています。例えば、header.tsx、footer.tsx、hero.tsxなどがあります。
* `components/ui/`: より汎用的なUI要素（例: button.tsx, card.tsx）が配置されているようです。
* `lib/`: ユーティリティ関数やヘルパー関数など、ビジネスロジックや共通処理をまとめたファイル（例:
utils.ts）が格納されています。
* `public/`: 静的ファイル（画像、アイコン、ファビコンなど）が配置されており、直接URLでアクセス可能です。
* `styles/`: グローバルなスタイルシートが格納されています。
* `.next/`: Next.jsがビルド時に生成するファイルやキャッシュが格納されるディレクトリです。
* `node_modules/`: pnpmによってインストールされたプロジェクトの依存関係（ライブラリ）が格納されます。
* その他のファイル:
* package.json, pnpm-lock.yaml, pnpm-workspace.yaml:
プロジェクトの依存関係とワークスペースの設定ファイルです。
* next.config.mjs: Next.jsの設定ファイルです。
* tsconfig.json: TypeScriptの設定ファイルです。
* postcss.config.mjs, tailwind.config.ts: CSS関連の設定ファイルです。
* README.md: プロジェクトの説明ファイルです。
* .gitignore: Gitが追跡しないファイルを指定するファイルです。
かなり長い答えが返ってきましたが、あとでコツとして紹介するとおり「AIが出力する文章を全てつぶさに読む必要はありません」ので、以下の部分にだけ注目してください。
AIからの出力(抜粋)
* `app/`: Next.jsのApp Routerのルートディレクトリです。
アプリケーションの主要なページ（page.tsx）とレイアウト（layout.tsx）、
グローバルスタイル（globals.css）が配置されています。
* `components/`: アプリケーション全体で再利用されるUIコンポーネントが格納
されています。例えば、header.tsx、footer.tsx、hero.tsxなどがあります。
次に、技術スタックについて聞いてみましょう。
プロンプト
このプロジェクトで使っている技術スタックについて教えて下さい
特に指定しない限り、現在のV0ではこの技術スタックを使うことが多いようです。
AIからの出力
* フレームワーク: Next.js (React)
* 言語: TypeScript
* パッケージマネージャー: pnpm
* スタイリング: PostCSS, Tailwind CSS (推測)
* UIコンポーネント: shadcn/ui (推測、components.jsonから)
V0の提供元であるVercel社はReactのフレームワーク、Next.jsの開発元でもあるので、当然Next.js、Reactを使っています。そして、今の時代のReact開発はTypeScriptを使うことがデファクト・スタンダードと言えます。
また、近年見た目に美しいコンポーネントを手軽に作るにはshadcn/uiを使う人が増えており、そのshadcn/uiはTailwindに依存しています。Next.jsでTailWindを動かすにはPostCSSを使うのが一般的です。
この先はさらにファイルごとにより深く掘り下げていきますが、その前にAIを使ってソースコードを読み解くときのコツを紹介します。
AIでソースコードを読むコツ
まず最初に、AIが出力する文章を全てつぶさに読む必要はありません。AIは大量の文章を生成するのが得意なので、全部を読んでいると、自分がとても疲弊してしまいます。
次に、似たような質問を何度も投げかけて構いません。AIは疲れることなく答えてくれます。そして人間は一度目の説明では理解できないこと、誤読や見逃しがよくあるので、繰り返しAIに効いているうちに、同じような説明が返ってきたとしても、だんだん理解が深まることがあります。
さらに、似たような質問に対し、同一の用語が何度もでてきたら、それが重要な概念かもしれません。AIが生成した文章に限りませんが、何度か読んでみて文意をつかみかねる場合は、知らない単語や用語の意味を調べるとわかることがあります。
app/page.tsxを読み解く
先ほどAIからアプリケーションの主要なページと書かれていたapp/page.tsxを見ていきましょう。
AIからの出力(再掲)
* `app/`: Next.jsのApp Routerのルートディレクトリです。
アプリケーションの主要なページ（page.tsx）とレイアウト（layout.tsx）、
グローバルスタイル（globals.css）が配置されています。
中身は非常にシンプルです。
AIに何を質問していいかわからない時は、これくらい大雑把な質問で構いません。対話のきっかけと考えましょう。
プロンプト
@app/page.tsx について説明してください
AIからの出力
AIからの出力
app/page.tsx は Next.js アプリケーションのメインページコンポーネントです。
このファイルは以下の役割を担っています。
- @/components ディレクトリから Header, Hero, Features, Models, Pricing, Testimonials, CTA, Footer
といった複数のUIコンポーネントをインポートしています。
- Page 関数がデフォルトエクスポートされており、Next.js のページとして機能します。
- ページは min-h-screen と bg-background のスタイルを持つ div で囲まれています。
- ページの上部に Header コンポーネントをレンダリングします。
- main セクション内では、Hero, Features, Models, Pricing, Testimonials, CTA の各コンポーネントを順番にレンダリング
しており、これらがランディングページの主要なコンテンツセクションを構成しています。
- ページの下部には Footer コンポーネントをレンダリングします。
app/page.tsxはReactの主要機能のひとつである、コンポーネント分割を取り入れています。
それではここから、各コンポーネントについて見ていきます。
header.tsxを読み解く
こちらも手始めに、このように聞いてみましょう。
プロンプト
@components/header.tsx について説明してください
AIからの出力(抜粋)
- ナビゲーション:
- nav 要素内に複数の Link コンポーネントが含まれており、ページの異なるセクション
（例: #features, #models,#pricing, #docs）へのアンカーリンクを提供します。
これらのリンクは、小さい画面では非表示になり、中程度の画面サイズ以上で表示されます (hidden md:flex)。
AIからの出力(全体)
AIからの出力
✦ components/header.tsx ファイルは、ページのヘッダー（ナビゲーションバー）を定義する Header コンポーネントです。
このコンポーネントの主な機能は以下の通りです。
- インポート:
- Next.js のルーティングのための next/link から Link コンポーネントをインポートしています。
- カスタムUIボタンコンポーネントである @/components/ui/button から Button をインポートしています。
- アイコンライブラリ lucide-react から Sparkles アイコンをインポートしています。
- 構造:
- header HTML要素を返します。この要素は、ページ上部に固定され、背景のぼかし効果や境界線などのスタイルが適用さ
れています。
- ヘッダー内部には、ロゴ、ナビゲーションリンク、およびアクションボタンを配置するためのコンテナ div
があります。
- ロゴ:
- Link コンポーネントとして実装されており、Sparkles
アイコンと「NeuralAI」というテキストが表示されます。クリックするとホームページ (/) に遷移します。
- ナビゲーション:
- nav 要素内に複数の Link コンポーネントが含まれており、ページの異なるセクション（例: #features, #models,
#pricing, #docs）へのアンカーリンクを提供します。これらのリンクは、小さい画面では非表示になり、中程度の画面
サイズ以上で表示されます (hidden md:flex)。
- アクションボタン:
- 「ログイン」ボタン（ghost スタイルで、小さい画面では非表示）と、「無料で始める」ボタン（primary
スタイル）の2つの Button コンポーネントが含まれています。
要約すると、この Header コンポーネントは、ロゴ、ナビゲーション、および行動を促すボタンを備えたレスポンシブなトッ
プナビゲーションバーを提供し、Next.js の Link とカスタムUIコンポーネントを活用しています。
Next.jsでは静的なリンクは基本的に<Link>コンポーネントを使います。今回は同一ページ内へのリンクでしたが、別ページへのリンクも<Link>コンポーネントを使います。
ところで、画面をスクロールしてみると、ヘッダーがずっと画面上部に残ります。
これはどのように実現されているのでしょうか？
プロンプト
@components/header.tsxがstickyな動作をするようです。これはどのように実現されていますか？
AIからの出力
✦ @components/header.tsx のヘッダーが sticky な動作をするのは、主に以下の CSS クラスによって実現されています。
1 <header className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-xl">
- `fixed`: このクラスは CSS の position: fixed; に対応します。これにより、ヘッダーはビューポート（表示領域）に対し
て固定され、ページをスクロールしても常に同じ位置に留まります。
- `top-0`, `left-0`, `right-0`: これらのクラスは、ヘッダーをビューポートの最上部 (top: 0;)、左端 (left: 0;)、右端
(right: 0;) に配置し、全幅に広がるようにします。
- `z-50`: このクラスは z-index: 50;
に対応し、ヘッダーが他のページコンテンツの上に表示されるように、高いスタック順序を設定しています。
これらのスタイルが組み合わさることで、ヘッダーはスクロールしても画面上部に固定される「sticky」な動作を実現しています。
画面をスクロールしても丈夫に固定されたヘッダーを実現するには、CSSpositionプロパティのstickyやabsoluteを使います。
hero.tsxを読み解く
プロンプト
@components/hero.tsx について説明してください
AIからの出力
AIからの出力
✦ components/hero.tsx ファイルは、ランディングページの主要な「ヒーロー」セクションを定義する Hero
コンポーネントです。このセクションは、ユーザーの注意を引き、製品やサービスの核心を伝えることを目的としています。
このコンポーネントの主な機能は以下の通りです。
- インポート:
- インタラクティブな要素のための @/components/ui/button から Button コンポーネントをインポートしています。
- 視覚的な手がかりとして lucide-react から ArrowRight と Play アイコンをインポートしています。
- 構造:
- section HTML要素を返します。この要素には、パディングと overflow-hidden のスタイルが適用されています。
- 背景効果: 絶対位置指定された div が放射状のグラデーション背景効果を作成し、視覚的な魅力を加えています。
- コンテンツコンテナ: container relative mx-auto px-4 クラスを持つ div
がコンテンツを中央に配置し、水平方向のパディングを提供します。
- 導入バッジ:
小さなアニメーション円と「AIパワードプラットフォーム」というテキストを表示するインラインフレックス div
が、小さな導入バッジとして機能します。
- メイン見出し: h1 要素がメインの見出し「次世代のAIでビジネスを加速」を提示し、「ビジネスを加速」の部分は
text-accent で強調されています。
- 説明段落: p 要素がプラットフォームの提供内容に関するより詳細な説明を提供します。
- 行動喚起ボタン: 2つの Button コンポーネントを含む div があります。
- 「今すぐ始める」ボタンは ArrowRight アイコン付きで、プライマリボタンとしてスタイル設定されています。
- 「デモを見る」ボタンは Play アイコン付きで、アウトラインボタンとしてスタイル設定されています。
- 機能ハイライト:
「クレジットカード不要」と「無料トライアル」という2つの小さな機能ハイライトを、それぞれチェックマークの SVG
アイコン付きで表示する div があります。
- 信頼されている企業セクション: メインのヒーローコンテンツの下にある別の div
は、「世界のリーディングカンパニーから信頼されています」というメッセージを示しています。その後、いくつかのプ
レースホルダーの会社名（TechCorp、InnovateLabs など）が、不透明度を下げてグレースケール効果を適用してリスト
されており、これらがパートナーのロゴまたは名前であることを示唆しています。
要約すると、Hero コンポーネントは、AIプラットフォームを紹介し、その利点を強調し、行動喚起を通じてユーザーのインタ
ラクションを促すように設計された、視覚的に魅力的で情報豊富なセクションです。
<Hero>コンポーネントの各要素は水平方向にセンタリングされていますが、CSSのセンタリングは様々なテクニックが合って迷いやすい部分です。各テクニックがどのように働くか調べてみます。
プロンプト
components/hero.tsx は水平方向にセンタリングされていますが、
これはどのように実現されていますか？
AIからの出力
AIからの出力
✦ @components/hero.tsx のコンテンツが水平方向にセンタリングされているのは、複数の CSS
クラスの組み合わせによって実現されています。
主なセンタリングのメカニズムは以下の通りです。
1. メインコンテンツのラッパー (`div` with `className="container relative mx-auto px-4"`):
* `container`:
このクラスは、コンテンツの最大幅を設定し、左右にパディングを追加することで、コンテンツ領域を制限します。
* `mx-auto`: このクラスは、CSS の margin-left: auto; と margin-right: auto; に相当し、この div
自体を親要素内で水平方向に中央揃えします。
2. ヒーローセクションのテキストとボタンのブロック (`div` with `className="mx-auto max-w-4xl text-center"`):
* `mx-auto`: この div 自体を、その親要素（上記の container クラスを持つ div）内で水平方向に中央揃えします。
* `max-w-4xl`: このブロックの最大幅を制限します。mx-auto
が機能するためには、要素に明確な幅（または最大幅）が必要です。
* `text-center`: このクラスは、この div の内部にあるインラインレベルのコンテンツ（テキスト、画像、インラインブ
ロック要素など）を水平方向に中央揃えします。これにより、見出し、説明文、バッジなどが中央に配置されます。
3. ボタンのコンテナ (`div` with `className="flex flex-col items-center justify-center gap-4 sm:flex-row"`):
* `justify-center`: このクラスは、Flexbox コンテナ内のアイテム（この場合は「今すぐ始める」と「デモを見る」ボタ
ン）を主軸（水平方向）に沿って中央揃えします。
4. 機能ハイライトのコンテナ (`div` with `className="flex items-center justify-center gap-8 text-sm
text-muted-foreground"`):
* `justify-center`: 上記と同様に、Flexbox
コンテナ内のアイテム（「クレジットカード不要」と「無料トライアル」）を水平方向に中央揃えします。
5. 「信頼されている企業」セクション (`p` タグと `div` タグ):
* 「世界のリーディングカンパニーから信頼されています」というテキストを持つ p タグには text-center
が適用されており、テキストが中央揃えされます。
* 企業ロゴの div (className="flex flex-wrap items-center justify-center gap-12 opacity-50 grayscale") にも
justify-center が適用されており、ロゴが水平方向に中央揃えされます。
これらのクラスが連携することで、Hero
コンポーネント内のコンテンツ全体が効果的に水平方向にセンタリングされています。
文章だけだと分かりづらいので動画にしてみました。
features.tsxを読み解く
プロンプト
@components/features.tsx について説明してください
AIからの出力(全体)
AIからの出力
features.tsxコンポーネントは、製品やサービスの主要な特徴をリスト形式で表示するセクションをレンダリングします。
主な機能は以下の通りです。
- id="features" を持つセクションとして、背景色が設定されています。
- 中央揃えのタイトル「すべてを備えたプラットフォーム」と説明文「AIアプリケーション構築に必要なすべてのツールとインフラストラクチャ
を提供」が表示されます。
- 以下の4つの特徴をグリッド形式で表示します。
- 高度な推論能力: Brainアイコン付き。
- 超高速処理: Zapアイコン付き。
- エンタープライズセキュリティ: Shieldアイコン付き。
- 開発者フレンドリー: Codeアイコン付き。
- 各特徴は、アイコン、タイトル、説明文で構成され、ホバー時に視覚的なフィードバック（ボーダーとシャドウの変化）があります。
このコンポーネントは、製品の主要な利点を簡潔かつ魅力的に紹介するために使用されます
ソースコード冒頭にあるconst features = [...という記述が気になるので、AIに聞いてみましょう。
プロンプト
@components/features.tsxにてfeatures変数がどのようにつかわれているか、
これはReactでよく見るテクニックなのか教えて下さい
AIからの出力(抜粋)
Reactで非常によく見られるテクニックです。
FeaturesコンポーネントのJSX内で、このfeatures配列に対して
.map()メソッドが使用されています。
AIからの出力(全体)
AIからの出力
✦ components/features.tsxにおけるfeatures変数の使われ方は、Reactで非常によく見られるテクニックです。
`features`変数の使われ方:
1. featuresは、表示したい各特徴のデータ（アイコン、タイトル、説明）を保持するJavaScriptのオブジェクトの配列として定義されています。
2. FeaturesコンポーネントのJSX内で、このfeatures配列に対して.map()メソッドが使用されています。
3. .map()は配列の各要素（ここでは各特徴オブジェクト）を反復処理し、それぞれの特徴に対応するJSX要素（div要素）を生成しています。
4. 特に注目すべきは、const Icon = feature.icon;という行です。これにより、feature.iconに格納されているReactコンポーネント（Brain,
Zapなど）が動的に取得され、<Icon className="h-6 w-6" />としてレンダリングされています。
これはReactでよく見るテクニックか？
はい、これはReact開発において非常に一般的で推奨されるテクニックです。
理由としては以下の点が挙げられます。
* データの分離 (Separation of Concerns):
表示ロジック（JSX）とデータ（features配列）が明確に分離されています。これにより、コードが読みやすく、管理しやすくなります。
* 再利用性 (Reusability):
同じ構造を持つ複数のUI要素（この場合は各特徴カード）を、単一のテンプレート（.map()内のJSX）で効率的にレンダリングできます。
* 保守性 (Maintainability): 新しい特徴を追加したり、既存の特徴を変更したりする場合、features配列のデータを更新するだけで済み、JSXの
構造を直接変更する必要がありません。
* 動的なレンダリング (Dynamic Rendering):
データに基づいてUI要素を動的に生成するため、要素の数が変動する場合にも柔軟に対応できます。
* コンポーネント指向 (Component-Oriented):
アイコン自体もReactコンポーネントとして扱われ、データの一部として渡されることで、よりコンポーネント指向な設計が実現されています。
このように、データ駆動でUIを構築するパターンは、Reactだけでなく、多くのモダンなフロントエンドフレームワークで採用されている基本的
なアプローチです。
JavaScript配列とmap()を使ったレンダリングに関してはこちら。
models.tsxを読み解く
プロンプト
@components/models.tsx について説明してください
AIからの出力
AIからの出力
✦ models.tsxコンポーネントは、提供されるAIモデルのラインナップとその特徴を紹介するセクションをレンダリングします。
主な機能は以下の通りです。
- id="models" を持つセクションとして、モデル情報を表示します。
- 中央揃えのタイトル「フラッグシップモデル」と説明文「2025年6月の最新知識を持つ、様々な実世界タスクに対応する強力な汎用モデル」が表
示されます。
- 以下の3つのAIモデルをカード形式でグリッド表示します。
- Neural-4.1: 複雑なタスクに最適。
- Neural-4.1 Mini: スピードとインテリジェンスのバランス。
- Neural-4.1 Nano: 低レイテンシータスクに最適。
- 各モデルはCardコンポーネント（@/components/ui/cardからインポート）を使用してレンダリングされ、以下の情報を含みます。
- CardHeaderにはモデル名（CardTitle）と説明（CardDescription）が表示されます。
- CardContentには、そのモデルが持つ特徴のリストがCheckアイコン付きで表示されます。
- 各カードはホバー時に視覚的なフィードバック（ボーダーとシャドウの変化）があります。
このコンポーネントは、製品が提供する異なるAIモデルの能力と用途を明確に示し、ユーザーが自身のニーズに合ったモデルを選択するのに役立
つ情報を提供します。
こちらはあまり目新しいものはないようです。models配列とmap()を使ったレンダリングもfeatures.tsxと同じです。
pricing.tsxを読み解く
プロンプト
@components/pricing.tsx について説明してください
AIからの出力
AIからの出力
✦ pricing.tsxコンポーネントは、製品やサービスの料金プランを提示するセクションをレンダリングします。
主な機能は以下の通りです。
- id="pricing" を持つセクションとして、背景色が設定されています。
- 中央揃えのタイトル「シンプルで透明性の高い料金プラン」と説明文「あなたのニーズに合わせた柔軟なプランをご用意しています」が表示さ
れます。
- 以下の3つの料金プランをカード形式でグリッド表示します。
- スターター: 個人利用や小規模プロジェクト向け。
- プロフェッショナル: 成長中のチームとビジネス向け（「人気プラン」として強調表示）。
- エンタープライズ: 大規模な組織向けのカスタムソリューション。
- 各プランはCardコンポーネント（@/components/ui/cardからインポート）を使用してレンダリングされ、以下の情報を含みます。
- プラン名、価格、期間、説明。
- Checkアイコン付きの機能リスト。
- プランに応じたCTA（Call To Action）ボタン（例: 「無料で始める」、「今すぐ始める」、「お問い合わせ」）。
- 「プロフェッショナル」プランは「人気プラン」として特別なスタイルで強調表示されます。
- セクションの最後には、「すべてのプランに14日間の無料トライアルが含まれています。クレジットカード不要。」という補足情報が表示され
ます。
このコンポーネントは、ユーザーが自身のニーズに合った料金プランを比較検討し、選択できるようにするための明確で構造化された情報を提供します。
こちらのplans = [...]配列とmap()を使ったレンダリングはfeatures.tsxと同じです、
また<Card>コンポーネントは内部がネストされた形になっています。
<Card>
<div>...</div>
<div>...</div>
<ul>...</ul>
</Card>
こちらの疑問については、以下のui/card.tsxのところで解決しましょう。
ui/card.tsxを読み解く
プロンプト
@components/ui/card.tsx について説明してください
AIからの出力
AIからの出力
✦ components/ui/card.tsxファイルは、UIにおける「カード」コンポーネントとそのサブコンポーネントを定義しています。これらは、情報をグルー
プ化して表示するための汎用的なコンテナとして機能します。
主な機能と構成要素は以下の通りです。
* `Card`:
* 基本的なカードのコンテナです。
* bg-card, text-card-foreground, flex flex-col, gap-6, rounded-xl, border, py-6, shadow-smといったTailwind CSSクラスが適用され
、背景色、テキスト色、レイアウト、角の丸み、ボーダー、パディング、シャドウなどの基本的なスタイルを提供します。
* data-slot="card"属性を持ち、CSSセレクタやテストでの識別を容易にします。
* `CardHeader`:
* カードのヘッダー部分を定義します。
* gridレイアウトを使用し、タイトルや説明、アクションボタンなどを配置するための構造を提供します。
* @container/card-headerやhas-data-[slot=card-action]などのクラスは、内部要素の存在に応じてレイアウトを調整するための高度なCSS
機能を示唆しています。
* `CardTitle`:
* カードのタイトル部分を定義します。
* leading-none, font-semiboldといったクラスで、タイトルのフォントスタイルを設定します。
* `CardDescription`:
* カードの短い説明文やサブタイトル部分を定義します。
* text-muted-foreground, text-smといったクラスで、説明文のスタイルを設定します。
* `CardAction`:
* カードヘッダー内に配置されるアクション要素（ボタンなど）のためのコンテナです。
* グリッドレイアウト内で特定の位置（右上に配置されることが多い）に要素を配置するためのクラスが適用されています。
* `CardContent`:
* カードの主要なコンテンツ部分を定義します。
* px-6で左右のパディングを設定します。
* `CardFooter`:
* カードのフッター部分を定義します。
* flex items-center, px-6といったクラスで、フッターのレイアウトとパディングを設定します。
これらのコンポーネントは、cnユーティリティ関数（@/lib/utilsからインポート）を使用して、デフォルトのスタイルとclassNameプロップで渡
されたカスタムスタイルを結合します。これにより、柔軟なスタイリングと再利用可能なUIパーツの構築が可能になっています。
このファイルは、Cardコンポーネントを構成する複数のサブコンポーネントを提供することで、開発者が一貫性のあるデザインと構造を持つカー
ドUIを簡単に構築できるように設計されています。
Cardはその内部でCardHeaderやCardTitleなどのサブコンポーネントに分かれています。これもReactのコンポーネント機能を活かした書き方です。
先ほどpricing.tsxでは、親コンポーネントから、子コンポーネントである<Card>...</Card>の内部にネストしたJSXを渡していました。
<Card>
<div>...</div>
<div>...</div>
<ul>...</ul>
</Card>
こういったネストでは通常childrenという名前のpropsを使います。
しかし、<Card>コンポーネントにはchildrenという名前のpropsはありません。どういうことでしょうか？
プロンプト
@components/ui/card.tsx のCardコンポーネントはchildrenというpropsを持たないのに
@components/pricing.tsxはネストしたJSXを渡しています。これはどうしてですか？
AIからの出力(抜粋)
Reactでは、コンポーネントの開始タグと終了タグの間に記述された内容は、
自動的にそのコンポーネントのprops.childrenとして渡されます。
これは特別なプロパティであり、明示的にchildrenという名前でpropsを受け取らなくても、
コンポーネント内で利用可能です。
スプレッド構文 (`{...props}`):
この...propsの中には、pricing.tsxから渡されたネストされたJSXである
childrenプロパティも含まれています。
AIからの出力
AIからの出力(全体)
✦ ご質問の通り、Cardコンポーネントの関数シグネチャにはchildrenというpropsが明示的に定義されていませんが、pricing.tsxでネストされたJSX
が渡されているのは、Reactのchildrenプロパティの仕組みとTypeScriptの型定義によるものです。
以下にその理由を説明します。
1. Reactの`children`プロパティ:
Reactでは、コンポーネントの開始タグと終了タグの間に記述された内容は、自動的にそのコンポーネントのprops.childrenとして渡されま
す。これは特別なプロパティであり、明示的にchildrenという名前でpropsを受け取らなくても、コンポーネント内で利用可能です。
2. `React.ComponentProps<'div'>`による型定義:
Cardコンポーネントの型定義はfunction Card({ className, ...props }: React.ComponentProps<'div'>)となっています。
React.ComponentProps<'div'>は、標準のHTML div要素が受け取るすべてのプロパティの型を意味します。これには、onClick、style、idな
ど、さまざまなHTML属性が含まれますが、`children`プロパティも含まれています。
したがって、Cardコンポーネントはdiv要素のすべてのプロパティを受け取るように型付けされており、その中にchildrenも含まれているこ
とになります。
3. スプレッド構文 (`{...props}`):
Cardコンポーネントの内部では、受け取ったpropsからclassNameを分割代入し、残りのすべてのプロパティを...propsとして収集しています。
そして、この...propsを内部のdiv要素に{...props}としてスプレッドしています。
この...propsの中には、pricing.tsxから渡されたネストされたJSXであるchildrenプロパティも含まれています。結果として、このchildren
プロパティが内部のdiv要素に渡され、そのdiv要素がchildrenの内容をレンダリングします。
まとめ:
Cardコンポーネントは、React.ComponentProps<'div'>という型定義を通じて暗黙的にchildrenプロパティを受け取っています。そして、そのchi
ldrenプロパティは...propsとして内部のdiv要素に渡され、最終的にレンダリングされるため、pricing.tsxのようなネストしたJSXを渡すことが
できるのです。これはReactで非常に一般的なパターンです。
つまり、明示的に記載していないだけでchildrenというpropsは利用されます。
testimonials.tsxを読み解く
プロンプト
@components/testimonials.tsx について説明してください
AIからの出力
AIからの出力
✦ testimonials.tsxコンポーネントは、顧客からの推薦文（お客様の声）を表示するセクションをレンダリングします。
主な機能は以下の通りです。
- 背景色が設定されたセクションです。
- 中央揃えのタイトル「導入企業の声」と説明文「世界中の企業がNeuralAIで革新を実現しています」が表示されます。
- 以下の3つの推薦文をカード形式でグリッド表示します。
- TechCorp: 佐藤健太氏（CTO）からのコメント。
- InnovateLabs: 田中美咲氏（プロダクトマネージャー）からのコメント。
- DataSync: 鈴木大輔氏（AIエンジニア）からのコメント。
- 各推薦文はCardコンポーネント（@/components/ui/cardからインポート）を使用してレンダリングされ、以下の情報を含みます。
- 評価を示す星のアイコン（Starコンポーネントを使用し、testimonial.ratingの数だけ表示）。
- 推薦文の内容。
- 推薦者の名前、役職、所属企業。
このコンポーネントは、製品やサービスの信頼性と価値を潜在的な顧客に伝えるために、実際のユーザーからの肯定的なフィードバックを提示し
ます。
cta.tsxを読み解く
CTAはCall-to-Actionの略です。「無料で始める」「営業に相談する」というボタンでユーザーの行動を促していることから、そのように呼ばれます。
プロンプト
@components/cta.tsx について説明してください
AIからの出力
AIからの出力
✦ cta.tsxコンポーネントは、ユーザーに行動を促すためのCall To Action (CTA) セクションをレンダリングします。
主な機能は以下の通りです。
- セクション全体が、rounded-3xlの角丸とborderを持つコンテナで囲まれています。
- 背景にはbg-gradient-to-brとradial-gradientを組み合わせたグラデーション効果があります。
- 中央揃えのタイトル「今すぐAIの力をビジネスに取り入れよう」が表示されます。
- 説明文として「数分で始められます。クレジットカード不要、無料トライアルで全機能をお試しください。」が表示されます。
- 以下の2つの行動喚起ボタンがあります。
- 「無料で始める」（プライマリボタン、ArrowRightアイコン付き）
- 「営業に相談する」（アウトラインボタン）
このコンポーネントは、訪問者に製品やサービスの利用を開始させるための明確な次のステップを提示し、コンバージョンを促進することを目的
としています。
footer.tsxを読み解く
プロンプト
@components/footer.tsx について説明してください
AIからの出力
AIからの出力
✦ footer.tsxコンポーネントは、ウェブサイトのフッター部分をレンダリングします。
主な機能は以下の通りです。
- 上部にボーダーを持つフッターセクションです。
- フッターは複数のカラムに分割されており、以下の情報が含まれます。
- ブランド情報:
- ロゴ（Sparklesアイコンと「NeuralAI」のテキスト）。
- 製品の簡単な説明文。
- ナビゲーションリンク:
- 「プロダクト」カテゴリ（機能、モデル、料金、API）。
- 「企業情報」カテゴリ（会社概要、ブログ、採用情報、お問い合わせ）。
- 「リソース」カテゴリ（ドキュメント、ガイド、サポート、ステータス）。
- 「法務」カテゴリ（プライバシー、利用規約、セキュリティ、Cookie設定）。
これらのリンクはfooterLinksオブジェクトに定義されており、Linkコンポーネント（next/linkからインポート）を使用してレンダリン
グされます。
- フッターの最下部には、著作権表示「© 2025 NeuralAI. All rights reserved.」が表示されます。
このコンポーネントは、ユーザーがウェブサイトのさまざまなセクションに簡単にアクセスできるようにナビゲーションを提供し、ブランド情報
や法的な情報を表示する役割を担っています。
app/layout.tsxを読み解く
ここまではapp/page.tsxから利用される各コンポーネントについて見てきました。次はページレイアウトを担うlayout.tsxです。
プロンプト
@app/layout.tsx について説明してください
AIからの出力
AIからの出力
ページに共通するUI構造（<html>タグや<body>タグなど）をラップするために使用されます。
主な機能と構成要素は以下の通りです。
1. メタデータ (`metadata`定数):
* nextからMetadata型をインポートし、metadata定数としてエクスポートしています。
* これにより、ページのタイトル、説明、ジェネレーター、アイコンなどのSEO関連のメタデータが設定されます。
* 特にアイコンに関しては、ライトテーマ用、ダークテーマ用、SVG形式、Apple Touch
Iconなど、複数のバリエーションが定義されています。
2. フォントのインポート:
* next/font/googleからGeistとGeist_Monoフォントをインポートしています。これらは、アプリケーション全体で使用されるカスタムフォン
トです。
* ただし、現在のRootLayoutコンポーネントのbodyタグのclassNameでは、font-sans
antialiasedが適用されており、インポートされた_geistや_geistMonoは直接使用されていません。これは、Tailwind CSSの設定でfont-san
sがこれらのフォントにマッピングされているか、あるいは将来的な使用のためにインポートされている可能性があります。
3. `RootLayout`コンポーネント:
* childrenプロパティを受け取るReactコンポーネントです。childrenは、このレイアウトがラップするすべてのページコンテンツを表します
。
* <html>タグと<body>タグを定義し、lang="en"で言語を設定しています。
* <body>タグには、font-sans antialiasedというCSSクラスが適用されています。
* {children}を<body>内に配置することで、各ページのコンテンツがこのレイアウト内に挿入されます。
* @vercel/analytics/nextからインポートされた<Analytics />コンポーネントが<body>の最後に配置されており、Vercel
Analyticsによるウェブサイトのトラッキングを有効にしています。
このファイルは、アプリケーションの基本的なHTML構造、SEO設定、グローバルなスタイル、および分析トラッキングを一元的に管理する役割を
担っています。
app/layout.tsxについてはこちらに解説があります。
app/global.cssを読み解く
ここまでは.tsxファイルについて見てきました。次はCSSです。
プロンプト
@app/global.css について説明してください
名前の通り、これはグローバルなCSSです。
AIからの出力(抜粋)
app/globals.cssファイルは、Next.jsアプリケーション全体に適用されるグローバルな
スタイルシートです。
AIからの出力(全体)
AIからの出力
✦ app/globals.cssファイルは、Next.jsアプリケーション全体に適用されるグローバルなスタイルシートです。主に以下の要素で構成されています。
1. Tailwind CSSのインポート:
* @import "tailwindcss";によって、Tailwind CSSのユーティリティクラスがプロジェクトにインポートされます。これにより、HTML要素に
直接クラスを適用することでスタイリングが可能になります。
* @import "tw-animate-css";は、おそらくTailwind CSSと連携するアニメーションライブラリをインポートしていると考えられます。
2. カスタムCSS変数 (CSS Custom Properties):
* :rootセレクタ内で、アプリケーション全体で使用される多くのCSS変数が定義されています。これらは主に色（--background,
--foreground, --primary, --accentなど）や角の丸み（--radius）に関連しています。
* 色の値にはoklch()関数が使用されており、これはOKLCH色空間で色を定義していることを示します。これは、より予測可能で一貫性のある
色管理を可能にします。
3. ダークモードのサポート:
* .darkクラス内で、:rootで定義されたCSS変数と同じ名前の変数が再定義されています。これにより、HTML要素に.darkクラスが適用された
場合（通常はダークモードが有効な場合）、これらの変数の値が上書きされ、ダークテーマの配色が適用されます。
* @custom-variant dark (&:is(.dark *));は、Tailwind CSSのカスタムバリアントを定義している可能性があり、.darkクラスが親要素に存
在する場合に特定のスタイルを適用するためのものです。
4. `@theme inline`:
* これは、おそらくTailwind
CSSのカスタムテーマ設定の一部であり、CSS変数とTailwindのユーティリティクラスをマッピングしていると考えられます。
* --font-sansや--font-monoなどのフォント変数、および--color-backgroundなどの色変数が定義されており、これらが--backgroundなどのC
SS変数に紐付けられています。
* --radius-sm, --radius-mdなどのバリアントも定義されています。
5. `@layer base`:
* Tailwind CSSのbaseレイヤーにカスタムスタイルを追加しています。
* *セレクタに対して、デフォルトのボーダー色とアウトライン色を設定しています。
* bodyセレクタに対して、デフォルトの背景色とテキスト色を設定しています。これにより、アプリケーション全体の基本的な配色が確立さ
れます。
このファイルは、アプリケーションの視覚的な基盤を確立し、Tailwind
CSSの機能を最大限に活用して、一貫性のあるデザインシステムとダークモードのサポートを提供するために不可欠な役割を果たしています。
AIからの回答が長いので、いくつかの部分に分けて読み解いていきます。まずは先頭行の@import "tailwindcss"について。
AIからの出力(抜粋)
* @import "tailwindcss";によって、Tailwind CSSのユーティリティクラスがプロジェクトに
インポートされます。これにより、HTML要素に直接クラスを適用することでスタイリングが可能
になります。
どうやらこれは、Tailwindの特徴であるユーティリティクラスを利用するために必要なようです。
@custom-variant dark (&:is(.dark *));とは何でしょうか？
AIからの出力(抜粋)
@custom-variant dark (&:is(.dark *));は、Tailwind CSSのカスタムバリアントを定義している
可能性があり、.darkクラスが親要素に存在する場合に特定のスタイルを適用するためのものです。
.darkクラス使われていないようなので、AIに聞いてみます。
プロンプト
@app/globals.cssの中で`@custom-variant dark (&:is(.dark *));`は実際に使われていますか？
ダークモードとそれ以外のモードとの間で切り替える機能がないように思います。
AIからの出力
✦ @custom-variant dark (&:is(.dark *)); は、.dark
クラスが親要素に存在する場合にダークモードのスタイルを適用する CSS ルールです。
しかし、現在のコードベースの分析に基づくと、next-themes やカスタム JavaScript のような
.darkクラスを動的に追加または削除してダークモードを切り替えるメカニズムは実装されていません。
したがって、このカスタムバリアント内で定義されているダークモードのスタイルは、現在
アプリケーションで適用または利用されていません。
もしダークモードを有効にしたい場合は、<html> または <body> 要素に .dark
クラスを切り替えるメカニズムを実装する必要があります。
使われていないということなので、当該部分は消しましょう。
次はこちら。
AIからの出力(抜粋)
4. `@theme inline`:
* これは、おそらくTailwind
CSSのカスタムテーマ設定の一部であり、CSS変数とTailwindのユーティリティクラスをマッピングしていると考えられます。
* --font-sansや--font-monoなどのフォント変数、および--color-backgroundなどの色変数が定義されており、これらが--backgroundなどのC
SS変数に紐付けられています。
* --radius-sm, --radius-mdなどのバリアントも定義されています。
これはWebサイト全体のテーマ(Theme)を決めるための機能であり、「CSS変数とTailwindのユーティリティクラスをマッピングして」実現しています。
上記TailwindドキュメントのReferencing other variablesの部分に以下の説明があります。
When defining theme variables that reference other variables, use the
inlineoption
最後はこちら。
AIからの出力(抜粋)
5. `@layer base`:
* Tailwind CSSのbaseレイヤーにカスタムスタイルを追加しています。
* *セレクタに対して、デフォルトのボーダー色とアウトライン色を設定しています。
* bodyセレクタに対して、デフォルトの背景色とテキスト色を設定しています。
これにより、アプリケーション全体の基本的な配色が確立されます。
これはTailwindでいうこの機能を利用しています。
使われてなさそうなファイル
コードベースをよく見ていると、実は使われてなさそうなファイルがいくつかあります。それらを見てみましょう。
theme-provider.tsxは使われている？
プロンプト
@components/theme-provider.tsx について説明してください
AIからの出力
AIからの出力
✦ components/theme-provider.tsxファイルは、アプリケーションにテーマ機能（特にダークモード/ライトモードの切り替えなど）を提供するコンポ
ーネントです。
主な機能は以下の通りです。
* `next-themes`ライブラリの利用:
* next-themesというライブラリからThemeProvider（NextThemesProviderとしてエイリアス化）とThemeProviderPropsをインポートしていま
す。このライブラリは、Next.jsアプリケーションでテーマを簡単に管理するための一般的なソリューションです。
* `ThemeProvider`コンポーネント:
* このファイルでエクスポートされているThemeProviderコンポーネントは、NextThemesProviderをラップするシンプルなラッパーです。
* childrenプロパティとその他のThemeProviderPropsをNextThemesProviderにそのまま渡しています。
* `'use client'`ディレクティブ:
* ファイルの先頭にある'use client'ディレクティブは、このモジュールがクライアントサイドで実行されることを示しています。next-them
esライブラリはクライアントサイドのJavaScriptに依存するため、このディレクティブが必要です。
このコンポーネントを使用することで、アプリケーション全体でテーマの状態（例: light, dark,
system）を管理し、ユーザーの選択やシステム設定に基づいてUIの見た目を動的に変更できるようになります。
ThemeProviderコンポーネントはshadcn x Next.jsでよくあるパターンのようです。ところが本記事のレポジトリでは<ThemeProvider>という形でコンポーネント呼び出しは一切ありません。
プロンプト
`<ThemeProvider>`コンポーネントはどこからも呼び出されていないようです。
@components/theme-provider.tsxは本当に使われていますか？
AIからの出力
✦ ご指摘の通り、ThemeProviderコンポーネントは現在のところ、プロジェクト内の他のどのファイル
からもインポートも呼び出しもされていません。
したがって、@components/theme-provider.tsxファイルは存在しますが、その中で定義されている
ThemeProviderコンポーネントは現在使用されていません。
というわけで、このファイルは消してしまっても大丈夫です。
styles/globals.cssは使われている？
プロンプト
@styles/globals.cssと@app/globals.cssの中身はほとんど同じです。
どちらが使われていて、使われていないのはどちらですか？
また、使われているかどうかは、どうやってわかりますか？
AIからの出力
✦ app/globals.css が使用されています。styles/globals.css は使用されていません。
使用されているかどうかは、app/layout.tsx ファイルの内容を確認することでわかります。
app/layout.tsxの中に import './globals.css' という行があり、これは app ディレクトリ
内の globals.cssをインポートしていることを示しています。
というわけで、このファイルも消してしまっても大丈夫です。
まとめ
最後に、この記事で学んだことを振り返っておきましょう。
AIの使い方について学んだこと
-
AIを使ってソースコードを「読む」
- AIはソースコードを「書く」だけではなく「読む」場面でも力を発揮します。
-
AIを使ってソースコードを読み解くコツ
- AIが出力する文章を全てつぶさに読む必要はありません。
- 似たような質問を何度も投げかけて構いません。
- 同じ用語が何度もでてきたら、それは重要かも。
-
公式ドキュメントと照らし合わせる
- 照らし合わせる頻度が多すぎるとたいへんなので、後日時間のあるときにでも
-
AIは「使われていないコード」を出力することがある
- これは将来AIがDead Code Eliminationを自動でやってくれることに期待しましょう。
- それまでは人が見ていくしかなさそうです。
Next.js / Reactについて学んだこと
- コンポーネント分割
<Header>, <Hero>, <Features>, ... <Footer>-
<Card>...</Card>と内部JSXのネスティング
- JavaScript配列と
map関数によるテクニック - CSSによるレイアウトのテクニック、Tailwindの初歩的な使い方
「AIの使い方」も「Next.js / React」も繰り返し使っていくうちにだんだん覚えるようにしましょう。AIを使うと、非常に具体的な作例を出力できるので、楽をしながら何度も何度も練習を重ねることが出来ます。
前回の記事ははこちら。
Discussion