🚀 サマーウォーズに憧れて半年。未経験からNext.jsを触るまで

1. 導入：半年前、私は本当に「ゼロ」だった

プログラミングを始めようと思った、あの日のきっかけ

皆さん、こんにちは。この記事を読んでいる方の中には、「これからプログラミングを始めよう」と考えている方や、今まさに学習の壁にぶつかっている方がいるかもしれません。

半年前、私はプログラミングに関して何の知識もない、文字通りの「未経験者」でした。そんな私が、なぜこの世界に飛び込んだのか？きっかけは主に3つあります。

1. 友人の一言が背中を押した

最も直接的なきっかけは、エンジニアを目指している友人の誘いでした。「プログラミングは楽しいぞ」「今からでも全然遅くない」という彼の言葉は、新しい一歩を踏み出す勇気をくれました。身近に目標となる存在がいたことは、大きかったです。

2. 昔から抱いていた「パソコンでの仕事」への憧れ

子供の頃から、パソコンを使って何かを創り出す仕事に漠然とした憧れがありました。キーボードを叩いて作業している姿は、私にとってかっこよく見えていました。

3. 私のバイブル、『サマーウォーズ』の影響

そして、少し特殊かもしれませんが、私のバイブルである映画『サマーウォーズ』の影響も大きいです。あの映画の中で描かれる、プログラミングなどを駆使して世界を救う姿を見て、「技術は良くも悪くもこんなにも社会に貢献できるんだ」「私も自分の力で何かを作ってみたい」と強く感じていました。

これら3つのきっかけが重なり、私はプログラミングの世界に足を踏み入れました。

記事のゴール：この半年間、私が経験したこと

この半年間、「はじめて形になった！」と感じた感動もあれば、「なぜ動かない??」と頭を抱えることもありました。

この記事は、私と同じように未経験から学習を始めた、またはこれから始めようとしている全ての方に向けて、この半年間の体験を共有する場所として書いています。

特別なノウハウというよりは、

初期の苦労をどう乗り越えたか？
モチベーションの波をどう維持したか？
今振り返って「もっと早くやっておけば良かった」と後悔していることは？

といった、私の率直な経験を正直ベースで共有します。

たった半年間の道のりですが、これからプログラミングを学ぶ誰かの「少しでも参考になればいいな」と思っています。

次は私が最初に出会った壁、2. 学習開始直後の苦労と戦略について振り返っていきたいと思います。

2. 学習開始直後の苦労と戦略（最初の1〜2ヶ月）

初期に選んだ教材と「最初の目標」

最初の1〜2ヶ月で頼りにしたのは、主に以下の2つでした。

💻 Progate：これがメインでした。HTML/CSSから始まり、JavaScript、TypeScript、React、Next.jsといった主要なコースはひと通りクリアしました。最初は「スライド通りにやれば動く！」という体験が、とにかく楽しかったです。
🎥 YouTube動画の模写：Progateで基礎を学んだ後、YouTubeで公開されているチュートリアル動画を見ながら、実際にWebサイトや簡単なアプリを手を動かして模写しました。

最初の目標は、Progateで学んだことを「自分一人で再現してみる」ことでした。これのおかげで、インプットとアウトプットのバランスが取れた気がします。

挫折しそうになった「最初の大きな壁」

Progate内は快適だったのですが、いざローカル環境で何かを始めようとすると、すぐに壁にぶつかりました。

😈 何かを作りたいが何も思い浮かばない：やはり、プログラミングを始めたからには自分で何かを作ってみたい！と思ったものの、何を作ればいいのか、どんなことを勉強していけば作れるようになるのかわからず、作業が止まってしまう時もありました。
🤯 エラーメッセージの読解：英語で書かれた長いエラー文を見た瞬間、「あっ、詰んだ」と思っていました。エラーメッセージから原因を特定するまでに、本当に時間がかかりました。

どう対策していたか？

特別なことではありませんが、この時期を乗り越えるために意識していたのは次の2点だけです。

エラー文は全文コピーしてAIに聞く：エラーが出たら、メッセージ全体をそのままAI（ChatGPTなど）に貼り付けていました。あまり頼りたくはなかったのですが、便利なのでつい使ってしまいました。
「一旦手を動かしてみる」：作りたいものが思い浮かばない、どう勉強すればいいかわからない、と頭で考える時間が長くなったら、とりあえず真似ると決めていました。YouTubeのハンズオン動画を見ながら、とにかく手を動かすことで、学習を止めないようにしていました。

3. 中盤の停滞期と実践フェーズ（3〜4ヶ月目）

「インプット疲れ」をどう打破したか

初期の楽しかったProgate生活を終え、いざ本格的にコードを書き始めると、モチベーションがガクッと落ちる時期がありました。

原因は主に2つです。

