最近気になっているフロントエンド技術（2017/06 社内向け）

トピックス

• HTML

• 静的サイトジェネレータ (Jekyll, Hexo, Hugo など)

• WAI-ARIA

• AMP

• Web Components

• CSS

• Flexboxを使おう

• PostCSS

• cssnext

• CSS-in-JS (CSS Modules)

• CSS framework, Design System

• JavaScript

• ES6

• Webpack

• rollup.js

• npm 5

• nodenvが良さげ

• TypeScript

• axios.jsが良さげ

• webRTC

• Service Worker

• 脱jQuery, 自作jQuery

• CI

• GitHub + Circle CI が良さげ

静的サイトジェネレータ（Jekyll, Hexo, Hugo など）

• 簡単に言うと、PHPなどサーバーサイドで動的に生成するのではなく、テンプレートエンジン・CLIツールを使い静的にHTMLを生成できるツール
• サーバーサイドレンダリングを行わないので軽量、高速
• サーバーサイド言語の知識がなくてもブログシステムを構築できる
• マークダウン形式でコンテンツを作成可能
• テンプレートエンジンにはEJSやPug, Stylus等が使われているため比較的簡単にデザイン調整可能

WAI-ARIA

• コンテンツの役割や状態をブラウザに認識させ、的確に情報をユーザーに伝えるための材料となり、結果的にアクセシビリティを高めることに繋がる
• 適切に指定することで、VoiceOverなどスクリーンリーダーでコンテンツの状態（メニューを開いた・閉じたなど）を読み上げてくれるようになる
• 主にrole属性とaria属性が定義されている
• 複雑化してきているWebページの構造・情報を、すべてのユーザーに提供できるように努めていこう

AMP

• CSSやJavaScriptなど外部リソースの読み込みを制限し、決められたフォーマットで統一することでページの読み込みを高速化する技術。
• 別途AMP用のページを用意しないといけない
• WordPressを使用しているのであれば、プラグインをインストールすることで簡単にAMP対応することができる
• どちらかといえばニュースサイトなどコンテンツ量が多く更新頻度が多いサイトに有効な技術
• SEO的にも多少効果はあると思う
• ちなみにFacebookにも似たようなもので「Instant Articles」というものがある

Web Components

• 今後主流になるであろう新しい技術仕様
• 構成要素として Templates, HTML Imports, Custom Elements, Shadow DOM がある
• 特に注目すべきは「Shadow DOM」。スコープという概念が生まれ、スコープ内でのみ適用されるスタイルを記述できるようになる（見通しも良くなる上、命名も重複や構造を意識せず行うことができる。BEMは不要になる？）
• 一部のモダンブラウザでは既に利用することができる
• 今以上にUIコンポーネントを意識したWebデザインが流行ると予測

Flexboxを使おう

• IE9がお亡くなりになったので使用可能な案件では使っていこう
• 天地中央寄せ、要素の入れ替え、グリッド構築などかなり便利
• 思っているより学習コストは低いしすぐに使える
• ただし、IE10, 11で挙動がおかしい場合があるので注意

PostCSS

• CSSの開発ツール。プラグインを追加することで機能を拡張することができる
• プラグインは有名所で「postcss-import」「autoprefixer」など
• Sassと比較されがちだが、PostCSS自体はただのパーサーでありプリプロセッサではないので注意
• 単体はもちろんWebpackなどビルドツールに組み込んで使うほか、gulp用のプラグインも提供されている

cssnext

• PostCSSのプラグインの一つ。CSS4など次世代のCSSで書かれたコードをコンパイルしてくれる
• Sassと比較するならこっち。Sassは独自拡張のメタ言語だがcssnextはCSS言語仕様に沿った記述を可能にする
• サポートしている機能はこちら。Sassでできることは大体できるので乗り換えも比較的容易かと
• 「autoprefixer」の作者が開発しているので最初から入ってる。あとCSSを圧縮してくれる「cssnano」も標準搭載
• ネストも変数も作れるので正直PostCSSのプラグインはこれとpostcss-importだけで十分機能する（と思う）

CSS-in-JS (CSS Modules)

• React.jsやVue.jsで見られる記述方法。JSの中にスタイルをインポートし、各コンポーネント毎に適用させることができる（もちろんローカルスコープ）
• Webpackを使えば簡単に使えるようになる

CSS framework, Design System

• Twitter「Bootstrap」やYahoo「Pure CSS」、Google「Material Design Lite」などシンプル・軽量でパワフルなCSSフレームワークが続々登場
• 最近だとMicrosoftが「Fluent Design System」を発表。3D空間のデザイン、高品質なUIキットを提供へ
• WebサイトというよりはWebアプリケーション向けになってきている？
• とは言え柔軟なCSS設計が求められるWebサイトの場合は骨組みとして採用する価値あり。グリッドシステムだけでも非常に強力なものが多い
• 特に「Material Design」は機能や意図などが詳しく説明されているので目を通しておこう

