オセロ作ってみた|パート3〜オセロの構造を定義する〜

クラスを定義する

export class board {}
export class row {}
export class squares {}
export class Point {}

enumを定義する

enum（イナム）とは列挙型と呼ばれていて次のような特徴があります。

• 使うことができる複数個の定数を明確にできる
• 使い回しがきく

ただし現在のTypeScript公式ドキュメントではenumの利用が非推奨となっています。

理由は主に3つ

1. enumにアクセスするとき本来意図しない方法でアクセスできてしまう場合がある
2. バンドル時、enumの部分がデッドコードになる可能性がある。（Tree-shakingが効かない）
3. `TypeScriptのコンパイルオプション--isolatedModules`を利用するとコンパイルエラーになる。（そのためファイルごとに単一のモジュールとしてコンパイルを実行できない）

TypeScriptという言語の性質上この問題に関しては仕方がない部分があります。

ですが今回はenum（イナム）を使用します。

理由は、

定義するenumについて

enum（イナム）で定義するSquaresStateの役割はマスの状態を定義することです。

マスの状態は全部で3パターン考えられます。

• なにもない（初期状態）
• 白い石が置かれている
• 黒い石が置かれている

これを定数になおすと、

• None→なにもない
• White→白い石
• Black→黒い石

のようになりました。

これらの要素、コーディングの方針（キーの明示的な割り当て）をコードとして表現すると次のようになります。

export enum SquaresState {
    White = "white", // 白い石が置かれている
    Black = "black", // 黒い石が置かれている
    None = "node", // 何もない
}

ここまでできたら下のような状態になっていると思います。

export class board {}
export class row {}
export class squares {}
export class Point {}
export enum SquaresState {
    White = "white", 
    Black = "black", 
    None = "none", 
}

ここからはそれぞれのクラスへ処理の実装をしていきましょう。

[...Array(n).keys()].map(…)について

ちょっとこの部分は複雑なので解説します。

というのもこの処理他のソースコードでもたまに出てくるやり方で、指定した数(n)の要素をもつ配列を自分の欲しい形式で作り出すことができます。

まずこのまま実行するとどうなるかというと、

/* 
[...Array(8).keys()].map((i) => new row(i));
の実行結果
*/
[
    rowクラス,
    rowクラス,
    rowクラス,
    rowクラス,
    rowクラス,
    rowクラス,
    rowクラス,
    rowクラス,
]

こんな状態になります。

今回は8個のrowクラスを持つ配列を作りたかったのでこれでOKです。

ではどのような処理の結果こうなったか、簡単に解説します。

まずrowクラスを格納するための8つ要素をもつ配列を用意します。

Array(8)
// 実行結果
[
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
]

この時Arrayメソッドは指定された長さの配列を返します。

次にkeysメソッドを使います。

keysメソッドは配列の各要素のキー名を順に出力するイテレータを返すようになっています。

Array(8).keys()
// 実行結果
{}

JavaScriptのイテレータはスプレッド構文で展開することができ、keysメソッドのイテレータを展開すると配列のキーを取得できる。

...Array(8).keys()
// 実行結果
0,1,2,3,4,5,6,7

このままでは次に使うmapメソッドを使えないので配列にしておきます。

[...Array(8).keys()]
// 実行結果
[0,1,2,3,4,5,6,7]

ではここからmapメソッドを使って配列の値全てに処理を実行します。

[...Array(8).keys()].map()

mapメソッドは（）内に関数を定義することでその処理を配列の全ての要素に実行し新たな配列を作ってくれます。

[...Array(8).keys()].map(()=> new row())

一旦はこのままでもいいのですが、今回は元々入っている値をrowクラスに渡してそのまま行番号にするようrowクラス内部で処理をする予定なので引数を渡しておきます。

[...Array(8).keys()].map((i)=> new row(i))

出来上がった配列をクラス変数の初期化のために代入します。

this.row = [...Array(8).keys()].map((i) => new row(i));

これでboardクラスにrowクラス8個を配列として持たせることができました。

今の時点でこんな感じになっていればOKです。

export class board {
    public row:row[]
    constructor(){
        this.row = [...Array(8).keys()].map((i) => new row(i));
    }
}
export class row {}
export class squares {}
export class Point {}
export enum SquaresState {
    White = "white", 
    Black = "black", 
    None = "none", 
}

rowクラスの役割

• 盤面の行を定義するクラス
• 全部で８つのSquaresクラスを持っている
• (行番号がある)※後から追加

rowクラスはboardクラスで解説したやり方で、Squaresクラスを8個持つ配列を作ります。

ちなみにこの後実装予定のSquaresクラスも引数として座標を受け取るようにしたいのでここで値を渡しておきます。

rowクラスの引数はそのまま行番号としたいので

export class row {
    public Squares:squares[]
    public RowNumber:number
    constructor(num:number){
        this.RowNumber = num;
        this.Squares = [...Array(8).keys()].map((i) => new squares(i,num));
    }
}

メンバー変数(RowNumber)に格納しておきます。

rowクラスはメインの役割が行の表現なので、rowクラスとしての実装はこれで完成です。

ここまでの作業で下のような状態になっていれば大丈夫です。

export class board {
    public row:row[]
    constructor(){
        this.row = [...Array(8).keys()].map((i) => new row(i));
    }
}
export class row {
    public Squares:squares[]
    public RowNumber:number
    constructor(num:number){
        this.RowNumber = num;
        this.Squares = [...Array(8).keys()].map((i) => new squares(i,num));
    }
}
export class squares {}
export class Point {}
export enum SquaresState {
    White = "white", 
    Black = "black", 
    None = "none", 
}

オセロシリーズ記事

• オセロ作ってみた
• オセロ作ってみた|環境構築
• オセロ作ってみた|パート2〜ディレクトリの最適化
• オセロ作ってみた|パート3〜オセロの構造を定義する

参考になりそうな関連記事

• イテレータに関する記事