模写修行メディア

Progateの次に勉強すべきこと(web制作/フロントエンド編)

プログラミング学習サービスはたくさんありますが、その中でも圧倒的に知名度があり、多くの方に使われているサービスがProgateです。

Progateを使った学習は、HTML・CSSを終えてから、下記のどちらかに進むのが王道の流れです。

  • フロントエンドに興味があればJavaScript
  • バックエンドに興味があればRuby or PHP or Python

初学者の方にとってプログラミングに慣れる / 知るという意味で、この流れは適切です。ただし、Progateは基礎の基礎を勉強するサービスです。Progateだけではとても実務レベルのスキルや知識は身につきません。

この記事では、『Progateの次は何を勉強すれば良いのか』について、web制作 / フロントエンドに特化して紹介します。

↓プロになるための学習ロードマップ(web制作編)は、下記の記事をご覧ください。

【2023年版】web制作でプロになるための学習ロードマップ!

↓web制作のおすすめの学習サービスは、下記にまとめています。

web制作の学習サイト17選!独学向け・無料あり!

Progateの次におすすめサービス紹介!

無料登録だけで閲覧できる教材もあり!

  • 質問し放題&回答率100%
  • 月に1回以上のオンラインレッスン可
  • 作りながら学べる教材が50種類以上
  • かかる費用は月額2,980円~だけ
試しに見てみる →
侍テラコヤの口コミ・評判を調査!現役エンジニアが評価!
【有料会員になる場合】当サイト限定の初月60%OFFクーポンがお得!クーポンコード 👉 MOSYA60クーポンの使い方

30日間無料でweb制作が学べるZeroPlus Gate!

  • 完全無料
  • 50本以上の動画教材で学べる
  • 30日間に4回の対面サポートがある
  • slackで質問し放題
試しに見てみる →
【無料】ZeroPlus Gateの口コミ・評判を調査!web制作志望は必見?

この記事の目次

Progateはどんな方に向いているサービスか

↑Progateはこんな方に向いているサービスです。

初心者向けに、かなり分かりやすく学べるサービスなので、勉強の入りとしては良いです。多くのエンジニアがおすすめしています。


↑こんな方にとってはProgateを使うことは非効率な学習方法になります。

現役エンジニアが、他の分野や言語を学ぶ際、Progateを使う方はほとんどいません。大体の方が書籍や公式ドキュメントで勉強します。

Progateはプログラミングに慣れる / 触れてみる目的のために活用しましょう!

gakuのアイコン

幅広くよりもまずは1つの分野を極めることが大事!

  • 何を作りたいか
  • どんな企業に就職したいか
  • どんな働き方をしたいか

目的によって、勉強すべきことや方針は変わります。

その方向性が定まっていないから、『Progateで色んな言語に触れてみる』のであれば、それは悪いことではありません。

しかし、目的が決まっているのであれば、あれこれ手を出すべきではありません。実務レベルのスキルを身に付ける上で、広く浅く勉強することは遠回りです。

💡 例えば...

  • HTML・CSS / JavaScript / jQuery / React がどれも少しだけ書ける人
  • JavaScriptはまだほとんど書けないけどHTML・CSSはちゃんと書ける人

後者の方が需要はあります。簡単と言われがちなコーディングもちゃんと書ける人は多くいません。

  • レスポンスが速い
  • コーディングのスピードが速い
  • 言われてないことも汲み取れる

ちゃんと書けることに加え、↑これらがあれば、稼げないと言われているコーディングでも、3,40万/月くらいは十分可能な範囲です。

Progateの次はまずコーディングのレベルを上げる!

フロントエンドを主戦場にするのであれば、Progate終了後にまずはコーディングをしっかり勉強しましょう。コーディングがまともに出来ることは必須です。

個人的には上の3点が実務レベルだと思います。この3点に関して詳しく紹介します。

Progateは良いサービスですが、到達できるレベルは『かなり簡単なデザインであれば再現できる』くらいです。

gakuのアイコン

デザインを再現できる

前述した通り、Progateをしっかりやれば、かなり簡単なデザインであれば再現できます。次のステップとしては、もっと複雑なデザインも再現できることを目指します。

複雑なデザインとは、ギャラリーサイトに載っているようなデザインのことではありません。それよりもっと簡単なwebサイトです。例えば、模写修行の教材くらいのレベルです。

そのために必要なことはとにかく書くことです。2,30サイトくらい作ればデザインを見ただけで、おおよそHTML・CSSのイメージ出来るようになります。

保守性や拡張性を考えたコードが書ける

保守性や拡張性を考えたコードを書けるようになるためには、CSS設計の勉強をしましょう。

学習サービスや書籍のほとんどは初学者をターゲットにしているので、SEO / 保守性 / 拡張性をあまり考えていないケースもあります。

