ゆとりエンジニア

しゃべドミ2017年4月参加記録

いつもドミニオンレポートを書こう書こうと思って書けないので,今度こそ書いた. 5月にも参加したのに,4月のレポートから.

はじめに: 開催してくれたヒロタシさん,プレイしてくれた方々,ありがとうございました.今回も非常に勉強になりました.

なお,遅刻したので1, 2回戦に敗退.

1回戦

  • 人数と手番: 3人1番手
  • 順位: 2位
  • サプライ (基本): 木こり,村,改築,鍛冶屋,玉座
  • サプライ (帝国): 冠,王室の鍛冶屋,農家の市場,ワイルドハント,公共広場
  • イベント: 儀式
  • ランドマーク: 果樹園

初手

改築,銀貨

読み

銅貨の破棄は厳しいものの,屋敷を破棄できる改築,そしてアクション,購入,ドローを増やせるカードが多数あり, ランドマークは果樹園,しかも3人戦なので,コンボに行かない手はない. コンボに行く場合,どのような手順で構築をするかは大事だと考えている. このサプライの場合,銅貨を破棄して圧縮するのは難しいので,玉座や冠だけでは,毎ターン安定してコンボをつくるのは難しい. そう考えると,安定とあわよくば他のプレイヤーの果樹園の妨害のためにとにかく村を集めることは先決であると考えた. そして最終的には,村,玉座,冠で増やしたアクションでワイルドハントを回し,コンボの終盤に獲得とした屋敷を 改築で破棄して屋敷や玉座などに変えて優位なうちに3山を枯らす形や,農家の市場で購入とコインまたはVPを獲得しつつ 属州を枯らせる形に持っていきたいと考えた.

序盤

改築がボトムに沈み,やっと改築を引いたターンは屋敷と被らなかったため,手番差もなにもかも失い死亡. 序盤の3,4金は,苦しいが村を優先し,3枚は確保した.

中盤

3番手が農家の市場に行ったのを見て,こちらも農家の市場を加えつつ,改築で屋敷を玉座にし, 果樹園を考えて公共広場を適宜加えつつ,ワイルドハントもちゃんと集めて最終形には近づけた.

終盤

引き切りに近い形になる前後くらいで,村,ワイルドハント,玉座の3山切れで終了. 最終的に村,玉座,公共広場,ワイルドハントは3枚づつ集められたが,勝利点カードを購入することができるターンはほぼなかった. 2番手は初手5-2でワイルドハントパスでワイルドステロに近い形だったが,シャッフルが悪くてうまく回っていない様子だった. 3番手は,改築-農家で入り,村を改築でさっさと集め,引きもミスもなく安定したコンボデッキを作り,3山を枯らして終了.

反省

大きなプレイミスはなかったと思いたいが,1番手で村を3枚しか集められなかったのは問題.

2回戦

  • 人数と手番: 3人3番手
  • 順位: 1位 (ルールミスあり)
  • サプライ (基本): 地下貯蔵庫,礼拝堂,工房,市場,冒険者
  • サプライ (帝国): 城,元手,市街,神殿,陣地/鹵獲品
  • イベント: 掘進
  • ランドマーク: 塔

初手

工房-礼拝 (だった気がする)

読み

破棄,アクション,購入,VPを手軽に集めらえるカードがあって3人戦なので,またもやコンボせねばという気持ちになる. さらに塔もあるので,購入をつけて自分が優位な山を枯らすことも考えたい. 陣地,市街で手軽にアクションが集められるとはいえ,ドローが安定しなさそうなところがコンボする上で不安なサプライだと感じた. 市街のドローと陣地で金貨/鹵獲品を公開するためにも,破棄速度は重要だと考えて神殿より礼拝堂を初手に選んだ. 工房は,序盤は陣地を集め,後半は地下貯蔵庫を集めて市街と回転を安定させる,または城の序盤のカードを獲得するために序盤から終盤まで役立つはずなので,選んだ. 最終形は,陣地と市街と地下貯蔵庫で引き切りまたはそれに近い形を作り,市場と鹵獲品で購入,コイン,VPを毎ターン安定して出しながら,属州を枯らしていくスタイルを想定していた.

