フロントエンド初学者が勉強中に悩むであろう、「HTML,CSS,javascriptだけでいいのか？」問題。
ひとまずHTML,CSS,javascriptを勉強して簡単なwebサイトを作れるようになったけど、技術について調べていると必ずと言っていいほど、react.jsやvue.js,typescript,scssなど出てくるはず。ましてサンプルコードがscssであったり、typescriptであったり、es6のモジュールを使っていたり。
コピペしたけど動かない…
このような状況に遭遇することは多いと思う。
頑張って調べてみれば見る度、node.jsやターミナルでのコマンド操作、npmなどなど、よくわからないことがたくさん出てくるはず。
これが全てできないと現場では通用しないのかと不安になる思うが、これは制作会社や案件によって変わってきます。そして、未経験で就活する場合、年齢にもよっても変わってきます。
もちろん全てを習得できることに越したことはないが、独学で全てを網羅するのはかなり厳しいと思う、そもそもこやつらはなんなのか、初学者に必要かどうを解説していこうと思います。
開発環境構築
いわゆるモジュールバンドラーやタスクランナー。 普通にHTMLやCSS、javascriptを書くのではなく、scssやtypescriptをコンパイルしたり、依存ファイルを一つのファイルにまとめたりと、現代のフロントエンドには欠かせないもの。
node.js
初学者必要レベル：★★★★★
javascriptのサーバーサイド言語。
普通であれば、phpやJAVAなどを使うところ、javascriptエンジニアが増えてきて、サーバーサイドもjavascriptで作れたら楽じゃね？的なことで出てきた技術。
node.jsでサーバーを構築することもできるが、かなり上級レベルなので初学者はそこまでできなくてOK。 必須レベル5となっているのは以下で紹介するwebpackなどを動かす上で必要なのでとりあえず自信のPCにインストールできればOK。
node.jsをインストールすることでnpmコマンドが使えるようになる。
webpack
初学者必要レベル：★★★★★
モジュールバンドラーの定番。webpack環境下でフロントエンド開発することで、SASSやES modules、typescriptを動かすことができるようになるので、かなり必須のツールであるといえる。creat react appやvue CLIもwebpackベースでできている。
必須ではあるもののwebpackの設定が初学者にとっては難しいので、最初のハードルと言えると思う。webpackの情報は多いので独学でもなんとかなると思うし、とりあえず初期設定のまま使って、scssやtypescriptなど勉強するのも良いと思います。実際の現場で新入社員がスタートアップ案件のwebpackの環境構築を行うことはまずないと思うので、勉強中はとりあえず適当に使えばOK。
gulp
初学者必要レベル：★☆☆☆☆
いわゆるタスクランナー。webpackが主流になる前はGruntと二分したツール。
webpackとほぼ同様のことができるが、トータルでwebpackのほうが便利ということで昨今は新規案件で使われることは少ないと思う。ただ現場では昔gulpで開発した案件を今も運用を続けていることもあるので、全く使われないわけではない。
vite
初学者必要レベル：★★☆☆☆
割と新しいwebpackベースのモジュールバンドラー。新しい物好きの人が使うやつ。webpackよりreactやvue環境がサクッと作れるようなので、勉強する価値はある。純webpackかviteどちらか好きな方を選んでみてはいかが？
docker
初学者必要レベル：★☆☆☆☆
開発環境を本番サーバーと同じにしたり、複数人で開発する場合にそれぞれwindowsやmacなど異なるosを使っている場合でも完全に同じ環境にすることが可能。初学者には難易度高め。とりあえずは名前とざっくりどんなことができるのかという概要を知っていればok。
コマンド系
いわゆる黒い画面。ドラマに出てくるハッカーが使ってるやつ。
ターミナルorコマンドプロント
初学者必要レベル：★★★★★
上で紹介したwebpackやgulpなどを動かすのにターミナルは必須。難しそうに感じるが、基本的には決まった作業をする時、終わる時、本番環境にアップルファイルを作る時など、決まったタイミングで決まったコマンドをちょこっと打つだけなので（コピペでもOK）。その他よく使うコマンドは使っているうちに覚えてしまうので、あまり難しく考える必要はない。
バージョン管理
作業ファイル（htmlファイルなど）にセーブポイントがをつけることができるようなイメージ。複数人で作業したファイルをガッちゃんこしたり、以前セーブした状態に戻したりできるツール。現場では必須中の必須だが、初学者はプラスアルファくらいでいいかなという感じ。
git
初学者必要レベル：★★☆☆☆
バージョン管理ツールの定番。定番というかこれ一択なので、バージョン管理ツールを使いたいと思ったっ場合は迷わずgitgitgit！
ターミナルでコマンドを打ちながら使う。
subversion（SVN）
初学者必要レベル：☆☆☆☆☆
gitが出てくる前はsvnが使われていよう。古い会社ではsvnが使われてることもあるかもしれないレベル。無視。
GitHub
初学者必要レベル：★★☆☆☆
gitのリモートリポジトリ。gitと合わせて使うwebサービス。
最初はgitとGitHubは何が違うの？ってなるとおもうが、ローカル（自分のPC）gitで管理したものをweb上にあるGitHubというところにアップするというイメージ。なので複数人で開発する場合に必須。
GitLab
初学者必要レベル：☆☆☆☆☆
GitHubと一緒。
Bitbucket
初学者必要レベル：☆☆☆☆☆
GitHubと一緒。
sourcetree
初学者必要レベル：★★☆☆☆
gitのGUIツール。
基本的にgitはターミナルを使って操作しなくてはいけないので、初学者にはハードルが高く感じてしまうし、わかりにくい。そこでgitをわかりやすいアプリケーションで使えるようにしたものがsourcetree。ターミナルを使う方がかっこいいと思う人はターミナルで。
わかりやすい方がいいという人はsourcetree。または下で紹介するForkかGitKrakenで。
僕はsourcetree。
Fork
初学者必要レベル：★★☆☆☆
sourcetree同様gitのGUIツール。
sourcetreeより動作が軽い。
ただし、UIが全て英語。英語に対して拒否反応が起きない人はsourcetreeよりForkがおすすめ。
GitKraken
初学者必要レベル：★★☆☆☆
sourcetree,Fork同様gitのGUIツール。
上の二つよりも多機能の様子。動作は重いらしい。
HTMLテンプレートエンジン
テンプレートエンジンとは、例えばヘッダーやフッターなど、全てのページで共通となるものを別ファイルで管理したり、htmlのなかでリストなどをfor文を使ってプログラムのように書いたりできるようなツール。reactやvueを使う場合は必要ないと思うが、reactなど使わない案件では重宝するツールです。
AltCSSのscssに比べればそこまで必須ではないが、扱えると便利。
使用するにはnode.jsでネイティブなHTMLへコンパイルする必要がある。
webpackやgulpでもコンパイル可。
Pug
初学者必要レベル：★★☆☆☆
マークアップがシンプルになるが、書き方にちょっとクセがあるので、慣れるまではコードが見にくい。テンプレートエンジンのなかでよく使われる定番。
EJS
初学者必要レベル：★★☆☆☆
pugとできることはほぼ同じ。基本的には素のHTMLと同じようにマークアップするので、初心者でもわかりやすいのでおすすめ。ただ現場レベルではpugより採用される数は少ない。僕はejs派。
CSSプリプロセッサ
cssをめっちゃ便利に書けるやつ。AltCSSにも種類がいくつかあるけど基本的にはSCSSをやっておけばいいと思う。
使用するにはnode.jsでネイティブなCSSへコンパイルする必要がある。
webpackやgulpでもコンパイル可。最初の学習段階ではcodePenなどを使って動作を確認してみると良い。
SCSS（Sass）
初学者必要レベル：★★★★★
今のweb制作現場で素のcssを触ることはほぼないと言っていいです。もちろん制作会社やプロジェクト単位でも他のものが使われることもある思うが、初学者であればSCSS一択で良いと思う。素のcssの上位互換。
SASS（Sass）
初学者必要レベル：★☆☆☆☆
{}がなくてインデントさせて書くやつ。使ったことがない。
LESS
初学者必要レベル：★☆☆☆☆
使っているのを見たことがない。
Stylus
初学者必要レベル：★☆☆☆☆
新しい物好きの人が使っているイメージ。触ったことない。
javascript系（フレームワークも）
javascriptも何だかたくさんある。せっかく基礎を勉強して、jqueryやライブラリーを使ってちょっとしたアニメーションがあるサイトを作れるようになったのにこれじゃダメなの？って思うかもしれないが、おそらく現場では厳しい可能性があります。
ES modules
初学者必要レベル：★★☆☆☆
import 〇〇 form ‘〇〇.js’
みたいなやつ。
技術というより、設計の話です。jsの基礎やjqueryを勉強しているときは出てこなかったと思うが、現場ではこのようにモジュール管理が定番になっていると思う。これは関数やclassなど別ファイルで管理して、使いたい時に別ファイルから呼び出すという設計管理になる。npmでjsライブラリ、プラグインを管理するのも当たり前になってきているので、初学者のステップアップとしてモジュールという概念は知っておいた方がいいという感じ。
最近はモジュールバンドラーを使ってトランスパイルしなくてもブラウザで普通に動くようなってはいるものの、現状ではモジュールバンドラーを使った方がよき。
typescript
初学者必要レベル：★★☆☆☆
最近のjsのトレンド。javascriptの進化版的なイメージ。型の宣言をちゃんとしてエラーを未然に防ごうぜ、適当に変数を作るのやめようぜ、的なやつ。
特にReactを使う時にはtypescriptで書くのが前提になっていることがほとんどなので、Reactを勉強する際はセットで勉強するべし。
React
初学者必要レベル：★★☆☆☆
今一番使われてるフレームワーク。フレームワークを使うことで綺麗な設計ができるようになるのがメリット。ただ通常のjsで作るサイトとは設計概念が違うので初学者にちょっと難易度は高いかもしれない。もちろんReactが扱えれば就活にかなり有利になるので、勉強して損することはないので是非トライしてもらいたい。
React
初学者必要レベル：★★☆☆☆
Reactと二分するフレームワーク。VueCLIをつかって構築する場合Reactと似たような作りになるので、VueかReactどちらか勉強すれば潰しが効くと思う。
またvueはCDNで読み込んでページの部分的に使うことができる（jsonデータをリストレンダリングしたりとか）のでちょっとだけ勉強がてらvueを導入してみるのもおすすめ。
Angular.js
初学者必要レベル：☆☆☆☆☆
フレームワークの火付け役的存在。ただReactやVueが出てきて以来トレンドからはずれているので、初学者が無理して勉強する必要はないと思う。
Backbone.js
初学者必要レベル：☆☆☆☆☆
Angularと一緒。
webGL系
グラフィックがゴリゴリ動くすごいやつ。
Three.js
初学者必要レベル：★☆☆☆☆
webGLの定番ライブラリー。jsの難易度が一気に上がるので、初学者は「なんかすげー！」くらいでOKかと思う。
そこそこ経験の長いエンジニアでもwebGLはほぼできないエンジニアもいるので（私..）、逆にある程度使いこなせるようになれば、しばらく仕事に困ることはないかと。そもそもwebGLができるレベルであれば、他のこともなんなくできると思う。
webGLを勉強するならとりあえずこれ。
CMS
コンテンツマネージメントシステムの略で、webサイトをブログのような管理画面から更新したり、新規ページを作ったりできるシステム。HTMLなどを書かなくていいため、エンジニアでない人でも更新などすることが可能。
wordpress
初学者必要レベル：★☆☆☆☆
定番のCMS。フロントエンドエンジニアの仕事としては需要はかなり低いので学習優先度は低いが、個人的に勉強しておいてもいいかも。
未経験者、年齢別必須技術
上記で色々上げてきたが未経験のフロントエンドエンジニアを採用する場合、年齢によってこれくらいは持っていて欲しいという技術があるので、もし僕が採用担当の面接官だったらという感じでみていく。
HTML,CSS,JSの基礎は前提とする。
新卒20〜23歳
新卒であれば、とりあえずHTML,CSS,JSをつかってポートフォリオサイトがあればOKかと。
あとは仕事しながら勉強するべし！
webの専門学校のようなところを出ているようであれば、SCSSは扱えた方がよい。
20代前半 中途
SCSSは触れるようになっていて欲しい、あと努力の見えるポートフォリオが欲しい。
20代後半 中途
SCSS、gitの知識、node.jsの知識、webpack使ったことあります。努力の見えるポートフォリオ必須！
30代前半 中途
未経験での転職が厳しくなってくる年齢。
SCSS、git、node.js、webpack、pugまたはejs、
完璧でなくていいので、Reactまたはvueを使ってのサンプルサイト。
おーめちゃくちゃセンスありそうと思わせる、ポートフォリオ必須！
30代後半 中途
未経験での転職がかなり厳しくなってくる年齢。
SCSS、git、node.js、webpack、pugまたはejs、Reactまたはvueで作り込んだのサンプルサイト。
webGLでハッタリをかますのもあり。
本当に未経験ですか？と思わせるポートフォリオ。
これだけできれば、最初からフリーランスで仕事をとれるかも。
40代 中途
就職はかなり厳しい…
ので、最初からフリーランスを目指すべし！！
HTML,CSS,Javascript以降は結局どれを勉強すればいいの？
駆け出しエンジニアが現場で求められるスキルを考えると、
- SCSS（Sass）
- node.jsを使った開発環境（webpack）
- コマンド操作（webpackなどを動かすのに必須）
- git,GitHub,（sourcetree or Fork or GitKraken）
まずは上記の4つを勉強すると良いと思う。
とりあえずこれだけできれば、新人エンジニアでもベテランエンジニアのアシスタント的な立ち位置で仕事を任せることができる。
むしろ20代でフロントエンドエンジニアを目指す場合、上記のところまでできるようになったら、ポートフォリオを作ってサクッと会社に入ってしまおう。
正直独学には限界があるので、実際に現場で働きながら上のスキルを身につけていく方が数段早く成長できます。
自身の勉強に不安を持っている方、迷っている方はぜひ参考していただきたい。
その他の必要な最低知識や優先度などもこちらの記事で紹介！
逆に必要のない技術あるのでこちらで詳しく説明してあります。