kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

React Hooks 入門 : useEffect() を試す

React 16.8 で追加された新機能「React Hooks」は React の機能を効率的に使えるようにする仕組みで,具体的には useState() や useEffect() などを使う.日本語化されたドキュメントが非常に読みやすく,以下のドキュメントを読むと React Hooks の概要を学べる.特に「1. フックの導入」を読むと,どんな課題を解決するために React Hooks が登場したのか?という歴史的な背景を学べる.

ja.reactjs.org

また「2. フック早わかり」を読むと,よく使う React Hooks の機能と Custom Hooks の紹介もある.そして「なぜ Hooks という名前なのか?」という意味も学べる.hook into と書かれていて,なるほどー!と思った.

フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。

ja.reactjs.org

副作用フック : useEffect() を試す

ja.reactjs.org

今回は「4. 副作用フックの利用法」を読みながら useEffect() を試す.まず,ドキュメントに載っているコードを create-react-app と TypeScript で書き直すと,以下のようになる.React Hooks 的には count State を useState() で定義し,さらに count State をタイトルに反映する useEffect() を定義している.

import React, { useState, useEffect } from 'react';

const App: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

ボタンを押すと,画面とタイトルを更新できる.React コンポーネント内にある DOM を更新したり,外部データを取得したりすることを「副作用」もしくは「作用」と表現し,英語では「side-effect」もしくは「effect」と表現する.

f:id:kakku22:20191022014857p:plain

クリーンアップ

従来 React でクリーンアップをするために実装していたライフサイクル componentWillUnmount() を React Hooks で実装する場合,useEffect() から関数を返せば良く,シンプルな実装になる.以下のように return で関数を返す.ドキュメントに載っている通り cleanup() 関数を実装して返しても良いし,アロー関数を返すこともできる.

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return (() => console.log('Clean Up 🐤'));
});

useEffect() は画面描画時(初回 render)と画面更新時に実行される.よって render 後に副作用が起きることになり,クリーンアップも毎回実行されることになる.実際にクリーンアップを追加した状態でボタンを押すと,コンソールに繰り返しログが出力されていた.

Clean Up 🐤
Clean Up 🐤
Clean Up 🐤
Clean Up 🐤
Clean Up 🐤

副作用のスキップ

ドキュメントを読み進めると,後半に「ヒント」として「副作用のスキップによるパフォーマンス改善」というトピックがある.render ごとに副作用を起こすとパフォーマンスに影響するため,render 時に「特定の値が更新されていない場合は副作用をスキップできる」構文がサポートされている.

以下のように useEffect() の第2引数に配列を指定する.今回は [count] だけど,[count, count2, count3] のように複数の State を指定することもできる.すると,第2引数に指定した値が更新されたときのみ副作用が起きるように抑制できる.

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return (() => console.log('Clean Up 🐤'));
}, [count]);

副作用を1回だけ起こす

例えば,画面描画時(初回 render)に API を実行して,その後は副作用を起こさないように抑制する場面もある.その場合は useEffect() の第2引数に空配列 [] を指定すると「何の値にも依存しない」ことを意味することになり,結果的に副作用を1回だけ起こせるようになる.

実際に試すため.まず axios を追加し,useEffect() から random.cat API を実行する.ランダムに返ってくる猫画像 URL を meowUrl State に設定する.

const [meowUrl, setMeowUrl] = useState('');

useEffect(() => {
  const fetch = async () => {
    const results = await axios('http://aws.random.cat/meow');
    setMeowUrl(results.data.file)
  };
  fetch();
}, []);

取得した画像を表示すると,期待通りの動作になった.JSX の部分は GitHub 参照!

f:id:kakku22:20191022013733p:plain

試しに useEffect() の第2引数を削除すると,無限ループになり API を繰り返し実行してしまうため,第2引数に空配列 [] を指定する重要さを確認できた.無駄なリクエストを送り続けないように気を付けよう.

f:id:kakku22:20191022013746p:plain

まとめ

  • 最近「React Hooks」を勉強している
  • ドキュメントを読みながら useEffect() を試した
  • ライフサイクル/クリーンアップ/スキップなど,理解しておくべき仕様を学べた
  • useEffect() の第2引数に空配列 [] を指定すると「何の値にも依存しない」ことを意味する
  • サンプルコードは GitHub に置いておいた

