TypeScriptで「ヒーリングっど・プリキュア」を実装してnpmパッケージとして公開した

作ったもの

www.npmjs.com

モチベーション

• TypeScriptで何か作りたかった
• プリキュアの各言語での実装まとめ - Qiitaを見ていて、TypeScript実装がなかったので一応作った（最新のプリキュアのみ対応）
• npmパッケージを公開したことがなかったので試してみたかった

以下感想

クラス設計（モデリング）の難しさ

• やっぱりOOPのクラス設計は悩む
• 最初はプリキュア毎にクラスを作ったが何か違う感があった（例えばCureFontaineクラス, CureGraceクラス...）
  • new CureFontaine()でインスタンスを作るが、キュアフォンテーヌは1人しかいないはず（シングルトンにしてもいいけど...）何か違う
• というわけで、ここでは状態をモデリングするのが多分妥当だろうと結論付けた
  • 各プリキュア毎に、人間状態、変身状態クラスを定義しPrecureクラスのインスタンス作成時に注入する（new Precure(new fontaine.Human())みたいな感じ）
  • 違和感が解消されプリキュアという概念を正しくモデリングできている（と思う）
  • 変身時の共通の口上はHumanState, PrecureStateクラスで定義して継承すれば変更にも強い（例えば変身時にはプリキュアによらず「スタート！プリキュア ・オペレーション」と出力する）

Stateパターンによるタイプコードの置き換え

• 状態のモデリングの着想はここから得た
• プリキュアは変身前後で2つの状態を持ち、状態に依存して振る舞いが変わる（名前や技、変身の可否等）
• インスタンスに状態を示す変数を持たせて、メソッド内で状態に応じて分岐させることもできる（例えばisTransformedを定義して、if文で分けて...等）
  • しかし、状態や状態固有のロジック等が追加されていくと辛くなる（例えば2段階変身が追加されたり、感情が追加されて振る舞いが変わるとか）

  • クソコード動画「switch文」 #ooc_2020 pic.twitter.com/USTrFcRCAS

    — ミノ駆動 (@MinoDriven) 2020年2月16日

• Java言語で学ぶリファクタリング入門でState/Strategyによるタイプコードの置き換えというパターンが紹介されていることを思い出したので適用してみたらけっこう良い感じになった
• 状態が増えても固有の振る舞いが追加されても非常に見通しが良い

npmパッケージを公開

• npmのアカウントさえあれば本当にすぐ出来る
• ローカルでは$npm packして生成したtarを$npm install path/to/tarして動作検証可能

TypeScriptの言語仕様

• クラス定義周りの言語仕様で、Javaと同じだと勝手に思っていたというか「そういえばそうなんだな」という発見があった
  • Reactのコンポーネントクラスの実装と0からのクラス設計では使う言語機能が違うからかもしれないし、単にTypeScriptを書く量が不足しているのかもしれない
• 例えば
  • enum classは定義できない
  • innner classは定義できない
  • クラス内でthisは省略できない（Javaのサンプルコードを読んでいて、そういえばとなった。TypeScriptはやはりJavaScript）