ゴールが不透明な時：次に何を勉強すればいいのか、この技術を学んで何ができるようになるのかが明確でなくなり、作業が停滞してしまいました。
やることが多すぎて諦める：一つの課題に対して、機能追加や修正点が大量にあると、「もう今日はいいか…」とやる気が出なくなることが多かったです。

この停滞を乗り越えるために意識していたのは、インプットはさらっと済ませて、すぐアウトプットに切り替えるという初期に友人からもらったアドバイスでした。

知識が完璧でなくても、とにかく手を動かし、エラーにぶつかることを前提に進める。この割り切りが、停滞期を脱出する最大の戦略になりました。

初めての本格的なアウトプット

インプット重視の学習をやめて、アウトプットに集中しようと決めてから作った成果物は、本当に初歩的なものです。

制作物の概要：YouTubeのハンズオン動画で作成した小さなWebサイトやツール。
私なりの工夫：動画の通りに作った後、このボタンの色を変えてみよう、ここに別の情報を追加してみようと、自分なりにコードを少しずついじり始めました。

ゼロから作る自信はまだありませんでしたが、誰かの作った土台をいじることで、「ここのコードが、画面のここに対応しているんだ」という繋がりが明確に見えました。

自分で少しでもアレンジが加わったものが、思った通りに動いた時の喜びは、Progateを完了させた時よりもはるかに大きかったです。これが、次の学習へのモチベーションを保つガソリンになりました。

4. 半年が経った「今」のスキルと変化（5〜6ヶ月目）

半年で習得した技術スタックと成長

半年が経ち、今、私が「これなら少し触れる」と言える技術は以下の通りです。

💻 技術スタック

フロントエンド系：HTML/CSS、JavaScript、TypeScript、React、Next.js
ツール・周辺技術：Git / GitHub（一応、使えるようになった！）

特に大きかったのは、Next.jsを使ったチーム開発に参加できたことです。もちろん、今でもAIの力を借りながら、そして都度調べながらの作業ですが、実際に動くプロダクトに関わる経験は、何物にも代えがたいものでした。

⚙️ チーム開発で得られたスキル

全体の進め方：一つの機能が完成するまでの流れ（設計、実装、レビュー）を体感できました。
Git/GitHub：プルリクエストやブランチ操作など、共同開発に必要な基本的な操作を覚えました。（まだ完璧ではないけど、使えています！）
コンポーネント設計：再利用可能なコンポーネントを意識することの重要性と便利さに気づきました。

半年で得られた3つの大きな学び

この半年間を振り返って、技術的なこと以上に重要だと感じた学びは以下の3つです。

1. 学びその1: 「AI頼りすぎ」の危険性

エラー解決や調べ物でAIを多用するのは便利ですが、頼りすぎると危険だと感じました。AIが生成したコードは、「何を変数にしているのか」「なぜここでnullを使っているのか」といった本質的な部分が抜け落ちていることがあります。楽ですが、やはり自分の手で書いて仕組みを理解することや、人間がレビューすることの重要性を痛感しました。大まかな構成やアイディア出しを任せるのが、一番良い付き合い方だと感じています。

2. 学びその2: 「全体の流れ」を知る重要性

チーム開発に参加して、自分が書いたコードがプロダクトのどこに影響を与え、どういう手順でデプロイされるのか、全体の流れを知ることが、学習効率とモチベーションを爆発的に高めることに気づきました。

3. 学びその3: 「小さな達成感」を積み重ねる

毎日少しでもコードをいじる、YouTubeの動画を少しアレンジする。この小さな達成感の積み重ねが、挫折せずに半年間続けるための最大の秘訣でした。

5. まとめとこれから

振り返って後悔していること

半年間、学習の進め方については後悔は少ないのですが、唯一「もっと早くやっておけば良かった」と思うのは、Git/GitHubのコマンドや操作のメモです。

今でもブランチ操作やコンフリクト解決の際に「あれ、このコマンドなんだっけ？」と手が止まることがあります。初歩的なことでも、メモアプリなどに操作手順を体系的に記録しておけば、毎回調べる時間を減らせたなと感じています。

これから学習を始める方へ

この半年間で私が確信したのは、とにかくコードに触れて手を動かすのが大事ということです。

インプットで知識を頭に入れることも重要ですが、それを上回るのがアウトプットの経験です。エラーと格闘し、試行錯誤することでしか身につかない能力があります。完璧に理解しようとせず、まずは動くものを作ることを目標に、最初の一歩を踏み出してみてください。

私の「Next Step」：次の半年で目指すこと

この半年でチーム開発の面白さを知りましたが、次の半年で目指す目標はシンプルです。

一人で問題解決できる力をつける: 誰にも聞かず、AIや検索を駆使して一人で「わからない」を解決する能力を高めたいです。
開発中のプロダクトを完成させる: 今携わっている開発物を、胸を張ってこれ、使ってみてと人に言えるレベルまでしっかり作り込み、公開することが最大の目標です。