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