最速でフリーのフロントエンドエンジニアになるなら、Javascriptを学ぶな

こんにちは。今回は各方面から叩かれそうなタイトルですが、僕は実務を経験した上で思っていることなのでその通り書きました。

※あくまで案件受注を最短を目指すまでの話であって、いずれどこかのタイミングで学ばないとダメです。

最低限仕事を受けるには、１ページをしっかり作れることが必要
HTML/CSSができないのにJavaScriptを深めてもだめ
そうは言ってもjQueryはちょっとだけ覚えたい
まとめ
この記事を読んだ人へのおすすめ記事

最低限仕事を受けるには、１ページをしっかり作れることが必要

フロントエンドの仕事として、まずは「デザインをweb上でしっかり再現する」という作業が必要になります。大抵の場合、イラレorフォトショorXDなどのデザインデータをもらいそれをコードに落とし込むのが主な作業内容です。
それをするに当たって、HTM/CSSがしっかり書けなければなりません。アニメーションがあったとしても基本的にCSSアニメーションで実装可能です。

例えば以下のデザイン。

あなたはこのデザインをHTML/CSSで再現できますか？もしできないのならJavaScriptではなくHTML/CSSを学ぶべきです。

僕はスポーツの例えが好きでよく使いますが、HTML/CSSができないのにJSを深めようとするのはストレートが投げれないのにスライダーを練習するようなものだと思っています。スライダーだけ投げれても打者を抑えられませんよね。

HTML/CSSができないのにJavaScriptを深めてもだめ

例えば以下のようなTodoアプリがあったとします。

もしあなたがCSSを１行も書けないとしたら、このアプリはこうなります。

さて、CSSの全くないプロダクトを納品できるでしょうか？できませんよね。
HTML/CSSだけのプロダクトは納品できますが、JavaScriptだけのプロダクトは納品できないんです。だから学ぶ順番としてHTML/CSS→JavaScriptになります。

そうは言ってもjQueryはちょっとだけ覚えたい

最近のWebページは、ほとんどの場合タブメニューやハンバーガーメニューを含みます。

こういった機能はHTML/CSSだけでは実装できないので、JavaScriptが必要になります。しかし、これらはjQueryを使ってたった数行で実現できます。
具体的には、クラスの付け替えを行って操作します。

例えばハンバーガーメニューはこんな感じ。

$('.Header-MenuIcon').on('click', function() {
  $('.Header-Menu').toggleClass('isActive');
});

Header-MenuIconクラス（動画右上の青いボタン）をクリックすることでHeader-Menuクラス（動画のピンクのメニューエリア）にisActiveクラスをつけたり外したりしています。

isActiveクラスは以下の通り。

.isActive {
  transform: translateX(-100vw);
  transition: all 0.5s ease;
}

このように、スライドアニメーションに関するcssプロパティが書かれています。

実際の動きはこのようになります。右側のHeader-Menuクラスがついたdivタグに注目してください。

このように、クラスがついたり外れたりしているのが確認できると思います。
タブメニューやアコーディオンメニューなども、概ねこういうクラスの付け替えで実装可能です。

まとめ

さて、ここまでの内容をまとめます。あなたがフリーで仕事を受けるなら、

HTML/CSSをしっかり学ぶ
jQueryでメニューを作れるようになる

ということさえ出来ればまずはOKです。逆にそれ以外やってもフロントエンドではいつまでたっても仕事ができません。量を学べばいい、というのは間違いです。
ネットで調べるといろんな情報が飛び交っていて、結局何を学べばいいのかよく分からなくなると思います。そういった情報を取捨選択しなければなりませんが、いきなりそれをするのはとても難しいことです。もし学習方針についてお困りでしたら、お気軽にDMなどでご相談ください。
Twitter→ https://twitter.com/hideki_climax