CS概念理解（簡易版）

コードは書かない。日本語で「指示する」だけ

あなたの仕事はコードを書くことではありません。日本語でClaude Codeにお願いするだけ。ただ、Webアプリの仕組みをざっくり知っておくと、指示が正確になり、トラブルが起きても原因の見当がつくようになります。

役割の流れ

この資料の使い方

• 1最初から全部読む必要はありません ── 詰まったときに、該当する章だけ開けば大丈夫です。
• 2知りたい言葉へ飛べます ── 冒頭の「章ジャンプ」ボタンを押すと、気になるキーワードの章へすぐ移動できます。
• 3各章に「🗣️ Claude Codeへの伝え方」ボックス ── そのままコピーして使える頼み方を載せています。

Webアプリは「ホール・厨房・倉庫」でできている

レストランに例えると、とても分かりやすくなります。お客さんの前に立つホール、料理を作る厨房、食材や帳簿をしまう倉庫。この3つがWebアプリの3層です。

3層をまたぐ、横断的な仕組み

例：製造業の「見積もりアプリ」の流れ

3つの層が実際にどう連携するのか、身近なアプリで追ってみましょう。データが層から層へ渡っていくのが分かります。

• 1お客さんがヒアリングフォームに入力 ── フロントエンド（ホール）が受け取る。
• 2入力内容をAIで処理し、見積もりを計算 ── バックエンド（厨房）が処理する。
• 3計算結果をDBに保存 ── データベース（倉庫）にしまう。
• 4見積もり書PDFを画面に表示 ── フロントエンド（ホール）がお客さんに返す。

クライアント（頼む側）とサーバー（応える側）

レストランの注文と同じです。あなたが「カレーください」と頼み、お店が作って出す。この「頼む・応える」のやりとりが、Webアプリの通信の正体です。

役割ごとに「3つの部屋」に分ける

ホール・厨房・倉庫は、それぞれ独立した部屋です。役割をきっちり分けておくことで、あとから変更しやすく、壊れにくいアプリになります。

3層に分ける利点

• 1フロントの設計を変えても ── 厨房のレシピ（処理）は変わりません。
• 2バックの処理を変えても ── 倉庫の食材（保存データ）は変わりません。
• 3各層を独立して変更・改善できる ── だからメンテナンスがラクになります。

データの流れ

フロントエンドは「ホール（接客の場）」

フロントエンドの役割は、ユーザーとサーバーの仲介役です。もし画面（フロント）がなかったら、どうなるでしょうか？

ホールを作る3つの担当

フロントエンドは、3つの部品でできています。それぞれ「内装」「接客係」「デザイナー」と考えると分かりやすいです。

JavaScript（動き回る接客係／ウェイター）の3つの仕事

完成の構図

バックエンドは「厨房」で行われる4つの仕事

厨房では、注文票を受け取り、レシピ通りに調理し、料理を出し、衛生ルールを守る ── この4つが行われています。

API＝注文システム、エンドポイント＝メニュー項目

APIは、クライアントとサーバーがやりとりするための「注文のルール」。エンドポイントは、その中の「1つ1つのメニュー」だとイメージしてください。

エンドポイント一覧（メモアプリの例）

ステータスコード（結果の合図）

データベースがないと、データは消えてしまう

データの置き場所には2種類あります。一時的な「ホワイトボード」か、ずっと残る「帳簿・倉庫」か。この違いがとても大事です。

データベースは「Excel」とほぼ同じ

難しく考えなくて大丈夫。テーブル＝Excelのシート、行＝1件のデータ、列＝項目。ふだん使うExcelとほとんど同じ感覚です。

メモテーブルの例

Create / Read / Update / Delete

データに対してできることは、たった4つ。「作る・読む・変える・消す」。頭文字をとってCRUD（クラッド）と呼びます。

4操作を、注文・アプリ・Excelで対応させると

CRUD と HTTPメソッドの対応

認証（誰？）→ 認可（何ができる？）の2ステップ

ログインの裏側では、2つの確認が順番に行われています。まず「あなたは誰か」を確かめ、次に「何ができるか」を判断します。

処理の順序

パスワードは「そのまま」保存してはいけない

パスワードの扱いは、セキュリティの要です。そのまま保存するのは危険。「復元できない形」に変換して保存するのが鉄則です。

ローカル＝試作店、クラウド＝本店

開発中は自分のPCの中（ローカル）で動かし、完成したらネット上（クラウド）に公開します。試作店で作り込んで、本店をオープンするイメージです。

昔のやり方 vs クラウド

デプロイ＝アプリを「公開する」こと

「デプロイ」という言葉は、要するに試作店で作ったものを本店に移して公開すること。YouTubeに動画をアップして公開するのと、まったく同じ感覚です。

コスト感の目安

開発フロー全体

まずは「作って」とお願いしてみる

アプリ作りは、この一言から始まります。何を作りたいか、どんな項目が必要かを日本語で伝えるだけです。

作ったあとの「ちょい足し」もこの調子

一度作ったアプリに、機能を追加したり見た目を直したり。やりたいことを言葉にすれば、Claude Codeが対応してくれます。

ログインを付ける・ネットに公開する

最後の仕上げは、ログイン機能と公開（デプロイ）。ここも、まとめてお願いするだけで対応してくれます。

用語は暗記しない。困ったら貼って相談する

この資料の締めくくりです。技術の細部より、次の3つの姿勢を持っておくことが、いちばん大切です。

• 用語の暗記は不要 ── この資料は「必要なときに開く地図」。全部を覚える必要はありません。
• 設計に唯一の正解はない ── テンプレの完全再利用は稀。試行錯誤が常で、AIと相談しながら柔軟に固めていきます。
• エラーは番号を覚えない ── 画面をそのままClaude Codeに貼って相談すれば、たいてい直ります。

全体フロー（この資料のまとめ）