【随時更新】プログラミングスクール総合ランキングはこちら

【Progateの進め方】最高効率で学習する方法・学習順番と注意点を解説

【Progateの進め方】最高効率で学習する方法・学習順番と注意点を解説

Progateがかなりオススメされてて、Progateから始めようと思ったけど・・・コースが多すぎてどこから手を付けていいのか・・・。
Progateでの学習の進め方を全体的に教えてください!

Progateが人気そうだしここからプログラミングを始めよう~と思ってもコースが多くて面食らっちゃうと思います。

Progate自体は内容も良く、システム的にも理解しやすい最高の教材であることは間違いないのですが、初学者にはコース選びの時点で難しいのも事実。

そこで今回の記事では

この記事の内容
  • Progateの効率のいい進め方を解説
  • どのコースをどの順番で進めるべきかを解説
  • 学習における注意点やアドバイス

について解説します。

なお、Web制作・Web開発者を目指す人向けのProgateの進め方を紹介していきます!

maipyon

この記事を書いている私(@maipyon8)はProgateのレベルが120を突破しました。
Progateを経由して、現在は現役エンジニアとして働いています。

この記事を読めばProgateの進め方はもうバッチリです。

ひたすらやるだけになるので、気持ち的にも楽になりますよ。

なお、この記事では「Progateを終わらせた後」についても言及していまして、そこも参考になるかと思います。

Progateの進め方・コース順番を解説

そもそもProgateには以下の15コースがあり、今後もアップデートで増えていきます。

結構多いので、迷うのも仕方ないことですね。

Progateの進め方・コース順番を解説

早速ですが、ザックリとした結論は以下の通り。

  1. 言語の学習
  2. データベース関係の学習(必要になったときに学習)
  3. gitやコマンドラインの学習(必要になったときに学習)

・・・これだけじゃ正直意味が分からないと思うので、コース名で解説をすると以下の表のようになります。

コース名 どれくらいすべきか
言語学習1 HTML・CSS 2~3周
道場コースはMax5周
言語学習2 Javascript・jQuery 2~3周
言語学習3 PHP or Ruby・Ruby on Rails 2~3周
データベース関係の学習 SQL 1~3周
gitやコマンドラインの学習 Git・Command Line 1~2周

この手順で作成していけば、何かしら機能を持ったWebページの作成ができるようになります。

maipyon

「機能のあるWebページ」を例えるなら、ログイン・会員登録・投稿などがあるTwitterのようなSNSなんかを作れるようになりますね。
Web制作でWordPressを使うのが目標だという人だと、上の4ステップが必須になってきます。

参考ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法

上記を一気に学習するのではなく、Progateで学習→実践→Progateで学習→実践・・・という形で進めるのがベストです。

まずはHTML・CSSでWebページを作れるようになろう

まずはHTML・CSSでWebページを作れるようになろう

HTML・CSSがWebページ作成のすべての根幹とも言えるものになっていまして、ここから学ばないとどうしようもありません。

HTMLとCSSについて

  • HTML・・・サイトの骨組みを作る。例えるなら家の骨組み。
  • CSS・・・サイトの見た目を整える。例えるなら家の外装や内装にあたる。

HTMLとCSSを学習すれば商品販売のためのページくらいは作成できるようになります。

これから学ぶ言語は、HTMLとCSSで作成したページに機能を追加していくために学習するというイメージが強いですね。

JavascriptとjQueryを学習し、動きのあるサイトを作れるようになろう

JavascriptとjQueryを学習し、動きのあるサイトを作れるようになろう

続いてJavascriptとjQueryを学習します。

jQueryとJavascriptは仲間みたいなものでして、jQueryの方がやや簡単ですね。

「jQueryは今後は使われなくなるから学習しなくていい」みたいな話がありますが、現状存在するサイトではほとんどjQueryが使用されています。
「これから作成するサイト(最新技術だけを使用)」の開発をするときは不必要かもしれませんが、「現存するサイトの改修」をする場合に必須。
実際に私も実務でガンガン使っていますし、普通に使われているので学習しておきましょう。

