期間限定でWordPress開設が41%OFF!11/8まで

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

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



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

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

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

そこで今回の記事では

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

について解説します。

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

Ken

この記事を書いている私(@Kenyellblog)は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ページの作成ができるようになります。

Ken

「機能のある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は仲間」なので、上記のように同時に使うこともあります。

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

Ken

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

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

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

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

Ken

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

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

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

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

  • PHP
  • Ruby・Ruby on Rails

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

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

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

Ken

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

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

  • 今後WordPressで案件をとっていきたい人→PHP
  • ベンチャー企業などで働きたい人→Ruby(ベンチャーではRubyが使われる傾向にあるため)

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

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

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

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

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

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

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

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

先ほど

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

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

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

Gitやコマンドの練習

Gitやコマンドの練習

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

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

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

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

コマンドラインの学習

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

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

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

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

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

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

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

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

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

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

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

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

関連記事
「Progateやっているけど意味ない人」になってない?注意点を解説 「Progateやっているけど意味ない人」になってない?注意点を解説 Progateをやっているけど意味ない人は結構多くいます。結論から言えばProgateは最高なのですが、正しい学習方法をしなければ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を進める流れ

  • HTML・CSSを学習
  • 模写コーディングなどで力試し
  • Javascript、jQueryを学習
  • JavascriptとjQueryを使ったミニゲームを作成
  • PHP・SQLを学習
  • データベースを利用して仕組みのあるページを作ってみる

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

Ken

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

模写コーディングってなに?という話になると思いますが、既存のサイトの見た目そっくりになるよう作っていく練習方法です。

模写コーディングができるようになれば、次の段階でも「そもそもどこにどう書いていけばいいんだろう・・・」ということも無くなりオススメ。

やり方は【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】で具体的に紹介しています!

【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】 【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】 模写コーディングのやり方を、具体的に解説します。必要なものの準備から実際に書き出すまでをしっかりサポートするので、これから模写コーディングを始める方はこの記事を参考にして模写コーディングを始めてみましょう。

誰でも始められるように書いているので、上記記事を参考にして実践の第一歩を進めてもらえたらと思います。

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

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

Progateの次にすべきこと

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

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

Ken

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

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

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

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

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

オススメのスクールは以下の通り。

大学生にオススメなスクール

どちらも成果物を作れるまでをカリキュラム内容にしていまして、そこまでできれば自分で稼ぐことはもちろん、転職も見えてきます。

各スクールのレビューはこちら

【就職できた!】テックアカデミーの評判を文系大学生が実体験を元にレビュー 【就職できた!】テックアカデミーの評判を文系大学生が実体験を元にレビュー 文系大学生からテックアカデミーに入会して就職できた経験を元に、テックアカデミーの評判を書いていきます。テックアカデミーはメンター全員が現役エンジニアなこともあり、メンタリングでかなり支えてもらえました。 デイトラの評判は?コスパ最強のスクール間違いなし!【運営者にインタビュー】 デイトラの評判は?コスパ最強のスクール間違いなし!【運営者にインタビュー】 デイトラの評判について知りたい人に向けて、現役エンジニアの私が実際にデイトラの運営者にインタビューしたので、デイトラの内容をまとめます。結論から言うと、コスパ最強のスクール間違いなしです。

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

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

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

Progateでの注意点

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

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

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

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

Ken

何周かしたけどどうしても理解できない!という部分は放っておいても大丈夫です。
私もどうしても分からず、「まぁそういうもんか」と思い、理解できないまま終わりました。
でもその後その知識が必要になったときには、切り抜けられるだけのスキルが身に付いていて問題なかったんですよね。

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

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周

途中で模写コーディングなどを挟むという形になりますね。

Ken

自分はProgateでの学習を経てエンジニアになりました。
かなり時間はかかってしまいますが、確実に力がつくやり方で頑張っていきましょう!
【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】 【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】 模写コーディングのやり方を、具体的に解説します。必要なものの準備から実際に書き出すまでをしっかりサポートするので、これから模写コーディングを始める方はこの記事を参考にして模写コーディングを始めてみましょう。