こんにちは！侍ブログ編集部（@samuraijuku）兵です。
突然ですがあなたは、「Progateを効率よく活用」できていますか？
活用どころか、「上手に使えず挫折してしまった」という方もいらっしゃるのではないでしょうか。
「これからプログラミングを学習する」「すでに学習している」問わず、Progateでの学習は１番おすすめといっても過言ではないです。
ただ、活用術を知らないと遠回りをしてしまったり、続かず挫折してしまったりとと大きな損をしてしまいます。
そこで今回は、Progateを使って、全くの未経験からたった２ヶ月でエンジニアとしての転職を成功させた僕が、Progateの概要から上手な活用法までお教えします！
具体的には
- 特徴や魅力
- 学習前の準備について
- 実際の使用イメージ
- おすすめの学習順序
- 知っておきたいコツ
- 学習後のステップ
- 仕事獲得への活かし方
等を説明していきます。
Progateを活用して最短でプログラミングを習得したい！と思っているあなたはぜひ参考にしてみてください。
もし独学かスクールに通うかで悩んでいる場合には「プログラミングスクールあるある失敗例」を覗いてみてください！
この記事の目次
プログラミング学習には書籍よりまず学習サイトがおすすめ
まず入門者が陥りやすいミスとして、学習のために分厚い書籍から入ってしまうことです。
そこで難しさを感じてしまい、挫折してしまう方も少なくないです。
プログラミングの入門学習には、まず学習サイトで学びはじめましょう。
学習サイトは情報量を圧縮しているので、効率よく重要なところだけ学べます。
その点に関してはこの「Progate」がぴったりですので、その特徴や魅力などをご紹介していきます。
Progateとは？
「Progate」は、株式会社Progateさんが運営するオンラインのプログラミング学習サービスです。
「Progate」の学習対象者は主にプログラミング初心者の方で、その良さを一言で伝えると「わかりやすくて続けられる」です。
WEBサービスを作るのに必要となる言語（HTML・CSS・JavaScript・PHP・Rubyなど）をオンラインでわかりやすく学べる、今人気のプログラミング学習サービスです。
2016年4月からは有料サービスもはじまり、コンテンツもますます充実してきています。
Progateの5つの魅力
1.スライド式なのでつまずかずに学べる
プログラミング学習サイトは、テキスト式のものや動画式のものなど、数多くあります。
Progateは特徴として、スライド形式で学ぶことができます。
動画などに比べてスライドの場合は、わからないところはじっくりと見ることができて、だいたいわかるところはサクサク進めることができます。
スライド自体もしっかりと要点を絞ってくれているので、スライドの内容を飲み込んでいけば、どんどん上達していくことができます。
2.レベル上げなどのゲーム性があって楽しい
Progateでは、自分で学習した結果がレベル形式になったり、パラメータで確認することができたりします。
ただもくもくと進めていく形式よりも、こういった「ゲーム性」があることによって、飽きずに進めることができます。
僕も楽しくなりすぎて、気づけば150Lvくらいまでやってしまうほどハマっていました。（笑）
3.手を動かしながら学べる
ここがProgateの最大の魅力と言ってもいいところです。
Progateは、スライドでの座学的な勉強だけでなく、手を動かしながら実践的な勉強もできます。
スライドをさらーっと見た後、そのまま実技に突入することが出来るのです。
プログラミングの勉強で今まで大変だった、
- 本とエディターの間でいちいち目線を入れ替える
- 入力したコードが合っているのかいちいちプレビューを見て確認する
といった煩わしい作業が、Progateでは1つの画面でまかなえてしまいます。
4.安いのにレッスン種類が豊富
現在Progateでは、HTML・CSS・JavaScript・PHP・Rubyなどの多種多様なプログラミング言語を学ぶことができます。
料金に関しては、初級編は無料でできますが、中級以上は月額980円の有料版になります。
これを高いと感じる人もいるかもしれませんが、僕は安いと感じました。
というのも、プログラミングを勉強するための本は3000円近くしたりしますので、それと比べると、月額980円でここまで勉強できるとなると破格なのではないかなと思います。
5.ステップ形式で学べる
基本的な「学習コース」の他にも、「道場コース」や「実践コース」という、より本格的なコースに取り組むこともできます。
１つ１つやっていくことによって、文法などの基礎的な部分だけでなく、実践で使えるような知識を体系的に学んでいくことができます。
Progateを使う前の準備は？
ここからそんなProgateを上手く使いこなす為に、やっておくべき事前準備をご説明していきます。
ブラウザさえあればできるから特にない！
いきなり腰を折る様で申し訳ないのですが、このProgateは、WEBブラウザさえあればできるので特に準備らしい準備は必要ありません。
ブラウザ（ChromeでもSafariでもなんでも大丈夫です）さえあれば、すぐ学習に取り組むことができます。
ログインに関しても、Facebookをお持ちでしたら連携できますので、ものの1分とかからずプログラミング学習をスタートさせることができてしまいます。
まずは無料で登録！
上で有料版があるとご説明しましたが、まずは無料版でお試しがてら学習に取り組んでみましょう。
無料版でもかなり広く学ぶことができるので、進めてみて気に入ったら有料版に切り替えることをお勧めします。
有料版にすると、初級編以外の発展的なコースを学習することができるようになります。
学習の内容を決めよう!
Progateは幅広く学ぶことができるのですが、ただなんとなく闇雲にやるのではなく、自分の目的から逆算して学ぶ言語を決めると効率的です。
目的から逆算してプログラミング言語を決めれば無駄がなく、しっかりと必要な知識だけを身につけることができます。
以下の記事でわかりやすくまとめられているので、こちらも参考にしてください。
実際に使った感じは？
Progateの実際の中身や、どうやって使っていくのかをご紹介していきます。
現段階では、
- HTML&CSS
- JavaScript
- jQuery
- Ruby
- Ruby on Rails
- PHP
- Java
- Python
- Swift
といった豊富な種類のプログラミング言語・フレームワークを学習することができます。
各言語やフレームワークが、章ごとにわかれていて、基礎的なところから順番に学んでいくことができます。
各章ごとに、こういったスライドが用意されていて、それをまず目で見て概要を理解していきます。
これがProgateの主な学習画面です。
左側には「問題」がでていて、スライドで学んだことが主に出題されます。
わからなくなったら、すぐにスライドを確認することもできます。
真ん中には実際にコードを入力することができる「エディター画面」があります。
右側には入力したコードの「プレビュー画面」と「問題の答え」が出てきます。
答えとプレビューが同時に出ているので、今自分が入力したコードは正解なのか間違いなのか視覚的に瞬時に判断することができます。
学習が終わるとこういったコングラッチュレーション画面が出てきて、達成感を味わうこともできます。
地味ですが、こういった小さな喜びが学習のモチベーションに繋がったりします。
実体験をもとにしたおすすめの学習順序
ここからは、Progate内で実際に僕がやってきた学習内容を、その時感じたポイントを加えて順序だてて説明していきます。
まずはここから
ひとまずなにもわからない段階から始めるなら、全ての基本となるHTML、CSS、JavaScriptからやってみましょう！
- HTML&CSS（初級編）
- JavaScript（基礎編）
- jQuery（初級編）
HTMLとCSSをセットでさっくり理解しましょう。
画面上でデザイン変更がすぐ反映されるので視覚的に楽しみながらやれました。
JavaScriptは、自分のパソコン上でアニメーションなどを表現できる、フロントサイド(自分のパソコン上で動く)言語なのですが、この辺りから関数とかが出てきて数学チックに感じました。
少しうっとなるかもしれませんが、完走して雰囲気をつかみましょう。
jQueryは、JavaScriptのお兄さん的な存在です。
「ライブラリ」と言われる、すでに作られたプログラムのパッケージを使いやすくまとめてくれたものです。
JQueryが使われていないWEBサイトはないと言っても過言ではないくらい高いシェアを誇る技術ですので、チャレンジしてみましょう！
ライブラリなどを詳しく知りたい方はこちらからどうぞ。
目的を決める
ここからは自分でやりたいものをある程度決めてからやると効率がいいです。
僕の場合はRubyとRuby on Railsを使って簡単なWEBアプリを作ってみたかったので、そこから逆算して学んでいきました。
- Ruby（基礎編）
- Rails（基礎編）
初めてのサーバサイド(見えない裏側の仕組みを作る)言語でプログラミングっぽかったです。
Rubyは、楽しくできるために作られた言語と言われていますが、この段階ではまだ楽しくはなかったです（笑）
こちらの記事でRubyの概要から学習の仕方までしっかり説明されていますので、是非ご参考ください。
Ruby on Railsとは、Rubyのフレームワークなるもので、レベルがぐっと上がった印象を受けました。
ここで全てを理解しようと躍起になってしまうと、挫折の原因になりかねませんので注意が必要です！
最初はどこで何をやっているのか全く掴めないかと思いますが、2.3回繰り返してやると理解できてきます。
「MVC(モデル・ビュー・コントローラー)」というRailsの大切な仕組みが理解できれば上出来だと思います。
こちらでフレームワークについても詳しい説明がされていますので参考にどうぞ。
ステップアップ
- HTML&CSS（初級編）
- JavaScript（基礎編）
- jQuery（初級編）
- Ruby（基礎編）
- Rails（基礎編）
上で説明した5つの言語やフレームワークの、「中級」や「応用編」を進めていきましょう！
応用編になるとまた難易度が少しあがりますが、一回で全て理解しようとは思わず、複数回やってみましょう。
その後は、上記5つの「道場コース」と、HTML&CSS / jQueryの「実践コース」（※順次更新予定）を進めていくのが良いと思います。
かかった時間と感想
このサイクルを1ヶ月ほどでやりました。
忘れてしまうのが嫌で、体で覚えるために、生活の中で割ける時間をほぼ割いて、かなりハイスピードでやりました。
なので、普通はこの倍くらいかかるかもしれません。
しかし、やる前では想像できなかったですが、全くの別人になった気分でした。
難しいところもあり、取り組んでいる最中は実感ができませんでしたが、ひとまず完走だけでもすると、なんとなくでもわかってきます。
その感覚がすごく楽しいので、是非みなさんにも体感していただきたいです。
Progateを使う時に知っておきたい5つの心得
1.意味がわからなくても進む
意味がわからないからといって、いちいち止まらないことが大事です。
わからなくて当然で、そこで理解できる方は中々いないです。
進めばいずれわかってくるものなので、止まらず進みましょう。
2.調べる癖付け
わからないことはメモって、すぐ調べましょう。
この、調べるという行為を癖づけることがかなり大切です。
僕も最初は、わからないところがあると調べもせず手が止まっていました。
その後、プロでも毎日調べまくってるんだと知って、調べまくりました。
ただもちろんすぐはわかりません（笑）
ですが、その過程と足跡が大事で、あとで必ず活きてきます。
3.毎日コツコツ
毎日コツコツがコツです。
週末だけやったりすると、忘れて戻るはめになってしまって逆に効率が悪いです。
毎日1時間でも30分でも取り組む習慣をつくりましょう。
4.目的を明確にする
なんのために、なにを学ぶのかという目的を明確化しましょう。
「ひとまず勉強する。」という考えはおすすめしないです。
範囲が広すぎてキリがないですし、勉強の為の勉強になってしまい、身につかないです。
これが作りたい、から始めると必要な知識だけを調べながらやるので効率が良く、モチベーションも維持しやすいです。
5.完璧を求めない
時には適当にやるのも大事です。
全て完璧に理解できないと進めないという感覚もありましたが、そこで止まってしまうのは効率が悪いです。
一発で理解できるものではないので、反復ありきの姿勢で取り組みましょう。
【学習後のステップ】勉強内容や作品を載せて転職サイト活用する
作品や勉強した内容をプロフィールに載せましょう。
その過程で感じた大切なことや、今後のやりたいことなども備考欄などに書いておくと目にとまりやすいです。
仕事獲得や転職に関してはこちらの記事で詳しくまとめているので、こちらもご参考ください。
最後に
いかがでしたでしょうか？
Progateの概要から上手な活用方法、知っておきたいコツ等をご紹介しました。
僕も最初は本当に全くわかりませんでしたが、この通りにやってみてかなりプログラミング学習が捗りました。
この記事を参考に、遠回りや挫折することなく、上手にProgateを活用してほしいです。
そして学習の先にあるエンジニアライフや、フリーランスとして活躍するという目的に向かって突き進んでいただれば幸いです。
未経験者でも安心の徹底サポート！まずは完全無料の体験レッスン！
「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。
- 24時間質問し放題
- あなただけのオーダーメイドカリキュラムで学習の効率化
- 仕事獲得方法からオリジナルアプリ開発方法
侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。
まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。
詳しいサービス内容は、下記よりご参照ください。
