Webアプリ開発の基礎

5-1Webサイトと「Webアプリ」の違い

Webサイトは読むためのもの（ブログ、会社案内など）。Webアプリは使うためのもの（家計簿、ToDo管理、予約システムなど）です。技術的な線引きはあいまいですが、「ユーザーの操作に応じてデータが変わるか」が目安です。

Webアプリの構成パターン

フロントエンドはブラウザで動く部分（HTML/CSS/JavaScript）、バックエンドはサーバーで動く部分（データ処理やログイン管理）です。

最初はフロントエンドだけで作る

個人開発の第一歩はフロントエンドのみの構成がおすすめです。サーバー不要・無料で公開でき、それでいて実用的なアプリが十分作れます。本コースの最終章で作るToDoアプリもこの構成です。

5-2HTMLとCSSをコードで眺めてみる

目標は「書ける」ではなく「見たときに、だいたい何か分かる」です。次のコードを眺めてみましょう。

<div class="card">
  <h2>今日のタスク</h2>
  <p>買い物に行く</p>
  <button id="done-btn">完了</button>
</div>

• タグは<名前>で始まり</名前>で閉じる。入れ子にできる
• classやidは要素につける「名札」。CSSやJavaScriptがこの名札を頼りに要素を探す

.card {
  background: white;      /* 背景色 */
  border-radius: 12px;    /* 角を丸く */
  padding: 20px;          /* 内側の余白 */
}

• .cardは「classがcardの要素に適用」の意味
• プロパティ: 値;の形で見た目を1つずつ指定する

読めると何が変わるか

Claudeに修正を頼むとき、「カードの余白をもう少し広く」「.cardのpaddingを30pxにして」のように、ピンポイントで通じる指示が出せるようになります。

5-3JavaScriptが「動き」を作る仕組み

JavaScriptの仕事は、一言でいうと「出来事をきっかけに、ページを書き換える」ことです。

// 「done-btn」という名札のボタンを探して…
const btn = document.getElementById("done-btn");

// クリックされたら、この処理を実行する
btn.addEventListener("click", function () {
  alert("タスク完了！おつかれさま！");
});

3つの基本概念

ほとんどのWebアプリの動きは「イベントが起きたら、関数が動いて、変数のデータを使って画面を書き換える」の組み合わせでできています。この骨組みを知っていれば、AIの書いたコードの流れが追えます。

コードを読むときの魔法のプロンプト

このファイルのコードを、プログラミング未経験者に
説明するつもりで、上から順に日本語で解説してください。
特に「いつ・何をきっかけに・何が起きるのか」を中心に。

5-4データはどこに保存されるのか

「アプリを閉じてもデータが残る」を実現するには、データをどこかに保存する必要があります。主な選択肢は3つです。

localStorageを体感する

このサイトの「完了ボタン」を押してからブラウザを閉じて開き直しても、進捗は残っていますよね。あれがlocalStorageです。そのブラウザ・そのPC限定で保存される、というのがポイントです。スマホで開いても進捗は共有されません。

データベースが必要になるのはいつか

「複数の端末から同じデータを見たい」「家族や友達と共有したい」となったら、データベース＋バックエンドの出番です。FirebaseやSupabaseなど、初心者でも扱いやすい無料サービスがあり、これもClaude Codeに「Supabaseでデータを保存できるようにして」と頼めば設定を案内してくれます。

5-5フレームワークという選択肢

開発の話題でよく聞くReact（リアクト）やNext.js（ネクストジェイエス）。これらはフレームワークと呼ばれる「Webアプリ開発の効率化キット」です。

フレームワークとは

大規模なアプリを素のHTML/CSS/JavaScriptで作ると、コードが複雑になりすぎます。フレームワークは、よくある処理（画面の部品化、データと表示の連動など）をあらかじめ用意して、整理された書き方のルールを提供してくれます。

初心者はいつ使うべきか

重要なのは、フレームワークを使うかどうかもClaudeに相談できるということです。「このアプリの規模なら、フレームワークは使うべき？」と聞けば、構成ごとの長所短所を説明してくれます。