まずは、Laravelの導入として「お問い合わせフォーム」を一緒に作成していきます。
これから始まる全30本の動画シリーズの「全体像」を把握してもらい、学習の目的地やポイント、開発するアプリの完成形についてイメージを固めていただきます。
このシリーズで作るもの
今回のプロジェクトでは、シンプルかつ実用的なお問い合わせフォームをLaravelで開発していきます。
このシリーズを完走すると、Laravelを用いた小規模〜中規模のアプリ開発の基礎スキルが身につきます。
なぜ最初にお問い合わせフォームなのか？
それは、このひとつのフォームの中にLaravelでよく使う全ての基本要素が詰まっているからです。習得できる技術要素は以下の通り。
- ルーティングの定義
- コントローラーとビューの分離
- モデルとマイグレーションの作成・運用
- Bladeテンプレートの書き方・構造の整理
- お問い合わせの一覧・詳細表示（index / show）
- フロントからの入力フォーム（名前・メール・年齢・性別・興味のある分野・お問い合わせ内容）
- 入力内容の確認画面（hiddenでデータ保持）
- 入力バリデーション（LaravelのFormRequestを活用）
- 入力エラー時のold()による値の保持とエラー表示
- 送信完了画面（thanksページ）
- route() / name() の活用によるメンテナブルな設計
- GitとGitHubの連携によるバージョン管理
- Renderによる無料デプロイ環境への公開
Laravelそのものだけでなく、開発に必要な周辺ツールや設計の考え方まで視野に入れています。
つまり、開発＋確認＋保存＋管理＋公開までをLaravelで一通り体験できる教材です。
こうした Laravel の核心部分を、小さなアプリケーションを通して1つずつ丁寧に学んでいきます。
特にHTMLやCSSを学び終えて「そろそろ動的なアプリを作りたい！」という方にとって、実践的な第一歩になるはずです。
「とりあえず実用的なアプリを作ってみたい！」という方には、まさにうってつけのテーマと言えるでしょう。
Let’s Make!! ｜ 実際に作ってみましょう
まずは完成したアプリを見てみましょう→https://contactform.nanami-teruma.net
TOPページでお問い合わせ内容の一覧を確認、詳細でお問い合わせの詳細を見ることができるアプリです。
お問い合わせフォームからお問い合わせを行うと、内容を入力したら確認ページに移動し、thanksページが表示されます。
完成形をイメージできたところで、いよいよ作成に取りかかっていきましょう。
ここからはステップごとに学習を進めていき、【Youtube】の文字はYoutube動画へのリンク、【Blog】の文字はブログへのリンクとなります。
開発環境構築編
#4前編 Gitについて【Blog】
#4後編 Gitのインストール【Youtube】
#5前編 Githubについて【Blog】
#5後編 GitHubの登録とVS code連携【Youtube】
#6 概要と設計方針【Youtube】
#6 概要と設計方針【Blog】
#7 ReadmeとMarkDown【Youtube】
#7 ReadmeとMarkDown【Blog】
#8 Dockerの説明【Youtube】
#9 Docker インストール【Youtube】
#10 Dockerのファイル解説【Youtube】
#10 Dockerのファイル解説【Blog】
#11 Docker Build【Youtube】
#12 LaravelのインストールとPHPのバージョン【Youtube】
#12 LaravelのインストールとPHPのバージョン【Blog】
#13 GitHub連携について【Youtube】
#13 Github連携について【Blog】
#14 Gitのブランチについて【Youtube】
#14 Gitのブランチについて【Blog】
アプリ制作編
#15 テーブルの作成とテーブル定義、マイグレート【Youtube】
#15 テーブルの作成とテーブル定義、マイグレート【Blog】
#16 モデルの作成と解説【Youtube】
#16 モデルの作成と解説【Blog】
#17 ルーティングファイル(web.php)の仕組みと書き方【Youtube】
#17 ルーティングファイル(web.php)の仕組みと書き方【Blog】
#18 コントローラーの作成と解説【Youtube】
#18 コントローラーの作成と解説【Blog】
#19 Viewの実装と共通化【Youtube】
#19 Viewの実装共通化【Blog】
#20 Formの実装【Youtube】
#20 Formの実装【Blog】
#21 バリデーションとFormRequestの実装【Youtube】
#21 バリデーションとFormRequestの実装【Blog】
#22 old()の役割【Youtube】
#22 old()の役割【Blog】
#23 requiredの役割【Youtube】
#23 requiredの役割【blog】
#24 お問い合わせ内容を表示する【Youtube】
#24 お問い合わせ内容を表示する【Blog】
#25 詳細ページを作成する【Youtube】
#25 詳細ページを作成する【Blog】
#26 routeとnameの関係【Youtube】
#26 routeとnameの関係【Blog】
#27 確認画面の作成と問題点【Youtube】
#27 確認画面の作成と問題点【Blog】
完成したアプリをデプロイ
#28 Render登録【Youtube】
#29 renderデプロイのために行うこと【Youtube】
#30 renderにデプロイしてみよう【Youtube】
#30 renderにデプロイしてみよう【Blog】
Step1の目標
最後に、Step1での目標は以下の通りとなります。
1.入力フォームの基本構造を理解し、作れる
name,email,age,gender,interests,contentなど、複数項目の入力ができる- 必要なフィールドに
requiredを正しく指定できている
2. バリデーションの基礎が実装できている
- Laravelの FormRequest を使ったバリデーションが動作している
- 未入力や不正な入力に対して、エラーが表示される
3. old() を使って入力保持ができている
- バリデーションで戻ってきても、入力値が保持されている
- チェックボックスやラジオボタンも含めて適切に復元される
4. 確認画面にデータが渡って表示されている
- hidden によって POST データをしっかり引き継いでいる
- 「戻る」「送信」それぞれの挙動が意図通り動作する
5. 入力内容をデータベースに保存できている
contactsテーブルにデータが INSERT されている- 必要なカラムがマイグレーションで正しく定義されている
6. thanksページに遷移して完了が伝わる
- 「送信が完了しました」などのメッセージ表示で体験が締まっている
7. 一覧（index）と詳細（show）が表示できている
- 管理者向け画面として、保存されたお問い合わせを確認できる構成
- compact() やルートパラメータの仕組みが理解できている