プログラミングスクールも同じです。多くのスクールでCSS設計は教えていません。

CSSは破綻しやすい言語なので、自己流で書いていると、どんどんひどいコードになります!😭

gakuのアイコン

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制作の学習サイト17選!独学向け・無料あり!

JavaScript(jQuery)とWordPressの基礎を勉強するのにおすすめのサイトや教材は、上の記事で紹介しています。

jQueryは古い?オワコン?今から勉強すべきかを解説!

jQueryは勉強しなくても良いと個人的には思います。詳しくは上記の記事をご覧ください。

JavaScriptのアニメーション系のライブラリでは、GSAPが有名です。多くのサイトで使われています。興味があるライブラリは積極的に使ってみると良いです。

WordPressはオワコンと言われることもありますが、そんなことはありません。まだまだ使われますし、WordPressがわからないと対応できる仕事はかなり減ります。

基礎を勉強した後は、ポートフォリオサイトを作ってみると良いです。

駆け出しweb制作者向け!ポートフォリオサイトの作り方!

どんなことを意識して作ると良いかは、上の記事を参考にしてみてください。


🐾 学習ステップ

  1. よし、web制作の勉強をするぞ!
  2. ProgateでHTML・CSS / JavaScript / jQueryをやってみる
  3. コーディング(HTML・CSS)を勉強する
  4. JavaScriptの基礎とjQueryを勉強する
  5. WordPressの基礎を勉強する
  6. ポートフォリオサイトを作ってみる

フロントエンドエンジニアになる

フロントエンジニアが扱う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のReactコースは、今は使わない古い書き方で解説しているので、おすすめしません。

🐾 学習ステップ

  1. よし、フロントエンドエンジニアになるぞ!
  2. ProgateでHTML・CSS / JavaScript をやってみる
  3. コーディング(HTML・CSS)を勉強する
  4. JavaScriptを勉強する
  5. React or Vueを勉強する
  6. TypeScriptを勉強する
  7. 何か作ってみる

【コスパ最強】Progateの次にオススメのサービス!教材に加えて質問し放題もあり!

独学にはいくつかデメリットがあります。

独学でもプログラミングの勉強は可能です。しかし、上記の点でとても非効率です。

高額なスクールは誰でも通えるわけではないし、必須ではありません。しかし、スクールのように手取り足取り教えてもらえなくても、学習の方向性を示してくれるメンターのような人は付けることをオススメします。

本気でプロになりたい方へ!エンジニア/デザイナー向けメンタリングサービスはじめました!

私たちも人数限定でメンターをやっているので、興味がある方は上記の記事をご覧ください。

最後に格安で質問や相談ができる、メンターのようなサービスを2つ紹介します。

【無料でも使用可】月額2,980円から使える質問し放題の侍テラコヤ!

侍テラコヤ

侍テラコヤは月額2,980円から使える、プログラミング / コーディング / デザインの学び放題&質問し放題サービスです。

教材の一部は無料で閲覧できるので、興味がある方は登録してみると良いでしょう。

こんな方におすすめ!

  • これから本格的にプログラミングの勉強がしたい方
  • わからないことをチャットやZoomで質問したい方
  • 少額の投資で学習の効率化したい方

サブスクサービスで入会金や解約料など他にかかる費用もありません。合わなければいつでも辞めることができます。かなりコスパが良い学習サービスです。

口コミ・評判や対応言語に関しては、下記の記事をご覧ください。

侍テラコヤの口コミ・評判を調査!現役エンジニアが評価!

無料で閲覧できる教材もあり!

侍テラコヤ 公式サイト

無料登録は最短10秒で登録可能!

【有料会員になる場合】当サイト限定の初月60%OFFクーポンがお得!クーポンコード 👉 MOSYA60クーポンの使い方

【完全無料】動画でweb制作が学べるZeroPlus Gate!

ZeroPlus Gate

ZeroPlus Gateは30日間無料でweb制作が学べるサービスです。31日目からお金がかかるわけではなく、30日で完結するサービスです。

こんな方におすすめ!

  • これからweb制作の勉強をしたい方
  • 学習期間1年未満の初学者の方

リスク0なのでweb制作を学びたい方は挑戦してみると良いです。中級者やweb制作ではなくプログラミングを勉強をしたい方には向いていません。(web制作ではなく、プログラミングを勉強したい場合は前述した↑侍テラコヤの方が向いています。)

無料の理由や30日でどんなサイトを作るかは、下記の記事で詳しく紹介しています。

【無料】ZeroPlus Gateの口コミ・評判を調査!web制作志望は必見?

無料期間は終了する可能性あり&人数制限あり!

ZeroPlus Gate 公式サイト

リスク0!完全無料で学べる!

【残り1人】メンターやってます!

👉まずは気軽に聞いてみる

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材