2017年の振り返りと2018年のこれからについて #JavaScript

CodeGridさんの記事をまとめただけですが。。
「行く2017年、来る2018年」

フレームワーク

Vue.jsの人気度が上がる
- v2.56
- TypeScriptに対応(静的型付けとクラスベースオブジェクト指向)
- テストコードJest対応(ReactもJest対応)
- 2018年にGithubのスター数がReactを追い抜くかも？
React
- v16
- ライセンス問題の解決(開発元のFacebookからMITに変更することにより解決)
- Portals 機能追加(z-index問題を解決) https://reactjs.org/docs/portals.html

テストコードツールJest

Vue.jsでテストを書くときのサポートライブラリ「vue-test-utils」 https://github.com/vuejs/vue-test-utils
Reactでテストを書くときのサポートライブラリ「enzyme」 https://github.com/airbnb/enzyme
Jestを活用するための情報量がまだ100%ではない(90%くらい)。今後情報量が増えていくだろうと予想。
テストコードを書く重要性説く。「テストのないコードはすべてレガシーコードである」

Storybook

Storybookとは

コンポーネントの動的なカタログをつくれるツール
スタイルガイドのコンポーネント版
インターフェースを定義する

活用フロー

エンジニアが必要なストーリーを書いてそれをデザイナーに渡す
デザイナーはそれに対して（ストーリー内で）デザイン&コーディングを行う
エンジニアがそのコードをコンポーネント化する
それ以降はこのストーリー上でデザインの変更を行う

React Storybook入門：コンポーネントカタログがさくさく作れちゃうかもしれないオシャレサンドボックス環境

活用すると。。

Storybookでは、振る舞いごとにストーリーをつくって「このpropsを渡したときはこうなって、このpropsを渡したときはこうなる」という状態をブラウザで動かしながら確認できる。

2018年はWeb Components元年！？

chromeとsafariでWeb Componentsの大部分が使える

※firefoxは2018年に実装完了！？

「Shadow DOM」の実装
「Custom Elements」の実装

Shadow DOMとは

一言でいえばDOMに対してカプセル化を提供する仕組みです。
オブジェクト指向。
プログラミングの考え方を構成している概念の一つ
あるオブジェクトの中身に直接アクセスすることはできず、中身の詳細を覗くこともできず、オブジェクトを実装した人の用意した方法でしか、その中身にアクセスできない仕組みのことです。

第1回 Shadow DOMが生まれた理由

Custom Elementsとは

独自のカスタム HTML 要素を作成するための機能。

Custom Elements - Web Components | MDN

PolymerでWeb Components実装！？

Polymerとは

Google社のエンジニアが生みだしたJavaScriptライブラリ
Web Comonentsの要素技術を採用しつつUIコンポーネントのセットを簡単に利用できるよう構築されたもの
v2にバージョンアップ

コンポーネントについてはこちら
コンポーネント設計について

ES moduleが標準で使えるようになる！？

「ES module」とは

ES modulesは、ES2015仕様において策定された、JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みです。
(require、importと同じ機能)
scriptタグのtypeを「module」にすると別ファイルをimportできる。

<script type="module">
  import renderTextToBody from './render-text-to-body.js';
  renderTextToBody('お使いのブラウザはES modulesに対応しています。');
</script>

対応ブラウザ

対応ブラウザはIEを除くブラウザ

chrome
safari
Firefox(フラグ付き)
Edge

ES modules基礎知識

これから流行るの！？

npmのライブラリが「ES Modules」の構文でそのまま呼べないので、「これはまだ時期尚早！」との見解。
従来どおり、import、reauireを使って別ファイルを読みこんだ方がいい。。

パッケージマネージャはYarn? npm?

npm

2017年5月にv5にアップデート。
「package-lock.json」が実装される。 ※npmにおいて、インストールされるバージョンを固定するためのファイルです。

どっちがいいの？

今まではYarnが速度で優位性をもていたが、今はその差がない。
どちらを使っても変わりはない。
npmとYarnを混ぜても問題ない。
PolymerはYarnの方が使い勝手がいい。

サーバーAPIへのアクセスを支えるサービス

GraphQL

クライアント側で欲しいAPIのデータをリクエストできる。
仕様とライブラリがたくさんある

Firebase

FirebaseはGoogleが提供している、アプリケーションのためのバックエンドサービス。

データを保存するデータベース
ファイルを保存するストレージ
ユーザー認証機能
Webアプリケーションのホスティング

一から始めるFirebase

gulpの衰退とwebpackの台頭

webpackの現状

「React」「Angular」のツールはwebpackでのビルドを推奨
新しい案件を行うなら「webpack」でビルドさせる

gulpの現状

gulpのプラグインはメンテナンスされていない
gulp自体のバージョンもアップデートされていない
上記の点からセキュリティ警告が発せられてる

CSSは「Gridレイアウト」が使えるようになる。

モダンブラウザで「Grid」対応。(Edgeはまだ。。)
Flexboxを使うより、簡単にレイアウト生成ができる

コンポーネント時代でCSSを書く場所が変わる！？

CSS in JSでコンポーネントの中にcssを書く
外部CSSでスタイルするのでもいい

2018年注目の技術

ダウンロード数でVue.jsがReactを抜くか
WebVR、WebXRのブラウザ仕様になるか?
CSS Gridの展開
WebRTC
FirebaseのCloud Functions

WebVRとは

WebVRとはウェブブラウザ上でVR体験を提供する。
JSだけでVRできる！『WebVR』ことはじめ

WebXRとは

WebXRはウェブ上からVRだけでなく、ARコンテンツにもアクセス可能にするAPIです。
WebVRからWebXRへブラウザでVR/ARコンテンツを起動

WebRTCとは

WebRTCとは、ビデオや音声、データをブラウザ間でやり取り可能にする規格です。
ビデオチャットもさくっと作れる！ WebRTCによるブラウザ間リアルタイム通信はじめの一歩

Cloud Functions for Firebase

Firebaseのユーザ認証、データベース、ストレージの追加や変更のイベントを受け取ってサーバ側で何か処理できるサービスです。
Cloud Functions for Firebaseとは？

参考サイト

行く2017年、来る2018年