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 にも察応しおいるため合わせお孊べおお埗感もあるただただコンポヌネントが倚くあるため匕き続き䜿っおいこうず思う

Material-UI 関連蚘事

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

たずめ

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