Progateが終わったら次はこれ！言語別の学習ロードマップと全手順

Progateを完走された皆さま、まずはプログラミング学習の第一歩を突破されたこと、本当におめでとうございます。

スライド形式で直感的に学べるProgateは、プログラミングの基礎を固める上で最高のツールです。

しかし、全コースを終えた瞬間に「次は何をすればいいのか？」「自分のパソコンでどうやってコードを書けばいいのか？」という壁にぶつかる方は少なくありません。

実は、Progateを終えた後の学習こそが、「プログラミング初学者」から「エンジニア」へと脱皮するための最も重要なフェーズです。

本記事では、Progateを終えた方が次に進むべき具体的なステップを、言語別のロードマップや環境構築の手順を含めて徹底的に解説します。

この記事を読み終える頃には、あなたが今日から何をすべきかが明確になっているはずです。

なぜ「Progateの次」で迷うのか？知っておくべき3つの壁

Progateを終えた後に多くの人が足踏みしてしまうのには、明確な理由があります。

それは、Progateという「至れり尽くせりの環境」から、「正解のない実戦環境」への移行が急激に行われるからです。

まずは、これからあなたが直面する3つの壁を理解しておきましょう。

1. 「ローカル開発環境」という最初の難関

Progateでは、ブラウザ上のエディタにコードを書き込めばすぐに実行結果が表示されました。

しかし、実際の開発では自分のパソコンの中に「開発環境」を構築しなければなりません。

エディタのインストール、言語の実行環境の設定、パス（Path）を通す作業など、コードを書く前段階でつまずく人が全体の約3割にのぼると言われています。

2. 「答えがない」状態への不安

Progateには「見本」と「判定ボタン」がありました。

しかし、実際の開発には判定ボタンはありません。

自分の書いたコードがなぜ動かないのか、あるいはなぜ動いているのかを、自分自身で突き止める「デバッグ能力」が求められるようになります。

3. 何を作るべきか分からない「目的の喪失」

基礎を学んだ後、次は何を作ればいいのか分からず、再び別のプログラミング学習サイトの基礎コースを周回してしまう「Progateループ」に陥る人が多いです。

これは、「学ぶこと」が目的になってしまい、「作ること」への一歩が踏み出せていない状態です。

全言語共通！Progate直後に必ずやるべき3つのこと

どの言語を学習している場合でも、Progateを終えたらまず以下の3つのステップを踏んでください。

これが「エンジニアとしての土台」になります。

1. VS Code（エディタ）のインストールと設定

まずは、世界中のエンジニアが愛用しているエディタVisual Studio Code (VS Code)をインストールしましょう。

Progateのエディタ画面を、自分のPC上に再現するイメージです。

VS Codeには豊富な拡張機能があり、コードの入力を補助したり、エラーを指摘してくれたりします。

項目	推奨設定・拡張機能	理由
日本語化	Japanese Language Pack	操作メニューを日本語にするため
自動保存	Auto Save (On)	保存忘れによる実行エラーを防ぐため
構文強調	各言語のExtension	コードを見やすく色分けするため
ターミナル	標準搭載のTerminal	コマンド操作に慣れるため

2. Git / GitHub でのコード管理

プロの開発現場でGitを使わない現場はありません。

「いつ、どこを、なぜ変更したのか」という履歴を保存するツールがGitです。

Progateを終えたばかりの段階では、完璧に使いこなす必要はありませんが、以下の基本操作だけは自分のPCで試しておきましょう。

• git init：リポジトリの作成
• git add：変更内容のステージング
• git commit：変更の記録
• git push：GitHubへのアップロード

3. ドットインストールでの復習と補完

Progateと双璧をなす学習サイト「ドットインストール」は、3分程度の動画で学習を進めるスタイルです。

Progateでは触れられなかった「ローカル環境構築手順」が動画で丁寧に解説されています。

特に「ローカル開発環境を作ろう」シリーズは、Progate卒業生にとって必須のバイブルと言えます。

