「Front-end Developer Handbook 2017」で語られた未来予測は達成されたのか

# はじめに

2017年の2月頃に[Cody Lindley氏](http://www.codylindley.com/)によって、公開された[Front-end Developer Handbook 2017](https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details)がQiitaでも少し話題になりましたが、皆さん覚えてらっしゃいますか。

その記事の中では、フロントエンド界隈で起きた[2016年の振り返り](https://frontendmasters.com/books/front-end-handbook/2017/recap.html)と、フロントエンド界隈で起きるであろう[2017年の予測](https://frontendmasters.com/books/front-end-handbook/2017/2017.html)をされていました。

分からない方は以下の記事で意訳が紹介されているので見てみると良いかもしれないです！
- [【翻訳】「Front-end Developer Handbook 2017」 2016年のまとめと2017年の予測](https://qiita.com/DaisukeHirata/items/b470e473ef621a132acc)

本記事では、その2017年の予測に注目し、少し早いですが先取りして、「Front-end Developer Handbook 2017」で語られた未来が達成されたのか調べられる範囲で調査し、その結果をまとめてみました。
誤訳による見当違いな調査などもあるかもしれないですので、そこは最後にも述べていますがご指摘いただけますと助かります！
あと、意訳程度に受け取っていただけると助かります！

※2018年1月24日追記
[「Front-end Developer Handbook 2018」](https://frontendmasters.gitbooks.io/front-end-developer-handbook-2018/)が公開されましたね！
ぱっと見、2017に予想していたものが持ち越されているものが多いように感じます。
https://frontendmasters.gitbooks.io/front-end-developer-handbook-2018/

では、早速本題に！！

## Web Assembly, might just peak.

### Web Assemblyはピークを迎えるかもしれない

2017年2月に主要ブラウザ(Chrome、Edge、Firefox、およびWebKit系)間で、初期段階でのWebAssembly APIとバイナリ形式の設計の合意がとられテクニカルプレビューが終了しました。
それに基づいて、2017年3月に初めてWebAssemblyをFirefoxが標準対応し、2017年7月にChrome、2017年11月にSafariとEdgeでも標準対応が完了し、これにて全てのモダンブラウザでWebAssemblyの標準搭載の対応が完了しました。

<img width="1156" alt="スクリーンショット 2017-12-24 17.43.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/ed00bfeb-22c2-8fe5-2a41-8fbe54aa307d.png">

上の画像は、Google Trendsで「WebAssembly」を検索した結果ですが、局所的な跳ね上がりがあるせいで緩やかに見えますが全体的に右上がりの勾配になっています。
また、[WebAssmbleのロードマップ](http://webassembly.org/roadmap/)を見る限り、WebAssembly LLVMバックエンドを実験版から安定版へ卒業させたり、Developer ToolにWebAssemblyのプロトタイプ版を導入したりとやることが盛り沢山なので、WebAssmblyの開発のピークを迎えたとは言えずこの先もまだまだ盛り上がっていくように感じます。

#### 参照
- [WebAssemblyが熱い](https://qiita.com/kenju/items/3ec95aebd30bc95b862c)
- [What is WebAssembly?](https://blog.mozilla.org/blog/2017/11/13/webassembly-in-browsers/)
- [WebAssembly consensus and end of Browser Preview](https://lists.w3.org/Archives/Public/public-webassembly/2017Feb/0002.html)
- [webassembly.org/roadmap](http://webassembly.org/roadmap)
- [WebAssembly support now shipping in all major browsers](https://blog.mozilla.org/blog/2017/11/13/webassembly-in-browsers/)

## ``import`` might just be usable in ``<scripts></scripts>``

### importがscriptタグの中で使えるようになるかもしれない

[importのブラウザ対応状況](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)ですが、本記事執筆時点(2017年12月24日)で以下のようになっています。

<img width="1044" alt="スクリーンショット 2017-12-24 19.10.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/62c9070c-2a35-6bb7-d500-ab817077b03c.png">

> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility

ほぼ主要なモダンブラウザでデフォルト対応が完了しているものの、特筆すべきはIEでの対応が進んでいないという点です。

以下は日本のブラウザ使用率ですが、未だに約20%弱のユーザはIEを使用しているので、提供するサービスのサポート対象ブラウザにもよりますが、思い切ってimportを使用するにはまだ少し早いかもしれません。

<img width="1180" alt="スクリーンショット 2017-12-24 19.04.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/628e3332-e3ab-0c6e-96b5-7748157cd92d.png">

> http://gs.statcounter.com/browser-market-share/all/japan


#### 参照
- [MDN web docs #import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility)
- [Browser Market Share Japan](http://gs.statcounter.com/browser-market-share/all/japan)

## Reactive programming continues to thrive in the JavaScript scene. (see MobX and RxJS).

### Reactiveプログラミングは、JavaScriptのシーンにおいて引き続きトレンドになります。

``See MobX and RxJS``とあるので、[npm trends](http://www.npmtrends.com/)でMobXとRxJSのトレンドをチェックしてみます。

<img width="1120" alt="スクリーンショット 2017-12-24 20.03.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/76d6768f-23d5-cfd5-11f7-1fa0a7151a9d.png">

> http://www.npmtrends.com/mobx

<img width="1118" alt="スクリーンショット 2017-12-24 20.02.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/0eeafa9e-718c-b7be-1de1-b6954cb34f5f.png">

> http://www.npmtrends.com/rxjs

これはRxJSとMobXで母数に差があれど両指標共に右肩上がりのトレンドが見られるので、2017年においては引き続き盛り上がりを見せていたように思われます。特にRxJSの盛り上がりがすごい..!

## React, more so the concept, will dominate. React itself will be completely re-written (see React Fiber) or evolve (see Inferno).

### Reactはよりコンセプトに支配されるでしょう。React自体が、完全に書き直されるか([React Fiberを参照](https://github.com/acdlite/react-fiber-architecture))、もしくは進化([Infernoを参照](https://github.com/infernojs/inferno))するでしょう。

ここは予定通り、Reactがv16からコアアルゴリズムを刷新した(React Fiber)方法で書き直され、[2017年9月26日にリリース](https://reactjs.org/blog/2017/09/26/react-v16.0.html)されました。

[npm trends](http://www.npmtrends.com/react)を見る限りでは、アーキテクチャが刷新された後でもダウンロード数が右肩上がりで成長し続け、React v16がリリースされた9月26日あたりで一時的にダウンロード数が増えているのも見て取れます。

<img width="1110" alt="スクリーンショット 2017-12-25 0.37.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/56d4d1b0-cfd2-3f29-bae5-6bcac7cc084d.png">

> http://www.npmtrends.com/react

一方で、Reactの進化版の例として挙げられていた、[inferno](https://github.com/infernojs/inferno)の伸びは[npm trends](http://www.npmtrends.com/inferno)を見る限りでは、局所的な伸びはあるものの基本横ばいなのが見て取れます。ただ、コンセプトは凄く面白いので、この進化版という立ち位置はもう少し長い目で見る必要がある感じがします。

<img width="1114" alt="スクリーンショット 2017-12-25 0.38.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/14182c09-94f4-0cb3-ed49-cca94ce97b8d.png">

> http://www.npmtrends.com/inferno

## Angular found SEMVER so Angular 4 (even 5) is on the roadmap for 2017.

### セマンティックバージョンを取り入れた、Angular4(同じく5も)は2017年のロードマップ上にあります。

想定通り、3月27日により小さく高速化が計られ、なおかつ2系への後方互換も兼ね備えた[Angular4がリリース](http://angularjs.blogspot.jp/2017/03/angular-400-now-available.html)がされました。

4系のリリースを機に、6ヶ月ごとのメジャーバージョンアップが登場することになっていましたが、予定月の9月から遅れること2ヶ月、2017年11月1日に[Angular5のリリース](https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced)が発表されました。
Angular5では主にインクリメンタルコンパイルのサポートが行われ、ビルド時間の短縮が計られたようです。

#### 参照
- [Angular 4.0.0 Now Available] (http://angularjs.blogspot.jp/2017/03/angular-400-now-available.html)
- [Version 5.0.0 of Angular Now Available](https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced)
- [Angular 4の長期サポート発表、2018年10月まで1年半。次バージョン「Angular 5」はシンプル化とスピードに注力。ng-conf 2017](http://www.publickey1.jp/blog/17/angular_42018101angular_5ng-conf_2017.html)

## RESTful JSON APIs will get more competition (see GraphQL)

### RESTfulなJSON APIがより競争力を獲得するでしょう

代表格として挙げられている[GraphQL](https://github.com/facebook/graphql)ですが、[npm trends](http://www.npmtrends.com/graphql)で過去2年分見ると以下の様に遷移をしています。

![スクリーンショット 2017-12-25 10.44.40.png](https://qiita-image-store.s3.amazonaws.com/0/74192/2dff6f5e-1d02-bf16-f742-64dc88ac7398.png)
> http://www.npmtrends.com/graphql

2016年9月にFacebook社よりGraphQLの[techical previewが終了し、公式実装が公開](http://graphql.org/blog/production-ready/)されて以降、徐々にシェアを獲得し、2017年5月23日に[GitHub GraphQL API v4が一般公開](https://github.com/blog/2359-introducing-github-marketplace-and-more-tools-to-customize-your-workflow)されたことなどから、更に勢いを増してシェアを伸ばしていることが見て取れます。

#### 参照
- [GitHub APIから学ぶ次世代のAPI実装方式GraphQL](https://qiita.com/icoxfog417/items/92214aed64f47dfeade5)
- [GraphQLは何に向いているか](http://k0kubun.hatenablog.com/entry/graphql) 
- [Leaving technical preview](http://graphql.org/blog/production-ready/)

## Could be a banner year for Vue.js.

### Vue.jsの当たり年になり得るでしょう

例に漏れず、[npm trends](http://www.npmtrends.com/vue-vs-react-vs-angular)を見て見ます。
Vue.jsだけでなく、よく比較対象として名前を挙げられる、React、Angularと並べると以下の様な推移になります。

![スクリーンショット 2017-12-25 12.05.00.png](https://qiita-image-store.s3.amazonaws.com/0/74192/23dc55cd-6cee-6776-063c-d8a48bc26a34.png)

> http://www.npmtrends.com/vue-vs-react-vs-angular

ここで見る限りでは、Reactの力が大きく、Vue.jsとAngularの推移は縦軸をReactに合わせると微増という様な状態になっています。
一方で、githubのスター数は、[こちらの記事](https://qiita.com/R-Yoshi/items/35627978de3764fa4451)執筆時では、React: 44,729、Vue.js: 21,717だったのが、約1年半(2017年12月25日現在)で、React: 84,143、Vue.js: 77,634と大きくその差を詰めています。
Angular1.x系、Angular2系、jQueryなどを抜いてJavaScriptフレームワークとして2番目に人気のあるライブラリに成長しました。(※ GitHub Star数による比較)
このことから、2017年はVue.jsの当たり年であったと言っても過言では無いような成長を遂げている様に思います。

#### 参照
- [Vue.js](https://jp.vuejs.org/index.html)
- [React](https://reactjs.org/)

## Lots more HTTP2 and HTTPS.

### HTTP2とHTTPSはより増えるでしょう

HTTPSに関してですが、ブラウザ毎のHTTPSの対応状況の情報は調べても出てこなかったのですが、無料のSSLの証明書発行機関である、[Let's Encrypt](https://letsencrypt.org/)の情報によると、2016年12月12日に2400万通以上の証明書を発行したとアナウンスがあり、その後、2017年6月28日時点で1億通以上の証明書の発行が完了したと[アナウンス](https://letsencrypt.org/2017/06/28/hundred-million-certs.html)がありました。

その中ではFirefoxでHTTPSを用いて通信が行われた人の比率に触れられていますが、年初45%程度だったのが60%近くまで進捗していることが見て取れます。このことから、2017年に入って、よりHTTPSへの移行が進んでいることがわかります。

<img width="707" alt="スクリーンショット 2017-12-25 12.45.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/366804bb-9638-42da-8f18-5f1b8a60a0a7.png">

> https://letsencrypt.org/2017/06/28/hundred-million-certs.html

#### 参照
- [Let's Encrypt](https://ja.wikipedia.org/wiki/Let%27s_Encrypt)
- [Just over 1 year ago, we issued our first cert. Today, 24M+ and climbing! Help support a secure - Twitter -](https://twitter.com/letsencrypt/status/808397338456760325)
- [Milestone: 100 Million Certificates Issued](https://letsencrypt.org/2017/06/28/hundred-million-certs.html)

## Redux will continue to get stiff competition (see mobx).

### Reduxは引き続き激しい競争力を保つでしょう

Reduxと、MobXを[npm trends](http://www.npmtrends.com/redux-vs-mobx)を用いて比較してみます。

<img width="1111" alt="スクリーンショット 2017-12-25 12.54.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/e0085893-7811-1b92-ccda-1ddb52c2407c.png">

> http://www.npmtrends.com/redux-vs-mobx

MobXが右肩上がりでの増加を続ける中、同様にReduxもそのシェアを増やすように成長していることが見て取れます。

#### 参照
- [次のReact状態管理はMobXにする理由](https://qiita.com/Takepepe/items/8172333655442314eb55)


## YARN will win more users.

### YARNはより多くのユーザーを勝ち取るだろう

以下は、YARNのダウンロード数を[npm trends](http://www.npmtrends.com/yarn)2年の期間で見たものです。


<img width="1105" alt="スクリーンショット 2017-12-25 13.07.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/74192/a28c8528-90ff-351a-280b-c7a649f7fbe3.png">

> http://www.npmtrends.com/yarn

Facebook社によって2016年10月12日にリリースされた直後、Googleのエンジニアなどもサポートに参加しているその注目度の高さと利便性から多くのユーザーに使用されています。トレンドを見てもわかるように2017年にもより多くのユーザに支持されていることがわかります。
2017年9月8日には、安定版である[Yarn 1.0リリースのアナウンス](https://code.facebook.com/posts/274518539716230/announcing-yarn-1-0/)が行われました。

#### 参照
- [Yarn](https://yarnpkg.com/ja/)
- [Facebook、JavaScriptの新パッケージマネージャ、Yarnをリリース―Google他が協力](http://jp.techcrunch.com/2016/10/12/20161011facebook-partners-with-google-others-to-launch-a-new-javascript-package-manager/)
- [Announcing Yarn 1.0
](https://code.facebook.com/posts/274518539716230/announcing-yarn-1-0/)

## 感想

未来予想難しい。あと、npm trendsの万能感。
普段触らない技術に関して調査する際に、その評価軸がなかなか定量的に表すことが難しかったのでどうしてもわかりやすい指標に頼ってしまったのですが、それは他の指標で比べてほうがわかりやすいとか、文中の中での誤りがありましたら、コメントや編集リクエスト等送っていただけると非常に助かります！
あと、下に調査がうまく行かずにボツになったテーマも張っていますので、ヒントをお持ちの方がいらっしゃいましたら教えていただけると助かります！

2017年もフロント関連のニュースが慌ただしく出ましたが、2018人に恐らく出されるCody Lindley氏による振り返りが楽しみですね🤗

## 調査がうまく行かずボツになったテーマ
- Universal JavaScript solutions will continue to rise that pay homage/respect to the days of server delivered front-ends (i.e. html to the client).
- A return to simple websites may happen, web 1.0 retro, but with the help of 2017 tools (i.e. static site generation)
- More devs will abandon traditional CMS solutions for static site generators & API CMS tools.
- More people will move from Sass to PostCSS + cssnext.
- Web components will continue to lurk and wait for significant traction by developers that might never come to be.
- The no framework, framework, faction will gain momentum (see Svelte).
- JavaScript will settle, and hopefully, CSS will erupt and everyone will cry fatigue until it settles.
- Hatred for apps store will grow, while the open web has no memory of wrong doing.
- The idea of “front-end apps”, “Thick Client apps”, “Static apps”, “No Backend app”, “SPA's”, “Front-end driven app” might get boiled down to the term/concept called "JAM Stack".