はじめに

『数学ガールの秘密ノート／ビットとバイナリー』ネタ第二段です。

第4章では「フリップ・トリップ」というゲームが話題となっています。どんなゲームかは説明するより見た方が早いので、

負けとなる場合

勝ちとなる場合

つまり、

石を一つずつ反転させる
同じパターンを二回出したら負け
エラーにならずに全パターンを出したら勝ち

例によってTwitterで誰かが実装しているのを見かけたので、「今度こそWebpack使ってイマドキなJSを書こう」と
思ったものの試作品をin-browser Babel transformer使って書いてみたら100行ぐらいで書けたので、「これ別にガチでモジュール化する必要ねえな」と考え直し

Reactで書いたものをVueでも書いてみることにしました。コードは以下に置いてあります。
https://gist.github.com/junjis0203/4b26b3ef265879aa264f139f2ec13b5a

React実装

React版にはプロトタイプがありこちらになります。
https://gist.github.com/junjis0203/0910a106e7a8da2304f4fa648a6f9ed0

当然、「石」、「石をまとめたゲーム」というコンポーネントを作り実装したわけですが、とりあえず動かすのを目的に書いていたので「多分これReactの流儀に反してるな」と作りながら思っていました。具体的には

Stoneが状態を持っていいのか
Gameが持つ石全体の情報およびこれまでの履歴ってReact的な状態？とりあえず普通のインスタンス変数として持つか（あかん）
石全体情報（Gameのstones）って普通に書き換えちゃっていいのかな

そういえばReactのチュートリアルは○×ゲームだけどどうなってたっけと読み直してみたら疑問に思っていたことはすべて書いてありました。すなわち、

Stoneにはstateは持たせない。親コンポーネントからpropsで渡されたものを使って自身を描画する。クリックされたことは親に上げて親で状態の更新を行うべし。さらに描画以外にメソッドも必要ないのでクラスではなく関数で書けばよい。
履歴も状態である。
ミュータブルはよくない。イミュータブルにすべし。先にArray.slice()して複製を行え。

ということでチュートリアルに従って書き換えたら、
大体チュートリアルと同じプログラム構造になりました(笑)¹
https://gist.github.com/junjis0203/4b26b3ef265879aa264f139f2ec13b5a#file-fliptrip-react-html

Vue.js実装

次にReact版をVueに移植。
というより、Vueを使ったことがなかったので簡単なプログラムを移植してみてReactとVueの違いを眺めるというのが目的です。

というわけでガイドを読みながらまったり移植しましたが2時間ぐらいでできました。
https://gist.github.com/junjis0203/4b26b3ef265879aa264f139f2ec13b5a#file-fliptrip-vue-html

Reactとここが違うなと思った個所は

なおVue的にはapp.number = 4とするとReactiveに石の数が増える（ゲーム状態はリセット）ようにすべきな気がしますがそこはできていません。
→Vueのドキュメント読み直してやる方法を把握・実装しました。後述。

状態を保持するべきコンポーネントとイベントディスパッチの話

で、また浮上したのが「Vueの場合、状態は石が持つの？ゲームが持つの？」ということで、ガイドをざっと眺めた感じでは特に記述はなく、
「コンポーネントにdataを定義していいのだから石が持っていいのだろう。でもゲームにクリックされたことを使えないといけないし」とガイドを探したところ、イベントディスパッチの方法を見つけました。これを使うと石から盤、さらにゲームへのクリック通知が以下のように書けます。

fliptrip-vue.html抜粋

  Vue.component('stone', {
    methods: {
      handleClick: function() {
        this.toggle = !this.toggle;
        this.$emit('stone-click', this.index);
      }
    },
    template: `
      <div class="stone-wrapper">
        <div
          class="stone"
          v-bind:class="classObject"
          v-on:click="handleClick"
        />
      </div>
    `,

  Vue.component('board', {
    methods: {
      handleClick: function(i) {
        this.$emit('stone-click', i);
      }
    },
    template: `
      <div className="board">
        <stone
          v-for="stone in stones"
          v-bind:key="stone.key"
          v-bind:index="stone.index"
          v-on:stone-click="handleClick"
        ></stone>
      </div>
    `

  Vue.component('game', {
    methods: {
      handleClick: function(i) {
        // 反転、履歴への積み、勝ち負け判定
      }
    },
    template: `
      <div class="game">
        <board
          v-bind:number="number"
          v-on:stone-click="handleClick"
        />
        <div class="message">
          {{ message }}
        </div>
      </div>
    `

Reactの場合、イベントハンドラのプロパティが渡されてるか調べてから呼ばないといけませんが、この仕組みなら渡されなくてもイベントが無視されるだけなので安全ですね。

number再代入時に石の数が増えるようにする処理

単純移植したものだとapp.number = 4としても石の数がReactiveに変わらなかったのですがドキュメントを読んでたらReactiveにする方法がわかりました。

元々の実装では以下のように渡されたnumberからdataとしてstonesを作っていました。これだとnumberが変わってもstonesは変更されません。

friptrip-vue.html修正前抜粋

  Vue.component('board', {
    props: ['number'],
    data: function() {
      const stones = [];
      for (let i = 0; i < this.number; i++) {
        stones.push({index: i});
      }
      
      return {
        stones: stones
      };
    },
    template: `
      <div className="board">
        <stone
          v-for="stone in stones"
          v-bind:key="stone.index"
          v-bind:index="stone.index"
          v-on:stone-click="handleClick"
        ></stone>
      </div>
    `

stonesを作っているのはv-forが要素繰り返しだけでインデックス的な繰り返しが書けないと思っていたためですが、実はできることがわかりました。
整数ループを使うと以下のように簡潔に書くことができます。

frriptrip-vue.html修正後抜粋

  Vue.component('board', {
    props: ['number'],
    template: `
      <div className="board">
        <stone
          v-for="i in number"
          v-bind:key="i"
          v-bind:index="i"
          v-on:stone-click="handleClick"
        ></stone>
      </div>
    `

これで石の数は変わるわけですがゲーム状態をリセットしないといけません。これにはウォッチャを使用します。

frriptrip-vue.html修正後抜粋

  Vue.component('game', {
    props: ['number'],
    watch: {
      // reset game state when number is reassigned
      number: function(newNumber, oldNumber) {
        const stones = Array(newNumber).fill(false);
        this.history = [stones.slice()];
        this.fulltrip = this.error = false;
      }
    },

また石も全部白に戻さないといけません。$childrenを使うことで実装が行えますが、$childrenは使用を控えてくださいとなっていますね²。より良い方法を見つけたら書き直したいと思います。

frriptrip-vue.html修正後抜粋

  Vue.component('board', {
    props: ['number'],
    watch: {
      // reset stone state when number is reassigned
      number: function(newNumber, oldNumber) {
        for (let c of this.$children) {
          c.toggle = false;
        }
      }
    },

おわりに

というわけで秘密ノート／ビットとバイナリーで紹介されているフリップトリップをReactとVueで実装してみました。Vueは初見でしたがなかなかおもしろいなと思いました。

さて、フリップトリップですが必勝法があります。それは・・・、自分で読んで確認してください(笑)
https://note11.hyuki.net/

履歴の意味は異なりますが。 ↩
ドキュメントを呼んだわけではなく、デベロッパーツールでinspectしてて「あっこれ使えばいけそう」見つけたもので(笑) ↩