このチャプターでは、Webアプリケーションがどのように動いているのか、その全体像を掴みます。難しいコードは一切出てきません。まずは「地図」を手に入れましょう。
このコースでは、あなた自身がコードを書くのではなく、AIにコードを書かせてプロダクトをリリースすることがゴールです。そのためには、AIに正しく指示を出すための「概念」を理解する必要があります。
あなたがブラウザのアドレスバーにURLを入力してEnterを押すと、何が起きているでしょうか？
Webのすべてのやりとりは、この「リクエスト → レスポンス」の繰り返しです。ボタンを押したとき、フォームを送信したとき、画像が表示されるとき。すべてこの仕組みで動いています。
たとえるなら、レストランで注文票を渡して（リクエスト）、料理が出てくる（レスポンス）のと同じです。
Webアプリは大きく3つのパートに分かれています。
ユーザーが直接目にする部分です。ボタン、テキスト、画像、フォームなど、ブラウザに表示されるすべてがフロントエンドです。
レストランでいうと「客席とメニュー表」にあたります。
ユーザーからは見えない裏側の処理です。「ログインしているか確認する」「データを保存する」「メールを送る」といった処理を担当します。
レストランでいうと「厨房」です。注文を受けて、料理を作って返します。
データを保存しておく場所です。ユーザー情報、投稿内容、注文履歴など、アプリが覚えておく必要があるものはすべてデータベースに保存されます。
レストランでいうと「食材倉庫とレシピ帳」です。
この3つが協力して動くことで、Webアプリは成り立っています。
API（Application Programming Interface）は、フロントエンドとバックエンドをつなぐ窓口です。
レストランの例でいうと、「ホールスタッフ」にあたります。
APIは「どういうフォーマットで注文を受け付けるか」のルールを決めています。メニューにない料理は注文できないように、APIで定義されていない操作はできません。
Webアプリ開発では、このAPIの設計がとても重要になります。「どんなデータを、どのURLで、どうやって取得・送信するか」を決める作業です。
Webページは3つの言語で作られています。AIにコードを書かせる場合でも、それぞれが何をしているか知っておくと、出力されたコードを理解しやすくなります。
ページの骨組みです。「ここに見出しがある」「ここにボタンがある」「ここに画像がある」といった、コンテンツの構造を定義します。
家でいうと「柱と壁と間取り」です。
ページのデザインです。「文字の色を青にする」「ボタンを丸くする」「スマホでは1列にする」といった、見た目を制御します。
家でいうと「壁紙、家具の配置、照明」です。
ページの動作です。「ボタンを押したら送信する」「スクロールしたらメニューを表示する」「入力内容をチェックする」といった、インタラクションを制御します。
家でいうと「電気配線やスマートホーム機能」です。
このコースで使うNext.jsは、この3つを効率的に組み合わせて開発するためのフレームワーク（道具箱）です。
このチャプターで掴んでほしいポイントは3つです。
今はすべてを完全に理解する必要はありません。「ああ、こういう構造になっているんだな」という感覚を持てていればOKです。次のチャプター以降で、実際に手を動かしながらこれらの概念が体感として分かるようになっていきます。
ブラウザがサーバーに「このページをください」と依頼を送ることを何と呼ぶ？
(単一選択)
関連するブログ記事はまだありません。
