まとめ＆練習
重要なポイント
- あらゆるアプリは4つの部品です。（ユーザーが見るもの）、（ルールとロジック）、データベース（データが残る場所）、そしてホスティング（すべてが動く場所）。frontendがデータベースに直接触れることは決してなく、必ずbackendを経由します。
- ブラウザの中では、HTML が構造、CSS がスタイル、JavaScript が振る舞いです。コードは DOM を変えることでページを変えます。
- すべてを自分で書くわけではありません——パッケージ（
package.jsonとを通して npm が管理する）が、解決済みの問題を依存関係として供給してくれます。 - 環境変数 は秘密の情報をコードの外に保ち、同じコードがdevとprodで正しく振る舞えるようにします。
- リクエストは frontend → ホスティング → backend → データベース と流れて戻ってきます。問題がどの層にあるかに名前をつけることが、解決の半分です。
やってみよう
毎日使っているアプリを一つ選んで、一つの動作を層を通して声に出して語ってみましょう。「送信をタップする（frontend）→ それが向こうのサーバーに行く（backend）→ そこで送っていいか確認してメッセージを保存する（データベース）→ そしてチャットが更新される（frontend）」。それから、それぞれの問題がどの層にあるか当ててみましょう。ボタンの位置がずれて見える。アプリが「ログインしていません」と言う。昨日のメッセージが消えている。この名づけが上手くなることが、本書の残りが土台にしているスキルです。
この章のプロンプト
アプリがどう組み合わさっているかを学んでいます。実現したい機能はこれです:
<ユーザーができるようになるべきことを一文で説明>
コードを書く前に、層ごとに分解してください:
- Frontend: ユーザーが見るものと、送られるもの
- Backend: 走らせるべきルール/チェックと、それがどこか
- Database: 保存または読み出しが必要なデータ
- 関わる env 変数や設定（特に秘密の情報）
それから、クリックから結果までのリクエストの流れを、番号付きの手順で説明してください。
平易な言葉でお願いします — コードの前に、まず形を理解したいのです。