序盤

掘進と塔の存在を忘れていた.1番手2番手は礼拝堂を使いつつ掘進でひたすら銀貨を集めていた. 銀貨の山は40枚なので,2人で集めきれば1人あたり20点を出す. 次の計算のためにわかりやすく言い換えると,銀貨は1勝利点のついた2金出す財宝カードである. ひたすら掘進を使うと,そのカードを1ターンに3枚くらいは確実に獲得できる. しかし,冷静になって計算してみると,鹵獲品の方が強いと自分で結論づけた. 鹵獲品は,プレイするたびに1VPを獲得できる2金出す財宝カードである. 鹵獲品を4枚デッキに加えられた状況で,引き切りできるデッキを作れたならば,5ターン回せば20VPを獲得できる (ちなみに,3枚だと20点出すのは7ターン必要で,ちょっと大変だ). ということで,序盤の読みは変えず,掘進には手を出さなかった.

中盤

屋敷銅貨を礼拝堂で破棄する中,まず工房で陣地をひたすら集め,市場も加えた. 陣地は1枚だけカットされたが,銀貨が詰まった他人のデッキの陣地は,デッキに沈められない限りサプライ戻ってくるので気にしない. 鹵獲品が公開されてからは,アクションフェイズの陣地で,金貨/鹵獲品の公開を調整 (または運がなく非公開) し,購入フェイズで鹵獲品を購入しつつクリーンアップフェーズに陣地をサプライに戻すプレイをして極力鹵獲品を他のプレイヤーに渡らないようにした. 最終的に鹵獲品を4枚獲得してからは,コインは出るのでほぼ無借金で市街を購入し,地下貯蔵庫と合わせて引き切りに近いデッキを作った.

終盤

掘進に進んだ2プレイヤーは,銀貨が枯れた後は,(鹵獲品カット以外は) 属州をひらすら購入してゲームを終わらせに向かっていた. こちらのデッキは,毎ターンそれなりに安定した引き切りによる購入とコインと工房による獲得があるので,デッキが完成したタイミングで城を目指した. 城を目指す理由は,単純に城の勝利点と,ゲームが遅くなることによる鹵獲品のVP目当てだ. 後は流れで城を集め続け,銀貨,城,陣地/鹵獲品の3山切れ (実は違う)でゲームが終了. 城とVPのおかげで勝利点は1位.

反省

実は,城が枯れたターンに運悪く陣地を1回公開できなかったので,実はゲームは終了していなかった. しかし,勝利点を数え初めてしまった. 僕のデッキは陣地/鹵獲品が枯れることによる塔の8,9点を無視しても,優位に差がついていて,かつゲームを長引かせても優位は揺るがなそうだったので, 全員で合意の上,ゲームは終了とした. ドミニオンはクリーンアップ時に複雑な処理が存在するカードが幾つかあるので,3山や属州を切らしたターンでも,(特に今回は自分のターン) クリーンアップフェイズに何か処理がないか注意する癖をつけなければと深く反省.

3回戦

  • 人数と手番: 3人3番手
  • 順位: 1位
  • サプライ (基本): 金貸し,玉座,改築,庭園,議事堂
  • サプライ (帝国): 庭師,軍団兵,冠,投石機/石,生贄
  • イベント: 徴税
  • ランドマーク: 汚された神殿

初手

4金-3金で銀 (1借金をその場で返した) - 投石機 (0借金)

読み

