昨年 に引き続き、2017年のJavaScriptの動向を振り返ります。

2017年の12ヶ月間に獲得した GitHub のスター数からプロジェクトを定量的に評価し、JavaScript ベスト・オブ・ザ・イヤー 2017 を決定します。


本サイトに掲載したチャートは、2017年の12か月間にGitHubでカウントされたスター数をプロジェクト別に比較したものです。分析対象のプロジェクトは Best of JS から収集したものです。 Best of JS では、Webテクノロジに関連するベストプロジェクトをまとめています。

目次

  1. 2017年人気プロジェクトランキング
    Vue.jsReactCreate React AppPuppeteerAxiosVS CodePrettierReact NativeElementElectron
  2. フロントエンドフレームワーク
    Vue.jsReactAngularPreactHyperapp
  3. Node.jsフレームワーク
    ExpressKoaFastifyGunmicro
  4. Reactボイラープレート
    Create React AppAnt DesignNext.jsStorybookGatsby
  5. Vue Ecosystem
    ElementiViewVuexWeexNuxt
  6. モバイル
    React NativeWeexIonicQuasarNativeScript
  7. コンパイラ
    TypeScriptBabelFlowReasonPurescript
  8. ビルドツール
    ParcelWebpackGulpRollupPoi
  9. テスティングフレームワーク
    JestAVAMochaJasmineTape
  10. 統合開発環境(IDE)
    VS CodeAtomReactideBracketsNuclide
  11. CSS in JavaScript
    Styled ComponentsCSS ModulesPolishedGlamorousEmotion
  12. 静的サイトジェネレータ
    GatsbyHexoReact StaticPhenomicMetalsmith
  13. GraphQL
    GatsbyReact Starter KitApollo clientGraphQLGraphiQL
  14. おわりに

2017年人気プロジェクトランキング

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆

2017年の推移

3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

GitHub情報

作成日
2013-07
累計スター数
80.7k☆

リンク

GitHub
vuejs/vue
WEB サイト
vuejs.org
Best of JS
bestofjs.org/projects/vuejs
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆

2017年 ベストプロジェクト

カテゴリを超えてもっとも人気のあったプロジェクトを見てみましょう。

2年連続で Vue.js

2017年もっとも人気だったプロジェクトは昨年に引き続き Vue.js です。年間で 40,000 を超えるスターを新規に獲得しました。

スター獲得数は2016年(26,000 スター)をはるかに超える結果です。次点の React を大きく引き離しました。 Vue.js がここまで人気な理由は、

  1. コンポーネントという考え方は React と同じだが、シンタックスが React よりとっつきやすく比較的短期間で習得できる。
  2. エコシステエムがしっかりしている。ルーター:vue-router、状態管理ライブラリ:Vuex といったデファクトスタンダード一式を含んでいる。
  3. ひとつの .vue ファイルにテンプレート、ロジック、スタイルすべてを格納するシングルファイルコンポーネントというコンセプトが非常に優れている。
  4. PHP のWEB アプリケーションフレームワークでもっとも人気の高い Laravel でデフォルトの view エンジンとして採用されている。
  5. Facebook や Google のような巨大なインターネット企業がバックに控えているのではなく、Evan You 氏がクラウドソーシングでスポンサーを募り、オープンソースプロジェクトとしてメンテナンスしている。

などが考えられそうです。5つ目と関係していると思いますが、Vue.js はとりわけ中国の開発者にとても人気があります。Vue.js は中国最大のEコマース企業(Alibaba)で採用されていますし、GitLab や Adobe でも採用されています。

ふたたび 2位は React

2016年と同じく 2位は React でした。2017年は 27,000個のGitHub スターを獲得しました(ここでいうスター数は2017年の1年間で新規に獲得した数で、これまでに獲得した総スター数ではありません)。

React プロジェクトの新規作成には React のサードプロジェクトである Create React App というコマンドラインツールの使用が推奨されています。ただ、Create React App が普及したことで、React ボイラープレートが以前にもまして乱造されるようになりました。

Redux のクリエータで、現在は Facebook に籍をおく Dan Abramov 氏のおかげで、シンプルさと機能とが絶妙なバランスで共存するようになりました。例えば、スタイリングのための凝ったソリューション(代わりにプレイン CSS の推奨)、サーバーサイドレンダリングといった発想はなく、すべての機能がうまくパッケージされていて、優れた開発者エクスペリエンスを実現しています。

Axios

HTTP クライアントでもっとも人気の高いライブラリが Axios です。クライアントサイド(AJAX リクエスト)、サーバーサイド(Node.js 環境で HTTP リクエスト)のいずれでも動作します。Axios の人気には、Vue.js も一枚噛んでいるようです。Vue.js のチュートリアルの多くの箇所で、API への HTTP リクエストの解説に Axios が利用されています。

Puppeteer

Puppeteer は、2017年のもっとも重要な出来事のひとつでしょう。Puppeteer は、Google Chrome チームが開発したヘッドレスな Chrome ブラウザで、バックグランドで走らせコードで制御が可能です。ユースケースとしては、

  • WEB アプリケーション UI テストを自動化
  • サーバサイドレンダリングでWEB ページのスナップショットを取得
  • WEB ページを PDF ファイルで保存

