「Front-end Developer Handbook 2018」2018年の予測について翻訳

#そもそも「Front-end Developer Handbook」とは
##概要
原文はこちら。
###何が書いてあるの？
フロントエンドエンジニアに関わる技術やトレンドを幅広く記載している。各技術について深くは解説していないが、全体が1冊の本にまとまっている。
PDFでダウンロードしたり、Webブラウザ版をオンラインで読むことも可能。

###誰が書いたの？
「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」（O'Reilly）や「jQuery Cookbook」（O'Reilly）、「JavaScript Enlightenment」（O'Reilly）などを執筆したCody Lindley氏。
参考：https://github.com/codylindley

###どこにあるの？
GitBookで公開されている。
GitBookとは、GitHubのコードを公開するサービスのように、書籍のような文章を公開するサービス。

###いつの資料なの？
毎年、1~2月頃に更新される。
その年のトレンド予測を中心に更新される。

##構成
「Front-end Developer Handbook」は、以下のパートから構成されている。
※「Front-end Developer Handbook 2018」から抜粋

・ Introduction

本書の概要を紹介。

・ What is a Front-End Developer?

フロントエンドエンジニアとは何かを紹介。

・ Recap of Front-end Dev in 2017

昨年のフロントエンド開発のトレンドを紹介。

・ In 2018 expects

今年のフロントエンド開発のトレンド予測について紹介。

・ Part I. The Front-End Practice

フロントエンドエンジニアの仕事内容、要求されるスキル、典型的なチーム構成、一般的な給与水準などを紹介。

・ Part II: Learning Front-End Development

Webの基本技術としてWebブラウザ、HTTP、HTML、CSS、JavaScript、SEO、Web Fonts、JSON、アクセシビリティ、フロントエンドアーキテクチャ、Node.jsなど主要なプラットフォーム、パッケージマネージャやバージョンコントロール、テストなどの基礎知識を紹介。

・ Part III: Front-End Development Tools

SEOツール、プロトタイピングツール、エディタ、JavaScript対応開発ツール、フレームワーク、テンプレートやウィジェット、グラフライブラリ、性能測定ツールなどを幅広く紹介。

#さて、2018年のトレンドは...
以下、「In 2018 expect...」を翻訳したもの。

##1.　Nothing will change or slow the usage or popularity of React for many years to come.
「この先もずっと、Reactの使用状況や人気が変わることはないでしょう」

・Reactとは
Facebookが開発しているUIに特化したJavascriptライブラリ。
特徴として、Virtual DOM(仮想DOM)と呼ばれるレンダリング機構が備わっている。
参考：Reactとは? – React入門

##2.　GraphQL will replace a lot of REST API's this year.
「今年、GraphQLは多くのREST APIを置き換えるでしょう」

・REST APIとは
RESTの原則に沿った形で設計されたAPI
・RESTとは
分散型システムにおける複数のソフトウェアを連携させるのに適した設計原則の集合、考え方のこと。
参考：RESTful APIとは何なのか

・GraphQLとは
GraphQLはFacebookが開発したAPI用クエリ言語。
特徴として、クライアントが欲しい情報を指定することが可能ということと、1度のリクエストで多く(任意)のリソースの取得が可能である。
参考：最近流行っている(?)GraphQLについて書くぜ
　　　アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた

##3.　The web will continue to become more native-like with offline capabilities and seamless mobile experiences.
「Webは、オフライン機能とシームレスなモバイルエクスペリエンスを備えたネイティブのようになり続けるでしょう」

・オフライン機能
ServiceWorkerとか。

##4.　HTML 5.3 is coming.
「HTML5.3が来ている」

・HTML5.3とは
HTML5のマイナーバージョンアップ。
Web技術の標準化団体であるW3Cが策定や勧告を行なっている。
参考：HTML5.3各要素別メモ
　　　W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開

##5.　Keep an eye on turbo, a blazing fast NPM client.
「猛烈に高速なnpmクライアントのturboに注目」

・npmとは
パッケージ管理ツール。JavaScript(Node.js)のパッケージやモジュールをインストール、アップデート、共有したりできる。npmレジストリに登録された様々な外部ライブラリやパッケージをインストールすることができる。
参考：いまさら聞けない！npmのこれだけは知っておきたい基礎知識

・turboとは
Todo

##6.　Expect to learn and use CSS transforms 3d, CSS transitions, CSS flexbox, CSS filters, CSS grid
「CSS transforms 3D、CSS transitions、CSS flexbox、CSS filters、CSS gridを学び、使用されることを期待する」

