coffeescript 独学で作ったゲームのリファクタリング

Question

独学でhtml とcoffeescriptでマインスイーパーを作りました。
プログラミングを少し教えてもらっている人に見てもらったところ、関数の使い方？とかがめちゃくちゃらしく、

app =
  initialize: ->
    console.log '1'
    @setBind()
  setBind: ->
    @関数
$ ->
  app.initialize()

のように整理するように言われました。
しかし、独学で進めてきたもので上のような書き方の作法？が掲載されているサイトもなかなか見つからず、どのように悪いのか、どう直していけば良いのかアドバイスを頂きたく、質問しました。

コードは
こちらです。
長文かつとても煩雑なコードになっており別urlにしました。申し訳ないのですが回答いただけると嬉しいです。

Answer 1

「めちゃくちゃ」と言うほど悪くなく、現状でも組めてるとは思うんですが、
開発規模が大きくなってくると、リファクタリングが必要になるでしょう。

たとえば麻雀だとか、より複雑なプログラムを組むには何千行か必要ですし、
さらに言えば、商業ゲームのコードは何万行、何十万行にもなります。

コードの規模が大きいと、全体を把握できなくなるので、組み方を変える必要があります。

---

リファクタリングの技法にもいろいろありますが、
もっとも基本になるのは、「メソッドの抽出」です。

現状では、右に弓なり（＞）の形をした、典型的な手続き的なコードです。
長いif文やfor文を分解して、関数やメソッドにくくり出していきます。

最初はかえって分かりづらいと思うでしょうが、慣れると元に戻りたくなくなります。
リファクタの第一歩として、コード全体をクラスやメソッドに分割してみてください。

Comments

[退会済みユーザー]

回答ありがとうございます。メソッドの抽出、やってみます。

Answer 2

ほぼ独学でここまで書けるとは素晴らしい！
経過としては非常に良好じゃないでしょうか？

改善点を挙げるならば、LLmanさんが仰るように少しばかり処理に着目しすぎです。
メソッド、関数、オブジェクトの責務。。。ようするにこれは何をするものなのかを上手に命名していく所が課題になっていくことでしょう。

...のように整理するように言われました。

質問文にある○○のように修正は、
オブジェクト指向プログラミングとしての解決方法ですね。
例のままだとあまりに投げっぱなし過ぎてオブジェクト指向とはなんたるかの解説もセットでなければまともなコードにはならないでしょう。

オブジェクト指向プログラミングを覚える事は今後どれだけプログラミングするかにもよりますが、
エンジニアとして力を付けて行くには必ず抑えておくべきでしょう。

関数の使い方？とかがめちゃくちゃ

この辺は英語と論理のあわせ技なので、中々説明し辛い事なのです。
そうですね…例えば今回使われているopenの関数に着目して説明します。

openは動詞です。
「マインスイーパーゲーム内のページ」でopenを実行してくださいと言われたら、普通は何を想像しますか？
因みに私はフィールド内の灰色で表示されている、開かれていない1マスを開く行為かな？と想像します。

ですが実際のコードは…TD要素にClickにイベントを設定することがopenと定義されている事が確認出来ます。

今晩にでもGistかなんかで追記しておきますが、変数、関数、メソッドの命名は超絶大事です。
Coffeeの強みはRuby譲りの英文チックな構文でプログラミングが出来る事に尽きるので、
この辺読んで予習しておいてください。
booleanを返すメソッドの命名規約

Comments

[退会済みユーザー]

回答ありがとうございます。オブジェクト指向...ですか。javascriptの勉強はあまりしておらず、最初からcoffeeとjqueryを導入してもらい勉強をスタートしました。さらに、今の作業の進め方は、こういうこと（例えば、テーブルを自動生成したい。）をしようと思ったらそれを調べてみるという感じで、オブジェクト指向はともかくjavascriptの本質的な理解もできていないため、調べて出てきたサイトを見ても、？　となることが多く作業が詰まることが多いです。