【第0章】小さなWebアプリで学ぶフルスタック開発の全体地図

章： 0章

技術タグ： DevTools JavaScript PHP

この連載で学ぶこと

この連載では、小さなWebアプリを作りながら、フロントエンドからバックエンドまでの基礎を順番に学びます。

いきなり大きなシステムを作るのではなく、まずは小さく動くものを作ります。

そして、その小さなアプリをあえて壊したり、ブラウザの開発者ツールで中身を覗いたりしながら、なぜPHPやデータベース、セキュリティ対策が必要なのかを理解していきます。

この連載の目的は、コードを丸暗記することではありません。

目的は、Web開発の仕組みを自分の頭でつなげて理解することです。

この連載の対象読者

この連載は、次のような人向けです。

  • HTMLを少し書いたことがある
  • CSSで見た目を少し整えたことがある
  • JavaScriptをこれから本格的に学びたい
  • PHPやデータベースの役割を知りたい
  • フォーム送信やfetch通信の違いを理解したい
  • DevToolsの使い方を実例で学びたい
  • Web制作からWebシステム開発へ進みたい

最初から完璧に理解する必要はありません。

1話ずつ手を動かしながら、少しずつWeb開発の全体像をつかんでいきます。

この連載の学び方

この連載では、ただ正解コードを並べるだけではなく、次の流れで学びます。

作る
↓
壊す
↓
DevToolsで覗く
↓
危険を知る
↓
直す
↓
なぜ必要か理解する

たとえば、最初はJavaScriptだけでおみくじアプリを作ります。

それだけなら、よくあるJavaScript入門です。

しかし、この連載ではそのあとに、DevToolsを使ってブラウザ側の処理が見えたり、改ざんできたりすることを体験します。

そこで初めて、重要な処理をサーバー側に置く意味が見えてきます。

つまり、この連載では「なぜその技術が必要なのか」を、失敗や危険の体験から理解していきます。

Web開発の全体地図

Web開発は、いきなり全部を理解しようとすると難しく見えます。

しかし、役割ごとに分けると見通しがよくなります。

HTML
↓
画面の骨組みを作る

CSS
↓
見た目を整える

JavaScript
↓
ブラウザ上で動きを作る

DevTools
↓
ブラウザの裏側を見て、動きや通信を確認する

PHP
↓
サーバー側で処理する

MySQL
↓
データを保存する

PRGパターン
↓
フォームの二重送信を防ぐ

fetch
↓
画面を再読み込みせずに裏で通信する

この地図を頭に置いておくと、各技術がバラバラではなく、1つの流れとして見えるようになります。

HTML・CSS・JavaScriptの役割

まず、フロントエンド側の基本です。

技術役割この連載での使い方
HTML画面の骨組みを作るおみくじ画面やフォーム画面を作る
CSS見た目を整えるボタンや入力欄を見やすくする
JavaScriptブラウザ上で動きを作るボタンクリック、DOM操作、fetch通信を扱う

HTMLとCSSだけでもWebページは作れます。

しかし、ボタンを押して画面を書き換えたり、入力内容をチェックしたり、サーバーと通信したりするにはJavaScriptが必要になります。

この連載では、まずJavaScriptで小さな動きを作るところから始めます。

DevToolsはWebの裏側を見る道具

DevToolsとは、ブラウザに付いている開発者向けの道具です。

Google Chromeなら、F12キーや右クリックの「検証」から開くことができます。

DevToolsを使うと、次のようなことができます。

  • HTMLの構造を見る
  • CSSをその場で変更して確認する
  • JavaScriptのエラーを見る
  • ConsoleでJavaScriptを実行する
  • Networkで通信内容を確認する
  • フォーム送信で何が送られているか見る

この連載では、DevToolsを単なる難しい道具として扱いません。

Webの仕組みを目で見て理解するための覗き窓として使います。

特に、フロントエンド側のコードがユーザーに見えること、そして一部は改ざんできることを体験するために使います。

フロントエンドとバックエンドの違い

Web開発では、よくフロントエンドとバックエンドという言葉が出てきます。

種類主な場所役割
フロントエンドブラウザ側画面表示、ボタン操作、入力補助、見た目の動き
バックエンドサーバー側重要な処理、データ保存、認証、メール送信、セキュリティチェック

JavaScriptはブラウザ側で動くため、ユーザーに見える部分が多いです。

そのため、重要な抽選処理や、信用してはいけない入力チェックをフロントエンドだけに任せるのは危険です。

一方、PHPはサーバー側で動きます。

ユーザーのブラウザから直接中身を見られにくいため、重要な処理や最終チェックを担当させるのに向いています。

なぜPHPやデータベースが必要になるのか