##7.　JavaScript usage will continue to grow with no slowdown in sight.
「JavaScriptの使用状況は、減速することなく拡大し続けるでしょう」

##8.　Still waiting on Web Assembly to peak. This will likely require tooling.
「Webアセンブリがピークに達するのを待っている。おそらくツーリングが必要。」

・Webアセンブリとは
ブラウザからアセンブリ（機械語）を実行できるようにする技術。
高速化手段、あるいはJavascriptの処理系にできないことをするといった目的で提案された。
参考：【2017年4月版】WebAssemblyとは？〜実際にC言語をブラウザで動かす〜
　　　WebAssembly の基礎

##9.　Universal/isomorphic JavaScript solutions continue to evolve e.g. next.js and Sapper.
「例えば、next.jsやSapperのような、universal/isomrophicのJavaScriptソリューションは進化し続けている

・universalとは
実行環境に左右されないJavascript。また左右されずに実行できるようにするような概念。
参考：ユニバーサルJavaScript設計論 ~ ブラウザとNode.js編 ~

・isomorphicとは
クライアントサイドとサーバーサイドで同じコードを実行できるようにするためのフレームワークの総称。
参考：Universal / Isomorphic JavaScript について

・next.jsとは
参考：Next.js

・Sapperとは
Todo

##10.　Web components still lurk and wait for significant traction from developers.
「Webコンポーネントは未だに潜んでおり、開発者からの大きな牽引を待っている」

・Webコンポーネント
WebページやWebアプリケーションの中で新たに、再利用可能でカプセル化された独自のHTMLタグを作成するためのWebプラットフォームのAPI。独自に作成したコンポーネントやウィジェットは、Web componentsの標準をベースに構築されているので、あらゆるモダンブラウザ上で動作するでしょう。また、HTMLと連動して動作するどんなJavascriptライブラリやフレームワークとも併用できる。
参考：Web Componentsとは何か？

##11.　I believe the end is in sight for CSS pre-processors as PostCSS, CSSnext, and CSS in JS take over.
「cssプリプロセッサの終わりは見えており、PostCSS, CSSnext, CSS in JS が取って代わる」

・CSSプロプロセッサとは
修正や保守のしやすいCSS設計の手法
Sass(SCSS)やLESSなどを指す。

・PostCSSとは
JavaScriptで書いたプラグインでCSSを変換するためのツール。
Node.js製の「CSSツールを作るためのフレームワーク」。
参考：PostCSS まとめ

・CSSnextとは
次世代CSSはブラウザの実装状況によりすぐに利用できないことがある。そのような問題を解決するためのツールとして、次世代CSSを現状のブラウザが解釈できるようなCSSに変換してくれるツール。

・CSS in JSとは
CSSのあらゆる問題をJSで解決する。
参考：CSS in JS(Elm)したら想像以上に良かった

##12.　Older server centric application patterns show up again but with a new spin. The pendulum could start to swinging away from strick SPA applications. People will begin to pull back on the complexity of single page applications and return to things like pjax (A mix of SPA and Server-side Rendering. See https://stimulusjs.org).
「以前のサーバー中心のアプリケーションパターンが再び登場しましたが、新しいスピンがある。振り子は完全なSPAアプリケーションから離れて振り回される可能性がある。
人々はシングルページアプリケーションの複雑さを取り戻し、pjax（SPAとServer-side Renderingのミックス。詳細はこちら)のようなものに戻り始めるでしょう。」

・Single Page Applicationとは
単一のページでコンテンツの切り替えを行うWebアプリケーションのアーキテクチャのこと。
参考：SPA(Single Page Application)の基本