github.com

Material-UI の Snackbars コンポーネントを実装する

引き続き Material-UI を使ったプロトタイプ開発をしている.今回は Material-UI の Snackbars コンポーネントをサンプルコードを参考に実装しながら理解を深めていく.スナックバー(Snackbars)は Material Design に定義された UI で,画面上にメッセージを一時的に表示する場面で使う.例えば Gmail でメールを削除すると,画面左下に「スレッドをゴミ箱に移動しました。」と表示される.

material-ui.com

なお,実装したサンプルコードは GitHub に公開してある.TypeScript で create-react-app を実行してから実装を進めた.記事に載せるコードはポイントを限定し抜粋するため,実際にコード全体を見る場合は GitHub を参照して頂ければと!

$ create-react-app sandbox-material-ui-snackbars --typescript

github.com

Snackbars コンポーネント

Snackbars コンポーネントで使えるプロパティ一覧は以下のドキュメントに載っている.最初から多くのプロパティを実装すると混乱するため,Step By Step に整理していく.

material-ui.com

anchorOrigin / message / open プロパティ

まず,anchorOrigin プロパティを使うと,スナックバーを表示する位置を指定できる.以下のように horizontal 3種類と vertical 2種類を組み合わせて指定する.

  • horizontal
    • left
    • center
    • right
  • vertical
    • top
    • bottom

message プロパティは,スナックバーにメッセージを表示するために指定する.そして open プロパティに true を指定するとスナックバーが表示されるため,今回は handleClick() を経由して React State open を更新する.React Hooks を前提にするため useState() を使う.プロパティを組み合わせると,以下のような実装になる.

const App: React.FC = () => {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Open Snackbar 😃</button>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={open}
        message={<span id="message-id">This is Snackbar 🎃</span>}
      />
    </div>
  );
}

実際に動作確認をする.画面左上に配置したボタンをクリックすると,画面左下にスナックバーを表示できる.

f:id:kakku22:20191012222129p:plain

anchorOrigin プロパティを以下のように指定すると,今度は画面右上にスナックバーを表示できる.

anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
}}

f:id:kakku22:20191012222142p:plain

onClose / autoHideDuration プロパティ

open プロパティと onClose プロパティを組み合わせることにより,表示したスナックバーを非表示にできる.onClose プロパティには関数を指定するため,今回は handleClose() を経由して React State open を false に更新する.

ただし,onClose プロパティを発火するためには画面をクリックする必要があるため,自動的に非表示にするために autoHideDuration プロパティを組み合わせる.autoHideDuration プロパティは onClose プロパティに指定した関数を実行する前の待機時間となり,単位は milliseconds となる.プロパティを組み合わせると,以下のような実装になる.今回は「5秒」で自動的に非表示になる.

const App: React.FC = () => {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={handleClick}>Open Snackbar 😃</button>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={open}
        autoHideDuration={5000}
        onClose={handleClose}
        message={<span id="message-id">This is Snackbar 🎃</span>}
      />
    </div>
  );
}

onClose プロパティの仕様を読むと,関数の引数に reason があり,「発火理由」を以下の2種類から判断できるようになっている.ドキュメントを読んでも clickaway の意味がわからず,自分なりに調べて挙動を理解できた.

  • timeout : autoHideDuration プロパティにより発火した場合
  • clickaway : スナックバー以外の適当な画面領域をクリックして発火した場合

よって,以下のように clickaway の場合に React State open を false に更新しないように早期リターンをすると,適当な画面領域をクリックする影響を抑止できる.多くの UI で考慮するべきポイントだと思う.

const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
  if (reason === 'clickaway') {
    return;
  }
  setOpen(false);
};

f:id:kakku22:20191012222200p:plain

action プロパティ

action プロパティを指定すると,スナックバーから発火できる追加のアクションを指定できる.以下に抜粋した実装のように Button コンポーネントと IconButton コンポーネントを指定すると,Gmail などでよく見るスナックバーになる.デザインは今回も makeStyles() を定義している(GitHub 参照).

