最近話題になることも多いJSフレームワーク群。必要になってフロントエンド急速強化月間中なので電子版も出たのを機に読んでみました。
著者は各種超入門シリーズなどの掌田津耶乃さん。前に記事にも上げた『EclipseではじめるJavaフレームワーク入門 第5版 Maven/Gradle対応』 のように、1章ごとにひとつひとつのフレームワークを解説、粒度は大まかに留めて、AltJS言語としてTypeScript、各種周辺ツールも含めてJavaScript界隈の世界全体を概観できる本となっています。370ページクラスと厚め、刊行は2016年9月。電子版は中が2色刷りで見やすいです。
- Chapter 1: JavaScriptとフレームワーク
- Chapter 2: jQuery
- Chapter 3: TypeScript
- Chapter 4: Vue.js
- Chapter 5: Backbone.js
- Chapter 6: Angular
- Chapter 7: React
- Chapter 8: Aurelia
- Chapter 9: パッケージ管理ツール
- Chapter 10: JavaScriptフレームワークの今後
- 欄外に紹介されているフレームワーク
- 気になったところ
- まとめ：JavaScriptフレームワークが群雄割拠する混迷のフロントエンド大陸を見渡し、未来を洞察する本
Chapter 1: JavaScriptとフレームワーク
まずは基礎のところから。Webの進化とともにJavaScriptが発展してきた、DOMとAjaxの誕生、複雑化するWebサイトやWebアプリの中でフレームワークが重要になってきた、(差は曖昧ですが)ライブラリとフレームワークの違いの話。本書ではJavaScriptを強化する手法全般を「フレームワーク」と呼称しており、基本機能を便利にするライブラリ(jQueryとか)、アプリケーション・フレームワーク、言語拡張(AltJS言語のTypeScriptなど)の3種があるという説明の仕方をしています。
そしてFWの実体の導入方法として、スクリプトファイルのダウンロード、npmのようなパッケージマネージャを使う方法、同じ<script src=.....>で読み込む方法でもCDN(Contents Delivery Network)サービスを使う方法を紹介しています。
最後は開発ツールとして、Java開発なら大御所のEclipseと、Visual Studio。そして大仰なIDEでなくエディタから進化系として新進気鋭のVisual Studio Code(VS Code, VSCode)を紹介。本書ではJS開発にフォーカスを当てるならVS Codeを推奨しています。確かに最近の好きなエディタ集計等の記事でも伸びていますし、海外のJavaScript Rising Starsのランキングでも不動の1位、ブログやQiitaの記事等でもよく出てきますね。僕もまさに今使ってますが、JS界隈ならまずVS Code というのは今の主流かなと思います。
第1章はJS界隈をウォッチしてる人・実際に現場で開発してる人ならみんな大まかには知ってるようなことではありますが、このへんの前提知識がいろいろ必要なのがフロントエンドのつらみでもあるところ。本として情報がまとまっているのは非常に良いことだと思います。そして第2章から個々のフレームワークの話へと続いていきます。
Chapter 2: jQuery
いきなりひとつめから「まだjQueryで消耗(ry」となりそうですが、まずはほとんどJavaScript標準ライブラリと言えるぐらいに普及したJSライブラリ、jQueryについて。JSコードの書き方を簡便化するのが主な役割でDOM操作、視覚効果、Ajax通信などの機能があるよ…ということで基礎部分を一通り流しています。
まあjQueryは参考書もネットの情報もたくさんありますし、脱jQueryしてFWに乗り換える動きが目立ってきた現在からすると今後は徐々に衰えて行きそうですが、おさらいやサマリとして役立つでしょう。
Chapter 3: TypeScript
様々なプログラム言語の中でもJavaScriptは型がない、スコープがなくてみんなグローバル(ES2016から変わりますが)、クラスベースでなくプロトタイプベースで分かりづらい、とかなり独特なところや変態的柔軟なところがあります。ではより分かりやすいプログラム言語を定義して、コンパイル後にJavaScriptに変換されて動くようにしよう…というアプローチが、AltJS(Alternative JavaScript)言語。前は2009年登場のCoffeeScriptというのもあり、Rubyの記法に近いので注目を浴びましたがRuby界隈以外では最近あまり聞ききません。現在デファクトなのが誕生2012年、Microsoft謹製のこのTypeScript。言語仕様の基本を一通り解説しています。
インストールは普通にnpm経由で。ソースコードは *.ts ファイルに記述し、tsc ファイル名でコンパイルされて*.jsファイルになります。VSCodeだとタスクランナーの設定で自動コンパイルもできたりします。
型から始まって配列や列挙型、関数の定義やクラスなどなど仕様も一通り解説しています。アロー関数が使えたり関数を引数に取れたりするあたりは本家のJavaScriptと同じですね。よく言われることですが、クラスやインターフェース、スコープや継承のあたりは、C#やJavaなどオブジェクト指向言語が分かる人なら見て違和感のない動きになっています。
TypeScriptも参考書やネット上の資料はあるので詳しくはそちらをとなりますが、本章もおさらいやサマリとして役立つでしょう。TypeScriptはフレームワーク3強のAngularでも使われており、今後もAltJS言語のほぼ一択の主流として勢いは続きそうです。
他のAltJS言語としては…2011年登場のGoogle発のDart言語というのもあり、Google社外ではあまり流行らずいわゆるオワコン的な感じでしたが、つい最近の2018年3月、Dart 2発表で再起動とのニュースがありました。
この言語を使えばiOS/Android で動くネイティブアプリも同じ言語で一緒に作れてしまう Flutter フレームワークがあるよという、後述のReactでのReact Nativeみたいなアプローチを採ってまだ頑張っています。
使う側からするともうTypeScriptだけでいいじゃん！という気もするのですが、TypeScript推しのAngular開発チームとはまた別の開発チームが作ってるでしょうし、もう巨大組織になったGoogle内でもいろいろあるんでしょうね。
Chapter 4: Vue.js
続いて今のフレームワーク3強の1つ、最近特に人気で2018年現在日本でも注目度が高まっているVue.js。ただしVue.jsのv2.0.0 コードネーム"Ghost in the Shell"が出たのは2016年10月なので、本書で扱っているのはその前のv1.0.26です。
- Vue.jsが影響を受けているM-V-VMモデルの概要
- インストール方法。npm経由、bower経由、普通にダウンロードして
<script>タグで読み込む方法。 - Vueオブジェクト(Vueインスタンス)の書き方
- HTMLタグの属性部分に書くv-modelディレクティブを使ったデータ←→HTMLの双方向バインディング
- v-onディレクティブでメソッド呼び出し、フィルター
- 算出プロパティを使った表示の動的変更、v-bindディレクティブを使ったスタイル変更、v-ifやv-for
- コンポーネント化、propsへの親からの値の受け渡し
- コンポーネント内のHTML部分であるテンプレート部分の書き方として親のHTMLに書く方法(本書はv1なのでx-templateと呼んでいません)
- カスタムディレクティブの作り方
と、基本部分を一通り解説しています。概念の図やコード例に添えられた画面キャプチャーも多く、分かりやすいです。v1なので若干古いので、最新情報は2018年春から出始めた本をとなります。
Chapter 5: Backbone.js
今度は2010/10に登場した最古参のFW、Backbone.js。よくJavaScriptの歴史を語るコンテンツで最初期によく使われて今は後発に席を譲っている…という、FW群の祖先のような紹介の仕方をされています。作者さんはAltJS言語のCofeeScriptを作った方なんですね。
- サーバサイドFWでよく見られるModel, View, Controllerの3層のMVCアーキテクチャを採用。
- しかし理屈的にクライアント側で動くJavaScriptからではDBには繋げないので、Model層からは必ずREST形式になっているサーバ側のURLを叩くという方式。
- JQueryとの併用を想定。またUnderscore.jsというJS機能を拡張するライブラリのみに依存。
インストールや使用形態は他のFWと全く同じ。 - View層：ViewオブジェクトというJSオブジェクトを実装し、HTML側とはdivタグなどのid属性と紐付け。render関数の中でデータ→HTMLへのバインディング部分を書く。(単方向バインディング)
タグ部分をテンプレート化したらHTMLの何処かに書いて、値を入れるのは<%= varname %>という書式。(JavaのJSPと同じ) - Model層：DBにアクセスするModelオブジェクト、一覧表示の処理をするCollectionオブジェクトを作る。これらのオブジェクトが属性にurlを持っており、REST形式でサーバにアクセス、JSONで受け取って画面のテンプレートに渡す…という処理をある程度自動化。
- なお明確にController層に分けられたJSファイルはないようで、View層で結果を画面テンプレートにセットするところが相当する模様。
Viewオブジェクトというものを作るあたりの書き方はVue.jsやReactにだいぶ似た感じがします。 2010年代前半は日本でも紹介記事などが出ていましたがその後あまり見なくなりました。もちろんBackbone.js で現役稼働中のサービスやアプリもあるでしょうが、やはりより改良された後発のFW群に取って代わられて行ったようです。本書から読み取れる範囲でマイナスな点を考えてみると以下の感じかなと思います。
- jQueryがほぼ必須。(脱jQueryを兼ねてFWを導入することが多いので、これはマイナス)
- サーバ側で必ず、RESTなURLでJSONを返す形式でAPIを用意しなければならない。(モダンなサーバサイドのFWはこのへんをサポートしているものも多いですが。)
- データを受け取った後でHTMLの変数部分に当てはめて一画面を描画する仕組みを、クライアント側のJSで持っている。多くのサーバサイドFWではController層、View層のHTMLテンプレートエンジンのような仕組みで同じことをしているので、バッティングしそう。
- クライアント側でもMVC的に、仕事によってレイヤーを分けるアーキテクチャを採用している。現在の主流の思想はW3CのWeb Componentsを先取りし、突き詰めるとひとつのカスタムタグの中にHTMLタグと見た目、外部とのデータのやり取りなどのロジック処理を閉じ込めて独立させていくイメージのコンポーネント指向なので、この思想から外れている。
このコンポーネント指向は現在の3強のAngular/React/Vue.jsがいずれも採っている方針ですね。JavaScriptによるクライアント側の実装は画面と大きく結びついている分、規模が大きくなってくると綺麗に責務のレイヤーで分けたりした、サーバサイド並の整然としたアーキテクチャにするのは結局難しい…というのは現場の声でも割と聞きます。いろんな試行錯誤の末、今の流行りのコンポーネント指向が丁度良かったという方向になっていったのかなと思います。
Chapter 6: Angular
そして出ました、今のフレームワーク3強の1つ、Google発のフルスタックな本格FWのAngular。最初のv1は名称がAngularJSだったのがv2からJSが取れてAngular、3がなくて4と5と続きます。
前にこちらの感想記事で書いたとおり現在は Angular4〜2017/11にAngular5、2018/5/3に6.0.0がめでたくリリースなのですが、本書は2016年の本なのでAngular2を扱っています。
- SPA向け、フルスタック、TypeScript、仮想DOM、プラグインで拡張可能など特徴。
- インストールは普通にnpmでnode_modulesの中に本体が入る。
- 始め方。npmの設定ファイルpackage.jsonの他に設定ファイル3つを準備して
npm installで一式がインストールされる。 - 関連ライブラリ(モジュール)のAngular CLI (npmで入れる時はangular-cli)を使うと、依存関係などを解決して新規プロジェクトフォルダがすぐ作れる。ボイラーテンプレート。
- コンポーネントの定義。*.tsファイルにタグ描画部分と対応する処理を書いたTypeScriptのコンポーネントクラスを実装、この組がコンポーネントとして動作。
- イベント処理やテンプレートの作成方法
- データのバインド
…と触りの部分が紹介されています。Angularはバージョンアップが半年毎と速く、破壊的な変更も辞さないところがあるので常に最新情報をチェックするようにと本書でも注意しています。
まあ情報が古いので詳しくはAngular4-6の情報をとなりますが、本書の触りの部分を概観してもいざ開発開始までの手順が多く、やっぱりReact/Vue.jsに比べるとフルスタックな重量級FWだなという感じは受けます。
Chapter 7: React
またまた今のフレームワーク3強の1つ、Facebook発で日本でも採用実績や情報が多いReact。 当ブログでも何冊か入門書の感想記事を書いたとおり現在はv16ですが、本書では2016/7月時点ということでv15を扱っています。
- 特徴。シンプル、Viewだけを扱ったライブラリ、JSXを使う、Babelでトランスパイルする、仮想DOMで速い。
- 始め方も他のFWと同様。npm経由で入れる、あるいは
<script>タグで読み込む。 - ボイラーテンプレートのcreate-react-appをnpm経由で入れると、すぐ新プロジェクトフォルダを作って始められる。
- コンポーネントの作り方。ひとつの*.jsファイルにJavaScriptオブジェクトで定義、render関数でHTML描画部分を定義。
- コンポーネントの外側からの、propsを経由した値の受け方。
- 複数コンポーネントの定義、見た目のスタイルの変え方
- stateを用いた値の受け取り、渡し方
- テキストボックス、ラジオボタン、チェックボックス、セレクトボックス、mapを使ったToDoリストのようなダイナミックリストの実装
…と、基本部分をだいたい流しています。こちらも詳しくはv16の最新情報をとなりますが、キャプチャ例も豊富なのでイメージを掴むにはよいのではないでしょうか。
ちょっとおかしいのは最初の説明のところで話を簡単にするためか、Babelを「言語」だよと言う説明の仕方をしてるところですね。最後のコラムだとECMAScript6/7やReact独自のJSX記法を、今のブラウザで動くECMAScript5に変換してくれるツールだよと正しく説明しています。なんかの連載記事とかで書いた時期が違ったのでしょうか。
Chapter 8: Aurelia
最後は、2015年1月にv1が出たAureliaについて。日本のネット情報でもまたなんか新しいのが出てきたと当時は名前が上がりました。
- 特徴。ECMASxcript6/7を取り込んだ未来志向。TypeScriptを使う。コンポーネント指向である。双方向データバインディングを実現。Railsライクな「設定より規約」の考え方。SPA向け。
- 始め方は他のFWと同様。npm経由でインストール、テンプレートプロジェクトが公式サイトにあるのでここからも始められる。
<body>タグに<body aurelia-app>のように加えるとそこがAureliaのコンポーネントになる。 .htmlファイルに<template>でくくってタグ部分を記述、*.tsファイルにTypeScriptでクラスを実装、この組がコンポーネントになる。- 双方向データバインディング、イベント処理の実装
- ルーティング
- ValueConverterという、TypeScript形式でデータを日付形式に変換したりする仕組みを作れる
- コンポーネントに@で独自属性を持っていろいろできる
- サーバとの通信用にHttpClientというのが最初からある
- 依存性注入や、プラグイン自作ができる…
などなど、全体的にAngularと似ていてその後継という感じがします。本書から読み取れる範囲でマイナス面を考えると「Angularと何が違うのかよくわからん」「できたばかりだと周辺ライブラリが少なそう」となるでしょうか。
それもそのはず、作者のRob Eisenbergさんは元GoogleのAngularJS開発チームにいた人で、Angular2が自分の求めてる方向性と違ったので袂を分かって脱退、独自のフレームワークとして作ったそうです。なんか音楽でのバンドメンバー脱退とソロ活動みたいな話ですね。(笑)
公式サイトをちら見すると紫が基調でオサレ感を出し、キャッチフレーズも"build your imagination"だったりfutureという単語がよく踊っていたり全体的にかっこよさげな未来志向感を出しています。
同じくAngularJS開発チームにいた人というとVue.jsの作者のEvan Youさんもですが、その後v2.0も出てもうすぐv3、日本でも最近注目度が上がっているVue.jsに比べるとこのAureliaはあまり知名度が上がってないですね。オープンソースの世界も厳しいようです。
GitHubのスター数もReactがもうすぐ10万、続くVue.jsも10万弱、Angularが4万弱＋Angularjsが6万弱なのに比べるとAureliaは1万どまり。一時期ネット記事もありましたが2017年になると日本語の記事もぱったり途絶えているので、まあ世の中にはこんなFWもあるよというところで留めておくあたりでしょうか。
ちなみに aurelia はミズクラゲですが Aurelia にすると女性名。「アウレリア」としている記事もありますが、英語読みだと「オーレリア」か「オゥレリア」(ゥを弱め、アクセントは「レ」に)が近いかと思います。「金」が語源の名前ですね。これは作者さんの奥さんとか娘さんとかそういうアレなんでしょうか。
他のAureliaさんは昔のローマの人とかフランス王家の聖女とか、傑作メイド漫画の『エマ』の登場人物とか。『メタルギア』にもなんか出てきました。あと更にどうでもいいですが僕が昔活動していたTRPGの分野だとあるゲームタイトルに出てくる有名NPCにオーレリアがいました。(ゲーム脳乙)
- 作者:森 薫
- 発売日: 2010/11/01
- メディア: コミック
Chapter 9: パッケージ管理ツール
Webフロントエンド開発だとよく出てきて初心者が躓きやすいこのあたりの話も、章を設けて解説しています。
Node.jsとnpm
JSの世界もどんどん複雑化し、いろんなフレームワークやライブラリが互いに依存したり繋がったりしながら存在している。それらを管理してコマンド一発でうまくやってくれるツールが必要だよねということで生まれたのがパッケージ管理ツールで代表格というか必須なのがnpm(Node Package Manager)。
そしてnpmを動かすのに必要なNode.js はサーバサイドJavaScriptのプログラムというわけではなく「JavaScript言語のランタイム環境」である、ブラウザでなくOS上でJavaScriptが動かせるようになる仕組みなんだよとちゃんと説明した上でインストール方法を解説しています。詳しくは同じ作者さんの『Node.js超入門』が分かりやすいです。
npmはプロジェクトごとに
--save-dev で入れていくのが基本ですが、サーバサイドで動かす時は -g でグローバルに入れるのが普通とコラムにあり、へえと思いました。
Bowerの利用
Node.jsはもともとサーバサイドでJavaScript開発をするためのものだったのでnpmはサーバ用のパッケージも含めて管理している。じゃあクライアント用パッケージ専用の管理ツールもあっていいよねということで生まれたのがBower。
最初はnpm install -g bowerで「パッケージ管理ツールを使ってパッケージ管理ツールをインストールする」というのが面白いですが、設定ファイルbower.jsonの使い方なども解説しています。
…しかし2017-2018年現在、結局Bowerはあまり流行らずにnpmか、その後続でもっと高速なyarnがあれば済むようになってきました。ということでBowerは飛ばしてしまってよいかと思います。
webpack
HTMLヘッダの<script>タグでライブラリやらフレームワークやらの多数の.jsファイルや各種UIライブラリの.cssやらたっぷりの画像を読み込んでいると、通信が何度も発生してファイル読み込みのパフォーマンスがどんどん下がる。ではデカくてもひとつの.jsに格納、その時に各種適切に変換して組み込んでいける仕組みも一緒に入れていこう…というのが「モジュールバンドラーツール」で、代表的なのがこのwebpack。分類としては「タスクランナー」である先発のGulp, Gruntと若干被ってるところもあるようですが現在はもう主流ということで解説しています。
インストールは普通にnpm経由で。例として .html, .css, .js*2がある状態で、webpackの設定ファイルwebpack.config.jsに設定を正しく記述、bundle.jsにまとめる例を載せています。
ここで若干注意なのはサンプルの.jsファイルが他の.jsファイルを読む時、 require("./other.js");とNode.jsが拡張している書式になっていることですね。ES6構文では import文を使うのが正式なので、ここは適宜読み替える形になるかと思います。(内部的にはBabelが一旦require文に変換する流れだったと思いますが)
そして最初に知った時驚きだったのがライブラリのstyle-loader/css-loaderを使う方法。これらをnpm経由でインストール、webpack.config.jsに設定して実行すると、なんとCSSの中身も出力JSの中に組み込んでしまい、HTML側では<link rel...> で読み込みなくてもそのCSSクラスが使えてしまうんですね。JS内で文字列を変数で持つそうで、理屈を知るとなんとなーく理解できるんですが、いやはやフロントエンドの進化は恐ろしいものです。
このwebpackについては、最近の電子書籍だと『速習webpack』がとても役に立ちます。
Chapter 10: JavaScriptフレームワークの今後
まだまだ黎明期で発展途中、混乱も多いJavaScript界隈の中で、フレームワーク群が今度どうなっていくかを、2016年時点の予想を述べています。「→」のあとは本書に記述のある予想ではなく2017-2018年現時点での考察です。
- jQuery：最も普及したライブラリだが、今後は仮想DOM技術が出てきてDOMを直接いじる必要性が薄れてくると、地位が少しづつ低下していくかも。
→その通りで2017-2018年は、jQueryでなんの問題もなく動いているような小規模アプリを除くと、脱jQueryしてFWに乗り換える動きが大きくなっています。 - Backbone.js：モデル層があってDBアクセスを簡略化できるものはこれだけ。はっきりした特徴があるので長く存続できそうだが、先行き不透明。
→2017-2018年はもうあまり聞かなくなってきており、これからも下降傾向でしょう。 - Vue.js：View特化、簡略化した双方向バインディング。こちらもはっきりした特徴があるので長く存続できそうだが、先行き不透明。
→との予想でしたがv2で波に乗り、付加的機能は周辺ライブラリがフォローする形で発展、今はTOP3で注目されています。 - Angular：今後はコンポーネント指向だといち早く舵を切ってv1のAngularJSから大幅変更した。進化のスピードが速いが、最も期待大、もっとも将来性のある一本。
→その通りで現在もTOP3。しかしReactとVue.jsの勢いも強いのでデファクトスタンダードというまでは達していないような。 - React：Angularに比べると簡単に使えるようになっており利用しやすい。大幅変更の恐れもない。採用実績も多く安心、習得すべきFWのナンバーワン。人気でAngularを越えたという統計もあった。
→概ねその通りで現在はAngularを人気で若干上回り、それをVue.jsが追っています。 - Aurelia：もっとも若く未来志向のフレームワーク。しかし知名度が低い。実力はあるが活躍できるか未知数。
→結局日本では知名度が低いまま、このまま流行らず下降か。たぶん本書執筆当時の状況で、最近の新しいのもひとつ載せておこう的な流れで章を設けたのではないでしょうか。 - AltJS言語：やはりTypeScriptが標準。CofeeScript、Dartはメジャーではなくなっていく。
→Dartはv2で復活の可能性が少しあるが、予想通りTypeScriptの1強。
本書執筆時点は2016年半ばだったので、おそらく「Angular vs Reactの二強激突」の大まかな構図があったのでしょう。予想は概ね当たったものの、ダークホースだった第3勢力のVue.jsのその後の伸びが予想以上だったという感じでしょうか。
なんかもう戦国時代とか三国志みたいになってきましたが(笑)、アプリケーションとプロジェクトの特性に合わせてAngular/React/Vue.jsの3択から選ぶか、将来の見込みのありそうな若いフレームワークを選べば、フロントエンド大陸全土統一の夢はならずともJS三国志(うそ)の群雄割拠時代を生き抜くことはできそうです。
最後は、JavaScript界隈の未来について述べられています。
- ECMAScript 6：プロトタイプ指向でなくクラス指向の概念も入り更に改善、フレームワーク側もアップデートしていくはず。要注目。
- JavaScript以外の言語：TypeScriptは今後も進化していくので要注目。DartもChrome搭載は断念されたので、今後ブラウザに標準搭載される言語が増えることはなさそう。
- 異なるアプローチ：C/C++などで書かれたコードを自動変換するasm.jsというサブセット言語があり。またWebAssemblyというバイナリフォーマットが推進中。ゲームや3D演算など一部では、JavaScript以外の言語がブラウザ上で動くようになる未来も来るかもしれない。
- パッケージマネージャー、モジュールバンドラー：npmがスタンダード。他のプログラム言語でもパッケージ管理ツールの活用はトレンドなので、JavaScriptでも一般化していく。またwebpackのようなモジュールバンドラーは重要度を増していく。
- Web Components: この仕様が議論中、時間をかけてWeb全体がこの方向へ流れていくはず。幾つかのFWがコンポーネント指向で先取りしているが、引き続き要チェック。
- 開発環境：VS Codeの登場で、JavaScriptもテキストエディタ以上のもので開発するのが主流になった。今後も開発ツールが出てくる可能性はあり。
そして最後は、JavaScriptは誕生して本格的な活用が始まってからまだ日も浅く、想像もつかないような変化が起こったりまた新しいフレームワークが出てきたりする可能性も十分ある。新しいことにアンテナを張り巡らせていよう…という話で終わっています。
欄外に紹介されているフレームワーク
コラムにて他のFWも1ページでミニ紹介されていたりするので列挙してみます。主にReactで使われる大規模開発用の状態管理用ライブラリ Redux もミニ紹介に入っているのですが、外しています。
- Knockout.js：2010年誕生、ほぼ最古株のFW。非常に小型軽量。HTMLタグに
data-bind属性を追加することでJSオブジェクトから値をバインドする。メンテしているのはMicrosoft社員の人。 - Ember.js：2013年リリースの割と古株。サーバサイドのFWでよく見られるMVCアーキテクチャ、レイヤー毎のフォルダ分け、ルーティングやHTMLテンプレートなどを備えた本格派。2018/2に最新v3.0.0。
- Riot.js：軽量だがコンポーネント指向。仮想DOMと本書にはあるが最新版はよりよい方法を採用している？ 独自タグを作って中に{}で値をはめ込むように定義でき、
<my-tag>のようにHTML中に書ける。Reactを踏襲しさらに改良軽量版のようなアプローチ。2016/11にv3、2018/2に最新v3.9.0。
まとめとして、もちろんスター数の人気が全てではないんですが定量的な値として、各FWの数値をまとめてみます。(2018年6月月初時点です)
| 種別と概要 | フレームワーク名 | GitHubスター数概算 |
|---|---|---|
| 今の3強 | React | 97,300 |
| 今の3強 | Vue.js | 96,200 |
| 今の3強 | AngularJS(v1) | 58,600 |
| 今の3強 | Angular(v2-) | 36,800 |
| 本書で紹介、FWの祖先 | Backbone.js | 27,200 |
| 本書で紹介、Angularの後輩的FW | Aurelia | 10,500 |
| コラムで紹介、重量級FW | Ember.js | 19,000 |
| コラムで紹介、Reactの後輩的FW | Riot.js | 13,000 |
| コラムで紹介、軽量FW | Knockout.js | 8,900 |
Qiitaや技術ブログ、発表資料や勉強会なんかで時々聞くのはEmber.jsとRiot.js、そしてView部分専用の超軽量ライブラリ hyperapp というのがありますね。こちらはスター数13,800で実は伸びています。
気になったところ
★作者の掌田津耶乃さんの入門本は時に誤植が多いことでも知られてしまっています。本書はフレームワークの入門本という体裁をとっていることもあり、目立つものはそんなになかったように思います。正誤表はこちら。 www.shuwasystem.co.jp
★最大の弱点は読んだ人ほぼ全員が思うでしょうが、刊行が2016年9月、2018年現在からすると既に情報が一部古くなってしまっていることですね。逆にそれだけJavaScriptの変化・進化のスピードが速すぎるということでもあります。
AngularJS→Angular2へのアップデートのように大きく変化するケースも中にはありますが、フレームワークのバージョンが上がってもAPIの細部やらは変わっても根本的な思想や本質、アーキテクチャはあまり変わらないことが多いです。差分はネットの最新情報などで補強するとして、歴史的な過去の経緯も含めて概要を知ることには意味があるのではないでしょうか。
まとめ：JavaScriptフレームワークが群雄割拠する混迷のフロントエンド大陸を見渡し、未来を洞察する本
というように若干古いのはあるにしても、名のある武将…じゃなかったJSフレームワークの基礎情報をまとめ、周辺ツールもまとめてフロントエンド界隈の情報を一冊の本で概観できる本はかなり珍しいです。
手にとるのは主にフロントエンド界隈の動静を把握したい方、JavaScriptフレームワークの選定にあたって情報を得ようとしている方などでしょうが、その価値は十分にあると思います。
逆に、本の中のサンプルコードを一生懸命写経してJavaScript言語自体を学んでいこうというような方にはあまり向かないでしょう。もうちょっと初心者に優しい本で勉強して実際にアプリケーションを作り、フレームワークを使うとこういうところが便利になるんだ…というあたりを把握してからこういう本に進むと良いかと思います。
ちなみに本書のように1冊の本で複数のフレームワークを見渡せる本としては、イケてそうなパンダが目印の『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』が最近出ています。複数の人による合同本スタイルですが、面白そうなので今度読んでみようと思っています。
関連記事はこちらをどうぞ。 iwasiman.hatenablog.com iwasiman.hatenablog.com