・Server side Renderingとは
(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること
ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点

・pjaxとは
Ajaxで非同期にコンテンツを入れ替えるのと同時にURLも変更してくれる。
ページ遷移のたびに全てのレンダリングを行わず、更新が必要な部分だけをレンダリングするので、素早いレスポンスが可能。
Pjaxでスムーズなページ遷移

##13.　Progressive Web Applications hopefully will catch fire. If they don't, I fear they never will.At least not in there current form.
「Progressive Web Applications(PWA)は熱烈に支持されるだろう。もしそうでなければ、支持されることはないだろう。少なくとも現在の形ではない。」

・PWAとは
モバイルユーザーのUX向上を目的とした、WEBページ／WEBアプリケーションとネイティブアプリの利点をいいとこ取りできる仕組み。モバイル端末でページを表示する時にネイティブアプリのような挙動をさせることが出来る。
参考：いまさら聞けないPWAとAMP　- PWAとは

##14.　"Chatbots created on the basis of artificial intelligence and neural networks will continue to evolve helping to increase communication online. I wonder what it will lead to, but this is unconditional web development trends 2018". Nods.
「"人工知能とニューラルネットワークに基づいて作成されたチャットボットは、オンラインでコミュニケーションを増やすために進化し続けるだろう。それは何につながるのだろうと思うが、これは無条件のweb開発動向2018"である。うん。」

##15.　Vue.js usage will likely overtake all Angular usage.
「Vue.jsの使用状況は、すべてのAngularの使用状況を追い越す可能性があるだろう。」

・Vue.jsとは
MVVM(Model,View,ViewModel)というMVC(Model,View<Controller)の派生種を設計基盤として構築されたクライアントサイドJS(Javascript)フレームワーク。
参考：はじめに — Vue.js
　　　Webアプリケーション開発者から見た、MVCとMVP、そしてMVVMの違い

##16.　AR/AV, AI, and chat bots will continue to evolve and find there sweet spot.
「AR/AV、AI、チャットボットは進化し続け、そこにスイートスポットを見つけるでしょう。」

・AR(Augmented Reality)拡張現実とは
「Augmented Reality(オーグメンテッド・リアリティ)」の略で、日本語で言うと「拡張現実」のこと。「拡張現実」の名前通り、現実空間をベースにコンピュータで作られた映像や画像を重ね合わせる技術のことです。
参考：AR(Augmented Reality)拡張現実とは

・AV(Augmented Vituality)拡張仮想感とは
「Augmented Virtuality(オーグメンテッド・ヴァ―チャリティ)」の略で、日本語でいうと「拡張仮想感」のこと。仮想空間をベースに現実世界を複合させる技術のこと。
参考：AV(Augmented Vituality)拡張仮想感とは

##17.　JavaScript Symbol and Generators will likely go unnoticed by most front-end developers.
「JavaScriptのSymbolとGeneratorsは、ほとんどのフロントエンド開発者が気づかないようだ。」

・Symbolとは
ES2015(ES６)では、Undefined、Null、Boolean、String、Objectの6つの方に加えて、新しい型であるSymbolが導入された。プリミティブ型で、文字列のようにプロパティのキーとして使える。
参考：Symbolについて

・Generatorsとは
処理を途中で一時停止できる関数のことらしい。
参考：ジェネレータについて

##18.　More developers will divorce themselves from plain JavaScript and try to marry another.But, just like in marital divorce one always takes most of the same problems with them to the greener grass and little actually changes.Preferences and values just get re-prioritized and history will repeat itself.
「より多くの開発者は、普通のJavaScriptと別れ、別のJavascriptと一緒になろうとする。
しかし、夫婦の離婚と同じように、常に同じ問題があり、実際にはほとんど変わらない。 好みと価値は再び優先順位付けされ、歴史は繰り返される。」

##19.　Webpack 4 will happen, and be better, due to competition!
「Webpack4は競争のために起こり、より良くなるでしょう！」

・Webpackとは
JSファイルをまとめる高機能なモジュールバンドラー。まとめることで、WebページのHTTPリクエスト数を減らしたりできるらしい。
参考：Webpackってどんなもの？
　　　webpack で始めるイマドキのフロントエンド開発

・Webpack4とは
2018年2月25日にリリースされた、Webpackの最新バージョン。
参考：次のリリースであるwebpack 4の主な変更点まとめ
　　　webpack4が出たのでメモ

##20.　Continued exploration for the ideal CSS solution for a tree of UI components will not cease.
「UIコンポーネントツリーの理想的なCSSソリューションの継続的な探索は終わらない。」

##21.　State management gets a reset and people start to simplify. Hopefully, this will be the year for solutions like mobx to shine.
「状態管理がリセットされ、人々は簡単にするために動き出す。 うまくいけば、これはmobxのようなソリューションが輝く年となる。」

・mobxとは
Webアプリケーションにおける状態(State)を管理するためのライブラリ。Reactとの相性がいいらしい。
参考：これからMobXをはじめる人へ
　　　次のReact状態管理はMobXにする理由 - Qiita
　　　MobXではじめるReactiveアーキテクチャ
#今後
気になるところから調べたり実際に使ったりして、キャッチアップしていきたい。