<Snackbar
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  open={open}
  autoHideDuration={5000}
  onClose={handleClose}
  message={<span id="message-id">This is Snackbar 🎃</span>}
  action={[
    <Button color="secondary" size="medium" onClick={handleClose}>取り消し</Button>,
    <IconButton
      key="close"
      aria-label="close"
      color="inherit"
      className={classes.close}
      onClick={handleClose}
    >
      <CloseIcon />
    </IconButton>,
  ]}
/>

f:id:kakku22:20191012222213p:plain

まとめ

Material-UI の Snackbars コンポーネントを実装しながら理解を深めた.ドキュメントに載っているサンプルコードは TypeScript にも対応しているし,React Hooks にも対応しているため,合わせて学べてお得感もある.まだまだコンポーネントが多くあるため,引き続き使っていこうと思う.

関連記事

kakakakakku.hatenablog.com

多くの解析メトリクスをサポートしたコード解析ツール「SonarQube」に入門した

前から気になっていたコード解析ツールに「SonarQube : Code Quality and Security」がある.25種類以上のプログラミング言語をサポートし,多くの解析メトリクスを出力できる点が特徴と言える.たまに「SonarQube」の話題を聞くけど,個人的に今まで使ったことがなく,概要を理解するために SonarQube に入門することにした.試した結果をまとめておく.

www.sonarqube.org

SonarQube は OSS となり,GitHub で実装を確認できる.Java + TypeScript なんだ!

github.com

環境構築

今回は Mac に SonarQube 環境を構築する.Docker Hub に公式イメージがあり,すぐ使える.

$ docker run -d --name sonarqube -p 9000:9000 sonarqube

Docker コンテナを起動し http://localhost:9000 にアクセスすると,以下のように SonarQube 画面が表示される.

f:id:kakku22:20191008114433p:plain

デフォルトアカウントは admin/admin となり,ログインをするとプロジェクトを作成する画面が表示される.

f:id:kakku22:20191008114452p:plain

プロジェクトを作成する

さっそく SonarQube プロジェクトを作成する.今回サンプルコードとして Ruby on Rails で実装した microposts を対象にする.

  • Project key : microposts
  • Display name : microposts

f:id:kakku22:20191008114510p:plain

プロジェクト作成フローはまだ続く.Token を取得したり,プログラミング言語を選んだり,実行環境 (OS) を選ぶ.今回は Ruby を使うため,プログラミング言語は「Other (JS, TS, Go, Python, PHP, ...)」とした.

SonarScanner を実行する

まず「SonarScanner」という解析ツールを以下のページからダウンロードし,パスを通しておく.今回は Mac を検証環境にしているため sonar-scanner-4.0.0.1744-macosx/bin/sonar-scanner を実行できるようにした.

docs.sonarqube.org

準備ができたら「SonarScanner」を実行する.今回はコードベースが大きくなく,30秒程度で終わった.

$ sonar-scanner \
  -Dsonar.projectKey=microposts \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=xxx

(中略)

INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 29.803s
INFO: Final Memory: 35M/124M
INFO: ------------------------------------------------------------------------

解析結果を確認する

「Overview」画面を見ると,大きく以下の「5種類」の解析カテゴリが表示されている.

  • Reliability : バグの件数など
  • Security : 脆弱性の件数など
  • Maintainability : コードスメルの件数など
  • Coverage : カバレッジの密度など
  • Duplications : 重複コードの件数など

f:id:kakku22:20191008114549p:plain

次に「Code Smells」をクリックすると「Issues」画面に遷移する.今回サンプルコードの中にある「空メソッド」に警告が出ていた.SonarQube Rules は全てドキュメントにまとまっているため,今回は以下の「RSPEC-1186」に該当していたことがわかる.

rules.sonarsource.com

f:id:kakku22:20191008114612p:plain

さらに「Measures」画面を見ると,解析結果を可視化したグラフを多く確認できる.例えば「Maintainability - Overview」は以下のようになっている.可視化の充実度の高さは SonarQube の良さだと思う.

f:id:kakku22:20191008114647p:plain

日本語化をする

SonarQube には多くのプラグインがあり「Administration」→「Marketplace」と遷移をすると,プラグインをインストールできる.日本語化をするためにプラグインを検索したところ「Japanese Pack」を発見した.インストールし,SonarQube を再起動すると,部分的に日本語化できた.まだ完全ではなく,l10n (Localization) を管理する OSS にプルリクエストを送ってみると貢献できそうな気がする.