フロントエンドフレームワーク

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆

しばらくの間「フロントエンドフレームワーク」は熾烈なバトルフィールの様相を呈するカテゴリでしたが、いまや事態は沈静化し、3強がゲームを支配している状況です。

3強:Vue, React, Angular

UI フレームワーク3強はご想像通り、 Vue.jsReactAngular です。いま、ひとまとめに「フレームワーク」と呼びましたが、厳密には、フレームワークは Angular のみで、Vue.jsReact は「ライブラリ」と呼ばれるものです。

「2017年人気プロジェクトランキング」で Vue.js とそのアプローチが広く受け入れられた要因についてすこし考えてみましたが、Vue.js と比較すると React のアプローチはまだ統一されているとはいえず、view レイヤーにまつわる次のような問題について開発者は慎重に判断しなければなりません。

  • ページ間のルーティング
  • データをどのように取得するか?
  • フォームとデータをどのようにバインドするか?
  • アプリケーションの状態(ステート)をどのように保持するか?

これとは対照的に、Angular のエコシステムは制約がもっと強くて、より堅牢です。いわば「Angular の流儀」が存在します。おそらくこのことが Angular に「コーポレート」なイメージを与えているのかもしれません。また、バックエンド開発者にお馴染みの C# や Java を連想させる、TypeScript の静的型付けがこのイメージを強調してきました。

レス・イズ・モア

このカテゴリで3強を追う4位となったのは、Preact という興味深い結果です。PreactReact のコンパクトなオルタナです。React と同じ ES6 API を完全にサポートしつつ、サイズが 3KB 未満と軽量です。Preact を含めたフレームワークの多くが3強との差別化で強調するのは、少ないメモリーで、高速にブラウザ上で動作する点です。この典型例が Hyperapp で、いまもっとも熱いプロジェクトのひとつです。関数型のパラダイムを取り入れ、React の JSX シンタックスを採用し、Redux にインスパイヤされた状態管理システムを備えています。

Node.jsフレームワーク

1
Express

Express

Fast, unopinionated, minimalist web framework for node.
+6.7k☆
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆

JavaScript は web アプリケーションのフロントエンドを実装するためだけの言語ではなく、バックエンドでも利用が広がっています。 node.js コミュニティで影響力のあるメンバーのひとり、Mikeal RogersNode.js は一年以内に Java を凌駕する と予言しています。

しかし、長い時間を経てデファクトスタンダードが確立された他の言語(Ruby の Ruby on Rails、Python の Django、PHP の Laravel)とは異なり、node.js にはスタンダードや推奨されるアーキテクチャといったものがいまだに存在しません。

node.js の歴史を鑑みても、Express が唯一支持されている node.js フレームワークというわけではありませんが、Feathers, KeystoneNest などのフレームワークや CMS の基幹として相変わらず広く利用されています。

Express のミニマリストなアプローチは、昨今トレンドのマイクロサービス(モノリスな単体アプリより、コンパクトなアプリケーションの疎結合な集積を推奨する考え方)に非常にフィットしているようです。

2017年は、3つの新たなプロジェクトが node.js フレームワークのトップ 10 にランクインしました。

  • hapi にインスパイヤされた汎用 web フレームワークの Fastify は、どちらかというと JSON ベースの高速な HTTP APIs の構築に向いています。
  • Server.js は「箱からだしたらすぐ使える」的な体験を志向したフレームワークです。
  • Nest は、モジュールとコントローラからなる Angular 開発者にはとっつきやすいアーキテクチャを採用しています。また、TypeScript で実装されています。

Reactボイラープレート

1
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆

React は表示レイヤーのライブラリで、変化の激しい React のエコシステムを生み出しています。 このカテゴリーには ReactReact Native 上で動作するライブラリーを取り上げています。

2016年、Create React App は「どうやって React アプリケーション開発をはじめるか」という問題を、「いい感じの設定」をパッケージ化して提供することで解決しました。 Facebook は Create React App の新しいバージョンを継続的にしかも頻繁にリリースしていて、2017年の React エコシステムにおいて圧倒的な人気補を誇っています。

React の成功例としては StackBlitz をあげることができます。 オンラインの IDE で、Create React App で作成したアプリケーションをわずか数秒でブラウザーから実行することができます。

Create React App がデフォルトのスターターキットとなっても、開発者はもっとマニアックなスターターキットが必要になることがあります。 React boilerplate はこの領域でとても人気のあるプロジェクトで、GraphQL をはじめ多数の機能を提供しています。

Ant DesignAnt Design ProMaterial UI は React のスタイル適用済みコンポーネント(styled component)を提供していて、 開発者がスタイルについて心配することなく開発できる機能を提供しています。

Recompose の人気からは React の ある 機能が熟練の開発者に愛されてることを示しています。 その機能は関数型アプローチで、Recompose はすべてのものは関数で表現できるという関数型の世界へ通じるヘルパー関数を提供しています。

