Progate終わったら次はコレ！現役エンジニアが教える「稼げるスキル」を身につけるための5ステップ

2025年8月21日2025年8月25日

この記事のポイント

Progateはあくまで入門。次のステップに進まないとスキルは停滞する
まずは自分のPCで開発できる「ローカル開発環境」の構築が必須
インプット3割、アウトプット7割の学習バランスを意識する
「模写コーディング」で実践的なコーディング力を徹底的に鍛える
より高度な知識はUdemyや技術書で効率的にインプットする
実務で必須の「フレームワーク」の学習に挑戦する
最終目標は、自分のスキルを証明する「オリジナルポートフォリオ」の完成

結論：Progateの次にやるべきは「アウトプット中心の学習」への移行

Progateで得た知識は「交通ルールを座学で学んだ」状態
次にやるべきは実際にコードを書くアウトプット中心の学習
インプットとアウトプットの比率を「3:7」にするのが重要

Progateのすべてのレッスンを終え、「プログラミング、完全に理解した！」という達成感に満ちているかもしれません。まず、その努力と情熱に心から拍手を送ります。Progateは、プログラミングの第一歩を踏み出すための、本当に素晴らしいサービスです。

しかし、ここが重要な分岐点です。Progateで得た知識は、いわば「交通ルールを座学で学んだ」状態。次にやるべきは、実際にハンドルを握り、公道で運転してみること、つまりアウトプット中心の学習にシフトすることです。

Progateは、環境構築が不要で、ブラウザ上でサクサク学べる手軽さが魅力です。しかし、その手軽さゆえに、実務で必ず直面する「環境構築の壁」や「ゼロからコードを書く大変さ」「終わりのないエラーとの戦い」を経験できません。

これからの学習フェーズでは、インプットとアウトプットの比率を「3:7」にすることを強く推奨します。知識をインプットしたら、すぐにそれを使って何かを作る。この繰り返しこそが、Progateで得た知識を「使えるスキル」へと昇華させる唯一の方法なのです。

なぜProgateだけでは不十分なのか？次のステップへ進むべき3つの理由

実務で必須の「開発環境」を経験できない
「自走力」が身につかない
知識が「点の状態」で終わってしまう

Progateを終えた段階で「エンジニアとして転職できる」「すぐに案件が取れる」と考えるのは、残念ながら現実的ではありません。それはなぜでしょうか。ここでは、Progateが素晴らしい入門教材であることを前提としつつ、次のステップへ進むべき明確な理由を3つ解説します。

実務で必須の「開発環境」を経験できない

Progateの最大のメリットは、面倒な環境構築なしに学習を始められる点です。しかし、プロのエンジニアは全員、自分のPC（ローカル環境）に開発環境を構築して仕事をしています。

テキストエディタの選定と設定、ターミナル（黒い画面）でのコマンド操作、Gitによるバージョン管理など、Progateでは触れられない、しかし実務では「できて当たり前」のスキルが山ほどあります。このギャップを埋めない限り、実務のスタートラインに立つことすらできません。

「自走力」が身につかない

Progateは、丁寧なスライドと穴埋め形式の演習で、学習者を迷わせることなくゴールまで導いてくれます。しかし、実務では「正解」が用意されていることなど稀です。

エラー解決能力：英語のエラーメッセージを読み解き、自力で解決策を見つけ出す能力（「ググり力」）が不可欠
ゼロから構築する力：真っ白なファイルからコードを書き始める「ゼロから1を生み出す力」

知識が「点の状態」で終わってしまう

Progateでは、HTML、CSS、JavaScript、Ruby、PHPなど、様々な言語や技術を個別に学びます。これらは一つ一つが「点」の知識です。しかし、Webサイトやアプリケーションは、これらの技術が複雑に連携しあって「線」となり、「面」となって初めて機能します。

【ステップ0】学習の羅針盤！目標を具体的に再設定しよう

最終目標（ゴール）を具体的に再設定することが極めて重要
目標が学習の羅針盤となり、優先順位を教えてくれる
具体的で少しワクワクするような目標にしよう

Progateをがむしゃらに進めている間は、レッスンをクリアすること自体が目的になっていたかもしれません。しかし、次のステップに進む前に、一度立ち止まって「自分はプログラミングで何を達成したいのか？」という最終目標（ゴール）を具体的に再設定することが極めて重要です。

目標例1：Web制作で副業月5万円を稼ぎたい