徴税がある上,初手4金かつサプライに2金で有力なカードがないので,初手は泣く泣く3金のカードを2枚購入した. それより問題なのは,破棄カードはあるが手札の枚数を減らすアタックカード (ハンデスカードと呼ぶことにする) が2つもあることだ (そして全プレイヤー初手で投石機を入れた). 個人的な経験上,ハンデスカードがある場は,全員属州に手が届きづらく場が遅くなるので, 毎ターン安定してハンデスカードをプレイしつつ引き切りに近いデッキの構築を用意できるサプライなら,そのデッキを他のプレイヤーより先に仕上げる方が重要だと考え,それを目指すことにした. 汚された神殿もあるが,呪いはこの場の破棄カードと相性がわるいので,8VPなど乗っていてもデッキ完成を優先する気でいた. したがって,3, 4ターン目は手札を減らされてもそれなりに金量を出せる金貸しと屋敷を破棄できる生贄や改築を入れていけば良いかなと考えていた. 最終形は,屋敷と銅貨を全て破棄し,玉座or冠 (まとめてx2アクションと呼ぶ) 4枚以上,庭師4枚以上,軍団兵1,議事堂1,金貨1-2だ. 特にx2アクションと庭師は,追加アクションとVPとハンデス対策のために枚数が必要なカードたちだ. 他のプレイヤーによるハンデスを受けたとき,残すカードはx2アクションと庭師と何かアクションを用意しておけば,とりあえず村スタートができるので,議事堂や軍団兵と金貨を引けば,毎ターンしたい仕事はできる. 後は適当に属州を購入すれば勝てるだろうと考えていた.

序盤

「読み」の項目で全然取り上げていないのでわかると思うが,徴税の場の支配力を考えないので焦っていた. まず,ハンデスされると毎ターン2-4金程度しかでないし,前回の借金を残している場合もある. すると,(自分を含めて) 全員なかなか5金をだせないので,銀貨や投石機,の購入が増え,さらにハンデスが進む. ハンデスが進むと,全プレイヤーは他に候補がないので徴税し,借金が乗せられていないカードには借金が乗っていった. ここで,他のプレイヤーが生贄を入れる中,さっさと機転を利かせて改築を入れたのは正解だった (後々考えると,生贄も金貸しよりもはるかに優先度が高い). 庭師を入れることを考えていたのに,改築を破棄の候補の一つでしかないと考えていたのはおかしかった. 序盤に入れた投石機は,銅貨の破棄に使い,改築は屋敷を破棄して玉座に変えていった. 破棄したターンは大抵金量がでないので,そのときは徴税で改築に借金を乗せた (最終的に6借金のった).

中盤

3人 (or 4人戦も?) 戦だと,絶対に必要なカードでも,6借金乗っていると買えないもののようで,以後だれも改築を購入するプレイヤーはいなかった. 一方のプレイヤーが6借金を受け取ると,改築を持っていない他方のプレイヤーがその負担を背負わないことは許しがたいという雰囲気があった気がした. 予想だが,2人戦だったら6借金でも (そのゲームで最重要なカードなら)躊躇なく買うのではないかと思った. 改築が購入されない限りは,他のプレイヤーが徴税するたびに改築を持つ自分が優位になっていくになるので,他のプレイヤーとのデッキ構築速度に大きく差をつけることができた. 他のプレイヤーは,構築速度が遅いので途中から軍団兵 or 議事堂ステロっぽく動く中,自分のデッキは最初に描いていた最終形に近づけていった.

終盤

軍団兵を打たれたターンは辛かったが,議事堂のアシストもあり,x2アクション-x2アクション-(庭師, 議事堂)-軍団兵 という王道の形をそれなりの頻度で実現できたので,庭師がちゃんと集まったタイミングで大量にVPを稼いで終了させた (確か属州切れ). 最終ターンは庭師を (確か) 4並べ,議事堂,軍団兵で3購入6金出し,改築で金貨2枚を属州2枚にし,購入は屋敷3枚に当てたので,39勝利点を加えて1位.

属州x2 + 屋敷x3 + 庭師4VPx5 = 16 + 3 + 20 = 39

反省

徴税場の初手がいつもわからないで適当にプレイしてしまうのをやめたい.

4回戦

  • 人数と手番: 3人3番手
  • 順位: 1位 (同率一位,ルールミスあり)
  • サプライ (基本): 民兵,地下貯蔵庫,礼拝堂,祝祭,金貸し
  • サプライ (帝国): ワイルドハント,女魔術師,冠,元手,生贄
  • イベント: 儀式
  • ランドマーク: 壁

初手

民兵-礼拝堂