ES6

• Babelなどトランスパイラの登場でガンガン使えるようになったので使っていこう
• const, let, import, アロー関数, テンプレートリテラル, スプレッド演算子, クラス構文 は便利だし覚えよう
• モジュールのインポートはrequire()を使わずES6標準仕様のimportを使っていこう
• Promise, async/await も活用しよう。非同期処理を簡単に書けるようになる

Webpack

• モジュールバンドラー。JSを分割管理できる他、CSSや画像を取り込めたりSassコンパイルや圧縮、Lintを走らせたりなどタスクランナーとしても活用可能
• ES6→ES5へのトランスパイルにはBabel必要
• webpack-dev-serverを使えばローカルサーバーも構築できるしライブリロードもできる
• gulpの代替になりそうだけど、タスクを一つ増やすのもコストがかかる・タスク管理が煩雑になりやすいので、要求が多いWebサイト制作向けのタスクランナーとしては向かないと思う
• React.jsやVue.jsなどと相性抜群
• 最近バージョン3がリリースされた

rollup.js

• Webpackと同じくモジュールバンドラー。生成されるコードが小さくES6での開発を前提にしている
• ES5へのトランスパイルも可能
• ES6が標準で使える世界になった時のために、そのまま書いたコードが使えるようCommonJSスタイルなど不要なコードを解析し、変換・削除してくれる。詳しくはこちら
• 最近はWebpackからrollup.jsへ流れる人も多いっぽい

npm 5

• Node.jsの最新バージョンが8になり、npmもバージョン5にアップした
• npm 5からは「package-lock.json」というのが生成されるようになり、標準で依存ライブラリを固定できるようになった
• 処理速度が高速になった（2倍くらい？）
• --saveオプションが最初から追加されるように。--dev-saveまたは-Dは従来通り指定が必要
• --offlineオプションが追加。サーバーを経由せずローカルキャッシュからライブラリをインストール可能に
• しかしながらまだ長期サポート（LTS）ではないので導入は待つべし

nodenvが良さげ

• 今まで「nodebrew」を使っていたがCLIでの切り替えが大変なので「nodenv」を導入
• .node-versionというファイルを作業ディレクトリのルートに作成し、開発に使用するNode.jsのバージョンを記述、作業ディレクトリに移動するだけで勝手にNode.jsのバージョンを切り替えてくれる

TypeScript

• Microsoftが提供している開発言語。クラス指向・静的型付けによるコードの品質向上が見込める
• 学習コストはそこまで高くない
• ネイティブでは動作せず、JSへのコンパイルが必要
• 最近Google社内の標準開発言語になったことで話題を呼んだ
• 使ってみたいならVisual Studio Codeがオススメ！標準でデバッグ、コンパイルできる機能を持っている

axios.jsが良さげ

• ajax処理に特化したライブラリ
• ajaxだけしたいけどそれだけのためにjQuery使うのもなーというときに最適
• とにかく簡潔に書ける！
• React.js, Vue.jsなどと相性がいい

webRTC

• ブラウザ上で通話やテキストチャット、ビデオチャットなどを比較的簡単に実装できる技術
• 最近発表されたiOS Safari11にて正式にサポートすることになったので、注目されている

Service Worker

• Webページをキャッシュしてオフラインでも表示できるようにしたり、プッシュ通知を送ることが出来たりする技術
• 主にモバイル向けに採用されていることが多い

脱jQuery, 自作jQuery

• もはやjQueryで補うことは少なくなってきている
• そもそも普段jQueryで使うメソッドを思い出してほしい。数えるほどしか使っていないだろう？
• だったら多少記述が冗長になっても処理速度が早い "素"のJavaScript を必要最低限で使うべきだー！いつまでもjQueryに甘えてんじゃねー！という風潮（※個人の主観です）
• jQueryで最も使うであろう$('selector')はdocument.querySelector()で簡単に代用できてしまう
• その他のメソッドはこちらのサイトを参考にすればだいたい置き換えられる
• よく使うもの・必要最低限のもの だけ 関数化して、自作jQueryとしてライブラリ化してしまおう

GitHub + Circle CI が良さげ

• 今更だけどCI(継続的インテグレーション)を試してみた
• 普段GitHubを利用しているのであれば、「Circle CI」というCIサービスを利用することで簡単にテストを行うことができる
• Circle CIとGitHubリポジトリを連携後、「circle.yml」ファイルを作成しテストの内容を記述（使用する言語、バージョン、スクリプトなど）。その後プッシュするたびにテストが走り結果を確認することができる
• README.mdでよく見るバッヂも簡単に付けられる
• Travis CIってのも試してみたけどうまく動かなかった