フロントエンド、バックエンド問わず、プログラミングを勉強しよう！と思ったときにまずはProgateから始める人は多いです。

Progateだと、まずはhtml,css,jsを勉強してその後、フロントエンドに興味がある人はReactを、バックエンドに興味がある人はRubyやPHPやPythonを、というのが王道な流れだと思います。

初学者の人にとってプログラミングに慣れる・知るという意味でこのフローは適切だと思います。

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

この記事では、Progateの次は何を勉強すれば良いのかについて、フロントエンドに特化して解説します。

幅広くよりも1つの分野を極めることが大事！まずはコーディングのレベルを上げる！

たまに色んな言語に手を出す人がいますが、ざっとどんなものか知るという目的であれば良いですが、仕事が出来るレベルのスキルを身に付ける上では遠回りです。

例えばhtml,css,JavaScriptがどれも少しだけ書ける人より、JavaScriptはまだほとんど書けないけどhtml,cssはかなりちゃんと書ける人の方が仕事はあります。

コーディングは稼げないとか簡単だとか言われがちですが、“ちゃんと”書ける人は実際少ないです。

“ちゃんと”書けることに加えて連絡のレスポンスが速かったり、コーディングのスピードが速ければ、コーディング案件はかなりあるし、副業などで初期の稼ぐ手段として特に悪いとも思いません。

フロントエンドを主戦場にするのであればコーディングがまともに出来ることは必須なのでまずはどんなデザインでも実装出来る(複雑な動きを除く)ようにしましょう。

コーディングの定義は人それぞれですが、この記事ではhtml,css/jQuery/WordPressのテーマ作りくらいまでをコーディングと呼ぶことにします。webサイトを作る人にならないのであれば、WordPressのテーマ作りはやらなくてOKです。

コーディングが出来る！のレベルについて

• 見た目を作れるようになる
• 良いコードを書けるようになる
• 効率よく書けるようになる

コーディングが出来る！のレベルになるまでにクリアすべきことです。

1つ完璧にしてから次へ進むというよりは、ある程度見た目が作れるようになったから良いコードに関してもちゃんと意識しよう、だいぶ慣れてきたから効率も考えよう…と言った感じで進めていくのが良いと思います。

見た目を作れるようになる

まずは『見た目を作れるようになる(=デザインを再現出来るようになる)』ことを目指すべきです。そのためにはとにかく書くこと。Progateが終わったら、ドットインストールと本1冊をやって、気に入ったサイトを模写しまくりましょう。

見た目はある程度作れるようになっても、実務でコーダーやフロントエンドエンジニアをやっている人からすると、実務レベルとは言えない(=コーディングが出来ると言えない)と思われるかもしれません。それは、どんなコードを書くかも大事だからです。

昔は僕も『コードの中身とかそんなこだわる必要なくない？』と思っていましたが、それは大きな間違いです。保守性も考えてコードは書かないといずれ破綻する可能性が高いです。

良いコードを書けるようになる

『良いコードを書けるようになる』為には、

• SEO
• CSS設計

を勉強しましょう。

Progate、ドットインストール、本は実務ではやらないような書き方やSEO的に微妙な書き方をしている場合があるので注意が必要です。

SEOはアルゴリズムのアップデートが頻繁にあり、状況も変わるのですが、考え方や基礎の基礎に関しては10年つかえるSEOの基本はおすすめです。ただ、本当に基礎の基礎です。(サイト制作時に気を付けるSEOの記事書く予定です)

CSS設計に関しては過去に書いた記事があるので、そちらを参考にしてください。

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

もっと詳しく知るには、上記の記事内にもありますが、Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法で勉強しましょう。

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

そして次に考えることが、『効率よく書けるようになる』ことです。

• Sass
• EJS/Pug
• gulp/npm-scripts
• webpack
• Git/GitHub

そのためには、を勉強しましょう。

コーディングがある程度出来る人にとって、これらの学習コストはそんなに高くないです。今後の方向性によっては使わないものもあるかもしれませんが、IT業界にいるのであれば一旦学んでおいて損はないです。

ここまで出来ればコーディングは出来る！と言えますし、開発環境を指定される案件(例えばSassとEJS使ってみたいな案件)でも問題なくこなせると思います。

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

Progateで基礎の基礎を勉強し、コーディングがある程度出来るようになったら、その後どの道に進みたいかはおおよそ3パターンあります。

• webマーケティングの道に進む
• デザインの道に進む
• エンジニアの道に進む

この3つです。

コーディングだけをずっとやり続けていても良いですが、単価を上げたければ次のステップに進んだ方が良いです。

では、紹介した3つ、それぞれどんな特徴があり、どうやって何を勉強すべきか解説します。

webマーケティングの道に進む