読み

ランドマークが壁で,礼拝堂や金貸し,生贄など優秀な破棄カードが揃っているので,破棄を終えてから動き出したいと思える場に見えた. また,民兵というハンデスカードはあるが,追加アクションとドローが優秀な場で,かつデッキを安定感を高めてくれる (と個人的に思っている)女魔術師もいる. 特殊勝利点の稼ぎ方も,ワイルドハント,生贄,儀式があり,うち2つは破棄によるVP獲得なので壁との相性も悪くなさそうに思えた. デッキの最終形として考えたのは,次のような流れを毎ターン行うことだった.

アクションフェイズ - (女魔術師によるドロー) - 冠, 祝祭, ワイルドハントによる引き切り - 最後のワイルドハントによるVPと,獲得した屋敷カードの生贄による破棄 (2VP) - 民兵 - 礼拝堂による呪いの破棄 (イベントの儀式により前ターンに獲得した場合) - 女魔術師を毎ターン2枚相当プレイ (女魔術師x2 or 冠-女魔術師)

購入フェイズ - 属州購入 - 儀式で属州をVPに変換

このデッキを完成させる場合,壁でマイナス点が入る15枚をゆうに超えてしまうだろうとは予想したが,所詮10枚超えてもマイナス10点であり,上記の流れでプレイできば,デッキ枚数を大きく増やすことなく大量のVPが獲得できるはずなので,それを承知で目指すことにした.

序盤

初手の礼拝堂が3 or 4ターン目に民兵と被らずに引くことができたので,そのターンはカードを全て破棄してパスし,5ターン目に来た民兵で5金を出して祝祭を加えるなど,最終形に向けて良い動きができていた. 他のプレイヤーの動きは,一方が自分と似たような構築で,もう一方が元手礼拝堂からの冠-元手-儀式だった. しゃべドミなので,次のような戦略を考えていると教えてくれた.

  • 5-2 なので初手は元手-礼拝堂
  • 冠1, 金貨1枚入れて冠,元手,金貨,礼拝堂の4枚にまで持っていく
  • 後は毎ターン,手札と借金に応じて次の行動をする
    • 冠-元手の金量で属州を購入
    • 礼拝堂で呪いを破棄
    • 手札の属州を儀式でVPに変換
    • (冠-)金貨で借金を返す

この戦略は,儀式を使うことにより壁の15枚制限を下回りながらVPで勝利点を稼ぐことができ,民兵によるハンデスの影響を受けても属州を買いやすい良い戦略だと思った.

中盤

冠-元手によるプレイは圧倒的に構築が早く,かなり早い段階で上記のデッキを作り出し,属州を購入し始めていた. 一方,こちらも3, 4, 5ターン目の引きが良い関係でかなり早くデッキ構築ができ,10ターン前後で最終形に近い形を作り出せた. (もう一方の方は引きがあまり良くなくて,デッキの構築があまりうまくいっていないようだった) ゲーム開始時に考えていた最終形は,女魔術師を毎ターン2枚プレイできてからほぼ無事故で回すことができた. - 毎ターン1枚の時点では安定しなかったので,やはり2枚必要だった ただし,完成した時点で冠-元手-礼拝堂との属州の購入枚数の差は大きく,かつデッキも20数枚で壁のマイナスも確実なので,追い付けるかは不安だが,信じて回し続けていた.

終盤

ゲームをプレイしている時には計算していなかったが,今計算してみると,最終形のデッキの毎ターンのVPトークンは,だいたい次くらいだった.

儀式(属州) 8VP + ワイルドハント n VP + 生贄 2VP = 10 + n

ワイルドハントは,自分のドローだけで6以上のVPを乗せられたと思う. 属州購入および儀式による呪い獲得でVP以外の勝利点も動くが,毎ターンデッキに入っては破棄されるので,純粋な増分は上のVPだけだったように思う.

3人戦かつ,自分と似た構築をした人がうまくデッキを回せないおかげか,属州切れが想像より遅くなったので,冠-元手-儀式プレイにおいつき,同率一位でゲーム終了.

