JavaScript初心者向け関連ツール・技術まとめ

プログラミングを学びたての頃は次から次へと知らない言語・フレームワーク・ツールなどの名前が出てきて混乱しますよね？
そこでJavaScriptを学ぶ初心者向けに知っておくべき関連ツール・技術をざっくり説明していきます。

JavaScript初学者の参考になれば幸いです。

ES5(ECMAScript5)と ES6(ECMAScript2015, ECMAScript6)

JavaScriptのバージョンです。

ES5は2009年にリリースされたもので、ES6は2015年にリリースされたものです。

ES7, ES8, ES9 ...と2015年以降毎年新しいバージョンがリリースされているのですが、未だに5年前にリリースされたES6についての記事を良くみかけますよね。これはES5→ES6への変更が大きかったからだと思います。ES6になって色んな新機能が追加されてかなり使いやすい言語になったんです。

どちらから勉強すれば良いか悩むかと思いますが、ES6から勉強すれば良いと思います。イケてる会社ではES5を書くことはあまり無いので。

ただ、どれがES6以降に追加された機能なのか把握しておいた方が良いです。場合によっては（たまにね）ES5に触れる可能性もありますから。

もしES5から勉強し始めた人がいてもES5で得た知識が無駄になることはないので安心してください。（大きく変わったとはいえ、同じJavaScriptです）
ES5を先に勉強した人は、ネットでES6以降に追加された機能のまとめ記事などを読めば理解できると思います。Qiitaなどに沢山まとまっているので検索してみてください。

jQuery

JavaScriptのコードをより簡易に書けるように設計されたJavaScriptライブラリーです。jQueryを使うとDOM操作が楽になります。

DOM操作ってのはHTML要素を追加・削除したり、スタイルを当てたりすることだと思ってください。（この説明はざっくり過ぎるのでちゃんと勉強してくださいね）

jQueryはだんだん使われなくなってきていますが、知っておいて損はないと思います。直接jQueryを使っていなくても、利用しているライブラリーの中でjQueryが使われているとか、色んな制約のもと仕方なく一部だけjQueryを使うなんてこともなくはないので。
（LP制作とか小さいものを作るときには未だに使われていそうな気がする）

ガッツリ時間を取らなくて良いので、jQueryでのDOM操作とajax通信くらい勉強しておけば十分だと思います。それ以外のことは必要になったときに調べれば良いかなと。

AltJS(Altnative Javascript)

JavaScriptの代替言語です。

JavaScriptは広く使われていますが、色々問題点があったり、不満がある人達がいたりします。そういった点を解決するために様々なAltJSが作られています。例えば、TypeScript、CoffeeScript、Dartなどなど。

AltJSはJavaScriptの構文と大きく異なったりしますが、これらは最終的にJavaScriptに変換されてブラウザに読み込まれて動作します。

開発時はAltJSでコードを書く
→ コンパイルしてJavaScriptに変換する
→ 変換したJavaScriptをhtmlから読み込む
→ 動作する

って感じです。

初心者の場合はまずJavaScriptを勉強した方が良いです。JavaScriptをしっかり理解できたら、AltJSの習得も難しくないので。（ES6の登場でAltJSを使わないサービスも増えましたし）

もし勉強するなら導入企業が多いTypeScriptがおすすめです。

React, Vue.js, Angular

SPA(シングルページアプリケーション)を作るときに役立つ3大フレームワーク。

SPAってのは雑に言うと、単一のページのコンテンツのみを入れ替えて動作するアプリケーションのこと。Trelloみたいに1ページで1つのアプリケーションとして動作するものです。

次のような動的なサイトを作るときに役立ちます。

• テキストエリアに入力したら、すぐにプレビュー表示する
• テキストをクリックしたら編集モードに切り替わって、入力し直せる

日本だとReact, Vue.jsがよく使われています。(Angularを使う企業も増えているようですが)

どれを勉強しても役に立ちますが、書籍などの教材やネット上での情報量、公式ドキュメントのわかりやすさを考えるとReactかVue.jsが学習しやすいと思います。

JavaScriptの入門書籍や動画をやって基本構文の学習に飽きてきたら挑戦すると良いでしょう。テンションとモチベーションが爆上がりするはずです笑。

Redux, Vuex, ngrx/store

ReduxはReactと、VuexはVue.jsと、ngrx/storeはAngularと対になるUIの状態を管理するためのライブラリーです。（厳密にはReduxはReact以外にも使えるとかありますが、現実的にそういった使われ方はしないでしょう。）

ざっくり説明するのが難しいので端折ります笑。

まずはReact, Vue.js, Angularの学習から始めましょう。その後にReduxなどを勉強すると良いです。（どの書籍や動画でもその順序で説明してます）

ちなみに、Redux, Vuex, ngrx/storeといった状態管理を使っていないサービスも多くあります。（Reactだけ使っているとか）

勉強していて何がこんなに便利なの？って思うことがあるかもしれません。そしてその感覚はおそらく正しいです。
ちょっとしたサンプルアプリケーションを作るくらいならRedux, Vuex, ngrx/storeを使う必要はなくて、むしろ使わない方がシンプルだったりします。

規模の大きいサービスに関わるときにわかってくると思います。

Babel

トランスパイラ（JavaScriptに変換するもの）。

一番最初に書いたように、2015年以降毎年新しいバージョンがリリースされています。しかし、世の中のブラウザがJavaScriptの新機能、新しい書き方を全てサポートしているわけでは有りません。

なので、Babelを使ってES6以降のJavaScriptをブラウザ上で動作するように変換する必要があります。

このトランスパイルの設定で各ブラウザの最新バージョンで動くように変換するとか、IEは対象外にするとか色々選べたりします。

初心者の場合はこんなものがあるんだ程度で良いです。JavaScriptを勉強して、サンプルアプリをいっぱい作って最後に勉強すれば良いと思います。

Webpack

モジュールハンドラーと言われるツール。

モジュールハンドラーってのは複数のファイルを束ねてブラウザで実行可能なJavaScriptファイルを出力してくれるツール。

例えば、Reactでアプリケーション開発をしていると沢山のファイルにソースコードを書くことになるのですが、それらを1ファイルにまとめてブラウザで動くようにしてくれます。

Webpackの便利なところは、ローダーやプラグインを追加するとファイルをまとめるときに色んな便利処理をさせることができる点です。

こちらも初心者の場合はこんなものがあるんだ程度で良いです。最終的にWebpackの設定を自力で出来るようになれば良いと思います。

Reactだったらreact-create-app 、Vue.jsならvue-cliとかWebpackやbabelの知識が無くても簡単に環境構築できるツールがあります。最初はそれらを利用して手を動かして動くものを作ることに注力しましょう。