2017年に見ておきたい12のJavaScriptライブラリ
※本記事は、2017/1/5に投稿されたTechAcademyマガジンからの転載記事である。
JavaScriptライブラリには、有名なものでjQueryやReactといったものが存在する。そこで、あまり知られていないものの、急速に台頭している12のJavaScriptライブラリを紹介したい。
本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し、掲載した記事になります。
本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。
JavaScriptのライブラリは数多く存在しているため、その中のどれにエネルギーを注ぐべきかを決めるのは難しく思えるかもしれません。
成長を続けて、広く採用されるようになるライブラリもあれば、なかには使用されなくなったり、別の新規プロジェクトに吸収されて消滅するライブラリもあります。
ほとんどのエンジニアは、jQueryやReactなどの有名なライブラリは、すでにご存知かと思います。
しかし、今回の記事ではあまり知られていないものの、急速に台頭している12のJavaScriptライブラリを紹介したいと思います。
1) D3.js
ビッグデータは成長産業であり、それとともにデータビジュアライゼーションも急速に重要性が高まっています。チャートとマッピングの機能を備えたライブラリは数多く存在しますが、D3.jsはその中でも目立つ存在です。
このJavaScriptライブラリは、XMLのsvg要素やHTMLのcanvas要素を利用することで、Web上でグラフ、チャート、動的なビジュアライゼーションのレンダリングを行うことが可能です。
完全に無料で利用できる、可視化ツールとしてのJavaScriptライブラリの中では、もっとも強力なものの1つです。ブラウザ上でデータをレンダリングするためのツールを探している方には、特におすすめしたいライブラリです。
D3.js
2) Node.js
多くのエンジニアは、Node.jsの話はうんざりするほど聞いているかもしれません。しかし、Node.jsは急速に成長しているJSライブラリであり、開発環境以上のものを提供してくれます。
デフォルトのパッケージ管理ツールであるnpmによって、ローカル環境にあるプロジェクトのパッケージをすべてコマンドラインから管理することができます。そのため、Node.jsはnpmによって、Gulpなどの他のツールをインストールして使うことができる、完全な開発ツールキットであるといえるのです。
それに加えて、数多くの関連するオープンソースプロジェクトが、Node.jsをベースとして構築されているため、テストフレームワークであるMocha.jsでユニットテストを実行したり、Sails.jsでフロントエンドのインターフェースを作成することができます。
もし、まだNode.jsを試したことがなければ、「何て貴重なツールを見逃していたんだ」と驚くことになるでしょう。
Node.js
3) Riot.js
JavaScriptのライブラリであるReact.jsは、仮想DOM、カスタム要素などの操作が複雑です。しかし急速に、フロントエンド開発におけるデジタルインターフェース用の強力なライブラリを必要とするプロに選ばれるツールになっています。
React.jsの代替ライブラリとして有力なのが、Riot.jsです。Riotのフレームワークを使用すれば、同様に仮想DOMにアクセスすることが可能で、しかもより簡単な構文要件で制御できます。
残念な点は、Reactほど大きくはなく、Facebookによって開発されていないために、利用者コミュニティが小規模であることです。しかし、代替JavaScriptライブラリとしては、良い選択肢であり、特にフロントエンド開発においては有力候補です。
Riot.js
4) Create.js
Webアニメーションからデジタルメディアに至るまで、Create.js1つあれば、すべてをカバーすることができます。
Create.jsは単独のライブラリではなく、さまざまな目的のために構築された、一連のライブラリ群から構成されるスイートパッケージです。
たとえば、ライブラリの1つであるEasel.jsはHTML5のcanvas要素を使って動きを表現するためのものであり、Tweet.jsはWeb用のトゥイーニング（2つのイメージ間の動作変化であるトゥイーンを自動生成して滑らかなアニメーションを表現するプロセス）とアニメーションを作成するのに役立ちます。
Create.js
5) Keystone.js
先に私は、いかに多くのライブラリが、Node.jsをベースとして構築されているかについて述べました。Keystone.jsは、本格的なCMSエンジンを備えたフレームワークであり、Node.jsを超える優れたツールの1例です。
Keystone.jsを利用することで、MEAN（MongoDB、Express、AngularJS、Node.js）スタック方式によるWebアプリ開発が可能であり、バックエンドをNode.js、Express、MongoDBで構築できます。
完全に無料で利用できますが、公開されたばかりの新しいライブラリです。記事執筆時点の現在の最新バージョンはv0.3であり、プロフェッショナルな利用に適したライブラリとなるには、今後まだ長い時間がかかりそうです。
しかし、JavaScriptのCMSフレームワークが気になる方は、チェックしてみることをおすすめします。
Keystone.js
6) Vue.js
フロントエンドのフレームワークとしては、AngularとEmberが2大選択肢であるようです。しかし、Vue.jsも人気の高い選択肢であり、バージョンv2.0の公開以降は、さらに急速に注目を集めています。
Vue.jsは、MVVMフレームワークであるため、典型的なMVCとはアーキテクチャが異なります。学習は難しいかもしれませんが、構文は一度理解してしまえば簡単です。フロントエンドのフレームワーク戦争が起きている現在においても、Vue.jsは確実な選択肢です。今後数年にわたって、注目し続ける価値があります。
Vue.js
7) Meteor
Meteorは、オープンソースのプラットフォームです。どんなプラットフォームでも統合することが可能であり、良い結果を生み出すことができます。
このMeteorのオープンソースのプロジェクトは、リアルタイムのチャットアプリ、ソーシャルコミュニティのためのアプリ、ダッシュボードなど、JavaScriptで動くアプリケーションをエンジニアが開発するときに役立ちます。
また、Telescopeというソーシャルアプリケーションの開発に特化した新しいフレームワークは、フロントエンドをReactによって、バックエンドをMeteorによって構築されています。MeteorとReactの技術が組み合わされたTelescopeを利用すれば、ソーシャルニュースのWebサイト、ソーシャル投票のWebサイトなどをゼロから構築することができます。
Meteorは、数多くの機能を備えたモンスターのようなライブラリで、学習は簡単ではありません。しかしMeteorは楽しく、熟練したJSエンジニアであれば、ほとんど何でもこのプラットフォームで構築することができるでしょう。
Meteor
8) Chart.js
Chart.jsは、JavaScriptとCanvas APIを使用することで、棒グラフ、折れ線グラフ、バブルチャートなどのグラフを作成できます。
データのグラフ化のためのもっともシンプルなJsライブラリの1つであり、アニメーションのためのビルトインタイプのオプションも組み込まれています。
セットアップとカスタマイズが容易で、オープンソースプロジェクトの中で、もっとも優れたドキュメントがいくつか付属しています。
Chart.jsは、データのグラフ化のためのライブラリとしては、私がおすすめできる数少ない中の1つです。
Chart.js
9) WebVR
新興スタートアップや熱狂的なエンジニアたちが、VR（バーチャルリアリティ）のプロジェクトに不断の努力で取り組んだこともあり、バーチャルリアリティは世界中を魅了したようです。
そのため、ブラウザ上でVRを実現するために開発されたJavaScriptのAPIであるWebVRが登場したことは、驚くにあたらないかもしれません。
WebVRは、Oculus Rift、Viveといった、もっとも人気の高いVRのデバイスへのアクセスを可能としますが、現在はまだ開発段階にあります。 APIはオープンソースであり、モダンブラウザ上でVRのデバイスがどのように機能するのかを測定するテストが、常に実行されています。
このプロジェクトに興味を持った方や参加したい方は、オフィシャルサイトまたはMozVR（MozillaのVRチームのサイト）で詳しい情報をチェックしてください。
WebVR
10) Three.js
1980年代から現代に至るまでの3Dアニメーションの進化は驚異的です。私たちは、3Dアニメーション映画には慣れ親しんでいますが、Webアニメーションはまだ新しいフロンティアです。
幸運にもThree.jsのようなライブラリがあることで、Web上における3Dアニメーションへの道が開拓されています。
Three.jsのメインサイトには、数多くの実例があります。モーションセンシティブな背景、3DWebグラフィックス、3Dアニメーション効果を使った動的なインターフェース要素などを構築することができます。
忍耐力と野心があれば、このライブラリを使って、どのような3D効果も構築することができるでしょう。Web上の3Dモーションを表現するには、もっとも良いリソースであり、サンプルも豊富に備わっています。
Three.js
11) Omniscient.js
JavaScriptを使った関数型プログラミング自体は、新しいものではありませんが、Web上においては新しいものでした。しかしOmniscient.jsなどのライブラリが登場したことで、一般的になりました。
Omniscient.jsは無料でオープンソースのライブラリであり、すべてのフロントエンドの要素をトップダウン方式でレンダリングすることによって、viewを処理します。関数型プログラミングのコードをJavaScriptでゼロから書いて、Reactのような既存のUIライブラリと連携させることができます。
Omniscient.jsは、よりスムーズな開発プロセスを求める経験豊富なエンジニアに特におすすめです。初心者にとっては複雑なテーマかもしれませんが、Omniscient.jsはReactの機能と連携して利用することで、開発プロセスを抜本的に改善できます。
Omniscient.js
12) Ractive.js
他のものとは異なるユニークなUIライブラリを探している方には、Ractive.jsがおすすめです。Ractive.jsにはテンプレートと入力したデータを結び付ける、Two-way bindingというバインディング機能がデフォルトで備わっています。
そのため、RactiveのJavaScript関数にバインドされた要素を操作するだけで、テンプレートを構築することができるのです。
重厚感のあるライブラリですが、初心者にとって学習曲線が最も緩やかなライブラリの1つでもあります。Reactほど詳細型のライブラリではありませんが、JsとHTMLにおいては独特な構文を使います。
さらに学習するにはRactive.jsのメインサイトを訪れて、「Examples」のページよりRactive.jsで何が可能なのかをチェックしてみてください。
Ractive.js
まとめ
今回の記事でご紹介したライブラリはすべて、JSのコミュニティにそれぞれユニークな価値を提供することで貢献しています。
もしあなたがJavaScriptの操作が好きであれば、それぞれのライブラリをもう一度見返して、あなたのWeb開発プロジェクトにどのような付加価値を与えてくれるかを考えてみてください。
TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
TechAcademyマガジン 編集部
[原文4]