必要なスキルセット: HTML, CSS, JavaScript(jQuery), Sass, WordPress, PHPの基礎
学習パス: 模写コーディングでコーディングスキルを磨き、WordPressのテーマ作成やカスタマイズ案件を獲得

目標例2：自社開発企業のWebエンジニアに転職したい

必要なスキルセット: Ruby on Rails, Laravel(PHP), Django(Python)などのWebフレームワーク、データベース
学習パス: 特定のフレームワークを深く学び、オリジナルのWebアプリケーションをポートフォリオとして作成

目標例3：自分のアイデアを形にしたオリジナルアプリを開発・公開したい

必要なスキルセット: 開発したいアプリのジャンルによる（SNSアプリならバックエンドとデータベース）
学習パス: MVP（Minimum Viable Product）開発のアプローチを学び、素早く形にして公開

目標例4：データサイエンティストとして活躍したい

必要なスキルセット: Python, データ分析ライブラリ(Pandas, NumPy), 機械学習ライブラリ(Scikit-learn)
学習パス: Kaggleなどのデータ分析コンペティションに参加、実際のデータセットを使った分析経験を積む

目標が明確になれば、学ぶべき技術の優先順位が自ずと決まります。もし目標がまだ曖昧なら、「自分が作ってみたいサービス」や「憧れの企業」をいくつかリストアップし、そこで使われている技術（開発スタック）を調べてみるのがおすすめです。

【ステップ1】Progateの仮想環境から脱却！ローカル開発環境を構築する

テキストエディタの導入（Visual Studio Code推奨）
バージョン管理システム「Git」の導入
各言語の実行環境の構築

ここからが、本当の意味でのプログラミングの始まりです。Progateのブラウザ完結型環境を卒業し、プロのエンジニアと同じように、自分のPC上で開発を行うための「ローカル開発環境」を構築しましょう。

1. テキストエディタの導入

まずは、コードを書くための専門ソフト「テキストエディタ」をインストールします。2025年現在、最も人気があり、初心者からプロまで幅広く使われているのがVisual Studio Code (VSCode)です。

動作が軽量でサクサク動く
豊富な「拡張機能」で自分好みにカスタマイズ可能
利用者が非常に多いため、使い方で困っても情報を見つけやすい

スクロールできます

拡張機能名	用途
Japanese Language Pack	UIを日本語化
Prettier – Code formatter	コードを自動で綺麗に整形
Live Server	HTML/CSSファイルを保存した瞬間に、ブラウザの表示を自動で更新
indent-rainbow	インデント（字下げ）を色付けして見やすくする

2. バージョン管理システム「Git」の導入

Gitは、コードの変更履歴を記録・管理するためのシステムです。個人開発でもチーム開発でも必須のツールなので、この段階で必ず使えるようになっておきましょう。

「セーブポイント」のように、いつでも過去の状態に戻せる
どこをどう変更したのか、差分を簡単に確認できる
GitHubと連携させることで、自分のコードをインターネット上に保存・公開できる

3. 各言語の実行環境の構築

Progateで学んだ言語を、自分のPCで動かすための環境を整えます。目標設定で決めた言語を中心に構築しましょう。

スクロールできます

分野	必要な環境
Web制作（フロントエンド）	最新のWebブラウザ（Google Chrome推奨）、Node.jsとnpm
Webアプリケーション開発（Ruby）	rbenvやasdfといったバージョン管理ツールを使ってRubyをインストール
Webアプリケーション開発（PHP）	MAMP（Mac）やXAMPP（Windows）でApache、MySQL、PHPをまとめてインストール
Webアプリケーション開発（Python）	公式サイトからインストーラーをダウンロード、pyenvなどのバージョン管理ツール

【ステップ2】基礎固めのアウトプット！模写コーディングで実践力を養う

実在するWebサイトをお手本にしてゼロからコーディング
Progateの知識を定着させ、ゼロからコードを書く力を養う
最低でも5サイトは模写コーディングに挑戦しよう

ローカル開発環境という武器を手に入れたら、次はいよいよ実践的なコーディングの練習です。Progateで学んだ知識を定着させ、ゼロからコードを書く力を養うために最も効果的なトレーニングが「模写コーディング」です。

模写コーディングとは？

模写コーディングとは、実在するWebサイトをお手本にして、デザインやレイアウト、動きなどをそっくり真似ながら、自分自身でゼロからコーディングしていく学習方法です。絵画の「模写」と同じで、優れた作品を真似ることで、プロの技術やコードの書き方を効率的に学ぶことができます。