Vue Ecosystem

1
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆

スペシャルゲスト: Evan You

Vue.js の良さは分かっているつもりですが、その良さが何に起因しているのかまでは正直よく理解できていないのかもしれません。

そこで専門家の意見を仰ごうというわけなのですが、Vue.js のクリエイターご本人に勝る適任者がいるのかと思い至ったのです。

Guest Writer evan

Vue 自身の人気の高まるのにともない、2017年は Vue のエコシステムも急速な成長を遂げた1年となりました。

ElementiView は Vue の2大人気 UI コンポーネントライブラリで、デスクトップ UI の高速な開発に焦点を合わせています。 Mint UIvux はモバイル UI に的を絞った2大人気 UI コンポーネントライブラリです。

Vuetify はマテリアルデザインのコンポーネントフレームワークでモバイル・デスクトップの両方に対応しています。 とても高機能でサーバーサイドレンダリング、PWA、CLI テンプレートなどもサポートしています。 Vue material はマテリアルデザインのスペックに厳密に対応することにフォーカスをあてているライブラリです。

Nuxt は Vue を内包しているフレームワークで、とてもスムーズに Vue のユニバーサルアプリケーションやサーバーサイドレンダリングの開発を体験できます。 とても高機能で、同じコードベースで通常の SPA や、静的サイトを生成することもできます。

Weex はなじみの Vue シンタックスや API を使ってモバイルのネイティブアプリケーション開発ができるフレームワークです。 Alibaba によって開発されていて、パフォーマンスにフォーカスされていることから、大量のユーザーをかかえる実際の製品にも使用されています。

モバイル

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
4
Quasar

Quasar

Quasar Framework
+3.7k☆
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆

JavaScript の汎用性は非常に高く、それはモバイルアプリケーションの世界も例外ではありません。JavaScript で実装すれば、web とモバイルプラットフォームでコンポーネントをシェアできます。

フロントエンドフレームワークの3強は、モバイルの分野でも3強という結果になりました。

2016年同様、もっとも人気を博した JavaScript ベースのモバイルアプリのソリューションは React Native でした。iOS, Android, Windows のいずれの OS でもネイティブアプリをビルドできます。

Cross platform apps with React Nativeで強調されているように、"Write Once, Run Everywhere" -「一度コードを書けば、どこでも実行できる」- というスローガンがまさに現実のものとなりました!

コンパイラ

1
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
2
Babel

Babel

:tropical_fish: Babel is a compiler for writing next generation JavaScript.
+5.7k☆
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆

ここではコンパイラについてみていきましょう。

アプリケーションのビルドにおいてコンパイラが必要となるのは、つぎの2つの理由からではないでしょうか。

  • JavaScript (ES7) の最新ヴァージョンの機能をフルに堪能したいが、可能な限り多様なブラウザに対応させたい。これを実現したのが Babel で、現在では多くのプロジェクトに採用されています。
  • 型判定のような新しい機能を追加したい。

いま、デべロッパーを二分するもっとも熱い議論のひとつが「型は必要か?」です。

JavaScript は動的型付けであり、静的型付けではありません。しかし、デベロッパーの多くは自分の書くコードに型は必要だと感じています。特にコードベースが肥大化してくると、堅牢性と可読性を配慮してなおさらそう感じるでしょう。

型が必要だと感じているデベロッパーが現在注目しているのは、Microsoft の TypeScript と Facebook の Flow です(Flow は Facebook のメインプロジェクトである React, React Native, Jest などで使われています)。

TypeScriptFlow の違いを知りたい向きには、James KyleA Comparison Between Adopting Flow or TypeScript をお薦めしておきます。

Loading
Loading
Loading
Loading
Loading
Loading

おわりに

2017 年の JavaScript の動向を振り返ってみました。いかがでしたでしょうか?

定量的に見るとVue.jsが昨年に続き 2017 年の覇者となりました。人気はしばらく続きそうです。

ライセンス問題はあるものの React エコシステムは継続的に成長しています。

2017 年の特筆すべきプロジェクトは Prettier です。コード整形の自動化はコーディングをはかどらせます。

State of JavaScript 2017 surveyでは 23,000 を超える開発者へのアンケート結果を収集・分析しています。ここでの振り返りとは違う視点から最新のトレンドを知ることができます。

2018 年はどのプロジェクトが来るでしょうか?

  • GraphQL ベースのフレームワーク?
  • WebAssembly の新標準を使った、これまでにないブラウザ体験を実現できるライブラリ?

ぜひ、みなさんの考えを教えてください。ここに掲載した記事のシェアは自由です。GitHub では、みなさんからのフィードバックをお待ちしてます。最後まで読んでいただきありがとうございます。では、また来年お会いしましょう。


Japanese version

Nobuhiro Uchiyama

A generic programmer and linguist living in Osaka from Sapporo. 素朴なプログラマで言語マニア。札幌生まれの大阪在住。

Yohei Ice

Web application developer (Rails, React, …)

Authors

Sacha Greif

Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.

Available Translations

English

中文

Français

Español

Indonesia