Rのつく財団入り口

ITエンジニア関連の様々な話題を書いているはずのブログです。

トップ > IT > 【感想】Hello Vue !!【Vue.js】【JavaScript】

【感想】Hello Vue !!【Vue.js】【JavaScript】

IT 読書 プログラミング JavaScript フレームワーク Vue.js フロントエンド

JavaScriptフレームワーク Vue.js 日本語で読める初の解説本

　現在注目の3大JavaScriptフレームワークの1つ、Vue.jsは公式サイトのドキュメントがよくまとまっていますが、なかなか書籍がないのが難点。とよくよくKindleを探したらありました。(タイトルがアルファベット、表紙も一見洋書っぽかったのでずっと洋書かと勘違いしてました…汗)
　作者ははてなブログ【チラシ裏日記上等！！新館】の nasum (id:Tomato-360) さん。2017/10の技術書オンリーイベント同人誌即売会「技術書典3」で頒布された同人誌、その後Kindleでも購入できるようになっています。Vue.js最新の2.5対応です。GitHubもあり、制作にもかなりツールを活用されたようですね。

Hello Vue !!

Hello Vue !!

  • 作者:nasum
  • 発売日: 2017/10/21
  • メディア: Kindle版
github.com

第1章 Vue.jsことはじめ

　Vue.jsとはなんぞやという話から。公式が提唱しているVue.jsの特徴である「Progressive Framework」(＝アプリの要求、複雑さに応じて使いやすさを変えていけるFW)についても解説があり、分かりやすいです。コミュニティ、ガイド、関連エコシステムについても一通りまとめられています。
　面白かったのは欄外のコラム、Vue.jsのマイナーバージョンごとのコードネームはアルファベットのAから始まり、その単語をタイトルに持つ映画・漫画・アニメから取られているという話。本書で初めて知りました。
　Aがまさかの『アニマトリックス』、BはSF映画不朽の金字塔の『ブレードランナー』、あとはC：カウボーイビバップ、D：ドラゴンボール、E:エヴァにFがなくてG：攻殻とインタァナショナルな作品が続きます。最新のv2.5はL："Level E"、漫画の『レベルE』なんだそうです。
フレームワーク作者のEvan Youさんは元GoogleのAngularJS開発メンバーにいたすーぱーエンジニアですが、このへんが分かる人なんですね。Oh, Cool Japan....
　本書と関係ないですがQiitaにも記事がありました。 qiita.com

第2章 Vue.jsのはじめかた

　最初は戸惑う始め方が4種類解説されています。

  • CDNで配信されているファイルを<script>タグで読み込む。.vueの単一ファイルコンポーネント形式が使えないが最初は十分。
  • npmでインストールし、実行時にWebpackやBrowserifyでトランスパイルする。
  • ボイラーテンプレートのvue-cliをnpmでインストールし、コマンド実行で自動で開発ディレクトリを作る。テンプレート一覧あり。初心者におすすめのテンプレートはwebpack-simple。
  • Ruby on Rails(v5.1.4)ではGemでwebpackerを使うと良い。rakeタスクでインストール後、コマンド実行だけでVue.jsに必要な設定ファイルやサンプルページ一式がプロジェクトに追加できる。

　さすがにRailsはこのへん時代の流れに反応して俊敏に対応していますね。PHPだとLaravelフレームワークが5.3から似たような対応をしています。

第3章 Vue.jsの基本的な使い方