github.com

GitHub 連携

GitHub と連携し,プルリクエストに SonarQube の解析結果を自動的にコメントする仕組みを試そうとしたところ,SonarQube で使える「Pull Request Analysis」機能は「Developer Edition 以上」で使えるように制限されていた.プラグインを検索したところ「GitHub Plugin」を発見したけど,既に Deprecated になっていた.個人利用の範囲なら Deprecated であることを理解し,例えば CircleCI と組み合わせて実現することもできるらしく,事例はありそうだった.

docs.sonarqube.org

docs.sonarqube.org

まとめ

前から気になっていた「SonarQube」を試した.検証用途なら Docker コンテナを使って簡単に試せる.サポートしているプログラミング言語の多さと解析メトリクスの可視化の充実度は SonarQube の良さだと思う.調べていたら VS Code や IntelliJ IDEA で使える拡張機能「SonarLint」もあるらしく,今度試してみようと思う.

www.sonarlint.org

シンタックスハイライトをしたコードを PowerPoint / Keynote に載せる

日頃からプレゼンテーション資料を作る場面が多く,PowerPoint と Keynote をよく使う.さらにプレゼンテーション資料にシンタックスハイライトをしたコード(JSON / YAML なども含む)を載せることもある.今まで何度も「どうやってシンタックスハイライトをしてる?」と聞かれたため,毎回同じことを教えるのではなく,サッと URL を渡せるようにブログにまとめることにした.

なお,2017年に公開した 「個人的な Keynote ベストプラクティス 2017」 に highlight コマンド と pbcopy コマンドを組み合わせる方法を載せているけど,今回はさらに選択肢を増やして「計3種類」紹介したいと思う.

  1. Visual Studio Code を使う
  2. highlight コマンド と pbcopy コマンドを組み合わせて使う
  3. Carbon を使う

kakakakakku.hatenablog.com

1. Visual Studio Code を使う

最もお手軽に使えるのは Visual Studio Code (VS Code) だと思う.VS Code から直接コピーすると,PowerPoint / Keynote にシンタックスハイライトをしたコードをペーストできる.案外知られてなく,紹介すると驚かれることもある.なお,IntelliJ IDEA / GoLand なども同様に使えるため,慣れたエディタから直接コピーすると良いと思う.以下は A Tour of Go のサンプルコードを Keynote に載せている.

f:id:kakku22:20191001233130p:plain

2. highlight コマンド と pbcopy コマンドを組み合わせて使う

次に紹介するのは highlight コマンド と pbcopy コマンドを組み合わせる方法で,数年前から個人的にずっと使っている.以下のようにファイルを指定してコマンドを実行すると,自動的にクリップボードに保存されるため,そのまま PowerPoint / Keynote にペーストできる.以下は同様のサンプルコードを Keynote に載せている.

$ highlight -O rtf main.go | pbcopy

f:id:kakku22:20191001233156p:plain

また highlight コマンドに --style オプションを設定するとデザインを変えることもできる.以下は Moria スタイルを設定し,同様のサンプルコードを Keynote に載せている.

$ highlight -O rtf --style Moria main.go | pbcopy

f:id:kakku22:20191001233215p:plain

highlight コマンドの詳細は以下に載っている.

www.andre-simon.de

3. Carbon を使う

「Carbon」を使うと,シンタックスハイライトをしたコードを画像に変換できる.GitHub の実装を読むと highlight.js というライブラリに依存していた.Carbon はデザインに限らず,ウィンドウサイズ/行数/背景色など自由度高く設定できる点が良く,以下は同様のサンプルコードを Carbon で調整し,Keynote に載せている.

f:id:kakku22:20191001233234p:plain

carbon.now.sh

まとめ

PowerPoint / Keynote にシンタックスハイライトをしたコード(JSON / YAML なども含む)を載せる方法を「計3種類」紹介した.目的により,自分に合った方法を選ぶと良いと思う.よく聞かれることは今後も積極的にブログに書いていくぞ!

関連記事

以下の記事も「プレゼンテーション中にうまくデモを見せる Tips」をよく聞かれるため,まとめた記事となる.