反省

このゲーム,実はルールミスがあった. 女魔術師のカードの効果は次のようになっている.

Until your next turn, the first time each other player plays an Action card on their turn, they get +1 Card and +1 Action instead of following its instructions. At the start of your next turn, +2 Cards.

つまり,アクションフェイズにアクションカードをプレイしない場合,購入フェイズでもしアクションカードをプレイするようなことがあれば,そのカードはプレイ時にテキストに従う代わりに,+1カードおよび+1アクション (購入フェイズでは意味がない)という効果になる. 冠は,財宝としてもプレイできるが,カードとしてはアクション-財宝という2つの型をもつカードとしてプレイすることになるので,上記の条件に該当することになる. したがって,このサプライの場合は,冠-元手-儀式の戦略のためには,もっとテコ入れが必要だった.

ルールミスがあったとはいえ,属州購入までのターン数や,ランドマーク壁を活かせることもあり,4人戦ならこちらの構築が追いつかずにゲームを終わらせられる力があったとは思うプレイだった. 女魔術師の代わりに呪いの森だったら確実に負けていたと思う. その他細かなミスとして,属州残りが1or2枚の時に,始めてドローカードがない手札を引いた. このとき,終わりを見越して礼拝堂で4枚カードを破棄していれば,純粋に4勝利点に等しいかったが,破棄しなかった (実際そのターンに他のプレイヤーが属州を購入できるのはほぼ確実で,実際に購入されて終わった).

5回戦

  • 人数と手番: 4人4番手
  • 順位: 4位
  • サプライ (基本): 礼拝堂,鍛冶屋,市場,役人,冒険者
  • サプライ (帝国): 大君主,資料庫,庭師,公共広場,元手
  • イベント: 意外な授かりもの
  • ランドマーク: 水道橋

初手

銀貨-大君主 (4借金受け取り)

読み

礼拝堂と資料庫そしてそれらとしてプレイできる大君主があり,それを妨害するカードも特にないので,意外な授かりものを成立させるのが非常に簡単なサプライ. また,市場や元手,公共広場があるので金量さえあれば,簡単に属州+αの行動ができるゲーム終了が早そうなサプライ. しかも4人戦で4番手なので,無駄なターンは作れないという予想ができる. 戦略としては,銀貨-大君主で入って序盤は大君主を礼拝堂としてプレイしてデッキを圧縮し,途中で市場や資料庫としてプレイして,意外なものを成立させることが先決だと考えた. 次の行動は人によって分かれそうだが,余った金量と購入で庭師を買い,大君主を市場や資料庫,または庭師としてプレイして属州を毎ターン購入しつづけていくプレイを目指そうとした.

序盤

他のプレイヤーも戦略にあまり差はなく,銀貨-大君主または礼拝堂-大君主だった.ただ,後手番には,手番が早いプレイヤーが成立させた意外な授かりものによる水道橋のVPが無視できないほどたまるので,そこで考える場面がそれなりにあった. ただ,3番手にほとんどそのVPを獲得されてしまったので,4番手の自分は考えることなく,意外な授かりもののためのプレイしていた.

中盤

銀貨-大君主で入った1番手のプレイヤーが意外な授かりものを早々に成立させつつ,公共広場と市場をそれぞれ入れていたおかげもあり,あっという間に属州1or2枚を毎ターン購入する流れを作っていた. 自分は公共広場と庭師を1枚いれてから,属州を購入し始めたが,その時点で属州が3枚差くらいはあったと思う.

終盤

そんなものはない. 1番手が1位,2位は水道橋のVPをうまく獲得した3番手だった.

反省

このサプライで4人戦4番手に庭師を買うようなターンはない.

Vue.js で遊ぶ 3日目

Vue.js で遊ぶ 3日目

Tempalte Syntax

Interpolations

覚えれば良さそうなこと

  1. double curly braces を使って text interpolation
  2. v-html directive で plain HTML を挿入 (XSS には注意)
  3. double curly braces は HTML の属性に使うことはできないので,代わりに v-bind を使う
  4. double curly braces には JavaScript の任意の式がかける
