PH2 トップ / はじめに
PH2 で学ぶこと
PH1 では、HTML・CSS・JavaScript・React で画面を作りました。作った画面には、データが HTML や JavaScript に直接書かれていたはずです。新しい情報を足したいときは、コードを書き換えるしかありませんでした。
実際のWebサービスはそうなっていません。X の投稿も、大学の履修登録の授業一覧も、データはサーバーの向こう側にあるデータベースに入っていて、画面はそこから必要なものを取り出して表示しています。PH2 では、この「サーバーの向こう側」を作れるようになります。
PH2 を終えたときにできること
- PostgreSQL（データベース）に、SQL でデータを出し入れできる
- Laravel（PHP のフレームワーク）で、データの登録・一覧・編集・削除ができる Webアプリを1人で作れる
- テーブルの分け方や名前の付け方を、理由を言いながら決められる
- Docker で開発環境を立ち上げ、チームで同じ環境をそろえられる
- AI に実装を手伝わせつつ、出てきたコードを読んで採用するかどうかを自分で決められる
Webアプリの全体像
PH2 で扱うのは、次の図の部品です。ブラウザ（PH1 で作っていた部分）から右へ、リクエストが流れていきます。
それぞれの部品の役割
初めて聞く名前が多いと思うので、最初に一言ずつ説明しておきます。細かいことは、それぞれを学ぶ週で説明します。
- データベース／PostgreSQL（ポストグレスキューエル）
- データをまとめて保存しておく専用の入れ物です。表（テーブル）の形でデータを持っていて、「月曜の授業だけ」のように条件を付けて取り出せます。データベースのソフトにはいくつか種類があり、PH2 では広く使われている PostgreSQL を使います。
- SQL（エスキューエル）
- データベースに「このデータをちょうだい」「これを保存して」と頼むための言葉です。プログラミング言語というより、データベースへの注文書の書き方に近いものです。W1 から学びます。
- Laravel（ララベル）
- PHP というプログラミング言語で Webアプリを作るための枠組み（フレームワーク）です。「このURLが開かれたら、データベースからこれを取ってきて、この画面を返す」という流れを、少ないコードで書けるように道具がそろっています。W3 から使います。
- Webサーバー
- ブラウザから届いたリクエストを最初に受け取り、Laravel に渡す係です。PH2 では nginx（エンジンエックス）というソフトを使いますが、設定はあらかじめ用意してあるので、中身を書くことはほとんどありません。
- Docker（ドッカー）
- Webサーバー・Laravel・PostgreSQL のように、Webアプリに必要なソフトを、自分の PC の中にまとめて用意して動かす道具です。PC ごとにソフトを1つずつ入れると、人によってバージョンや設定がずれて「自分の PC では動かない」が起きます。Docker を使うと、チーム全員が同じ環境をコマンド1つで立ち上げられます。W2 から使います。
PH2 は、この図の右端から始めます。Laravel のプログラムは、最終的にデータベースとやり取りするために書くものです。だから先に、データベースとの話し方である SQL を覚えます。
PH2 を通して作るもの：POSSE大学の時間割アプリ
PH2 では、架空の「POSSE大学」の時間割アプリを、16週かけて少しずつ育てていきます。週ごとに別のものを作るのではなく、同じアプリに機能を足し、作り変えていきます。
出発点は、授業の一覧が HTML に直接書かれた時間割ページです。授業が1つ増えるたびに HTML を書き換えなければならない状態から、データベースを使い、Laravel で動かし、最後は履修登録ができるところまで持っていきます。
| 時期 | アプリの状態 |
|---|---|
| W1〜W2 | 直書きの時間割ページを、SQL でデータベースから再現する |
| W3〜W5 | Laravel で、データベースから時間割を表示する。自分の時間割を登録・編集・削除できるようにする |
| W6〜W7 | 授業の一覧から選んで登録できるようにする。ログインして、ほかの人も使えるようにする |
| W9〜W10 | 学生と授業をつなぎ、定員や申請・承認のある「履修登録」にする |
| W13〜W16 | 大学から届く追加の要望を、自分で設計して実装する |
アプリのコードは、W1 で fork する GitHub のリポジトリ（template-ph2-timetable）に積み上げていきます。このリポジトリには、W2 以降で使う Docker と Laravel の環境も最初から入っています。
16週の予定
週の内容は、進み具合によって変わることがあります。
| 週 | 開始日 | 内容 |
|---|---|---|
| W1 | 10/5 | データベースと SELECT |
| W2 | 10/12 | 表をつなぐ・集計する。Docker で PostgreSQL を動かす |
| W3 | 10/19 | Laravel 入門。Docker で Laravel の環境を動かす |
| W4 | 10/26 | テーブルを作る。マイグレーションとモデル |
| W5 | 11/2 | 更新・削除・入力チェック |
| W6 | 11/9 | 1対多のつながり |
| W7 | 11/16 | ログイン。AI に機能を作らせて確かめる |
| W8 | 11/23 | Webアプリの安全対策 |
| W9 | 11/30 | 多対多のつながり |
| W10 | 12/7 | 状態を持つデータ（申請・承認など） |
| W11 | 12/14 | Docker の環境を自分で変える |
| W12 | 12/21 | テストで確かめる |
| W13〜W16 | 1月〜 | 総合制作 |
1週間の進め方
毎週、次の順番で進めます。1週間の学習時間は10時間を目安にしています。
| 順番 | 内容 | 目安 | 使う場所 |
|---|---|---|---|
| 1 | インプット：スライドを読んで、手を動かしながら理解する | 1.5〜2時間 | この教材サイト（スマホでも読めます） |
| 2 | ミニドリル：小さな問題を、自分の力だけで解く | 1〜1.5時間 | この教材サイト |
| 3 | POSSE課題：時間割アプリを育てて、PR を出す | 4〜5時間 | 自分の PC と GitHub |
インプットとミニドリルでは AI を使いません。ここは、自分の頭に語彙と考え方を残すための時間です。POSSE課題では AI を使ってかまいません。ただし、AI が書いたコードも自分の成果物として、PR で「何をしているか」「なぜそうしたか」を説明できる状態にしてください。
このサイトと GitHub の役割
このサイトは「読む・考える・解く」ための場所です。スライド、ミニドリル、課題の説明はすべてここにあります。GitHub は「作る・提出する」ための場所です。POSSE課題のコードを置き、PR で提出します。
最初にやること
W1 のページに進んでください。W2 から Docker を使うので、W1 のうちに Docker Desktop を入れておく手順も、W1 のページにあります。