　必ず出てくるJSコードで new Vue({ ..していくVueインスタンスの作成、ライフサイクルと対応メソッドの説明、インスタンス内のdataプロパティ配下が全て取り込まれて検知されるリアクティブシステムの例。
　ディレクティブの説明ではv-ifディレクティブや配列、オブジェクトの繰り返し、イベントなど、コード例やDOMへの描画例を交えながら解説しています。v-modelを使ったフォームのデータバインディングは、テキストボックス/複数行テキストエリア/単一チェックボックス/複数チェックボックス/ラジオボタン/セレクトボックス/複数セレクトボックス と例を含め一通り網羅しています。
　この辺は公式ガイドでも探すと出てきますが、実際の開発で一番よく出てくるところでもあるので、情報がまとめられていてよいですね。

jp.vuejs.org

第4章 ToDoリストを作る

　簡単なアプリケーションを実際に作ろうということで、お題はJSフレームワークの解説で大頻出、必殺のToDoアプリ。Vueインスタンスのdataプロパティに

data: {
    todo:"", // テキストボックス入力値とバインディング
    list: [], //textとstatusを持ったJSオブジェクトを1つのToDoとして、配列で持つ
},

のようにデータを持ってリアクティブシステムで管理する形で、ToDo登録、ステータス変更ができるものを作っていきます。明快で分かりやすいです。ToDoアプリは同じJSフレームワークであるReactの本なんかでも例によく出てくるので、比較すると両フレームワークの理解が深まると思います。

全国の提督勢へ電文発信…

　同人誌といえば込められたネタを探すのも楽しみのひとつ。擬人化された第二次世界大戦時の艦艇を育成して戦う某ブラウザゲームのアズールレーンじゃないほうで、レイテ沖海戦を攻略しちゃってたりしている全国の提督勢には、JSの沼を越え、フロントエンドの荒波を越え、暁の水平線を越え、HTTPの大空を越えてこの情報をお届けせねばなりますまい。
　本書3章のコード例には某金剛型高速戦艦4姉妹が何気なく使われています。最初はリスト表示例の文字列配列とフォームの複数チェックボックス例でまずこっそり半角英字のローマ字でジャブを打ってから、漢字を使うという念の入れよう。単一セレクトボックス例が秘書艦選択(秘書"官"になってるのはご愛嬌ですね)、複数セレクトボックス例が艦隊を組むための艦娘選択となっておりまする。
　秘書艦のselectedな値からすると4姉妹の中では榛名推しの可能性も推察されましたが、作者さんのブログのイベント記録を偵察すると嫁艦は他におりTwitterアイコンもドイツ艦のZ3マックスなので、違うようでもあります。おや……Vue.jsについての深い思索を巡らせていたらこんな夜中に誰か来たようd

まとめ：日本初のVue.jsオンリー本

(壁のしみからふっかつ)　JSの有力フレームワーク群では最近注目されているVue.jsですが、洋書はありますが日本語で読める書籍がなかなか出ず、秀和システム刊の2016年の『JavaScript フレームワーク入門』の中でFWのひとつとして取り上げられたぐらい。つい最近の2018/3/28にやっとKindle版のみで『速習Vue.js』が出ました。というわけで最初は同人誌ですが本書が、Vue.jsを扱った日本初のオンリー本、2018年3月末までは日本語で読める唯一の本だったということ...!
　内容はいちばんの基礎部分ですがよくまとまっており、お値段も尼でたったの300円です。Vue.jsを学ぼうとしている方で電子書籍環境があるなら、最初の1冊に読んでおくと良いと思います。次のイベントでも続編の予定もあるようです。

技術書典：技術書オンリーイベント

↑技術書典公式サイト。イベント4回目は2018/4/22(日)、東京秋葉原UDX アキバ・スクエアとのこと。

www.chirashiura.com ↑紙の本は1時間で完売したという「技術書典3」イベントのご様子。スマホ用で買えるようにAndroid公式アプリ作っちゃうあたりがさすがIT同人誌勢ですね。制作も今はMarkdown書式とかGitHubにリポジトリとかSlackで共有とかIT化されていろいろあるんですね。

　余談ですが僕も何を隠そう(って隠してないけどw)以前はジャンル的にはゲーム(電源不要)、マイナージャンルですがテーブルトークRPGとゆー分野で長く活動していてコミケも毎年行っていました。情報発信はWebベースという方針があったので紙の本は出したことなかったですが売り子の手伝い、原稿の校正、コンテンツ協力とか宣伝協力とかはしていて、よく挨拶回りとか終わった後の打ち上げとか行ってたのを懐かしく思い出します。
　あのへんの雰囲気やカルチャーもある程度分かるのですが、技術書でもこういうのやってるんだなあと思いました。本を作ったりイベントや打ち上げで盛り上がったり、あれはあれでなかなか楽しいんですよね。

追記：
そして本書は、加筆分を加えてあらためて商業書籍版が出るそうです。発売は2018/4/13。だんだんVue.jsの本も出てきましたね。 www.chirashiura.com