前提
駆け出しWebアプリケーションエンジニアを想定読者としています。インフラや大規模システムのエンジニアでは効果がないかもしれません。この記事の本質だけ先に書くと「習うより慣れよ。その後習おう。」です。
悩み
私はシステムエンジニアとしてのキャリアは8年ほどありますが、Webエンジニアとしてのキャリアは3年目です。そんな中どのように学習すればいいか悩んでました。
- 「本や技術記事は多いけど、何から手をつければいいのかわからない」
- 「自分には何のスキルが不足しているのかわからない」
これは Webアプリケーション開発の“全体像”が見えていなかった からだと思います。
まずは全体を経験してみる方が理解が早い
サッカーの練習に例えます。
サッカーをやったことがない子に指導することになったとします。
いきなりシュートやドリブルの練習をさせるでしょうか？
まずミニゲームでもいいから試合させて「サッカーというスポーツがどんな流れなのか 」を体感してもらうのがいいと思います。そうすることで個別の練習でも
- どんな場面でシュートが必要なのか
- どんなときにドリブルが活きるのか
がわかると思います。
TODOアプリを作りまくったら景色が変わった
話を戻すと、私の経験としてTODOアプリを何度も作ったことで
- 技術記事や本がどのレイヤーの話なのか
- 自分に足りないものがなにか
がわかるようになりました。
もちろん全部がわかるようになったわけではなく、ネットワークや低レイヤーの技術はよくわかってないことも多いですが、何がわからないかわかるようになりました。
なぜTODOアプリなのか
TODOアプリには、学習に向いている理由がたくさんあります。
-
仕様がシンプルで迷わない
「追加」「編集」「削除」があれば Webアプリの基本機能が全部揃う -
どんな技術にも置き換え可能
フロントエンドはReact でも、Vue でも、バックエンドはTypeScriptでもPHPでも作れる
だから技術比較にも向いている -
AIとの相性がとても良い
TODOアプリはシンプルなので、生成AIはほとんどコンテキストがなくても安定してコードを出してくれる。
実践している「TODOアプリ学習サイクル」
私が実践してる4ステップ × 周回サイクル を紹介します。
🔄 学習サイクル（1セット）
1. AIに小さいTODOアプリを作ってもらう（DB＋デプロイ必須）
最初に「正解のひとつ」を知るステップです。
ここで大事なのは、
- プロジェクト作成
- 環境構築
- API と DB の接続
- デプロイ
という “動くWebアプリができるまでの一連の流れ” を知ること。
ここはバイブコーディングで作るため、機能は最小限にすることをお勧めします。
2. コードを写経する
写経は地味ですが、めちゃくちゃ効果があります。
- すべてのコードを読むことになる
- 「この書き方なんだろう？」という疑問が湧く
- 「写経してるのにエラーになる」→ 原因調査で経験値が爆増
- AI に質問した内容を必ず Markdown のドキュメントにまとめてもらう
例：
- 「
hoge.tsのこの書き方の意味を解説して、md にまとめて」 - 「このエラーの原因と読み方を md にまとめて」
後から読み返せる“自分の辞書”が作れます。
3. 自力で（またはAIを細かく使って）もう一度作る
ここでは完全に自力で作ってもいいし、AIをステップバイステップで使ってもOK。
- 「自分でも書けるけど面倒だからAIに任せる」
- 「出力が変なら軌道修正してもらう」
という感覚が理想です。
ただ、完璧じゃなくても全然問題なし。
4. 振り返り＋本を読んで体系化する
経験の後に本を読むと、理解が一気に加速します。
例：
- なぜDBのスキーマが必要なのか
- 自分のAPI設計はどうだったか
- 認証の仕組みはどう動いていたのか
興味のあるところを深掘りしましょう。
🔁 これを1セットとして、またTODOアプリを作る
2周目からは、1周目で作ったものを 少し拡張 します。
- 認証をつける
- UIを変える
- 別フレームワークで作る
- CI/CD を入れる（個人的に2周目でおすすめ）
- ユニットテストを書いてみる
好きな方向に伸ばせばOKです。
AI時代の強みは「最初に正解に触れられること」
AI時代における最大の学習ブーストは次の2つです。
- 最初から“正解例”をAIに作ってもらえる
- 何度でも質問し、何度でも作り直せる
だからこそ小さいWebアプリを何度も高速で作り、経験値を積む のが個人的に効果的でした。
おすすめ技術スタック
TODOアプリといえどDBとデプロイ環境を用意するにはお金がかかる場合があります。そこでおすすめなのがCloudflareです。
CloudflareならTODOアプリに必要な以下がクレジットカード登録なしで無料で使えます。
- Pages:フロントエンドホスティング用のサーバー
- Worker:バックエンド用のサーバー
- D1:リレーショナルデータベース
※気合いがあれば開発ガイド付きのTODOアプリリポジトリをここに追加する予定です。
もちろん無料でできることは限られてますが、TODOアプリ程度なら無料の範囲で問題なく使えます。
ただ、バックエンドがJavaScript/TypeScriptに限られてしまうので、学びたい言語が違う場合は他のサービスを検討してください（Cloud Run functionsとかでしょうか）
おわりに
この記事はポッドキャスト「ひまじんプログラマーの週末エンジニアリングレッスン」のコミュニティ「ひまプロ談話室」のアドベントカレンダーの記事です。
ポッドキャストは週2回更新でさまざな技術トピックが話されているので駆け出しエンジニアはもちろん全員におすすめのポッドキャストです！
今回の記事に関連したエピソードは以下です！
また、Slackコミュニティ「ひまプロ談話室」ではいろんなエンジニアと技術話や雑談ができるので是非参加してみましょう！