【言語別】Progate後の詳細学習ロードマップ

ここからは、あなたがProgateで学んだ言語に合わせて、次に具体的に何をすべきかをロードマップ形式で解説します。

HTML / CSS / JavaScript（Webフロントエンド志望）

Webサイトの見た目を作るフロントエンドエンジニアを目指す方は、以下のステップで進んでください。

ステップ1：既存サイトの模写コーディング

教科書通りのコードではなく、実際に世の中にあるWebサイトを「見た目通りに作る」練習です。

最初は、「模写コーディング 初学者」などのキーワードで検索し、練習用のデザインデータを提供しているブログなどを参考にしましょう。

デベロッパーツール（ブラウザの検証機能）を使い、プロがどのようなHTML構造にしているかを分析する力が養われます。

ステップ2：JavaScriptによる動的機能の実装

HTML/CSSで作ったサイトに、ハンバーガーメニュー、スライダー、タブ切り替えなどの機能をJavaScriptで実装します。

ProgateのJSコースで学んだ「変数」「条件分岐」「ループ」が、実際のWebサイトのどの部分に使われるのかを体感することが重要です。

ステップ3：Sass (SCSS) の導入

CSSをより効率的に、かつ整理して書くための技術「Sass」を学びましょう。

実務では生のCSSを書くことは少なく、Sassを利用するのが一般的です。

変数やネスト（入れ子）といった概念を学ぶことで、プログラミング的な思考でデザインを管理できるようになります。

Ruby / PHP / Python（バックエンド・サーバーサイド志望）

データの保存やユーザー認証など、システムの裏側を作るバックエンドエンジニアを目指す方は、フレームワークの習得が鍵となります。

Ruby を学んだ方：Ruby on Rails への移行

ProgateのRubyコースを終えたら、迷わず「Ruby on Rails」の学習に移りましょう。

RailsはWebアプリケーションを作るための強力なフレームワークです。

1. Railsチュートリアルへの挑戦: 非常に難易度は高いですが、これを完走すればエンジニアとしての基礎力が格段に向上します。
2. CRUDアプリの作成: データの「作成(Create)」「読み取り(Read)」「更新(Update)」「削除(Delete)」ができる掲示板やToDoリストを作成しましょう。

PHP を学んだ方：Laravel の習得

PHPの基礎を終えた後は、現在最もシェアの高いフレームワークである「Laravel」を学びます。

PHPはWeb制作（WordPress等）とも相性が良いため、自分の進みたい方向に合わせて「WordPressテーマ開発」に進むか、「LaravelでのWebアプリ開発」に進むかを選択してください。

Python を学んだ方：目的に合わせた分岐

Pythonは用途が広いため、目的に応じて次の一手を変える必要があります。

• Web開発: Django または Flask というフレームワークを学び、Webアプリを作ります。
• データ分析・AI: Pandas, NumPy, Scikit-learn などのライブラリを学び、Kaggleなどのコンペに参加したり、公開データを分析したりします。

プロの思考を身につける！「自走力」を鍛える4つの習慣

Progateを終えた後は、誰かが答えを教えてくれる環境ではありません。

エンジニアとして最も価値が高いとされる「自走力（自分で調べて解決する力）」を養うための習慣を身につけましょう。

1. 公式ドキュメントを読む癖をつける

解説ブログやQiita、Zennの記事は分かりやすいですが、情報が古かったり間違っていたりすることがあります。

「最後は必ず公式ドキュメント（公式サイトの解説）を確認する」という習慣を持ちましょう。

最初は難しく感じますが、慣れてくると最も正確で信頼できる情報源になります。

2. エラーメッセージを「正しく」読む

エラーが出たとき、すぐに画面を閉じたりパニックになったりしていませんか？

エラーメッセージには、「何が原因で」「どのファイルの何行目が間違っているか」がすべて書いてあります。

英語で書かれていても、DeepLやChatGPTなどの翻訳ツールを使えば理解できます。

エラーを解決するたびに、あなたはエンジニアとして1ステップ成長しています。

