(2016/05/23 追記)
記事内で取り扱っている技術で、はてぶコメント等で質問の多かった「webpack」についての解説記事を書きました。
最新版で学ぶwebpack入門 – JS開発のモジュールバンドラ - ICS MEDIA
Web技術はよく技術の進化が早いと言われます。多くの技術が現れては消える中で、どの技術を学ぶべきかを選択するのは重要です。選択するポイントの1つに「技術の将来性・人気があるかどうか？」があります。今回は基本的なフロントエンド技術である「CSSコーディング」「JavaScriptプログラミング」「タスクランナーとビルドツール」の3つについて、それぞれの人気をGoogleトレンドで調べてみました。
CSSコーディングの流行り
CSSは、SassやLESSに代表される「CSSプリプロセッサー」を使ってプログラミングすることで、品質と効率を大きく向上させることが可能です。通常のCSSコーディングに比べて下記のような利点があります。
- ネスト（入れ子）が使用可能
- 変数を使用可能
- 条件分岐（if文）やループ処理（for文、while文等）が使用可能
- ファイルを分割可能
下記がGoogleトレンドでの比較結果を表します。グラフの数値が高いほどより多くGoogleで検索されていることを示します。
元々はLESSの方が人気でしたが、2016年現在CSSプリプロセッサーの中で1番流行っているのはSassです。Twitter社製のUI作成フレームワーク「Bootstrap」もver3まではLESSベースでしたが、ver4からはSassベースとなっています(※)。2015年4月頃からPostCSSも伸びてきていますが、現状ではSassの4分の1程です。
※ Bootstrap 4 alpha · Bootstrap Blog
JavaScriptプログラミングの流行り
JavaScriptもTypeScriptやBabelと言った中間言語を使ってプログラミングすることで、より便利に記述できます。たとえばTypeScriptなら下記のような利点があります。
- 型を使用できる為、大規模開発に向いている
- 最新のJavaScript仕様（ES2015）の記法を使用でき、ほぼすべてのモダンブラウザで動作する仕様（ES5)向けにコンパイルできる
JavaScriptのプログラミング技術で2016年1番人気なのはMicrosoft社製のTypeScript。類似の技術であるBabel、Haxe、CoffeeScriptと比べても人気のある技術です。また、TypeScriptはJavaScriptフレームワーク「AngularJS」の開発者向けアンケートでもBabelを抑えて1位になっています（※）。
※ 記事「世界のAngular開発者はどんなトランスパイラー・エディター・ビルドツールを使っているのか？」より
タスクランナー・ビルドツールの流行り
フロントエンドの開発には、コンパイル作業やファイル圧縮など、多くの面倒なタスクがあります。これらを一括で管理する「タスクランナー」やビルドツールもフロントエンドには欠かせない存在です。
2016年4月現在のトレンドでは、GruntよりGulpとwebpackの方が人気。GulpはGruntと比べてシンプルな記述と高速な処理が可能（※）なタスクランナー、webpackはJavaScriptからCSS、画像等あらゆるアセットを生成する近年人気のビルドツールです。GruntよりもGulpかwebpackを選択するとよいでしょう。
※ 5分で導入！ タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA
人気と将来性も技術選択のポイントの1つ
今回はCSS・JavaScript・タスクランナーの3つについて、2016年の今現在流行っているものを見てきました。CSSはSass、JavaScriptはTypeScript、ビルドツールGulpとwebpackがそれぞれ1番人気でした。もちろん、流行っているかどうかだけで技術を選んではいけませんが、多くの開発者が関心を持っている技術であることは間違いありません。学ぶ技術の選定の参考にしていただければと思います。