今回はフロント寄りのお話です。

昨今、フロントエンド界隈ではいろんなライブラリやツールが出てきており、新しく学ぼうという人は何からやればいいか見当もつかないということが多いように思います。
「そもそもjQueryがあればええやん」とか「ツールの使い方覚えるの面倒やな」といった方も一定数いると思います。
私が本格的にフロントエンドで開発するようになったのは今年に入ってからですが、この数ヶ月で数えきれないほどのライブラリやツールの名前を聞きました。
ですが今、個人開発で使っているのは片手で済む程度なので、結局は環境や技術レベルなどの制約で随時必要なものを覚えていけばいいんじゃないかなと思っています。

ということで本題です。
今回はあくまでも概要の説明なので、気になった方は私のGithub・Bitbucketを参照いただくか、直接ご質問いただければよいかと思います。

npm (https://www.npmjs.com/)

Ruby→「gem」、PHP→「composer」、Python→「pip」、Java→「Maven」、C#→「NuGet」のようなイメージです。
必要なパッケージのインストールと、依存関係を解決するためのツールですね。
こいつが無いと開発が始まらないと言っても良いぐらい、よく使われています。
基本的にnode.jsで開発する際のパッケージを管理するためのものですが、フロントエンド開発にもそのまま使えます。
似たようなものにbower（https://bower.io/）というツールもあります。

Sass (http://sass-lang.com/)

CSSメタ言語と言われるものです（scss・less・stylusなども同様）。
通常のCSSではできないクラスのネストや変数定義・条件分岐などを含めて記載することができ、作成したファイルをCSSファイルに変換するというものです。
先のnpmパッケージに「node-sass」というパッケージがあり、以下のようなコマンドを実行すればsassファイル保存時にCSSファイルを自動生成してくれます。 

node-sass -w /path/to/input_file.scss -o /path/to/output_dir/

「-w」がwatchするためのオプションなので、これをつけなければコマンド実行時点の対象ファイル変換のみ行います。
「-o」はファイルの出力先を指定しています（他にもオプションがあります）。

webpack (https://webpack.github.io/)

一言で言うと、「いろんな生成物を指定に則ってまとめてくれるすごいヤツ」といった感じでしょうか。
例えば開発時に機能単位で分けたファイルを、実運用時のために「難読化」して「1つのファイルにまとめる」といった作業でもコマンド一発でやってくれます。 

webpack -p --config=${config_file_path}

これも「node-sass」同様、ファイルの変更を監視するオプションがあります（-w）。
他にも「--colors」で出力に色を付ける、「--progress」で処理経過を出力するなどオプションが豊富です。
細かい設定は「--config」で指定したJSファイルに記載します。

gulp (http://gulpjs.com/)

開発時のルーチンワークやファイル監視などのタスクを実行するためのツールです。
webpackは複数ファイルを適切な単位でまとめる（変換する）といった作業が中心になりますが、こちらはタスクランナーに特化したツールです。
jsファイルにタスク単位で細かい作業を書いておけば、コマンド一発ですべてやってくれます。
gulpfile.jsにタスク「watch」を定義しておけば、以下で実行できます。 

gulp watch

先のnode-sassでは入力ファイルが1つなので、複数のscssファイルを1つのファイルとして出力する場合や複数ツールを関連付けて1つのタスクとする場合に便利です（連携パッケージも多いです）。

babel (https://babeljs.io/)

モダンなフレームワークやライブラリだと_es2015_というJavascript仕様に則って開発することが多いですが、これは現状のブラウザでサポートされていない機能も多くあります。
これを解決するのがbabelです。
設定ファイル(.babelrc)を書いておいて、webpackやgulpとセットで使うことが多いです。

色々書きましたが、正直「こんなにツール使わなあかんならjQueryでええやん」と思いませんか。
半年近くフロントエンドに関わっていた私もほぼ同感です。
少人数での開発やクラス・モジュール設計が適切にできるようなケースではせいぜいnpmとsassだけあれば良いと思っています。
ただ、jQueryは簡単に機能が実装できる反面、テストや保守フェーズで影響が読みにくい部分が多いです。
es2015やタスクランナーを使うとブラウザで動作確認するまでにいくらか手間がかかりますが、そのあたりは開発・保守のしやすさとトレードオフかなと思っています。

結局のところ、プロジェクトに合わせて必要なものを取捨選択すればいいということに尽きますが、開発時の検討材料にしていただければ幸いです。
次回はvue.jsについて書きます。