3. 検索スキル（ググり力）を磨く

知りたい情報を最短で手に入れるために、検索ワードの選び方を工夫しましょう。

• 「[言語名] [やりたいこと] 実装」
• 「[言語名] [エラーメッセージ]」
• 「[ライブラリ名] 使い方 最新」 : このように、複数のキーワードを組み合わせ、さらに「期間指定（1年以内など）」で検索することで、鮮度の高い情報を得られます。

4. ChatGPTを「家庭教師」として活用する

現代の学習において、AIの活用は不可欠です。

ただし、答えをそのままコピペするのではなく、以下のように問いかけてみましょう。

• 「このコードでエラーが出るのですが、原因と、なぜそうなるのかという原理を解説してください」
• 「Progateで学んだこの知識を使って、さらに発展的なコードを書くにはどうすればいいですか？」
• 「答え」ではなく「考え方」を聞くのが、AIを味方につけるコツです。

ポートフォリオ作成への最短ルート

学習が進んできたら、いよいよ自分の作品（ポートフォリオ）を作り始めましょう。

企業への転職や副業案件の獲得を目指すなら、避けては通れない道です。

なぜ「オリジナル」が必要なのか？

チュートリアルで作った作品は、他の学習者と内容が被ります。

採用担当者は「この人は自分で考えてコードが書けるのか？」を見ています。

「誰の、どんな悩みを解決するアプリか」という視点が入るだけで、あなたの作品の価値は一気に高まります。

ポートフォリオのアイデア出しのコツ

壮大なシステムを作る必要はありません。

• 自分の趣味（例：キャンプ場の備忘録アプリ）
• 日常の不便（例：冷蔵庫の賞味期限管理アプリ）
• 既存サービスの改善（例：もっとシンプルな読書記録アプリ）
  身近な課題をITの力で解決しようとする姿勢が、エンジニアとしての適性を証明します。

おすすめの学習リソース一覧

Progateの次に活用すべき、信頼性の高いリソースをまとめました。

リソース名	特徴	おすすめの対象
Udemy	有料だが質が高い。動画で一連の開発を学べる。	実践的なアプリを作りたい人
ドットインストール	3分の短編動画。環境構築に強い。	隙間時間に学習を進めたい人
Qiita / Zenn	エンジニアの知見共有サイト。	最新技術やエラー解決策を探す人
テラテイル	プログラミング特化のQ&Aサイト。	自力で解決できないエラーがある人
公式ドキュメント	各言語・フレームワークの公式サイト。	正確な仕様を知りたい人

挫折を防ぐためのマインドセット

最後に、Progate後の学習で最も大切な「心の持ちよう」についてお話しします。

プログラミング学習において、「分からない時間」があるのは正常な状態です。

Progateがスムーズに進みすぎたせいで、「自分のPCでやると全然進まない、自分には才能がないのではないか」と錯覚してしまう人がいます。

しかし、現役のプロエンジニアであっても、1つのエラーの解決に数時間を費やすことは珍しくありません。

大切なのは、「毎日エディタを開くこと」です。

1行でもコードを書く、1つでもエラーメッセージを読む。

その積み重ねが、数ヶ月後に大きな差となって現れます。

まとめ

Progateを終えたあなたは、プログラミングという広大な海の入り口に立っています。

ここからの学習は、用意されたレールを走るのではなく、自分で地図を描きながら進む冒険のようなものです。

1. まずはVS Codeをインストールし、自分のPCでコードが動く感動を味わいましょう。
2. Git/GitHubを導入し、自分の成長をログとして残しましょう。
3. 言語別のロードマップに従い、模写やチュートリアルで「実戦」を経験しましょう。
4. 「自走力」を磨き、世界に一つだけのポートフォリオ作成を目指しましょう。

Progateという基礎を固めた今のあなたなら、必ず次のステップへ進めます。

もし道に迷ったら、この記事を読み返して現在地を確認してください。

エンジニアへの道は、今日ここから始まります。