最初のおみくじアプリは、HTML・CSS・JavaScriptだけで動きます。

しかし、Webシステムとして考えると、それだけでは足りない場面が出てきます。

  • 重要な抽選ロジックをユーザーに見せたくない
  • お問い合わせ内容を保存したい
  • 送信されたデータを管理画面で確認したい
  • ユーザーが入力した内容を安全に処理したい
  • 同じデータが何度も登録されるのを防ぎたい

こうした場面で、PHPやMySQLのようなバックエンド側の技術が必要になります。

JavaScriptだけでできることと、サーバー側でやるべきことを切り分けることが、Webシステム開発の大事な考え方です。

form送信とfetch送信の違い

フォーム送信には、大きく分けて2つの考え方があります。

通信方式特徴向いている場面
form送信画面全体が切り替わる昔ながらの送信方式シンプルな問い合わせフォーム、確認画面、完了画面
fetch送信画面を切り替えずに裏側で通信する方式チャット、検索、非同期フォーム、UXを重視する画面

form送信はシンプルでわかりやすいです。

一方で、送信後に画面が再読み込みされるため、入力内容が消えたり、体験が少し重く感じたりすることがあります。

fetch送信を使うと、画面を切り替えずにサーバーへデータを送ることができます。

この連載では、まずform送信で基本を理解し、そのあとfetch送信でUXの違いを体験します。

この連載のロードマップ

この連載は、以下の流れで進めます。

第0章：全体の地図

この記事です。HTML、CSS、JavaScript、PHP、MySQL、DevTools、fetch通信がどうつながるのかをざっくり把握します。

第1章：おみくじアプリで学ぶJavaScriptとサーバーの役割

  • JavaScriptだけでおみくじアプリを作る
  • DevToolsで処理が見えることを確認する
  • フロントエンド側の処理を改ざんしてみる
  • 重要な処理をPHP側へ移す
  • Networkで通信を確認する

第2章：お問い合わせフォームで学ぶPOST・XSS・DB保存

  • HTMLフォームを作る
  • JavaScriptで入力チェックをする
  • JSバリデーションが突破できることを知る
  • PHPでPOSTデータを受け取る
  • XSSを体験する
  • htmlspecialcharsで防ぐ
  • MySQLに保存する
  • PRGパターンで二重送信を防ぐ

第3章：form送信とfetch送信でUXと通信方式を学ぶ

  • form送信のシンプルさと限界を知る
  • 画面再読み込みによるUXの問題を体験する
  • fetchで非同期送信する
  • JSONで結果を返す
  • エラー時も入力内容を残すUIを作る
  • どの場面でformかfetchかを選べるようにする

この連載で使う道具

基本的に、次の道具があれば進められます。

  • VS Code
  • Live Server
  • Google Chrome
  • Chrome DevTools
  • PHPが動くローカル環境
  • MySQLまたはMariaDB
  • 必要に応じてWordPressやローカル開発環境

最初のおみくじアプリでは、VS CodeとLive Serverだけで進められます。

PHPやMySQLは、後半で必要になった段階で少しずつ使っていきます。

この連載で大事にすること

この連載では、以下を大事にします。

  • 最初から完璧を目指さない
  • まず小さく動かす
  • 動いたものを観察する
  • あえて壊して危険を知る
  • 危険を知ってから改善する
  • なぜその書き方が必要なのかを理解する
  • あとから見返して復習できる形に残す

正しいコードをただ写すだけでは、なかなか実力になりません。

なぜその処理が必要なのか、何を防いでいるのか、どこが危険なのかを一緒に見ていきます。

最初に目指す姿

この連載を通して、最初に目指す姿はこれです。

HTMLで画面を作れる
CSSで最低限整えられる
JavaScriptで画面を動かせる
DevToolsで中身を確認できる
PHPでサーバー側の処理を書ける
フォーム送信の流れがわかる
危険な入力をそのまま表示してはいけない理由がわかる
DB保存と二重送信対策の必要性がわかる
form送信とfetch送信を使い分けられる

ここまで見えてくると、ただのWebページ制作から、Webシステム開発の入口に立てます。

次回から実際に作っていきます

次回からは、実際に手を動かします。

最初に作るのは、ブラウザだけで動くおみくじアプリです。

HTML・CSS・JavaScriptだけで作れるので、Webアプリ開発の最初の題材としてちょうどいいです。

ただし、このおみくじアプリには、あとで大きな罠が出てきます。

まずは作る。

そのあとに壊す。

そして、なぜサーバー側の処理が必要なのかを理解する。

ここから、この連載の本番が始まります。

次回：
【JavaScript入門】ブラウザだけで動くおみくじアプリを作る

Web開発復習ノート一覧へ戻る