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

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

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

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

目次

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

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

例えば以下のデザイン。

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

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

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

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

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

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

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

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

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

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

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

isActiveクラスは以下の通り。

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

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

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

まとめ

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

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

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

宣伝

ただいまフロントエンドに関する学習ロードマップを作成中です(pdfなどのファイルにして無料で配布予定です)。
多くの初心者の方が抱えている、「どこまで学べばいいかわからない」という問題に徹底的にフォーカスを当てています。これさえ読めばどこまで学べば良いかわかる状態になるような内容です。
また、それに基づいてオンラインメンタリングをリニューアルしてオープンする予定ですので、今しばらくお待ちください。

この記事を読んだ人へのおすすめ記事

HTMLタグに必ずクラスをつけるべき理由

2019年5月20日

スクールでは教えてくれない!プログラミング言語の分類と選び方

2019年2月24日

2 件のコメント

  • 小林英樹さま

    この度はこちらの記事を拝見しまして、勉強させていただきました!
    ありがとうございます!

    私はプログラミング初学者のなかのド素人です。(はじめて数日目)

    フロントエンドに関する学習ロードマップについて、
    とても興味深々です!

    お仕事で大変とは思いますが、
    完成を首を長くしてお待ちしてます♪

  • コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください