【感想】Hello!! Vue.js 最新プログレッシブフレームワーク入門【JavaScript】【技術書典】
Vue.js本の商業書籍版
さてGWも終わって平常運転再開です。皆様休みはいかがお過ごしでしたでしょうか。僕は子供の風邪が感染って油断したら連休後半にどんどん酷くなるというダメなパターンでした。乳幼児の風邪菌は舐めたらアカンという知見を得てしまった……
こちらの記事の続きです。2017/10の「技術書典3」で頒布されたチラシ裏日記上等！！新館】の nasum (id:Tomato-360) さんの本が加筆修正され、2018/4にふつうの本屋で買える本として登場。Vue情報を急ぎ収集中なのでこちらも改めて読んでみました。
あのキムワイプっぽいアレが色違いで並んだ表紙。商業版も90ページ程度なので気軽に読めます。
Hello!! Vue.js 最新プログレッシブフレームワーク入門 (技術の泉シリーズ（NextPublishing）)
- 作者:那須 理也
- 発売日: 2018/04/13
- メディア: オンデマンド (ペーパーバック)
第1章〜第4章
同人誌版の『Hello Vue !!』と基本は同じですが、
- Vue.js の特徴であるProgressive Frameworkの内容
- エコシステムがEasyを目指しているという話
- 2章でRuby言語のRuby on Railsでのはじめ方に加え、PHP言語のLaravelでの始め方も追記
- 3章の使い方一通りは同じ、最後にVueインスタンスだけでなくVueコンポーネントを使った記法も追記
- 4章のToDoリストの作成サンプルはほぼ同じ
と、あちこち加筆修正され充実されています。艦これネタは健在でした。(敬礼)
第5章 単一ファイルコンポーネント
仕事レベル、チームでの本格的なVueアプリケーション開発になるとほぼ必須になってくるVue.js独自の強力な機能である単一ファイルコンポーネント。VueインスタンスやVueコンポーネントをHTMLの<script>タグや外部の.jsファイルに書くのではなく、独自の.vueファイルに見た目のHTML(XML)のテンプレート、コンポーネントのJavaScriptコード、限定可能なCSSを書き、コンポーネントごとに完全に独立させられるものです。
この単一ファイルコンポーネントの書き方、利点が一通り記されています。
関係ないですが英語だとSingle File Component: SFCとよく略されるそうですね。英語の技術記事などでも時々見かけます。日本でSFCというと慶応大学のキャンパスが有名でしょうか。個人的には世代的についスーパーファミコンを思い出してしまいます。(ゲーム脳乙)
第6章 Vuex
JSフレームワークのReactのReduxと並び、よく名前が上がるVue.js用の状態管理ライブラリVuexの章。「びゅーえっくす」と読んでいたのですがどうも「ビューックス」が正しいらしいという話があります。
Vue.js本体のサンプルはよくネットの入門記事などにもあるのですがVuexのサンプルになるとだいぶ少なくなるところ、分かりやすいサンプルと解説で説明されています。要は所定の手順を踏むとどのコンポーネントからも親コンポーネント経由でなく直接に安全にアクセスできる、データをメモリ上に持った一画面内(もしくは複数画面内)専用の仮想的なDB、データの置き場のようなものです。
- JS上の変数名
storeで、Vuexなオブジェクトを1つ定義。 - この中に状態として保存され管理されているデータ本体が state プロパティで、サンプルではクリック回数の
countを定義。 - 外側の各コンポーネントがこのstate内を見るのにアクセスしやすくする算出プロパティ的なものが getters プロパティで、サンプルでは
postfixCountメソッドとして定義。 - state内を更新できる唯一の手段が mutations プロパティで、同期的に処理される。payloadとして引数も取れる。サンプルでは
increment/decrementメソッドなどを定義。 - このmutations を外部から呼び出せるのが actions プロパティで、こちらは非同期的に処理され、mutationsのコールの他にサーバ側のAPI通信など処理を挟める。payloadとして引数も取れる。外側のコンポーネントからはふつうは常にこのactions経由でのみアクセスする。サンプルでは
fetchCount/incrementメソッドを定義。 - ほか、Vuexのオブジェクトが大きくなった時にmoduleで分割したり名前空間で区別する方法…
という流れで、外側のコンポーネントからこのクリック回数countを取得したり増やしたりする手順を説明しています。概念の図から実装コードへ、じっくり通して読むと分かりやすいです。
このVuex周りは初見だとけっこう理解しづらいのですが、本書の他には、ネット上のサンプルだと@mioさんのサイトのCubixの以下の記事が分かりやすかったですね。 chibinowa.net
僕も最初はVuex周りがどうも理解できず、さる仕事のプロジェクトで開発の指針的なやつには採用を見送ろうかと思っていたのですが、本書や上の記事を参考にしたところ正しく動くサンプルアプリが作れて理解することができました。その開発指針では使った方が良さそうな複雑な画面ではVuexを導入する、とすることにしました。ありがたやありがたや。
第7章 vue-router
複数ページのWebアプリケーションでなく単一ページだけのSPAをVue.jsで作る際に必要になってくる、公式が提供しているURLルーティングのライブラリvue-routerの章。
基本部分をごくごく簡単に言うと、
- Vue.jsが描画するHTML内に、
<router-link to="/a">Aを出すよ</router-link>のように<a href="..">でリンク先を書くようにコンポーネントを指定 - コンポーネントが出るところは
<router-view></router-view>で指定 - VueコンポーネントのJS実装部分ではvue-routerを外部モジュールとしてインポート、/aがクリックされたらAコンポーネントを出すよというルールをJSオブジェクトの配列で記述、VueRouterインスタンスに渡す
としていくと、静的ページでリンククリックで<div>タグの表示内容が切り替わるように、Vueコンポーネントがどんどん切り替わるのを実現できる…というものです。
大抵のフレームワークが備えているサーバサイドのURLルーティングのように、動的なパラメータを指定したり、キー：値の形式で渡したり、ネストしたりリダイレクトしたり…と様々な機能があるのをサンプルと共に説明しています。これからSPAを作ろうとしている人には役立つでしょう。
まとめ：Vue.jsの基礎が一通り短時間で学べる本
というように、同人誌版で既出のところも加筆修正され、単一ファイルコンポーネントとVuexとvue-routerと、Vue.jsの基礎部分の情報が一通り揃った印象です。お値段は300円→紙の本だと1620円と上がってしまいましたが、まだまだ書籍が少ないVue界隈、Kindle版のみの『速習Vue.js』と並んで短時間で押さえるにはまずここから始めると良いのではないでしょうか。
おまけ：時間単価の高い人たちが集結した技術書典4
本書の同人誌版は同人誌即売イベントの技術書典3で頒布されたものですが、その後の技術書典4が2018/4/22に開催されました。Twitterやはてなブログ系でもレポートが各所で上がっていましたが、かなり大盛況だったようですね。なんとなくこじんまりしたイベントを勝手に想像してたのですが、これコミケと同等クラスにガチやないか…(笑)
nasum (id:Tomato-360) さんのところは本書の他に新刊「Hello Nuxt !!」を用意したそうです。
Vue.jsを使ってサーバサイドレンダリングをする拡張モジュールであるNuxt.jsの解説本。こちらもKindle版で購入して拝見したのですが、まだ実物を作ってないのでイメージが沸かないからか、レベルが上がってけっこう難しいと感じてしまいました(笑)。う〜む自分のような初心者はまずはVuexとvue-routerまで分かればいいか(逃走)
技術書典4の参加記録ははてなブログのあちこちで上がっており、見て回るのも楽しいのですが、フロントエンド周辺の本もけっこう出ていてVue.js本が一番多かったそうです。やはり2018年春現在、Vue.jsはだいぶ勢いが出てきた感があります。
本の幾つかはイラストSNSのpixivと連動したネットショップ作成や同人グッズ売買サービスのBOOTH(ブース)で求めることができます。
ここで改めて探すと、技術書典4が全118件で…
- Vue.js＋SSRのNuxt.js： 6件
- React＋SSRのNext.js： 3件
- React Native： 2件
- Angular： 0件ヒットだけど、TypeScriptでアプリを作る本が1件あったような…？
- Reactの流れを汲む超軽量ライブラリのHyperapp本： 1件
- フロントエンド全般：デザインパターンやマイクロサービス、ウェブフォントの本など3件
- その他JavaScript：ビットコイン本やNode.js本など3件
と盛況ですね。他も探してみますと
- PHP言語：Laravelで環境を作る本が1件
- Ruby言語：Ruby内部の命令セットを探る本と脆弱性の本で2件
- Python言語：Djangoマニュアル本など4件
- Go言語：1件
- Haskell言語：1件
- Java言語：0件
- C#言語：ないけどXamarin本があり
- Perl言語：なし
- Android関連：6件
- セキュリティ関連：3件
- Docker：マンガでわかるDockerをはじめ2件
- AWS関連：2件
- 機械学習：1件
などなど様々です。(タグがついてないだけでもっとあるかもしれません)
中には同人誌ならではのものすごくニッチな題材を深く追求していたり、表紙が綺麗だったり硬派だったり萌えていたりオ◯イリー風だったりとよりどりみどり。いろいろ探してみると面白そうです…と、連休中に思ったおいらも何冊かついポチってしまうのでした。(以下、そのうち続く)
こちらの記事もどうぞ。 iwasiman.hatenablog.com
