プログラミング学習サービスはたくさんありますが、その中でも圧倒的に知名度があり、多くの方に使われているサービスがProgateです。
Progateを使った学習は、HTML・CSSを終えてから、下記のどちらかに進むのが王道の流れです。
- フロントエンドに興味があればJavaScript
- バックエンドに興味があればRuby or PHP or Python
初学者の方にとってプログラミングに慣れる / 知るという意味で、この流れは適切です。ただし、Progateは基礎の基礎を勉強するサービスです。Progateだけではとても実務レベルのスキルや知識は身につきません。
この記事では、『Progateの次は何を勉強すれば良いのか』について、web制作 / フロントエンドに特化して紹介します。
↓学習ロードマップ(web制作編)の記事も書きました。
【web制作】プロになるための学習ロードマップ!💡 Progateの次に使えるサービス
月2980円で質問し放題の侍テラコヤ がおすすめです。
- 月2980円のみ / 入会金など他にかかる費用は0
- 質問し放題&平均回答スピードは30分
- 月に1回好きなタイミングで現役エンジニアとオンラインレッスンができる
- 40種類以上の教材で学習し放題
↓レビューした記事もあります。
月2980円で質問し放題の侍テラコヤが良さげ?現役エンジニアがレビュー!(口コミや評判も調査)人数制限があるのでお早めに!👀
侍テラコヤ 公式サイトこの記事の目次
プログラミング学習で大事なことは?
プログラミング学習をする上で、『遠回りしないための心得』を知っておくことはとても重要です。
Progateはどんな方に向いているサービスか
- プログラミング未経験者の1番最初の勉強
- プログラミングにちょっと触れてみたい
↑Progateはこんな方に向いているサービスです。
初心者向けに、かなり分かりやすく学べるサービスなので、勉強の入りとしては良いです。多くのエンジニアがおすすめしています。
- PC操作に慣れている
- 既にプログラミングに触れたことがある
↑こんな方にとってはProgateを使うことは非効率な学習方法になります。
現役エンジニアが、他の分野や言語を学ぶ際、Progateを使う方はほとんどいません。大体の方が書籍と公式ドキュメントで勉強します。
幅広くよりもまずは1つの分野を極めることが大事!
- 何を作りたいか
- どんな企業に就職したいか
- どんな働き方をしたいか
目的によって、勉強すべきことや方針は変わります。
その方向性が定まっていないから、『色んな言語に触れてみる』のであれば、それは悪いことではありません。
しかし、目的が決まっているのであれば、あれこれ手を出すべきではありません。実務レベルのスキルを身に付ける上で、広く浅く勉強することは遠回りです。
💡 例えば...
- HTML・CSS / JavaScript / jQuery / React がどれも少しだけ書ける人
- JavaScriptはまだほとんど書けないけどHTML・CSSはちゃんと書ける人
後者の方が需要はあります。簡単と言われがちなコーディングもちゃんと書ける人は多くいません。
- レスポンスが速い
- コーディングのスピードが速い
- 言われてないことも汲み取れる
ちゃんと書けることに加え、↑これらがあれば、稼げないと言われているコーディングでも、3,40万/月くらいは十分可能な範囲です。
2980円でzoomで学習相談も可能!💡
侍テラコヤ 公式サイトまずはコーディングを!実務レベルとは?
フロントエンドを主戦場にするのであれば、Progate終了後にまずはコーディングをしっかり勉強しましょう。コーディングがまともに出来ることは必須です。
- デザインを再現できる
- 保守性や拡張性を考えたコードが書ける
- 効率よく書ける
個人的には上の3点が実務レベルだと思います。この3点に関して詳しく紹介します。
Progateは良いサービスですが、到達できるレベルは『かなり簡単なデザインであれば再現できる』くらいです。
デザインを再現できる
前述した通り、Progateをしっかりやれば、かなり簡単なデザインであれば再現できます。次のステップとしては、もっと複雑なデザインも再現できることを目指します。
複雑なデザインとは、ギャラリーサイトに載っているようなデザインのことではありません。それよりもっと簡単なwebサイトです。例えば、模写修行の教材くらいのレベルです。
そのために必要なことはとにかく書くことです。2,30サイトくらい作ればデザインを見ただけで、おおよそHTMLがイメージ出来るようになります。
保守性や拡張性を考えたコードが書ける
保守性や拡張性を考えたコードを書けるようになるためには、CSS設計の勉強をしましょう。
学習サービスや書籍のほとんどは初学者をターゲットにしているので、SEO / 保守性 / 拡張性をあまり考えていないケースもあります。
プログラミングスクールも同じです。多くのスクールでCSS設計は教えていません。
CSSは破綻しやすい言語なので、自己流で書いていると、どんどんひどいコードになります!😭
CSS設計の概要が知りたい方は、下の記事を参考にしてみてください。
【実務向け】CSS の class 名の決め方(命名規則)はどうすればいいか?について解説しっかり学ぶためには書籍で勉強するのがおすすめです。下の記事で紹介している3冊は、必ず読んでおいた方が良いです。
【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり!効率よく書けるようになる
フリーランスや副業では、効率よく書くことは自分の時給を上げることに繋がます。
- Sass
- EJS / Pug
- gulp / npm scripts / webpack
- Git / GitHub
効率化するためにはこれらを勉強しましょう。コーディングがある程度出来る人にとって、学習コストは高くないはずです。ただし、全くJavaScriptに触れていない状態だと、難しいです。まずJavaScriptを軽く勉強してからの方が良いかもしれません。
今後の方向性によっては使わないものもあるかもしれませんが、学んでおいても損はないです。
Git / GitHub は効率化ではありませんが、チーム開発の時には必要なので、勉強しておくと良いです。
コーディングの練習には模写修行がおすすめ!
- デザインを再現できる
- 保守性や拡張性を考えたコードが書ける
- 効率よく書ける
この3点全ての練習になるように作ったのが、僕らが運営している模写修行です。
デザインを再現できる
→無料教材や初級教材がおすすめです。登録すれば無料教材が見れます。
保守性や拡張性を考えたコードが書ける
→全ての教材でCSS設計を意識したコードになっています。
効率よく書ける
→中級編の教材がおすすめです。資料にはSassのコードも含まれています。
模写修行で実践的な練習を✊
さっそく練習するコーディングの次に勉強すべきこと
コーディングが出来るようになったら、その後どの道に進みたいかは2パターンに別れます。
- web制作を仕事にする
- フロントエンドエンジニアになる
どちらかに進むかによって、やるべきことが変わります。もちろんいずれどちらも出来る人を目指しても良いです。
web制作を仕事にする
- JavaScript(jQuery)
- WordPress
web制作を仕事にしたい場合にやるべきことは、上の2つです。
web制作を独学で勉強したい人向け!注意点からおすすめの書籍やサイト紹介まで紹介JavaScript(jQuery)とWordPressの基礎を勉強するのにおすすめの書籍は、上の記事で紹介しています。
JavaScriptのアニメーション系のライブラリでは、GSAPが有名です。多くのサイトで使われています。興味があるライブラリは積極的に使ってみると良いです。
WordPressはオワコンと言われることもありますが、そんなことはありません。まだまだ使われますし、WordPressがわからないと対応できる仕事はかなり減ります。
基礎を勉強した後は、ポートフォリオサイトを作ってみると良いです。
駆け出しweb制作者向け!ポートフォリオサイトの作り方!どんなことを意識して作ると良いかは、上の記事を参考にしてみてください。
🐾 学習ステップ
- よし、web制作の勉強をするぞ!
- ProgateでHTML・CSS / JavaScript / jQueryをやってみる
- コーディング(HTML・CSS)を勉強する
- JavaScriptの基礎とjQueryを勉強する
- WordPressの基礎を勉強する
- ポートフォリオサイトを作ってみる
フロントエンドエンジニアになる
フロントエンジニアが扱うJavaScriptは、ReactやVueなどのライブラリやフレームワークとTypeScriptになります。ReactとVueはどちらか1つで大丈夫です。
- ReactとセットでNext.js、
- VueとセットでNuxt.js
これらも勉強することになります。Next.jsとNuxt.jsはフレームワークです。
フロントエンジニアもサイトに動きを付けることはありますが、web制作のように派手な動きを作ることはあまりありません。また、jQueryを使うこともほぼないです。
ReactとVueに関して、日本ではVueも人気ですが、世界的にはReactの方が人気です。最近の勢い的にも個人的にはReactがおすすめです。
フロントエンドは流れが速いので、学習に使う書籍は、1年以内に出版されたものが良いです。
🐾 学習ステップ
- よし、フロントエンドエンジニアになるぞ!
- ProgateでHTML・CSS / JavaScript をやってみる
- コーディング(HTML・CSS)を勉強する
- JavaScriptを勉強する
- React or Vueを勉強する
- TypeScriptを勉強する
- 何か作ってみる
2倍速で成長したい方はメンターを使おう!
- 正しい教材の選定ができていない可能性がある
- 間違った方向に進んでいる可能性がある
- 必須スキルの欠落に気づかない
- 30分以上悩むのは時間の無駄
独学でもプログラミングの勉強は可能です。しかし、上記の点でとても非効率です。侍テラコヤ は格安で質問し放題なので、効率的に学習をしたい方にはおすすめです。
↓レビュー記事
月2980円で質問し放題の侍テラコヤが良さげ?現役エンジニアがレビュー!(口コミや評判も調査)人数制限があるのでお早めに!👀
侍テラコヤ 公式サイト
Progateはプログラミングに慣れる / 触れてみる目的のために活用しましょう!