kakakakakku.hatenablog.com

TDD のリズムを体験しよう /「テスト駆動開発」を読んだ

今年の1月に書籍「テスト駆動開発」を購入し,1度ザッと読んだけど,まだ書評記事を書いてなく,後回しにしていたらもう9月になってしまった.最近「テスト駆動開発 (TDD : Test-Driven Development)」を教える機会もあるため,改めて本書を読み直し,学べたことを整理しておこうと思う.

本書は TDD を支える「Red / Green / Refactor」のリズムから,「仮実装」や「明白な実装」や「三角測量」など,重要な戦略の解説もある.そして「多国通貨」を題材とした TDD の体験と「xUnit」を実際に実装しながら学べるように構成されている.個人的に TDD は「名前は知っているけど経験したことがない」人が多くいるプラクティスだと思う.本書を読んで第一歩を踏み出すと良さそう!

テスト駆動開発

テスト駆動開発

目次

  • 第I部 : 多国通貨
    • 第1ç«  : 仮実装
    • 第2ç«  : 明白な実装
    • 第3ç«  : 三角測量
    • 第4ç«  : 意図を語るテスト
    • 第5ç«  : 原則をあえて破るとき
    • 第6ç«  : テスト不足に気づいたら
    • 第7ç«  : 疑念をテストに翻訳する
    • 第8ç«  : 実装を隠す
    • 第9ç«  : 歩幅の調整
    • 第10ç«  : テストに聞いてみる
    • 第11ç«  : 不要になったら消す
    • 第12ç«  : 設計とメタファー
    • 第13ç«  : 実装を導くテスト
    • 第14ç«  : 学習用テストと回帰テスト
    • 第15ç«  : テスト任せとコンパイラ任せ
    • 第16ç«  : 将来の読み手を考えたテスト
    • 第17ç«  : 多国通貨の全体ふりかえり
  • 第II部 : xUnit
    • 第18ç«  : xUnitへ向かう小さな一歩
    • 第19ç«  : 前準備
    • 第20ç«  : 後片付け
    • 第21ç«  : 数え上げ
    • 第22ç«  : 失敗の扱い
    • 第23ç«  : スイートにまとめる
    • 第24ç«  : xUnitの全体ふりかえり
  • 第III部 : テスト駆動開発のパターン
    • 第25ç«  : テスト駆動開発のパターン
    • 第26ç«  : レッドバーのパターン
    • 第27ç«  : テスティングのパターン
    • 第28ç«  : グリーンバーのパターン
    • 第29ç«  : xUnitのパターン
    • 第30ç«  : デザインパターン
    • 第31ç«  : リファクタリング
    • 第32ç«  : TDDを身につける
  • 付録
    • 付録A : 因果ループ図
    • 付録B : フィボナッチ
    • 付録C : 訳者解説:テスト駆動開発の現在

仮実装

第1章「仮実装」を読むと「TDD のリズム」をすぐに感じられる.意図的に「歩幅を小さく」し,テストを通すための最小限の変更と言える「仮実装」を活用しながら実装を進めていくため,実装の変化に悩むことなく読み進められる.テストを通すために int amount = 10; を実装したり,重複を発見するために int amount = 5 * 2; に書き直してみたり,初期化部分を times() メソッドに移動してみたりする.まさにリズム!

  1. 小さいテストを1つ書く
  2. 全てのテストを実行し,1つ失敗することを確認する
  3. 小さい変更を行う
  4. 再びテストを実行し,全て成功することを確認する
  5. リファクタリングを行い,重複を除去する

さらに本書の特徴とも言える「口語のような口調」も非常に良く,実際にライブコーディングを見ているような錯覚に陥る.

class Dollar {
    int amount = 10;

    Dollar(int amount) {
    }

    void times(int multiplier) {
    }
}

明白な実装

「仮実装」を使わずに既に考えた実装をコードに落とし込むことを「明白な実装」と言う.第2章「明白な実装」は Dollar オブジェクトの状態変化に依存するため,times() メソッドから新しく Dollar オブジェクトを返している.そして TDD では「仮実装」と「明白な実装」の間を行き来するという内容も紹介されている.「なぜ "あえて" 仮実装をするの?」というよくある疑問に対する回答になっている.