なぜ模写コーディングが重要なのか？

Progateの知識がどう使われるか分かる：断片的だった知識が実践の中で繋がり、生きたスキルになる
コーディングの引き出しが増える：おしゃれなWebサイトのレイアウトやアニメーションを再現し、コードの引き出しが格段に増える
自走力が鍛えられる：ブラウザのデベロッパーツールを使いこなし、エラー解決能力を飛躍的に向上させる

模写コーディングの具体的な進め方

題材を選ぶ：初心者は企業のシンプルなコーポレートサイトやLPがおすすめ
準備：模写したいサイトのスクリーンショットを撮るか、ページ全体を画像として保存
コーディング開始：まずはHTMLで骨格を組み、次にCSS、最後にJavaScript
答え合わせと改善：完成したらお手本と見比べて、ズレている部分を分析し改善

最初のうちは、1つのサイトを模写するのに1週間以上かかるかもしれません。しかし、2つ、3つとこなしていくうちに、驚くほど速く、そして綺麗にコーディングできるようになっているはずです。

【ステップ3】知識を深めるインプット！Progate卒業生におすすめの教材

動画学習プラットフォーム：Udemy
技術書
ドットインストール

アウトプット（模写コーディング）と並行して、Progateよりも一歩踏み込んだ知識をインプットしていくことも重要です。ここでは、Progateを卒業したレベルに最適な、次のインプット教材を厳選して紹介します。

1. 動画学習プラットフォーム：Udemy

Udemyは、世界中の専門家が作成した動画講座を購入できるプラットフォームです。Progateと異なり、より実務に近い、体系的な知識を動画で学ぶことができます。

特定の技術に特化した講座が豊富
頻繁にセールが行われており、数万円の講座が1,500円〜2,500円程度で購入可能
一度購入すれば視聴期限なく、何度も見返せる

2. 技術書

書籍は、特定の技術について網羅的かつ体系的にまとめられており、知識の土台を固めるのに最適です。手元に置いておけば、辞書のように参照することもできます。

情報が精査されており、信頼性が高い
著者の経験に基づいた深い知見やノウハウが学べる
自分のペースでじっくり読み進められる

3. ドットインストール

3分動画でプログラミングを学べる、老舗の学習サイトです。Progateと同様に、環境構築から様々な言語の基礎、ツールの使い方まで幅広くカバーしています。

1本3分という短さで、隙間時間に学習しやすい
動画を見ながら、実際に手を動かして同じものを作る形式で実践的
月額1,080円（税込）のプレミアム会員で全動画見放題

【ステップ4】実務への挑戦！Webフレームワークを学ぼう

Webアプリケーションを開発する上で必須の「枠組み」
実務の現場では、フレームワークを使わずに開発することはほとんどない
転職市場での価値となる重要なスキル

Web制作のスキルがある程度身につき、Webエンジニアへの転職やオリジナルアプリ開発を目指すなら、次なる挑戦は「Webフレームワーク」の習得です。

Webフレームワークとは？

Webアプリケーションを開発する上で、よく使われる機能や骨組みをあらかじめ用意してくれている「枠組み」のことです。フレームワークを使うことで、開発者は面倒な共通処理を自分で書く必要がなくなり、アプリケーション固有の機能開発に集中できます。

なぜフレームワークを学ぶ必要があるのか？

生産性の向上：ログイン機能、データベースとの連携、URLの設計など、Webアプリに必要な基本機能が簡単に実装
コードの統一性：フレームワークが定める「お作法」に従ってコードを書くため、チーム開発がしやすい
セキュリティの確保：セキュリティ対策が施された機能が標準で備わっている
転職市場での価値：多くの企業が特定のフレームワーク経験者を求人要件に挙げている

スクロールできます

フレームワーク	言語	特徴
Ruby on Rails	Ruby	「設定より規約」の思想で、素早く開発できる。スタートアップ企業で多く採用
Laravel	PHP	近年非常に人気が高い。「モダンなPHP」の代表格で、学習コストと開発効率のバランスが良い
Django	Python	Python製のフルスタックフレームワーク。機械学習やデータ分析との連携がしやすい
React	JavaScript	コンポーネントベースの設計が特徴。世界的に最も需要が高いフレームワークの一つ
Vue.js	JavaScript	シンプルで学習コストが低い。日本語のドキュメントも充実

【ステップ5】実力を証明する最強の武器！ポートフォリオを作成する

