  def open(card_id)
    if counter.limit?(opened)
      board.face_down(opened)
      player.face_down
    else
      i = card_id * 3
      if cards[i] == "-"
        board.face_up(i)
        player.face_up(i)
      end
    end
    
    if counter.limit?(opened)
      if Judge.new.judge(cards[opened[0]+2], cards[index(card_id)+2])
        player.face_down
      end
    end
  end

i = card_id * 3をメソッドに切り出したので1行減りましたが、やはりif分岐の中でさらにif分岐しています。インデントが深くて気持ちが悪いです。

そこで、このopenメソッドを細かく切り出してみたいと思います。

2019-01-28

実践で学ぶオブジェクト指向② if分岐のネスト/デメテルの法則

オブジェクト指向設計 Rails 自作webアプリ5 神経衰弱

繰り返されるif分岐

今回はまず、GameMasterクラスのopenメソッドについて考えてみようと思います。
このメソッドはアプリケーションの中で一番行数が多く、まず着手すべき部分であることは自分でもすぐに分かりました。

以下が現状のコードです。

2019-01-27

実践で学ぶオブジェクト指向① 神経衰弱ゲームを設計する

Rails オブジェクト指向設計自作webアプリ5 神経衰弱

「理解していない」という事実を分かってなかった……

自分が今までオブジェクト指向設計を全く考慮せず、不安定なrubyの知識の上でMVCを理解しないままアプリケーションを積み上げていた、という衝撃の事実を先週知りました。

「コントローラーに処理を全部書いて、メソッドとして切り出せる部分は切り出してモデルに移す」ことでファットコントローラーを回避していると思いこんでいました……。
プログラミングを初めて8ヶ月くらい経ってます。独学は危ないね……

ということで、「オブジェクト指向設計実践ガイド」を読んだので実践してみたいと思います。

2019-01-14

test-utilsでVueのテストを書きたい②

Vue.js

webpack.config.jsの書き方が分かってとりあえずテストが動いた！

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      // この設定は.jsファイルと.vueファイルの<script>ブロック両方に適用される
      {
        test: /\.vue$/,
        loader: "vue-loader"

      },
      // この設定は.cssファイルと.vueファイルの<style>ブロック両方に適用される
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
          ]
      }
    ]
  },

  plugins: [
    // vue-loaderv15以降必須
    new VueLoaderPlugin()

  ],

}

.cssの記述は単一ファイルコンポーネント内でスタイル作ってる場合はいらないのかと勘違いしていたのが敗因だった！

2019-01-14

test-utilsでVueのテストを書きたい①

Vue.js

Vue.jsのテストもやらねばと思って色々やってみたがなかなか進まない。

test-utilsってVue.jsの公式テストライブラリを使ってみたんだけど、

 WEBPACK  Failed to compile with 1 error(s)

Error in ./app/javascript/router-view/zip-code.vue?vue&type=style&index=0&lang=css&

  Module parse failed: Unexpected character '#' (62:0)
  You may need an appropriate loader to handle this file type.
  | 
  | 
  > #zip-code {
  |   width: 100%;
  |   height: 100%;

npm ERR! Test failed.  See above for more details.

こんなエラーが出る。
.vueファイルのスタイルタグ部分には別途ローダーが必要ってことだと思うんだけど……。

webpack.config.jsでoptionにcss-loaderを指定したり、.vueファイルのcssを別の単一ファイルに抽出するextract-text-webpack-pluginというやつを使ったりしてるんだけど結果は変わらず。

webpackとかコンパイルとかwebpack.config.jsファイルについて調べても動きがよく分からないんだよなあ～～

困った！