三角測量

「仮実装」をしていると,たまたまテストが通ってしまうことになるため,別のテストを追加することにより,実装の正しさを確認する戦略として「三角測量」がある.第3章「三角測量」を読むと,Value Object である Dollar オブジェクトに equals() メソッドを実装しながら三角測量を活用している.また本書に載っている通り「設計のアイデアが浮かばないとき」にも三角測量が使えるというのは興味深かった.

public class MoneyTest {
    @Test
    public void testEquality() {
        assertTrue(new Dollar(5).equals(new Dollar(5)));
        assertFalse(new Dollar(5).equals(new Dollar(6)));
    }
}

歩幅

通貨の実装を進めると,誰しも通貨を表現するオブジェクトを作りたくなると思うけど,最初から複雑な実装に進むのではなく,最初は「文字列を活用する」という判断こそ「歩幅を小さく」の具体例と言える.第9章「歩幅の調整」を読むと,Franc.java と Dollar.java に currency() メソッドを追加し,文字列で CHF と USD を返す実装をしてから,コンストラクタに移動したりし,最終的に Money.java にまとまる.TDD の良さを感じられる章だと思う.

リファクタリング

リファクタリングはアプリケーション開発をしているとよく聞く言葉だけど,案外「リファクタリングの定義は?」と聞かれると,人によって違う回答になる.第31章「リファクタリング」を読むと,TDD で使えるリファクタリングのアプローチを学べる.例えば,以下など.

  • データ構造の変更
  • メソッドの抽出
  • メソッドのインライン化
  • メソッドの移動

他にも,書籍「リファクタリング」の第3章「コードの不吉な臭い」に載っている観点も TDD のリファクタリングに使える.合わせて読もう!

新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)

新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES)

TDD を身につける

第32章「TDDを身につける」は個人的に役立った.TDD を教えるときによく聞かれることに対して,全て明確な答えがないとしても「テスト駆動開発」に載っていると言えるのは説得力に繋がる.

例えば,最初に「一歩の大きさはどのくらいか」という疑問が出てくる.本書には「テスト駆動開発者の傾向は "小さなステップ " だけど "大きなステップ" もできるようになるべき」と書いてある.第9章「歩幅の調整」と同じ内容だけど,ステップを飛ばすとしても,自信を持って飛ばせるまでは過剰にでも繰り返すと良いと思う.他にも以下のような疑問に対する言及がある.

  • テストしなくてよいものはあるか
  • どのようなときにテストを消すべきか
  • 巨大なシステムをテスト駆動できるか
  • 途中から TDD に乗り換えるにはどうすればよいか

Cyber Dojo

本書には直接関係ないけど,環境構築に悩むこともなく,サクッと TDD を練習したり,教えたりする場合は「Cyber Dojo」を使うと便利.Python (unittest) や Python (pytest) や Ruby (RSpec) など,プログラミング言語とテストフレームワークを選び,Fizz Buzz などのお題を選ぶと,すぐに開始できる.

「Cyber Dojo」を使って TDD のサイクルを回すと,実行ごとに「赤 / 黄 / 緑」の結果アイコンも表示されるため,歩幅を小さく進められていることを確認できるのも便利な機能と言える.TDD に限らず「モブプログラミング」の実演にも使える.覚えておくと良いかと!

cyber-dojo.org

f:id:kakku22:20190923144706p:plain

まとめ

  • 書評記事を書いていなかった「テスト駆動開発」を読み直した
  • 「多国通貨」を題材とした TDD の体験は実際に写経をしながら進めると効果的に学べる(僕は途中まで写経した)
  • 特に「TDD は知っているけど経験したことがない」という読者層に刺さりそう
  • 本書の最後に載っている「付録C : 訳者解説」もとても印象に残った

あと個人的には,第12章「設計とメタファー」で Expression オブジェクトを使って為替レートを考慮した通貨間の計算をする部分は難しく感じた.というよりも,突然「歩幅が大きく」なったような気がして,読んでいてもスッと頭に入らなかった.もう少し「歩幅を小さく」解説があると良さそうに思う.

テスト駆動開発

テスト駆動開発

関連記事

kakakakakku.hatenablog.com