まず軽く僕の自己紹介ですが、2018年3月からprogateを触り始め、8月よりwebサイトを制作する仕事を行なっており、
現在はHTML、CSS(Sass)、PHP、JavaScriptをメインにお仕事をしています。
その過程で、Progateの様々なコースを履修してきたので、今回はその経験をもとに、
「効率の良いProgateでの勉強法」
について述べていきます。
progateはプログラミング学習を始める人の大部分が触れることになるサービスなのに、間違った勉強法をしている人がたくさんいます。
そのせいで、地味にこの段階で次のステップに進めずに挫折し消えていく人も大量にいます。
僕も間違った勉強をして遠回りしてしまいました。
貴重な時間を無駄にしないためにも、
適切な勉強法を最初に知っておくことは非常に重要になりますから、ぜひ最後までご覧ください！
といっても、Progateを利用される人はそれぞれ目的が違うと思うので、最初に
- Progateとはなんぞや
- 何がそんなにプログラミング学習にいいのかというprogate自体の話をしてから
- 全体に共通する勉強法のアドバイスをして
- 最後にそれぞれの目的ごとに最適な勉強法を紹介していきます。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Progateとは
オンライン上でプログラムを書けるサービスでして、progateのページに行けばいきなりコードを書くことができます。
詳しくはリンクを貼っておくので見ていただきたいのですが、基本的に最初にスライドを見てから自分でコードを書くセクションに移るので、
見て学ぶだけでなく実際にコードを書くことができる点が非常に画期的なサービスです。
Progateのメリット
①コードを実際に書ける
ここはかなり重要です。
プログラミング学習はコードを見るだけではほとんど力は身につかないので、「自分でコードを書くという経験」を詰めるのは、非常に大きなアドバンテージがあります。
日本人は本で学習するのが大好きですから、まずはプログラミングも本で勉強しようとするんですが、正直見るだけでは何の力にもならないので、
書いて覚えさせるprogateはおすすめできます。
②環境構築をする必要がない
実はプログラミングを始める前には「プログラムが動く環境を構築する」必要があります。
例えば、Ruby on Railsというwebサービスを作る上で有名なフレームワークがあり、初学者からの人気も高いですが、
いきなり自分で環境構築しようとすると難しすぎて挫折率が高いのは、業界では有名な話です。特にWindowsのPCを使っている人ですね。
まだコードも書く前から環境構築で苦戦させられるので、
となる人がこれまでもたくさんいました。
ただProgateなら最初からコードを書ける環境は整っていて、最初からプログラミング学習に集中することができるので、
しょっぱなから挫折する確率を減らすことができます。
もちろん開発環境は後々自分で構築する必要はありますが、まずはコードを書いて「プログラミングって楽しい！」
と感じることの方が重要なので、ここのメリットは大きいです。
progate勉強の基本アドバイス
次にprogateをどのように進めていけばいくのが効率がいいのかを解説します。
①暗記しない
まずは、「暗記しない」です。
これも受験勉強の弊害で「progateの教材に書いてあることを全部暗記するまで先に進めま10」縛りをする人が大半で、僕もそうでした。
例えば、HTMLコースのhead内の要素ですが、ここを暗記する必要は全くありません。
head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/page/front-page.css">
</head>今ではエディターが入力を自動補完（Emmet）してくれて、覚える必要がないからです。
それに、全てを暗記しようとすると、おそらく全然進まずに萎えると思います。
例えばHTML,CSSコースの初級編は目安時間3h50mと書いてありますが、僕は暗記しようとしていたので5時間近くかかった記憶があります。
しかも終わった後も、暗記できていたかというと、全くできていませんでした。
なので、暗記しようとせず一度で理解するのが難しそうだと感じたところは、バンバン飛ばして先に進んだ方がいいです。
そして、2週目に回すようにしましょう！
②何週もしない
先ほど「わからない部分があれば飛ばして2週目に回す」と言いましたが、しかし3周目までが限度だと考えてください。
それは、progateを周回しても実際に使えるレベルにはならないからです。
例えば自分で環境構築してコードを書き始めるとアルアルなのが、
というものがあります。
これはprogateがみなさんを挫折させないために、とても親切に教材を作り込んでいるから、progateではそういったことが起こらなかったのです。
もちろん実際の開発環境ではそんな親切さはどこにもないので、さっさと荒波にでて慣れた方が圧倒的に近道ということになります。
③いろんな言語に手を出さない
僕も最初勘違いしていましたが、基本的に「プログラミングで何を実現したいか」によって選択する言語はある程度決まってきます。
なので、様々な言語を最初に行うのは非常に効率が悪いです。
私は当時rubyやpythonなど様々な言語をprogateでかじりましたが、現在業務で一切使っていませんし、特に役立ってもいませんw
この後具体的に、やりたいこと別に何を選択すればいいかは述べますが、
やりたいことが決まっているなら、必要な言語のみ勉強するべきです。
もしかしたら、「自分にあっている言語を勉強したい」と思われるかもですが、progateの段階で向き不向きや、好きか嫌いかを判別することは非常に困難です。
それはprogateで得られる知識は0.01%ほどであるからです。
なので、繰り返しになりますが最初から必要な技術、言語にスポットを当てて勉強することが、とても重要になります。
ここから目的別のprogate学習法をお話ししていきます。
①webサイトを作りたい、在宅副業で稼ぎたい、リモートワークに憧れる
この層は間違いなく、「web制作スキル」を学ぶべきです。
Webサイトの制作業務は、システム開発などと比べて基本的にリモートで行いやすいので、一番再現性が高いためです。
私もリモートワークに憧れて「web制作スキル」を身につけましたが、具体的には
progateの「HTML,CSSコース」「jQueryコース」「PHPコース」が該当します。
流れとしては「HTML,CSS」「jQuery」「PHP」の順になるかと思いますが、まずは「HTML,CSSコースを最後まで一周」することをやっていただければと思います。
HTML,CSSコースでは最後にflex-box編がありますが、必ずそこまで終わらせるようにしてください。
「初級編→中級編→上級編→Flexbox編」を行い、道場コースは飛ばしていいかなと思ってます（私は実はやりませんでした）
progateは基本的に全体の3割ぐらい理解したかなというタイミングで次に進んでもらって大丈夫です。
HTML,CSSコースを終わらせた後はjQueryなど他のコースに進む前に、具体的なその後の勉強方法について以前こちらの記事で解説しておりますので、そちらをご覧いただければと思います。
②自分でサービスやアプリを作ってリリースしてみたい
こういった場合は「HTML,CSSコース」を終わらせてから「Railsコース」や「PHPコース」「Pythonコース」などを行えば良いと思います。
ただ総じてweb制作と比べて難易度が段違いなのと、一回就職を挟んで数年経験を積まないと、フリーランスやリモートワークはほぼ不可能なので、リモートや副業で稼ぎたいと考えている人には不向きとなります。
逆に会社でバリバリエンジニアとして経験を積みたい場合は、こちらの方が将来のキャリア的に安定はしますので、完全に好みの話になります。
progateから早く先へ
というわけで、ここまでprogateを用いた効率的な勉強法をお話ししてきました。
ここまでの話を要約すると、
progateで自分の目標に最適な言語を勉強し、暗記をせず、過度に周回せず、色々な言語に手を出さないこと
が重要で、今回の動画でお伝えしたかったことになります。
プログラミング学習は挫折率が非常に高いので、今回の記事でスムーズに学習を進めてくれる方が一人でも多く出てくれれば幸いです。
progateから先のロードマップ
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
