JavaScript界にとってはクレイジーな年だった、2016年が終わりました（編注：本記事の原文は2017年1月2日に公開された）。この1年で数え切れないほどの印象的なライブラリーやフレームワークが登場しました。「You Might Not Need JavaScript」はJavaScriptを使わなくても実現できるコードを紹介してJavaScriptの使い方について疑問を投げかけ、Nolan LawsonがFronteersで発表したスライドに関するツイートが議論を呼び、Jeremy KeithやChristian Heilmannといった著名人からもレスポンスがありました。この様子はNolanの投稿にまとめられています。最初にクレイジーと書きましたが、それでも控えめな表現です。2016年は狂っていました。
また、「JavaScript疲れ」を感じている人も多いはずです。見逃した人のために伝えると、「モダン」なJavaScriptを実現するためにたくさんのツールや設定が必要になり、多くのJavaScript開発者が「JavaScript疲れ」を経験しました。ひところ「JavaScript疲れ」をなげいた記事が、多くの開発者の共感を呼んで拡散されました。
私を含めみなさんが安眠できるように、フロントエンド開発において有望な3つのライブラリー／フレームワークをリストアップしました。
Vue.js
もしまだVue.jsをチェックしていないなら、確実にすべきです。Vue.jsは小さなJavaScriptフレームワークです。
逃げないでください！
Vue.jsは主にビューにフォーカスしていて、ビューのデータを調整するためのツールだけを提供してくれます。デザインパターンや制約を詰め込んだフレームワークと違って、Vue.jsの最小限のアプローチは邪魔になりません。
Vue.jsは2種類用意されています。テンプレートのコンパイラーを含んだスタンドアローンのものと含まないものとです。通常は、WebpackやBrowserifyを使ってテンプレートをプリコンパイルして、クライアントサイドではランタイムパッケージをロードするだけの構成にしたいものです。詳細についてはVue.jsの導入ページを参照してください。
Vue.jsがどれだけシンプルかを伝えるため、以下に例として、メッセージの表示とそのメッセージを反転させるボタンのコンポーネントを用意しました。
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
import Vue from 'vue'
new Vue({
el: '#app',
data: {
message: 'Hello World!',
},
methods: {
reverseMessage: function () {
const reversedMessage = this.message
.split('')
.reverse()
.join('');
this.message = reversedMessage;
},
},
});
ほかのライブラリーで使用していた機能も使いたいですよね。Vue.jsのプラグインはたくさんあり、また、プラグインの使用と開発についてのガイドも複数あります。
もし生産性を高めたいなら、確実に使ってみるべきです。プロジェクトは進行していくうちに、規模も大きくなるものだからです。ただし、Vue.jsは好意的な支援者やスポンサーの助けを借りながら、1人の開発者によってメンテナンスされていることは考慮しておくべきでしょう。
スタンドアローンを使うか、ランタイム式を使うかに関わらず、Vue.jsはデフォルトで、ES5に準拠するブラウザーをサポートしています。ドキュメントには書かれていませんが、ES5 shimを使えば、手動でサポートするブラウザーを追加できます。
さらに詳細な情報は、Vue.jsのWebサイトやGitHubのリポジトリをチェックしてみてください。もし興味があれば、Nilson JacquesによるVue.jsの記事やJack Franklinによる『ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方』もおすすめです。
Svelte
Svelteは2016年11月にリリースされたばかりの新しいJavaScriptフレームワークです。Vue.jsと似ていますが、より小さいフレームワークです。「トラディショナル」なフレームワークは、なにをするときもモジュールを定義して実行したり、状態を保持したり、ビューを更新したりするためのランタイムコードが必要です。Svelteは、あたかもフレームワークを使っていないかのようにJavaScriptのコードをきれいにしてくれます。一番のメリットはファイルサイズです。
Svelteは、ソースコードを依存ライブラリーのないプレーンなJavaScriptにコンパイルしてくれます。プラグインもあって、Webpack、Browserify、Rollup、Gulpを使ってコンパイルできます。利用できるツールは、Githubのリポジトリをチェックしてください。
比較のために、先ほどのVue.jsと同じ例をSvelteを使って書きました。
<p>{{ message }}</p>
<button on:click="reverseMessage()">Reverse Message</button>
<script>
export default {
data () {
return {
message: 'Hello World!',
}
},
methods: {
reverseMessage () {
const reversedMessage = this.get('message')
.split('')
.reverse()
.join('');
this.set({
message: reversedMessage,
});
}
}
};
</script>
同じモジュールですが、Vue.jsは7KB、Svelteは2KBでした。
Svelteで実装されたTodoアプリは3.6KBのzipファイルになりました。それと比べて、ReactとReactDOMを使った場合だと45KBでした。
js-framework-benchmarkを使ったテストでSvelteはパフォーマンスにおいてInfernoを上回っています。もしアプリケーションの容量を気にしているのなら、間違いなく試してみるべきです。
もしプロダクションレベルでの使用を考えているのなら、少し待ってください。Svelteは本当に新しく、ドキュメントやプラグインに関するTODOを除いて、まだ今後のプランが発表されていません。とても新しく、まだあまり実績もありませんが、今年は注目を集めて、今後登場してくるライブラリやフレームワークに影響を与えることを期待しています。
この記事の執筆時点では、Svelteにはドキュメント化されたプラグインシステムがありません。もしかするとプラグインはないのかもしれません。TODOには、Svelteがプラグインをサポートし、フックできるAPIを提供すると書かれていました。
コンパイルされたコードの互換性はビルドの仕方によるので、デフォルトでどのような互換性があるのか断言するのは難しいです。ES5 shimsを使って、ES5以前のブラウザーをサポートするべきでしょう。
さらに詳細な情報は、SvelteのWebサイトやGitHubのリポジトリをチェックしてください。
Conditioner.js
Conditioner.jsを使えば、モジュールのロードを条件で制御できます。ほかのモジュールローダーとの違いは、Conditioner.jsは条件によってモジュールをロードしてかつ表示するか、ロードだけ、または、表示だけかを指定できることです。この機能によってロード時間を減らし、帯域を節約できます。
プログレッシブエンハンスメントで構築する場合、Conditioner.jsは既存のJavaScriptモジュールでエンハンスされる機能的なコンポーネントをきちんと持つべきだと提案しています。モジュールをどう定義するかは、完全にみなさん次第です。好みのフレームワークを使ってモジュールのロードもできます。
Conditioner.jsは、RequireJSのようなAMDローダーで推奨されているグローバル変数が含まれていません。Browserify、Webpack、Rollup、ほかのAMDバンドラーと互換性がありますが、小さなバンドルを作りたいときそのページに必要なモジュールだけをロードできます。
以下のようにnpmからインストールして、使い始められます。
npm install conditioner-js
詳細な情報は公式ページに記載されています。
Conditioner.jsの機能を説明するために、先ほどとは違うデモを用意しました。あるイベントまでの残り時間を表示したいとき、以下のように書けます。
import moment from 'moment';
export default class RelativeTime {
/**
* Enhance given element to show relative time.
* @param {HTMLElement} element - The element to enhance.
*/
constructor(element) {
this.startTime = moment(element.datetime);
// Update every second
setInterval(() => this.update(), 1000);
this.update();
}
/**
* Update displayed relative time.
*/
update() {
element.innerHTML = this.startDate.toNow();
}
}
このモジュールは次のように簡単に初期化できます。
<time datetime="2017-01-01" data-module="ui/RelativeTime">2017</time>
Conditionerは、DOMの中のこの場所にui/RelativeTimeをロードします。コンテンツは既にアクセス可能なフォーマットで表示されていて、モジュールはそれを拡張しているだけということに注意してください。
もしユーザーに見えるタイミングでモジュールを初期化したいなら、以下のような条件を付けて実装できます。
<!-- Show RelativeTime only if it is visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{visible}">2017</time>
<!-- Keep showing RelativeTime after it was visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{was visible}">2017</time>
Conditioner.jsには、条件設定に使えるたくさんのモニターのリストがあります。心配はいりません。必要な部分だけ読み込めば良いのです。そうすれば不要なコードを含まなくて済みます。
また、JSON stringやもう少し読みやすいJSONバリアントでオプションを指定できます。
<!-- JSON variant -->
<div data-module="ui/RelativeTime" data-options='unit:"seconds"'>...</div>
<!-- Or good old JSON -->
<div data-module="ui/RelativeTime" data-options='{"unit":"seconds"}'>...</div>
Conditioner.jsを使う、使わないの理由はSvelteに似ています。もしアプリケーションの容量を気にするなら、間違いなく検討するべきです。一方で、今後の計画が発表されておらず先行きが不透明です。Conditioner.jsを使えばモニタリングをカスタマイズでき、複雑なモジュールローディングに役立ちます。
Conditioner.jsはデフォルトでES5をサポートするブラウザーと互換性があります。Vue.jsやSvelteのように、ES5 shimsを使って互換性を保つほうが良いでしょう。
さらに詳細な情報は、Conditioner.jsのWebサイトやGitHubのリポジトリをチェックしてください。
最後に
2017年は紹介したようなフレームワーク／ライブラリーが広まるでしょう。フレームワークの熱狂的なファンではありませんが、Vue.jsやSvelteは現状のフレームワークの課題を正しい方向で解決しようとしています。業界を新しい方向へ導いてくれる可能性もありますので、改善されていくことを楽しみにしています。
コンポーネントベースでアプリケーションを構築するという流行は、とても良い流れだと思います。Conditioner.jsがメジャーな手段になるとは思いませんが、コンポーネントベースのアプリケーションにおいて、非常に良い方法で問題を解決していることは事実です。
※この記事はAurelio de Rosa、Vildan Softicが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：3 JavaScript Libraries to Keep an Eye on in 2017）
［翻訳：萩原伸悟／編集：Livit］