jQuery→Javascriptと学ぶとより分かりやすいかと思います。

動きのあるサイトって例えばどんな感じ?

と思うでしょうから、以下に例を。

以下のボタンをクリックすると、この記事のURLがコピーされます。

この記事のURLとタイトルをコピーする

クリックしたときのボタンのテキスト内容が変化し、数秒後に元に戻ります。

この「テキスト内容の変化」や「数秒後に元に戻る」についてはjQueryで実装。

また、「記事のURLをコピーする機能」についてはJavascriptで実装しています。

繰り返しになりますが、「JavascriptとjQueryは仲間」なので、上記のように同時に使うこともあります。

どちらも学習して、動きのあるサイトを作れるようになりましょう。

maipyon

他にもスライダー、クリックで開くメニュー、Web上の表のソートや検索機能などもJavascript・jQueryで実装できますね。
つまりサイトのデザイン品質を上げることができます。

PHPやRubyで機能のあるページを作れるようになろう

PHPやRubyで機能のあるページを作れるようになろう

PHPやRubyは「サーバーサイド言語」と呼ばれていまして、それらを使用しなければ機能のあるページは作成できません。

maipyon

例えば会員登録機能があるサイトや、投稿サイト、タスク管理アプリなどを作ろうと思ったときには必須です。

会員のデータを使って・・・とか、タスクが何時に登録されて、タスクが遂行されたか?

みたいな情報のやり取りにサーバーサイド言語が必要になってきます。

おすすめのサーバーサイド言語

  • PHP
  • Ruby・Ruby on Rails

学習すべきサーバーサイド言語は上記のどちらかですね。

Rubyを学習するなら、Ruby on Railsも学習しておきましょう。

Ruby on Railsはフレームワークと呼ばれていまして、Railsでの開発を効率化してくれるための仕組みの事です。

maipyon

ちなみに私はPHPを学習しました。

どちらを選択しても機能のあるサイトは作れるので深く悩む必要はあまりないですが

  • 今後WordPressで案件をとっていきたい人・地方での就職を考えている人→PHP
  • ベンチャー企業などで働きたい人→Ruby(ベンチャーとか都心ではRubyが使われる傾向にあります)

という形で問題ないです。

この辺りからわけが分からなくなっているかもしれませんが、とりあえずこの順番で学習していけばいいんだな~と覚えておけば問題ないです。

なお、スクールを検討している方はここまでできたらスクールを受講するという感じでも問題ありません。

スクールで学習する主な言語はこの辺りで網羅できるので、挫折率も少ないです。

オススメのスクールについては『プログラミングスクールの9社比較ランキング【目的別】』の記事にて紹介中なので検討してみてください。

DB(データベース)関連の学習

DB(データベース)関連の学習

上記のPHPやRubyを学習したときに同時に学習しても良い内容ですが、データベース関連の学習もします。

データベースとは、情報の保管庫のようなもの。

  • 会員情報(IDやパスワード)
  • タスクの状況(遂行済みか?進行中か?など)
  • 記事のタイトル・記事の内容
  • 画像

などなど、様々なものがデータベースに保存されます。

先ほど

会員のデータを使って・・・とか、タスクが何時に登録されて、タスクが遂行されたか?
みたいな情報のやり取りにサーバーサイド言語が必要になってきます。

と書きましたが、ここのデータの取得にデータベース関連の学習が必要になってきます。

ProgateのSQLコースで学習できるので、難しいものでもないのでサクッと学習しましょう。

Gitやコマンドの練習

Gitやコマンドの練習

こちらは必要になったときに学習すればいいかなと思います。

Gitは複数人で開発を進めるときに、編集履歴の共有などに使用します。