<span>Message: {{ msg }}</span>
<div v-html="rawHtml"></div>
<div v-bind:id="dynamicId"></div>

{{ number + 1 }}
{{ collection.length > 0 ? 'Exist' : 'Empty' }}
<div v-bind:id="'list-' + id"></div>

Directives

  1. directive の属性の値は単一の JavaScript の式を期待している.
    • 例外は v-for
      • <li v-for='item in items'>{{ item }}</li> のような書き方をするから?
  2. いくつかの directive は : の後に引数のような形で何か値をとることがある
    • <a v-bind:href='url'></a>href
  3. いくつかの directive は,Modifier とよばれる . の後に特別な postfixes をとることがある
    • <form v-on:submit.prevent='onSubmit'></form>

Filters

double curly braces と v-bind でフィルタを利用できる

Shorthand

v-bind と v-on はそれぞれ,:, @ という省略記法がある

  • 他人の Vue.js のコードを読むときに参考にできそう

感想

完全に飽き始めている,とりあえず飛ばし読みして書いてみたほうが良い気がしてきた.

CSS と SASS

仕事上,CSSの勉強をしなくてはならないのだが,仕様が複雑で難しい.

さらに,SASS を覚えると便利だそうだ.なるほど,フロントエンド界隈は新しいものをどんどん取り入れられるのか.

例えば,次のような SCSS は,下のような CSS に変換される.

a {
  text-decoration: underline;
  &:hover {
    color: red;
  }
}
a {
  text-decoration: underline;
}

a:hover {
  color: red;
}

ネストできることと,親の参照をかけることは便利だ. 一方.& で参照すると,ソースコード全文検索するときに若干検索性が落ちそうだ.

Vue.js で遊ぶ 2日目

Vue.js で遊ぶ 2日目

執筆時間: 40 min

Vue.js 2.0 The Vue Instance

Constructor

すべての Vue vm は,Vue コンストラクタ関数によって root Vue インスタンスを作成することで起動するようになっているらしい. MVVM パターンとある程度関係があるようだ.

Vue インスタンスを作成するとき,オプションとして次の内容を含んだオブジェクトを渡すことができる

  • data
  • template
  • element to mount on
  • methods
  • lifecycle callbacks
  • … and more

すべてのオプションは API リファレンスを参照とのこと

また,Vue のコンストラクタは,コンポーネントのコンストラクタを作るために拡張できるらしい. 正直よく使い方がわからないが,後述とのことなのでそこまで待機.

var MyComponent = Vue.extend({
  // pre-defined options
})

var myComponentInstance = new MyComponent()

Properties and Methods

あらゆる Vue インスタンスは,data に存在する全てのプロパティをプロキシしているそうだ.

したがって,上の HTML に対し,ブラウザのコンソールで次のようなことができる.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var data = { message: 'Hello Vue.js' }
    var vm = new Vue({
      el: '#app',
      data: data
    })
  </script>
</html>
vm.message === data.message // => true
data.message = 'Goodbye Vue.js'

vm.message // => 'Gooldbye Vue.js'

ただし,注意点として,全てのプロパティがプロキシされているわけではないということだ.

また,Vue のインスタンスは幾つかの便利なプロパティやメソッドを公開しているらしい. これらは $ を用いてアクセスできるようだ.

先ほどの例に続いて,次のようなことを試すことができる.

vm.$data === data // => true
vm.$el === document.getElementById('app') // => true

vm.$watch('a', function (newVal, oldVal) {
  // このコールバック関数は,`vm.a` が変化した時に呼び出される
})

Instance Lifecycle Hooks

Vue のそれぞれのインスタンスは,一連の初期化処理を経て生成される. 例えば,次のようなものがある

  • データの監視のための準備
  • テンプレートのコンパイル
  • インスタンスの DOM へのマウント
  • DOM の更新 (データが変化したならば)

Lifecycle Diagram

Lifecycle に関する Diagram が公式のドキュメントに載っている.

Insance and Lifecycle Hooks

この図はなかなかいろいろな情報があって良い.

