Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
701
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

Googleトレンドに見る2016年人気のCSS・JavaScript・タスクランナー

(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番人気でした。もちろん、流行っているかどうかだけで技術を選んではいけませんが、多くの開発者が関心を持っている技術であることは間違いありません。学ぶ技術の選定の参考にしていただければと思います。

参考記事
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】 - Build Insider

701
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで
moneyforward
「お金を前へ。人生をもっと前へ。」をMissionとして、個人向け、法人向け様々なFintechサービスを開発、提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
701
Help us understand the problem. What is going on with this article?