また、コマンドも通常使うことはあまりありませんが、今後避けては通れない道になってきます。

以下の画像のような黒い画面にカタカタ打ち込んでいるのを見たことはないでしょうか?

コマンドラインの学習

必要になった時に学習するとかでも問題ないのですが、学習しないと手も足も出ないという状況になってしまいます。

maipyon

正直この部分はProgateよりも、Udemyを使った動画学習の方が学びやすい気がします!

オススメの講座については『Udemyでコスパ最強のおすすめプログラミング講座7選【現役エンジニア推薦】』の記事でまとめています。

自分も「なんでこんな画面使わなきゃいけないんだよ・・・」と思いつつ学習し、今では特に嫌悪感もなく使っています。

分かるようになれば主要機能は簡単なので、不安にならなくても大丈夫ですよ。

【Progateの進め方】学習コースはMax3回、道場コースはMax5回を目安に

Progateを最高効率で進めようと思ったら、次のステップへ移ることを重要視する必要があります。

なので、しっかり理解してなくても進んでみて、無理だと思ったら戻って復習・・・という形がオススメです。

何周もしても時間の無駄になることが多く、おすすめしません。

Progateは優しい作りになっているからこそ、思ったより頭を使っていない状況に陥りがち。
実践練習 > Progateなので、より多くの物を得るためにもすぐに実践練習に入りたいですね。

目安としては、学習コースは書き方を覚えてなくても理解が出来たらOK。

道場コースは、解答を見ずに進められるくらいまで繰り返せばOK(ヒントは見ても大丈夫)。

大体学習コースがMax3周、道場コースがMax5周くらいですかね。

5周以上するとなるとかなり時間の無駄になるのでオススメしません。

関連記事「Progateやっているけど意味ない人」になってない?注意点を解説

【重要】一気にProgateで学習するのではなく、少しずつ学習しよう

Progateで学習することって結構多いですよね。

コース名 どれくらいすべきか
言語学習1 HTML・CSS 2~3周
道場コースはMax5周
言語学習2 Javascript・jQuery 2~3周
言語学習3 PHP or Ruby・Ruby on Rails 2~3周
データベース関係の学習 SQL 1~3周
gitやコマンドラインの学習 Git・Command Line 1~2周

コース数で言えば8~9コースくらいでしょうか。

一気に進めるのではなく、Progateで学習→実践(自分で何か作ってみる)というのを繰り返して、少しずつ学習するのが最高効率です。

一気に学習しても、結局全部忘れるんですよね。
Progateは学習できているように一見思えるのですが、実は全く身に付いていない。

一気にProgateで学習するのではなく、少しずつ学習しよう

Progateで学習したことを復習がてら自分の血肉にするという工程が必要になってきます。

【最高効率】成果物を作りつつProgateを進める

自分の場合は、以下の流れで進めました。

成果物を作りつつProgateを進める流れ
  1. HTML・CSSを学習
  2. 模写コーディングなどで力試し(やり方解説記事)
  3. Javascript、jQueryを学習
  4. JavascriptとjQueryを使ったミニゲームを作成
  5. PHP・SQLを学習
  6. データベースを利用して仕組みのあるページを作ってみる

この流れだと、1つ1つ確実に吸収しながら進めていけるので「進み過ぎて訳が分からない」ということにもなりません。

maipyon

確かに遠回りに感じますが・・・急がば回れという感じで、結果的にこのやり方の方がスピーディーですよ!

もし一人で成果物を作るのがしんどかったら、侍テラコヤでの学習がオススメ。
月額3,278円(税込)で現役エンジニアのレッスンを受けれて、Q&A掲示板も使い放題です。

詳細は『【侍テラコヤの評判】実際に受講したのでレビュー【現状最強のサブスク型スクール】』の記事にて紹介しています!

Progateが終わったら次は何をすべきか

Progateが終わったときに何をすべきかで迷う人が多いと思うので、サクッと手順を書いていきます。

