Laravelの教材は終わった。でも、いざ自分で作ろうとすると1行も進まない。
これは能力の問題ではありません。
教材は「写す」練習であって、「組み立てる」練習ではないからです。
この記事では、僕が実際に伴走して転職を決めた進め方を、そのまま書きます。
目安は1カ月です。
最初に、作るものの基準を決めます
手を動かす前に、この3つだけ頭に入れてください。
- ストーリーがあること(誰の何を解決するのか)
- 機能は4つほど
- 非同期処理を必ず1か所入れる
3つ目は、僕が面接で失敗したところです。
「このボタンを押したら、どうなっているんですか?」と聞かれて、答えられませんでした。
だから最初から、説明できる非同期処理を1か所入れておきます。
ちなみにテストコードは不要です。未経験の段階でそこに時間を使うより、動きを説明できるようにするほうが効きます。
全体スケジュール(1カ月)
| 週 | やること |
|---|---|
| 1週目 | 企画・画面の洗い出し・テーブル設計(コードは書かない) |
| 2週目 | 認証+登録・一覧・編集・削除を作る |
| 3週目 | 独自機能+非同期処理を1か所 |
| 4週目 | 入力チェック・見た目・公開・README |
1週目を飛ばさないでください。ここを飛ばすと、必ず途中で作り直しになります。
1週目:設計(コードは書かない)
ステップ1:1行で企画を書く
「◯◯な人が、◯◯するときに困る◯◯を解決するアプリ」
僕が作ったものだと、こうなります。
「資格の勉強をしている人が、復習するときに困る間違えた問題の管理を解決するアプリ」
当時、彼女が管理栄養士を目指して勉強していたので、そこから作りました。
身近な人の困りごとで十分です。これが書けない状態で実装を始めると、必ず迷子になります。
ステップ2:画面を書き出す
紙でもいいので、必要な画面をすべて書き出します。
- ログイン画面 / 新規登録画面
- 問題の一覧画面
- 問題の登録・編集画面
- 出題画面(間違えた問題だけを出す)
画面が10個を超えたら、規模が大きすぎます。削ってください。
ステップ3:テーブルを設計する
ここが一番大事です。そして、絶対にAIに決めてもらわないでください。
面接で必ず聞かれます。「なぜこのテーブル設計にしたのか」と。
実務でも、僕はここだけは自分でやります。間違えると、あとから全部作り直しになるからです。
users(ユーザー)
- id
- name
- email
- password
questions(問題)
- id
- user_id(誰が登録した問題か)
- body(問題文)
- answer(答え)
answer_logs(解答の記録)
- id
- user_id
- question_id
- is_correct(正解したかどうか)
- answered_at
「間違えた問題だけを出す」を実現するために、解答の記録を残すテーブルが要るという発想です。
この「なぜこのテーブルが必要なのか」を説明できる状態にしておいてください。
設計のコツ
- 「誰のデータか」を持たせる(
user_id) - 1つのテーブルに詰め込みすぎない
- 迷ったら、紙に書いて線でつないでみる
2週目:認証+登録・一覧・編集・削除
実装の順番
- プロジェクト作成とデータベース接続
- マイグレーションでテーブルを作る
- 認証機能を入れる(Laravel Breezeでいい)
- 一覧画面を作る
- 登録 → 詳細 → 編集 → 削除の順で実装
一覧画面を先に作るのがコツです。目に見えるものができると、そこから先が進みやすくなります。
この時期の心得
ここで必ず詰まります。それが普通です。
僕が伴走したSさんは、Laravelの教科書を5周してやっと流れがつかめました。
2周目くらいで「向いていない」と思ってやめる人が多いですが、そこは全員が通る場所です。
詰まったときは、流れを意識して一個ずつ確認してください。
dd($request->all()); // ① 値は届いている?
$question = Question::create([...]);
dd($question); // ② 保存できている?
return redirect(...); // ③ ここまで来ている?
①で止まっていればフォームかルート側、②で止まっていればモデルかDB側です。
流れが分かっていると、見る場所が自動的に決まります。
3週目:独自機能+非同期処理
独自機能は「企画の中心」を作る
ここが、あなたの作品を他と分ける部分です。
僕の場合は「間違えた問題だけを集めて出題する」でした。
ここがなければ、ただのメモアプリです。
企画の1行に戻って、それを実現する機能から作ってください。
非同期処理を1か所入れる
ページ全体を読み込み直さずに、一部だけが変わる動きです。
入れやすいのはこのあたりです。
- お気に入り・ブックマークの登録と解除
- チェックの切り替え(覚えた / まだ)
- 入力しながらの絞り込み検索
全部を非同期にする必要はありません。1か所でいいです。
そして作ったら、その動きを声に出して説明できるようにしてください。
- ボタンを押すと、どこに情報が飛ぶのか
- そこで何を判断して、何を保存しているのか
- 結果が画面のどこに、どう返ってくるのか
これが言えるかどうかで、面接の結果が変わります。
4週目:仕上げと公開
必ずやること
- 入力チェック(バリデーション)…未入力で送信できない、文字数制限、エラー表示
- 他人のデータが見えないか確認…編集・削除の前に、ログイン中の本人のデータか確認する
- 書き方を統一する…変数名やルートの書き方を1つに揃える
- 見た目を整える(Tailwindで十分)
3つ目は、実務で僕が一番よく指摘されるところです。
Ahagate
ahaGate
AhaGate
aha_gate
どれが正解ということはありません。混ざっていることが問題です。
公開する
GitHubにコードを置くだけでは足りません。URLを開いてすぐ触れる状態にしてください。
- サーバー:Xserver、さくら、Render、Railway など何でもOK
.envをGitHubに上げていないか必ず確認- 公開後、スマホと別のブラウザから開いて動作確認
READMEを書く
1行目には「誰の何を解決するか」を書きます。技術名から始めないでください。
テスト用アカウントも必ず書いてください。無いと、ログイン画面で閉じられます。
詰まりやすいポイント一覧
| 症状 | よくある原因 | 確認すること |
|---|---|---|
| 画面が真っ白 | ビューのファイル名違い、構文エラー | storage/logs を見る |
| 404が出る | ルーティングの記述漏れ | php artisan route:list |
| データが保存されない | $fillable の設定漏れ | モデルの $fillable |
| CSRFトークンエラー | フォームに @csrf がない | Bladeのform内 |
| 非同期が動かない | 送信先URLの書き方 | ブラウザの開発者ツールのNetworkタブ |
エラーが出たら、まずログを見ること。画面のエラーより詳しい情報が書かれています。
よくある質問
Q. 1カ月で終わりませんでした。
A. 問題ありません。ただ長くかけるほど良くなるわけではないので、機能を削って完成を優先してください。
Q. AIを使ってもいいですか?
A. 使っていいです。ただし構成とテーブル設計は自分で決めてください。書かせるときは「初学者が読めるコードで」「自分が書いた部分に合わせて」と指定します。
Q. Laravelでないとダメですか?
A. そんなことはありません。僕の兄は素のPHPで作った作品で、30歳近くに転職を決めています。
まとめ
- 目安は1カ月。1週目の設計を飛ばさない
- ストーリー・機能4つ・非同期1か所の3点を最初に決める
- テーブル設計は絶対に自分で決める(面接で必ず聞かれる)
- 詰まるのは普通。Sさんも教科書5周でやっと理解した
- 完成したら、非同期処理の動きを声に出して説明できるか確認する
作品の出来より、説明できるかどうかで結果が決まります。
そこだけは、作りながら意識してください。
次に読む記事
ポートフォリオの無料添削をしています。企画段階の相談も歓迎です。LINEから送ってください。