マーケティングを勉強する場合、まずやるべきことはこの3つです。

• ライティング・コピー
• SEO
• マーケティングやロジカルシンキングのフレームワーク

座学を勉強しているだけではなんの実績にもならず、生きた経験や知識は得られないので、ブログとSNSをやって、実績を残しましょう。

ブログは雑記ではなく、何かに特化したブログの方が良いです。アフィリエイトサイトなんかでも良いと思います。自分で記事も書いて、日々順位を追い、試行錯誤することが大事です。

マーケティングやロジカルシンキングのフレームワークに関しては、グロービス学び放題がおすすめです。そして仕事をする際に積極的に学んだフレームワークを使ってみることです。使わないと100%忘れます。

僕は制作案件の提案でマーケティングのフレームワークを使った資料を入れることも多いです。

グロービス学び放題で学んだことで、もっと詳しく知りたいと思ったらググってみましょう。僕はまずMission Driven Brandに詳しい解説がないか調べるようにしています。

マーケティングの道に進むと、コードを書くのを止める人もいますが、それは好みなので好きにして良いと思います。

マーケティングとコーディングが出来ると制作であれば、ディレクターや制作後の運用も上手くなります。交渉次第ではコンサルもセットで請け負うことも出来るので、付加価値や差別化になります。

マーケティング × 制作の分野に興味があれば、baigieの枌谷さん(@sogitani_baigie)のツイートは注目しておくと良いです。

コーディングからwebの世界に入り、マーケティングの道に進む人は、

• メディアの運営
• 広告運用
• 集客やメディアのコンサル
• 仲間を作って自分でサービスを作る

このような人が僕の周りでは多かったです。

デザインの道に進む

コーディングの後にデザインを勉強する人は、webサイト制作に興味がある人が多いと思います。

デザインもコーディングも出来ると、コーディングすることを考えてデザインが作れるので、かなり効率が良いです。(全くコードがかけないデザイナーのデザインはやりにくいことが多い)

webデザインで使うソフトはこんな感じです。

• イラストやロゴ：Illustrator
• 画像の加工：Photoshop
• webデザイン：XD

Sketchなどを使う人もいますが、その辺は好みかなと思います。慣れてきたら色々いじってみて、好きなものを使うのが良いのではないでしょうか。

デザインはセンスみたいなことがよく言われますが、webデザインはロジックもかなり多いです。まずは、ノンデザイナーズ・デザインブック [第4版]を読んで、その後下記の記事で紹介しているサイトで勉強してみると良いです。

• webデザインを勉強したい人にオススメのサイト【実務向けもあり！】

ロジックを学ぶことも大事ですが、やっぱり、デザインは沢山見て作ってみることが上達への近見です。XDなどの使い方はやりながら学べばOKです。

エンジニアの道に進む

コーダーからフロントエンジニアを目指すパターンです。

コーダーとフロントエンジニアの違いは超簡単に言うと、高度なJavaScriptが書けるかどうかです。

コーダーやwebデザイナーであればJavaScriptは基礎を知っていて、jQueryでサイトに動きを付けれればOKですが、フロントエンジニアになると、TypeScriptとReact/Vue/Angularのどれかが書けることが必須かなと思います。

日本ではReactとVueが多く、Reactは大規模向けで、Vueは取っつきやすいみたいなことがよく言われます。どちらも触ったことがありますが(Reactは本当に触っただけ)、確かにVueの方が書きやす印象は受けます。

僕はVueしかやらないので、他は分かりませんが、Vueだと下記のフローがおすすめです。

1. ともすたチャンネルのVue.js入門とNuxt.js入門を見る
2. ドットインストールのVue.js入門を見る
3. VueとNuxtの本1冊ずつ買って勉強する。(UdemyでもOK)
4. 何か作ってみる

あとは実務経験を積むために、実際にVueを使ってる現場でフロントエンドエンジニアとして就職するのがベストです。

Angularに関しては、中級以上のことが学べそうで、最近注目しているのが、Nino(@d151005)さんのCAMPです。このレベルの人はなかなか教える側に回らないので、今がチャンスだと思います。僕はVue派ですが、CAMPには興味あります。

何を作るかにもよりますが、Firebasを使えばバックエンドが出来なくても、サービスが作れるのでどんどんサービスを作って、サービスで生きていくなんてのも良いですね。(難易度はかなり高いですが。)

早めにコーディングの次のステップへ進むべき！！

お金を稼ぐことや将来性を考えると、やはりコーディングだけやっているのはあまり良い選択だとは思えません。最近はコーディングいらずでwebサイトが作れるサービスも増えてきたので、いつ仕事がなくなるかも分かりません。

なるべく早めに次のステップに進むと、新しい世界も見えて楽しいと思います！！