Progateの次にすべきこと

  • 学んできたこと全体を合わせた成果物を作る
  • スクールに通う

Progateが終わったら学んできたことすべてを合わせて成果物を作るのが上達への近道。

maipyon

ここは目標スキルに応じて変えていきましょう!
例えばコーダーとして働きたいのであれば、オリジナルページ(LP)を作るなどですね。

詳細は、『Progateが終わったら次にやるべき5ステップ【Progate沼から抜けよう】』にて解説しています。

スクールで学習効率をブーストするのもアリ

Progate終わったけどこれから先きつすぎ・・・と思った人は、スクールに通うのがオススメ。

実際完全未経験でスクールに通うよりも、Progateでザッと学習してから通った方が挫折率は低くなります。
スクール卒業生から、「Progateやってから受講してよかった!」という声も多く聞きます。

Progateで基礎学習、スクールで復習~応用を学習というスタイルで学ぶのが誰でも可能かつ挫折しずらいスタイルではないかと。

オススメのスクールについては『プログラミングスクールの9社比較ランキング【目的別】』の記事にて紹介しています。

転職目的、就職目的、副業目的の3つの目的ごとにランキングを作成しているので、参考にしつつ検討してみてください。

Progateを進める際はサクッと進めていこう

Progateは基礎理解専用として、技術力をしっかりつけるのは実践練習という考え方でサクッと進めていきましょう。

最後にProgateでの注意点を紹介して終わりにします。

Progateでの注意点

  • 分からないところは答えを見てもOKだが、理解はするようにしよう
  • 時間がかかってもOK

Progateは優しいと書いたものの、最初の内は分からないところだらけになるかと思います。

そんな場合に「答えを見てもいいのか・・・?」と感じると思いますが、答えをガンガン見ちゃってOKです。

次の周できちんと答えられるように、理解だけして進めていきましょう!

maipyon

何周かしたけど理解できない!という部分は「まぁそういうもんか」と思い、理解できないまま終わりました。
でもその後その知識が必要になったときには、解決できるだけの経験が身に付いていて問題なかったんですよね。

プログラミングは基礎学習が一番しんどい部分です。

Progateでこんなに悩んで時間がかかってしまうなんて・・・と思う人もいるかもしれませんが、それは当たり前。

質を重視して着実に進んでいきましょう!

Progateは以下の進め方で駆け抜けよう

ということで長くなりましたが、Progateの進め方はざっくりと以下の通り。

コース名 どれくらいすべきか
言語学習1 HTML・CSS 2~3周
道場コースはMax5周
言語学習2 Javascript・jQuery 2~3周
言語学習3 PHP or Ruby・Ruby on Rails 2~3周
データベース関係の学習 SQL 1~3周
gitやコマンドラインの学習 Git・Command Line 1~2周

途中で模写コーディングなど『自分でやってみる』フェーズを挟むことを推奨します。

maipyon

自分はProgateでの学習を経てエンジニアになりました。
かなり時間はかかってしまいますが、確実に力がつくやり方で頑張っていきましょう!

Progate終わりのステップアップとしておすすめ

【侍テラコヤの評判】実際に受講したのでレビュー【現状最強のサブスク型スクール】 【侍テラコヤの評判】実際に受講したのでレビュー【現状最強のサブスク型スクール】 侍テラコヤ(SAMURAI TERAKOYA)の評判を解説します。Webデザインやプログラミング学習用のサブスク型のサービスで、月額1980円(税込2178円)で学べます。実際に受講したので感想も紹介します。 プログラミングスクールの9社比較ランキング【目的別】 プログラミングスクールの9社比較ランキング【目的別】 安いけど質が高いプログラミングスクールに絞って目的別にランキングを作成・比較しました。転職向け(社会人向け)、就職向け(大学生向け)、副業向けプログラミングスクールに分けてコスパの良いスクールを比較しています。