“el” および “template” オプションが存在すると,template を render 関数にコンパイル. “el” があり,"template" が存在しない場合には,"el" で指定した要素の outerHTML を template としてコンパイル.

今までの例で,"el" で指定して “template” が存在しなかったので,"el" で指定した要素の outerHTML を template としてよしなにコンパイルしていたのだろう.

感想

正直,そこまで面白くなかったので早く次に行こう.

Vue.js で遊んだログ

Vue.js で遊んだログ

中規模アプリケーションを作成するまでのログ

ログ

Vue.js で遊ぶ 1日目

Vue.js で遊ぶ 1日目

Vue.js で小規模〜中規模アプリケーションを作るまでのログ

お勉強なので,いきなりアプリ完成を目指すのではなく,適当な単位に区切って段階的に理解していく

開始時点の能力

  • HTML, CSS, JS は雰囲気で書いている
  • JS を使ったリッチなアプリの開発経験はない
  • browserify? React? なんだそれは…

Installation

Vue.js 2.0 のインストールガイド を参考に進む.

Vue.js は ECMASCript 5 の機能を活用するため,IE8 以下はサポートしていないようだ. そんなブラウザは隕石が降ってもいいだろう.

ECMAScript 5 については,ECMA-262 の 5th edition を見れば良い.

インストールガイドによると,スタンドアローンと,NPM の2つの方法があるようだ. いくつかの違いがあるが,template compiler の存在が大きな違いらしい. そんなのはとりあえずいいので,早く Vue.js が使いたいので CDN (スタンドアローン)を使うことにする.

Introduction

スタンドアローン版を使った Example が大量に乗っているので,そのまま動かしてみる.

Hello, Vuejs

次の例は,ただ body 要素に Hello,Vue.js! を埋め込む例だ.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello,Vue.js!'
      }
    })
  </script>
</html>

body 要素にテンプレートシンタックスmessage と記述されているが,実際のレンダリング結果は次のようになっている. f:id:ryotaz:20170213010112p:plain

Vue.js は,テンプレートシンタックスを利用して DOM に対しデータを宣言的にレンダリングすることができる.

directive

次は,directive (ディレクティブ) というものを用いた例だ. この v- から始まる directive は Vue.js から提供される特別な属性らしい.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
      </span>
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'You loaded this page on ' + new Date()
      }
    })
  </script>
</html>

Conditionals and Loops

条件分岐とループはつまらないので省略.

Event Listener

v-on directive は Vue のインスタンスのメソッドを呼び出すイベントリスナーを付加できる.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse</button>
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</html>

このメソッドは,DOM の変更を直接行っているわけではなく,単に app の state を変更しているだけである. DOM の更新はすべて Vue がハンドリングする.

したがって,Vue の利用者は,ロジックの記述に集中することができるとのこと.

two-way binding

v-model directive を利用して two-way binding を作ることができる.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      }
    })
  </script>
</html>

Composing with Components

次のようにインスタンスコンポーネントを登録できるそうだ.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
      </ol>
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    });

    new Vue({
      el: '#app',
      data: {
        groceryList: [
          { text: 'Vegitables' },
          { text: 'Cheese' },
          { text: 'Whatever else humans are supporsed to eat' }
        ]
      }
    });
  </script>
</html>

この例で,急にわからなくなった.

説明を読むと,props: ['todo']todo-itemtodo をカスタム属性のように受け取れるようにする. template は,コンポーネントを記述したとき (<todo-item></todo-item>),この template の内容に置換される ということらしい. この中に,さらに {{ todo.text }} という記述も可能なようだ.

このテンプレートとv-for, v-bind はどのような順序で展開や束縛が行われ,最終的に DOM に反映されるか正確に書いていないのでわからない. 意識しないでかけると信じ,雰囲気で理解したことにする.

今日はここまで. 正直退屈だったが次回以降楽しいアプリケーションが作れるための仕組みがたくさんあると信じる.

日記

今日は体調が悪いので早く寝る. 最近は歳をとって経験が増えたせいか,"風邪を引く"という兆候を読むのがうまくなった.