- Twitterフォロワー2万人
- 最高月収1,500万円
- Progateが終わったら次なにすればいい？
- Progateが終わったらどれくらいのスキルが身に付く？
- Progateが終わったらお金稼げるの？
- Progateが終わったらエンジニア転職できる？
と疑問を抱えている方の悩みを解決できる記事を書きました。
本記事を読めば、Progateが終わったら次にやるべきことが明確になります。
ゆえに、今後無駄な学習をすることなく最短距離で目標まで突っ走ることができます。
筆者のぼくはプログラミング歴３年の現役フリーランスエンジニアです。
ぶっちゃけ、次に何をすればいいのか分からない状況でProgateを勉強してる時点で結構ヤバいです。
なぜなら、次の学習ステップが曖昧な人は99%の確率でProgateを何周もする沼にハマってしまうから。
そうなってしまうと、ほぼ間違いなく挫折します。
本記事はProgateが終わったら次にやるべき具体的なロードマップを現役フリーランスエンジニア目線で徹底解説しました。
本記事を最後まで読めば、Progateで学習すべき内容とProgate卒業後の学習手順が明確になります。
これからProgateで勉強しようと考えている方や現在すでにProgateで学習中の方はぜひ最後まで読んでみてください。
- YouTube版も公開中（画像をタップするとYouTubeに遷移します）
Progateの正しい学習法からProgate後の学習ロードマップまでProgateの全ノウハウをYouTubeで解説しています。この動画は1時間1分ありますので、本気でプログラミングに取り組みたい方だけご覧ください。
▼無料登録&アンケート回答で豪華特典アリ▼
何をもってProgateが終わったと言えるのか？
そもそも何をもってProgateが終わったと言えるのか？
この基準が明確でないといつまでもProgateで学習し続ける羽目になります。
この繰り返しでProgateを何周もした結果、いつまで経っても次に進むことができずに途中で挫折していく初心者をたくさん見てきました。
断言しますが、最初にProgateが終わったと言える基準を明確にしておかないと、永遠にProgateでの学習が終わることはありません。
これから目的別に何をもってProgateが終わったと言えるのかの基準を解説します。
まだ勉強してない学習レッスンがある場合はそれを終わらせてから次に進んでください。
- 副業・フリーランス編
- エンジニア転職編
１：Progateが終わったと言える基準【副業・フリーランス編】
「副業で稼ぎたい」「未経験からフリーランスになりたい」「在宅ワークで稼ぎたい」という方はWEB制作で使われる言語の学習レッスンを１〜２周したら、次に進んじゃってOKです。
- HTML&CSS
- JavaScript
- jQuery
- PHP
- SQL
- Sass
ポイントは、最大２周したら100%理解できなくても潔く諦めて次に進むということです。
Progateは何周したところで基礎は理解できても実務で使えるスキルは身に付きません。
分からない問題に直面したときはググれば答えが出てくるので、コードを暗記する必要もありません。
プログラミングは参考書持ち込みありのテストのようなものなので、最初から100%理解する意味はないんです。
ゆえに、Progateの学習レッスンは最大２周まででOK。
50%の理解度でどんどん次に進んでいきましょう。
２：Progateが終わったと言える基準【エンジニア転職編】
フロントエンドエンジニアやバックエンドエンジニアとして転職したい方はWEB開発に必要な言語の学習レッスンを１〜２周したら、次に進みましょう。
- HTML&CSS
- JavaScript
- Ruby & Ruby on Rails or PHP or Java
- Command Line
- Git
- SQL
Progateでは上記の言語以外にも「React」や「Go」などの言語も学べますが、転職したい企業で使われてない限り、わざわざ学習する必要はありません。
「Ruby & Ruby on Rails or PHP or Java」についても転職したい企業が使用してる言語から逆算してどれか１つを学習すればOKです。
プログラミング言語はどれも似たような仕組みなので、１つの言語を習得できれば、他の言語も容易く習得できます。
Javaを書ける人は少し勉強すれば、PHPもすぐに書けるようになるんですよね。
バックエンド言語はあれこれ勉強するのではなくまずは１つに絞って学習しましょう。
Progate(プロゲート)学習後のスキル感
以上、Progateでの学習が終わると以下のような基礎スキルが身に付きます。
- プログラミング言語の書き方
- 基本構文やコードの知識
しかしながら、Progateだけだと基礎理解はできても実際の仕事で使えるスキルは身に付きません。
副業で稼ぐにしろエンジニア転職にしろプログラミングスキルを活かしてお金を稼ぐことはまず不可能です。
今後プログラミングの仕事に携わっていくにはより実務に近い形式で学習していく必要があります。
これからProgateが終わったら次にやるべきことを
- 副業・フリーランス編
- エンジニア転職編
この２つに分けて解説していきます。
自分の目的に合った学習ステップを参考にしてください。
Progateが終わったら次にやるべき７ステップ【副業・フリーランス編】
まずは「副業で稼ぎたい」「未経験からフリーランスになりたい」「在宅ワークで稼ぎたい」という方向けにProgateが終わったら次にやるべき学習ステップを解説していきます。
これから解説する学習手順はWEB制作スキルを身に付けるまでのロードマップとなります。
- ローカル開発環境を構築する
- Progate HTML&CSS道場レッスンに挑戦する
- サイトを写経する
- ポートフォリオサイトを作る
- Sassを学習する
- デザインカンプをコーディングする
- WordPressを学習する
１：ローカル開発環境を構築する
まずはパソコンでプログラミングするために環境構築を行いましょう。
Progateにはテキストエディターが内蔵されているので、環境構築を行わずともコードを書くことができます。
テキストファイルを編集するソフトのこと。
しかし、実際の仕事では最初にプログラミングするための開発環境を構築する必要があります。
「えぇ、プログラミングってパソコンがあればすぐにできるわけじゃないの？」と驚くかもしれませんが、残念ながらその通りです。
環境構築作業は現場や案件によって難易度に差があるのですが、今回はVisual Studio CodeというテキストエディターをインストールするだけでOKです。
Microsoftが提供している無償で高機能なエディターのこと。VSCodeと呼ばれている。
実際の仕事でも環境構築作業は避けては通れません。
学習段階で仕事で必要なスキルやツールを一度経験しておくことが大切です。
２：Progate HTML&CSS道場レッスンに挑戦する
環境構築が終わったら、次はProgate HTML&CSS道場レッスン 初級編〜上級編にチャレンジします。
道場レッスンは、デザインをコーディングする実務に近い形で学習できるのでガチおすすめです。
ただし、道場レッスンは難しいので頑張ってください。
学習レッスンのようにスライドを見ながらコードを書くことができないので、ほぼ100%手が止まります。
「うわー、一生懸命勉強したのに全く歯が立たない…」と落ち込む人も多いと思います。
もし途中で分からなくなったら
- 分からない箇所をググる
- Progate HTML/CSS学習レッスンを復習する（ただし最大1周まで）
- ドットインストールでHTML/CSSの知識を補う
これらを実践してみてください。
それでも分からない場合は答えをコピペして先に進みましょう。
道場レッスンは普通に難しいので、つまずいた挙句グルグル復習ばかりしてるうちに挫折していく人が本当に多いです。
最終的な目的は、プログラミングでお金を稼ぐことですよね？
Progateを完璧にクリアすることがあなたの目標ではないはずです。
道場レッスンは「もうこれ以上自分には無理…」と感じたら、潔く諦めて次に進みましょう。
- 分からないことがあれば必ずググる
- ググっても分からなければ答えを見てコードを書く
- 完成したコードをいじって動かしてみる
３：サイトを写経する
Progate HTML&CSS道場レッスンが終わったら、次はサイトを写経します。
サイトのソースコードを見ながらコーディングすること。
サイトを写経する目的は、実際のWEB制作におけるコーディングの流れを掴むためです。
断言しますが、これまでの人生で一度もサイトを作ったことない人がいきなりゼロからサイトが作れるわけがありません。
だから、最初はプロのやり方を真似することから始めます。
お手本通りにコードを書くことで、「サイトってこんな感じで作っていくんだ…！」と大まかな流れを掴むことができるんですよね。
例えば、以下の動画の解説通りにコードを書くと、最終的にサイトが完成します。
最初はコードの意味が理解できなくてもOKです。
まずはコーディングの流れを掴むことを目標に写経でサイトを２〜３つ作りましょう。
サイト写経のおすすめ参考書は「HTML&CSSとWebデザイン入門講座」です。
- bootstrap
- emmet
４：ポートフォリオサイトを作る
サイト写経が終わったら、次はポートフォリオサイトを作りましょう。
ポートフォリオサイトとは自分自身のプロフィールや制作実績を掲載したサイトのこと。
これまでの知識を総動員してゼロからオリジナルのサイトを作っていきます。
これから仕事を獲得していくにはクライアントから信頼を勝ち取るためにポートフォリオサイトが必須となります。
プログラミングの知識がないクライアントはあなたが本当にスキルがあるエンジニアかどうか見た目だけでは判断できません。
例えば、あなたが仕事を発注するクライアントだとして、以下の１と２ではどっちに仕事をお願いしたいですか？
- 「毎日13時間プログラミング学習してます！ぜひ仕事ください！」とお願いしてくる人
- 「私の制作実績はこちらです。これなら３週間で作れます」とだけ言う人
ほとんどの人が２に仕事をお願いすると思います。
つまり、クライアントから信用してもらうには実際に自分で作ったサイトを見せるしかないんです。
そこで登場するのがポートフォリオサイトというわけです。
- サイトにどんな内容を盛り込むのか？
- どんな見た目にするのか？
- どうやってコーディングするのか？
自分の力だけでゼロからサイトを作ることで、実際の仕事に近い形で学習できます。
とはいえ、いきなり白紙の状態からサイトを作り上げるのは難しいので、参考サイトを真似しながら作っていけばOKです。
実際の仕事でも必ずクライアントからは参考サイトを提出してもらいます。
そして、参考サイトをベースに新しいサイトを作っていくんです。
最初は難しすぎて手が止まるかもしれませんが、よく分からないながらも必死にゼロからサイトを作る過程が一番成長します。
仕事を獲るためにもポートフォリオサイトが必要不可欠となりますので、ぜひ前向きにチャレンジしていきましょう。
【ポートフォリオサイトの作り方を詳しく知りたい方へ】
５：Sassを学習する
ポートフォリオサイトが完成したら、次はSassを学習しましょう。
CSSをさらに使いやすくしたスタイルシートのこと。
SassはProgate学習レッスンでも学習するのですが、正直全く物足りないため、再度本格的に学習します。
Sassを使うことで少ないコード量でCSSを書けたり、CSSのコードを管理しやすくなります。
ぼくは初心者時代、「どうせCSSで書けるんだから、Sassを勉強する時間がもったいない」という理由でSassの学習を後回しにしてました。
しかし、いざ勉強してみたらマジで便利すぎて「なんでもっと早く勉強しなかったんだ…」と後悔したんですよね。
正直、CSSだけでもコーディングできますが、Sassを使った方が100倍効率良くコーディングできるので、必ず学習するようにしましょう。
Sassのおすすめ参考書は「Web制作者のためのSassの教科書」です。
６：デザインカンプをコーディングする
Sassの学習が終わったら、次はデザインカンプコーディング練習をしましょう。
クライアントに提示するデザイン案のこと。
最大の目標は、HTML/CSSでデザインカンプを再現することです。
実際のWEB制作の現場ではデザイナーが制作したPhotoshopやIllustratorのデザインカンプを元にコーディングしていきます。
正直、ここはかなり難しいです。
- 右側に意図しない余白が生じる
- パソコン画面とスマホ画面の中間でレイアウトが崩れる
- 画像の書き出し方が分からない
このようにここが最大の山場となります。
もし途中でつまずいたら
- つまずいたらググりまくる
- サンプルコードを参考にする
- 分かる人に教えてもらう
これらを実践してみてください。
正直、ここは出来るまで諦めずに手を動かしまくるしか方法はないです。
デザイン通りにコーディングできるようになれば、クラウドソーシングの下請け案件やWEB制作会社からの案件にも対応可能となります。
WEB制作で月15万円以上稼ぐには、デザイン通りにコーディングする力が必須です。
１枚もののLPから複数ページのコーポレートサイトまでコーディングできるように練習してきましょう。
- Codestep
→模写コーディングはやらなくてOK
- Photoshop
- Illustrator
- XD
- Figma（あればなおよし）
- PerfectPixel
７：WordPressを学習する
デザインカンプコーディング練習が終わったら、次はWordPress自作テーマ学習しましょう。
具体的には、デザインカンプをコーディングして作ったサイトをWordPressの独自関数を使いながらWordPress用に作り直していきます。
WordPressは学習範囲が広いため、参考書での学習がおすすめです。
おすすめ参考書は「WordPressの教科書」です。
そして、WordPress自作テーマ学習が終わったら、最後にWordPress既存テーマ学習も行いましょう。
WordPress既存テーマを使えば、デザインとコーディングの工程を大幅に削減することができます。
つまり、簡単にサイトが作れちゃいます。
- SnowMonkey
- Elementer（プラグイン）
- Lightning
特にSnowMonkeyはブロックエディター形式でパーツを組み合わせるだけで綺麗なサイトが作れるのでおすすめです。
予算が少ない案件には既存テーマカスタマイズ制作が大活躍しますので、ぜひWordPress既存テーマ学習も行ってください。
WEB制作案件のほとんどがWordPress案件です。
「WordPressなくしてWEB制作では稼げない」と言っても過言ではありません。
WordPressに関しては焦らずに腰を据えて勉強するようにしましょう。
【WEB制作で稼ぐためのプログラミング学習手順を詳しく知りたい方へ】
Progateが終わったら次にやるべき４ステップ【エンジニア転職編】
次はフロントエンドエンジニアやバックエンドエンジニアに転職したい方向けにProgate後の学習手順を解説していきます。
これから解説する学習手順はエンジニア転職に必要なプログラミングスキルを身に付けるためのロードマップとなります。
- ローカル開発環境を構築する
- 教材に沿ってWEBアプリを作る
- 教材で作成したWEBアプリに手を加える
- オリジナルのWEBアプリを作る
１：ローカル開発環境を構築する
まずはパソコンでプログラミングするための環境構築を行います。
本工程は前述『Progateが終わったら次にやるべき７ステップ【副業・フリーランス編】「ローカル開発環境を構築する」』と同じ内容となります。
結論、VSCodeをインストールすればOKです。
２：教材に沿ってWEBアプリを作る
環境構築が終わったら、次は教材を利用してWEBアプリを作っていきます。
プログラミング初心者がいきなりゼロからメルカリやAmazonのようなサービスを開発するのは不可能です。
まずは教材通りにコードを書き写しながらWEBアプリを作ります。
上記のサイトから自分が学習したバックエンド言語を使用している「〇〇を作ろう」的な教材を使えばOKです。
教材の解説通りにコードを書き進めていくだけで簡単なWEBアプリが完成します。
とりあえずコードを書き写していくことで、「あ、WEBアプリってこんな感じで作っていくんだ…！」と理解できます。
なので、実際に自分でゼロからWEBアプリを作るときに役に立つんですよね。
最初はコードの意味が分からなくても、解説が理解できなくてもいいので、とにかくコードを書き写してWEBアプリを作るまでの流れを体験しましょう。
３：教材で作成したWEBアプリに手を加える
教材に沿ってWEBアプリを作ったら、次はそれに手を加えていきます。
教材通りにコードを書き写すだけでは、開発の流れは理解できても実践で使えるスキルは身に付きません。
- 新たなページを追加してみる
- 新たな機能を追加してみる
- コードの数値をいじってみる
こんな感じで「コードに手を加える→エラーがあればググって修正する→ブラウザで動きを確認する」を繰り返します。
すると、「こう書けば、こうなるんだな」「このコードがこの機能を動かしてるのか」と徐々に理解が深まっていくんですよね。
基本的にプログラミングは
- コードを書く
- エラーを確認する
- ググる
この１〜３の繰り返しでスキルが身に付いていきます。
教材で作ったWEBアプリは必ず自分なりに手を加えるところまで行いましょう。
４：オリジナルのWEBアプリを作る
最後にゼロから完全オリジナルのWEBアプリを作ります。
オリジナルのWEBアプリは転職活動する際に必須なポートフォリオとしても使えるので必ず作りましょう。
ぼくの経験上、分からないながらも試行錯誤しながらゼロからWEBアプリを開発する過程が一番成長します。
- どんなWEBアプリを作りたいか考える
- どの言語や技術を使うのか考える
- 自分でゼロから環境構築する
- 分からない箇所をググりながら実装する
- 本番サーバーにアップロードして公開する
ゼロからWEBアプリを開発する過程は実際のWEB開発の現場に近い形で学習できるのもメリットの１つです。
「でも、どんなWEBアプリを作ればいいのか分かりません…」という方もいるかもしれません。
そんな方はこれまでに教材で作ってきたWEBアプリを参考にすればOKです。
基本的にどんな有名なサービスでも最初はすでに世にリリースされてるWEBサービスを分析し真似ることからスタートします。
もちろん丸パクリはダメですが、基本的な機能は真似しつつ
- コンセプトを変える
- ＋αでオリジナリティーを加える
- 既存のサービスを組み合わせる
このような開発手法はどんな企業でもやってるのでOKです。
もし「どんなWEBアプリを作ればいいのか分からない」「WEBアプリ開発の流れが分からない」という方は「【決定版】初心者がwebサービス・アプリを作ってみた！50選」を読んでみてください。
まとめ
最後に本記事をまとめます。
Progateの次に進む前にProgateでの学習が本当に終わったのか確認しましょう。
- HTML&CSS
- JavaScript
- jQuery
- PHP
- SQL
- Sass
- HTML&CSS
- JavaScript
- Ruby & Ruby on Rails or PHP or Java
- Command Line
- Git
- SQL
上記のProgate学習レッスンを１〜２周したら、次は目的別にプログラミング学習しましょう。
- ローカル開発環境を構築する
- Progate HTML&CSS道場レッスンに挑戦する
- サイトを写経する
- ポートフォリオサイトを作る
- Sassを学習する
- デザインカンプをコーディングする
- WordPressを学習する
- ローカル開発環境を構築する
- 教材に沿ってWEBアプリを作る
- 教材で作成したWEBアプリに手を加える
- オリジナルのWEBアプリを作る
以上、Progateが終わったら次にやるべきことでした。
ぜひ今後のプログラミング学習に役立ててもらえると嬉しいです。
- プログラミングに関する人気記事
