Progateの次に勉強すべきこと(コーダー・フロントエンド編)

フロントエンド、バックエンド問わず、プログラミングの勉強をProgateから始める方は多いのではないでしょうか？

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

HTML・CSSを勉強し、その後上の2パターンのどちらかに進むのが王道な流れだと思います。初学者の方にとってプログラミングに慣れる・知るという意味でこの流れは適切です。

ただし、Progateは基礎の基礎を勉強するサービスです。Progateだけではとても実務レベルのスキルや知識は身につきません。

この記事では、『Progate の次は何を勉強すれば良いのか』について、コーディング・フロントエンドに特化して紹介します。

勉強をする上で知っておくべきこと

これからしっかり勉強して、コーダーやフロントエンドエンジニアになりたい方にとって、『遠回りしないための心得』を知っておくことが重要です。

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

ITは全くの初心者だけどプログラミングに挑戦したい
プログラミングにちょっと触れてみたい

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

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

PC操作に慣れている方
既にプログラミングに触れたことがある方

これらの方にとってはProgateを使うことは非効率な学習方法だと感じます。

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

ココ重要！

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

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

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

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

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

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

例えば HTML・CSS / JavaScript / jQuery / React がどれも少しだけ書ける人より、JavaScriptはまだほとんど書けないけどHTML・CSSはちゃんと書ける人の方が需要はあります。簡単と言われがちなコーディングも“ちゃんと”書ける人は多くいません。

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

“ちゃんと”書けることに加え、これらがあれば、コーディングは初期の稼ぐ手段として良いでしょう。

まずはコーディングを！コーディングが出来ると言えるレベルとは？

フロントエンドを主戦場にするのであれば、コーディングがまともに出来ることは必須です。では、コーディングが出来ると言えるレベルとは？

デザインを再現できる
保守性や拡張性を考えたコードが書ける
効率よく書ける

個人的には上の3点が『コーディングが出来る！』と言えるレベルだと思います。この3点に関して詳しく紹介します。

注意！

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

デザインを再現できる

前述した通り、Progateをしっかりやれば、『かなり簡単なデザインであれば再現できる』レベルにはなれます。

次のステップとしては、もっと複雑なデザインでも再現できるようになることを目指すべきです。

『複雑なデザイン』とは、ギャラリーサイトに載っているようなデザインのことではありません。それよりももっと簡単な、オーソドックスなwebサイトという意味です。

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

模写をしている方も多くいますが、模写したサイトのコードが参考になるとは限りません。良い書き方をしていないこともあるので、その点は注意が必要です。

🎉 お知らせ

コーディングの実践的な"練習"ができるサービスを作りました。

コーダー・フロントエンドエンジニアを目指している
基礎学習を終えて実践的な"練習"がしたい
実務と同じようにXDのデータを見ながらコーディングの練習をしたい
現役で制作をやっている人のコードを見たい

こんな方におすすめです。

模写修行を見る

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

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

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

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

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

CSS設計に関して概要が知りたい方は、下の記事を参考にしてみてください。

【実務向け】CSS の class 名の決め方(命名規則)はどうすればいいか？について解説

しっかり学ぶためにおすすめの書籍のリンクも載せておきます。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

CSS設計についてしっかり学ぶための学習題材は、この2冊で決まり！と言い切っても良いくらい、必ず読んでおいた方が良い書籍です。

効率よく書けるようになる

フリーランスの方などは特に、効率よく書くことは自分の時給を上げることに繋がます。

Scss
EJS / Pug
gulp / webpack
Git / GitHub ← 効率化ではないけど

効率化するためにはこれらを勉強しましょう。コーディングがある程度出来る人にとって、学習コストはそこまで高くないはずです。ただし、全くJavaScriptに触れていない状態だと、難しいです。まずJavaScriptを軽く勉強してからの方が良いかもしれません。

今後の方向性によっては使わないものもあるかもしれませんが、IT業界にいるのであれば学んでおいても損はないです。

Git / GitHub は効率化ではありませんが、チーム開発の時には必要なので、勉強しておくと良いです。

コーディングの次に勉強すべきこと

コーディングが出来るようになったら、その後どの道に進みたいかはおおよそ2パターンあります。

web制作を仕事にする
フロントエンドエンジニアになる

勉強が順調に進み、『コードを書くことを続けていきたい！』と思えば上の2パターンのどちらかに進むことが一般的です。もちろんいずれどちらも出来るようになることを目指しても良いです。

web制作を仕事にしたい方

web制作を仕事にしたい場合にやるべきことは、JavaScript(jQuery)とWordPressです。

web制作におけるJavaScript(jQuery)の役割は、サイトに動きを付けることがメインになってきます。ギャラリーサイトを見ると、かなり派手な演出のサイトも多くあります。

JavaScriptの基礎は書籍で、jQueryは公式ドキュメントを見て勉強するのがおすすめです。一通り勉強した後は、実装してみたい動きを作ってみると良いです。

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

また、web制作では、WordPressも必須です。

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

WordPressも書籍で基礎を勉強してから、実際にサイトを作ってみると良いです。自分のブログを運用することは特におすすめです。

🐾 学習ステップ

よし、web制作の勉強をするぞ！
ProgateでHTML・CSS / JavaScript / jQueryをやってみる
コーディング(HTML・CSS)を書籍でしっかり勉強する
JavaScriptの基礎とjQueryを書籍や公式ドキュメントでしっかり勉強する
WordPressの基礎を書籍でしっかり勉強する
何か作ってみる

フロントエンドエンジニアになりたい方

フロントエンジニアが扱うJavaScriptは、ReactやVueなどのライブラリやフレームワークとTypeScriptになります。

ReactとセットでNext.js、VueとセットでNuxt.jsを勉強することも必須です。Next.jsとNuxt.jsはフレームワークです。

フロントエンジニアもサイトに動きを付けることはありますが、web制作のように派手な動きを作ることはあまりありません。また、jQueryを使うこともほぼないです。

ReactとVueに関して、日本ではVueも人気ですが、世界的に見たらReactの方が人気です。最近の勢い的にも個人的にはReactがおすすめです。

JavaScript / ReactやVue / TypeScriptを勉強する場合も書籍を使うことがおすすめです。ただし、ライブラリやフレームワークはアップデートも多く、流れが速いので1年以内に出版されたものがベターです。新しい書籍がなければUdemyも候補に入れてみると良いです。

何を作るかにもよりますが、Firebasを使えばバックエンドが出来なくても、サービスが作れます。ある程度学んだ後は、何かサービスを作ってみると良いです。

🐾 学習ステップ

よし、フロントエンドエンジニアになるぞ！
ProgateでHTML・CSS / JavaScript / (React)をやってみる
コーディング(HTML・CSS)を書籍でしっかり勉強する
JavaScriptを書籍でしっかり勉強する
ReactかVueのどれかを書籍でしっかり勉強する
TypeScript を書籍でしっかり勉強する
何か作ってみる

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ！

プロの制作フローを学びたい
どんなことを考えながら書くのか知りたい
実践的な練習がしたい

【初級編】はこんな方におすすめ！

基礎学習中、もしくは終えたばかり
サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ！

CSS設計を意識したコーディングを学びたい
SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。