エンジニアとしての実力を証明する最強の武器
エンジニア転職では、ポートフォリオの有無と質が書類選考や面接の結果を大きく左右
自分で企画・設計・開発したオリジナルのWebサイトやWebアプリケーション

これまでの学習の集大成として、そしてエンジニアとしてのあなたの実力を証明する最強の武器となるのが「オリジナルポートフォリオ」の作成です。

ポートフォリオとは？

単なる自己紹介サイトではありません。あなたが持つ技術を使って、自分で企画・設計・開発したオリジナルのWebサイトやWebアプリケーションのことです。採用担当者は、あなたのポートフォリオを見ることで、技術力・問題解決能力・自走力・学習意欲を確認しています。

質の高いポートフォリオを作成するためのポイント

「自分の課題」や「好きなこと」をテーマにする：TODOアプリやSNSのクローンでは差別化できない
コアとなる機能を1つか2つに絞り、徹底的に作り込む：多機能で複雑である必要はない
こだわった点・工夫した点を明確にする：GitHubでソースコードを公開し、READMEファイルに詳細を記述
インフラにも挑戦する：HerokuやAWS、Vercelなどで実際にインターネット上に公開（デプロイ）

ポートフォリオ作成は、エラーとの長い戦いになるでしょう。しかし、それを乗り越えてサービスを完成させた経験は、あなたをエンジニアとして一回りも二回りも成長させてくれるはずです。

Progate卒業生が陥りがちな罠と、それを乗り越えるためのヒント

インプット地獄（チュートリアル地獄）
完璧主義の罠
エラーへの恐怖心
モチベーションの低下と孤独

Progateを終え、意気揚々と次のステップに進もうとした多くの学習者が、いくつかの共通の「罠」にはまってしまいます。代表的な罠とその対策を事前に知っておくことで、挫折のリスクを減らしましょう。

インプット地獄（チュートリアル地獄）

罠：不安から、次から次へと新しい教材に手を出し、インプットばかりを続けてしまう状態。「この講座を終えたら」「この本を読み終わったら」とアウトプットを先延ばしにし、結局何も作れずに時間だけが過ぎていきます。

対策：「インプットは、アウトプットのためにある」と肝に銘じましょう。学習の基本サイクルは「作りたいものを決める→そのために必要な知識をインプットする→実際に作る」です。

完璧主義の罠

罠：最初の模写コーディングやポートフォリオ作成で、1ピクセルのズレも許さず、コードも最初から完璧に美しく書こうとして、なかなか前に進めなくなってしまう状態。

対策：「Done is better than perfect（完璧よりまず終わらせろ）」という言葉を思い出してください。特に最初のうちは、見た目が多少崩れていても、まずは「動くもの」を完成させることが最優先です。

エラーへの恐怖心

罠：ローカル環境で開発を始めると、Progate時代とは比較にならないほど多くのエラーに遭遇します。赤いエラーメッセージが表示されるたびにパニックになり、学習意欲が削がれてしまいます。

対策：「エラーは敵ではなく、友である」と考え方を変えましょう。エラーメッセージは、プログラムが「ここがおかしいよ！」と教えてくれている親切なヒントです。

モチベーションの低下と孤独

罠：Progateのレベルアップシステムのような明確な指標がなくなり、成長を実感しにくくなります。また、一人で黙々と学習していると、孤独感からモチベーションが続かなくなりがちです。

学習記録をつける：GitHubのコントリビューション、Twitter(X)での学習報告、Qiitaでの技術記事投稿
仲間を見つける：Twitter(X)で同じ目標を持つ学習者と繋がったり、もくもく会や勉強会に参加

学習を加速させる！活用必須のツール＆コミュニティ

情報収集・技術記事プラットフォーム
質問・相談ができるコミュニティ
ポートフォリオや制作物を公開するプラットフォーム

独学は孤独な戦いになりがちですが、幸いなことに、現代には学習を助けてくれる素晴らしいツールやコミュニティが数多く存在します。これらを積極的に活用することで、学習効率を飛躍的に高めることができます。

1. 情報収集・技術記事プラットフォーム

スクロールできます

プラットフォーム	特徴
Qiita	日本最大のエンジニア向け技術情報共有サービス。環境構築からエラー解決まで膨大な情報
Zenn	モダンなUIで、本（複数記事をまとめたもの）形式で体系的な知識を公開可能
Stack Overflow	世界中のエンジニアが利用するQ&Aサイト。ほとんどのエラーはここで解決策が見つかる