Help us understand the problem. What is going on with this article?

Refactoring第2版のサンプルコードをTypeScriptで実習する:part.0 Starting Point

More than 1 year has passed since last update.

Martin Fowler先生の名著『Refactoring』の第2版が、先日発売されました。

Refactoring第2版は、サンプルコードがJavaScriptになっているということもあり、普段JSを書くことが多い自分としては、「Fowler先生はどんなJSを書くのだろう」と気になっていました。

サンプルコードをそのまま写経するのも芸がないので、TypeScriptの学習も兼ね、サンプルコードをTypeScriptに置き換えてやっていくことにします。

JSのコードはTypeScriptのコードとしても有効なので、サボろうと思えばいくらでもサボれるのですが、できるだけ型を付けながらやっていきたいと思います。

なお、本記事のコードは下記リポジトリでも公開しています。
https://github.com/ryo-utsunomiya/refactoring-2nd-ts

何回かに分けて書く予定ですが、まずはセットアップと最初のコード。

セットアップ

開発用ディレクトリを作って、必要そうなものを入れます。

# npm設定を初期化
$ yarn init -y

# tsc(TypeScriptコンパイラ)
$ yarn add -D typescript

# .tsを食わせると即実行できる便利コマンド
$ yarn add -D ts-node

# Node.js用型定義
$ yarn add -D @types/node

package.jsonはこんな感じで

package.json
{
  "name": "refactoring-2nd-ts",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch"
  },
  "devDependencies": {
    "@types/node": "^10.12.10",
    "ts-node": "^7.0.1",
    "typescript": "^3.1.6"
  }
}

tsconfig.jsonはこんな感じ(nodeでの実行を想定)

tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2018",
    "sourceMap": true,
    "types": ["node"],
    "resolveJsonModule": true
  },
  "exclude": ["node_modules"]
}

できたら適当に実行してみると良いと思います。

$ echo 'console.log("hello")' > hello.ts
$ yarn ts-node hello.ts
...
hello

以上でセットアップ完了。

Starting Point

次に、最初のサンプルコードを動かしてみます。

invoices.jsonとplays.jsonは省略。

最初の時点での、領収書発行関数(statement)は以下のようになっています。

statement.ts
interface Performance {
  playID: string;
  audience: number;
}

interface Invoice {
  customer: string;
  performances: Array<Performance>;
}

interface Play {
  name: string;
  type: string;
}
export function statement(
  invoice: Invoice,
  plays: { [playID: string]: Play }
): string {
  // 関数の中身は書籍と同じなので省略
}

これだけだと動作確認ができないので、動作確認用のファイルを別途用意します。

index.ts
import { statement } from "./statement";
import * as invoices from "./invoices.json";
import * as plays from "./plays.json";

invoices.forEach(invoice => {
  console.log(statement(invoice, plays));
});

実行してみると、以下のように請求書が出力されることがわかります。

$ yarn ts-node index.ts
...
Statement for BigCo
  Hamlet: $650.00 (55 seats)
  As You Like It: $580.00 (35 seats)
  Othello: $500.00 (40 seats)
Amount owed is $1,730.00
You earned 47 credits

ここをStarting Pointにして、リファクタリングを進めていきたいと思います。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away