
久しぶりに英語の学習意欲が高まってきました。

今までの英語学習の反省点として、次に何をするか分からなくなって学習が続かないことが多かったので、今回は最初に学習計画を作ってみることにしました。

## 目標設定
目標: TOEIC 800点

今まで英語を学習する上で計測できる明確な目標が無かったのが続かなった原因の一つでした。TOEICは数値目標として非常に分かりやすく計測しやすいので目標に設定しています。

また自分は今までTOEICで点数が高くても英語が話せる訳ではないので、スコアを上げることを目標にする意味は無いと思ってました。ただ、それはTOEICで実際に高得点を取っている人が考えるべきことで、そもそも点数取れてない人がそれを言うのは間違っているなと思い直しました。

## 学習スキルの取捨選択
学習対象: リスニング、リーディングのみ

今回は学習の対象をリスニングとリーディングに絞ってみます。これは単純にTOEICの範囲に合わせている訳ではなく、英語のスキルは大きく分けてインプットとアウトプットの2つがあります。

コミュニケーションにおいて最も重要なことは聞くこととされており、相手が何を伝えたいかを知ることができないとコミュニケーションが成立しません。そのため、リスニングとリーディングというインプットのスキルに絞って学習を進めようと考えました。

経験上言いたいことを伝えるだけなら、中学レベルの英文法と単語を並べるだけでも言いたいことはある程度伝えられます。スピーキングを学習するには、誰かとコミュニケーションを取るのが一番早いと考えており、その時に一定レベルのリスニング力があればスピーキングの学習効率が格段に上がるだろうという目算から、まずはリスニングとしています。

<img src="/images/posts/learning-english-plan-1/english-skills.png" alt="英語のスキル" width="682" height="201" />

## リスニング学習の計画
### 課題
- 少しでも話すスピードが速くなると単語が全く聞き取れない
  - 自分が思っている音と実際の音が異なる
  - 語彙力が無いので知らない単語が出てくると単語として認識できていない
- 単語が聞き取れても英語として話すスピードに合わせて意味を理解できない
  - 英語を文章として速く読めないとリーディングの速度に付いていけない

### 発音の強化
目的: 自分が考えている音と聞こえる音のギャップを小さくして、英単語を聞き取れるようにする

読んでた本でオススメされていた、「英語喉 50のメソッド」という本を1冊やってみる。

- ~~[CD2枚・音声DL付 英語喉 50のメソッド](https://www.amazon.co.jp/CD%E4%BB%98-%E8%8B%B1%E8%AA%9E%E5%96%89-50%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89-%E4%B8%8A%E5%B7%9D-%E4%B8%80%E7%A7%8B/dp/4384054629)を1冊やる~~
  - 喉発音という独自の方法を紹介しており発音記号も独自のものが用いられているため、一般的な発音記号で見ると同じ音が別の音として区別されていたので混乱した
  - 例: map(mˈæp) と man(mˈæn)
  - 単語の発音記号を調べて発音を知るというやり方が通用しなさそうなので、最初にやる本としては適切でなかった
  - 発音は感覚は口とか舌とかの使い方の説明よりも分かりやすかったので、慣れてからやるのが良いかも
- [ ] [英語耳 発音ができるとリスニングができる](https://www.amazon.co.jp/%E6%94%B9%E8%A8%823%E7%89%88-%E8%8B%B1%E8%AA%9E%E8%80%B3-%E7%99%BA%E9%9F%B3%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A8%E3%83%AA%E3%82%B9%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B-%E6%9D%BE%E6%BE%A4-%E5%96%9C%E5%A5%BD/dp/4041112591/ref=asc_df_4041112591/?tag=jpgo-22&linkCode=df0&hvadid=342406018218&hvpos=&hvnetw=g&hvrand=8268392157830656677&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009717&hvtargid=pla-1204985206696&psc=1&th=1&psc=1)を1冊やる

その後はシャドーイングを進める。
最初にシャドーイングの方法について学習して、題材を見つけて本格的にシャドーイングをやってみる。

- [ ] [決定版 英語シャドーイング[超入門]](https://www.amazon.co.jp/gp/product/4902091577/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1) を1冊やる
- [ ] [[CD付]決定版 英語シャドーイング【改訂新版】](https://www.amazon.co.jp/CD%E4%BB%98-%E6%B1%BA%E5%AE%9A%E7%89%88-%E8%8B%B1%E8%AA%9E%E3%82%B7%E3%83%A3%E3%83%89%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%B0%E3%80%90%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88%E3%80%91-%E9%96%80%E7%94%B0-%E4%BF%AE%E5%B9%B3/dp/4864541027/ref=pd_vtp_sccl_3_2/357-2633239-1991806?pd_rd_w=6QIwk&pf_rd_p=cbb45385-7b99-44b7-a528-bff5ddaa153d&pf_rd_r=G1N3RMRQRYHDRMVXBPNP&pd_rd_r=565a596e-ecec-4f9a-8e5d-1ae7bd831236&pd_rd_wg=bgGzD&pd_rd_i=4864541027&psc=1) を1冊やる

### 語彙力の強化
目的: 知っている単語を増やして単語を聞き取れるようにする

単語帳を1冊決めて何周も繰り返す。夜に単語を覚えて朝に覚えているかのチェックをするサイクルで回してみる。読んだ本にこのやり方がオススメと書いてあったので。

本は適当に調べらオススメで出てきたので選んだだけで、強いこだわりはない。

- [ ] [TOEIC L & R TEST 出る単特急 金のフレーズ (TOEIC TEST 特急シリーズ)](https://www.amazon.co.jp/TOEIC-TEST-%E5%87%BA%E3%82%8B%E5%8D%98%E7%89%B9%E6%80%A5-%E9%87%91%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%82%BA-%E7%89%B9%E6%80%A5%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4023315680) を何周も繰り返す

### 英単語の聞き取り力を強化
目的: 英単語を聞き取れるようにする

10秒リスニングを試しにやってみる。

- [ ] [【音声DL付】英語を聞きとる力が飛躍的にアップする新メソッド 10秒リスニング](https://www.amazon.co.jp/dp/B08LNWRXYL/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)を1冊やる。

### リーディング力の強化
目的: リスニングに合わせて英語の意味を理解できるようにする

リーディングの学習を進める。

### リスニング力向上のチェック
目的: 学習方法が正しいかの振り返り

定期的にTOEICのリスニング問題を解いてみて、学習方法が効果があるか振り返る機会にする。全く成長を実感できない場合は学習方法を見直す。

- TOEICのリスニング問題を解く

## リーディングの学習
### 課題
- 知らない単語が出てくると内容が理解できない
  - シンプルに単語を知らないだけ
- 読むスピードが遅い
  - 途中で修飾関係が分からなくなり、前に戻ったりすることが多く読むのに時間がかかっている  
  - 分の区切りが分からなくなり主語と動詞を見失うことがある

### 語彙力の強化
目的: 知らない単語を減らしてテキストを意味を理解する

自分が文章の意味が理解できないと感じる時は、知らない単語がいっぱい出てくるテキストを読んでいる時なので、逆に考えると単語さえ知っていれば、かなりリーディング力は向上するはず。

やることはリスニング学習の「語彙力の強化」と同じ。

### 英文法の再学習
目的: 英語の文章構造を理解して修飾関係を素早く把握できるようにする

思ったよりも中高で学んだ英文法は忘れていたりする部分があると痛感したので、試しにゼロから学び直す。
「リーディング教本」は「ベーシック教本」をやってみて、良さそうなら2冊目としてやる。

- [ ] [英語ベーシック教本―ゼロからわかる](https://www.amazon.co.jp/%E8%8B%B1%E8%AA%9E%E3%83%99%E3%83%BC%E3%82%B7%E3%83%83%E3%82%AF%E6%95%99%E6%9C%AC%E2%80%95%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%82%8B-%E8%96%AC%E8%A2%8B-%E5%96%84%E9%83%8E/dp/4327451975/ref=asc_df_4327451975/?tag=jpgo-22&linkCode=df0&hvadid=295673331009&hvpos=&hvnetw=g&hvrand=14382258585393884515&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009717&hvtargid=pla-523771724866&psc=1&th=1&psc=1)を1冊やる。
- [ ] [基本からわかる英語リーディング教本](https://www.amazon.co.jp/%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%82%8B%E8%8B%B1%E8%AA%9E%E3%83%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%95%99%E6%9C%AC-%E8%96%AC%E8%A2%8B-%E5%96%84%E9%83%8E/dp/4327451371/ref=pd_bxgy_img_sccl_1/357-2633239-1991806?pd_rd_w=MTx0G&pf_rd_p=020fee25-8ced-4191-bce3-27e7ce0c0e3b&pf_rd_r=7K9F3Q0ZEZA9G0PMKA0D&pd_rd_r=205b0587-fb35-4fba-888d-b45b4572e37f&pd_rd_wg=8YTLT&pd_rd_i=4327451371&psc=1)を1冊やる。

### リーディングの速度向上
目的: 英語を読む速度を速くしてリスニングで英語を理解できるようにする

時間がかかる時を振り返ってみると全体を読んでから、右から左へ逆方向へ英語を読んでいることがある。左から右へそのまま英語を読めるようにする。

海外の技術ブログの記事を次のやり方でひたすら読む。
途中で構造がうまく理解できない文に遭遇した場合は、スラッシュリーディングをして構造を理解できるようにする。

1. 全体を読み進める
2. 知らない単語は全て意味を調べる
3. 全体を読む
4. 一定時間内に読み終わるまで3を繰り返す。

- [x] [日本語脳のまま英文がスラスラ読めるすごい英語読解術](https://www.amazon.co.jp/dp/B085XQQFMB/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)を1冊やる。


久しぶりに英語の学習意欲が高まってきました。今までの英語学習の反省点として、次に何をするか分からなくなって学習が続かないことが多かったので、今回は最初に学習計画を作ってみることにしました。

英語の学習計画を作ってみたよ〜L&R編〜


今回は自分のプルリクエストを自分でレビューをするメリットについて話をしたいと思います。

## セルフレビューとは
自分が作成したプルリクエストに対して自分でレビューをすることをここではセルフレビューと呼んでいます。

自分は複雑な実装や大きめのプルリクエストを作成した場合は、レビューをお願いする前に自分のプルリクエストを自分でレビューするといった事を偶に実施しています。

## セルフレビューのメリット
- 非効率な実装、無駄な処理、消し忘れのデバッグコード、コメントを書いておくべき箇所を見つけられる
- レビュー時に他の人が自分のコードをどう見えているか客観的に把握できる
- レビューで細かな点を指摘される事が減り、レビュアーの負担が軽減される
- 細かい指摘が減ることでレビュー事態のコミュニケーション量が減るので、レビュイーの負担も軽減される

開発に集中をしていると視野が狭くなる事があるので、意外と実装後にプルリクエストを見ながら全体を俯瞰してみると、もっと効率的な書き方や読みやすい実装などに気づくことが多々あります。開発中は知識が全て頭に入っていたので理解していたコードも後で見返すと非常に理解しにくいなと感じる実装が見つかることもあり、コメントを書いておくべき箇所が見つかることもあります。

客観的にセルフレビューをすることで、レビュアーの人が疑問に感じてコメントを書きそうな場所も見えてくるので、その場合は事前に説明コメントを書いておくことで、レビュアーの負担を減らし全体のレビューにおけるコミュニケーション量を軽減できるので結果として全体のレビューの負担も減らすことができます。

このようにセルフレビューは自分の為だけでなく、レビュアーの人の為にもなります。
レビューをお願いする時は、**如何にレビュアーの人の負担を減らすか**を考えるのは非常に大切です。

## セルフレビュー駆動開発
最初に動くコードを実装してプルリクエストを作成し、セルフレビューを実施してコメントを残して、そのコメントに対してコードを修正して改善を進めることで、セルフレビューによる駆動開発をすることもできます。

個人開発など誰かにレビューお願いしたいけど難しいパターンでは、このスタイルを試してみると意外と何もやらない時よりも綺麗なコード実装ができます。


今回は自分のプルリクエストを自分でレビューをするメリットについて話をしたいと思います。

プルリクエストのセルフレビューのススメ


この記事は [YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の23日目の記事です。

自分は普段ターミナルでgitの操作をしているのですが、開発とレビューを並行して多くのブランチを切り替えたりするなど地味にgitの操作に時間を要する事が多く、効率化を求めて色々とgitエイリアスを設定したら良い感じになったのでまとめてみました。

## git switch-pr

### 課題
自分がPRレビューをするためにブランチを切り替える時は「GitHub上でブランチ名をコピーしてターミナルに貼り付けて...」という作業をよくやっていました。
1日に3,4件かそれ以上のPRレビューをしていると、この作業が地味にストレスとして感じていました。

### 改善

<img src="/images/posts/good-git-alias/swpr.gif" alt="switch-prコマンドの実行の様子" width="641" height="296" />

`git switch-pr` はリモートリポジトリのプルリクの一覧からブランチ移動をするためのエイリアスです。

ブランチ名をコピペする手間が減りPRレビューが非常に快適になりました！

プルリクの一覧は [GitHub CLI](https://github.com/cli/cli) で取得をしています。

自分が管理しやすいように `switch-pr` としてエイリアスを作成してから、その短縮形として別に `swpr` を設定するという設定をしています。

```shell
// ~/.gitconfig
[alias]
  switch-pr = !gh pr list | awk '{print $(NF-1)}' | peco | xargs git switch
  swpr = switch-pr
```

## git history

### 課題
feature ブランチで開発を進めながらPRレビューをしていると、1日に3,4個のブランチを移動することもあります。
複数のブランチを行き来する時に、わざわざブランチ名を思い出しながらブランチを切り替えるのは非常に面倒でした。
特にチケットとPRを紐づけるためにブランチ名にチケット番号などを記載していると、余計に入力が大変になります。

### 改善

<img src="/images/posts/good-git-alias/history.gif" alt="historyコマンドの実行の様子" width="641" height="296" />

`git history` は過去に移動したブランチ一覧からブランチを選択して移動ができるエイリアスです。

`peco` を使って一覧からブランチを選択可能にしているので、ブランチ名を覚えていなくてもスムーズに移動ができるようになりました。

```shell
// ~/.gitconfig
[alias]
  history = !git --no-pager reflog | awk '$3 == \"checkout:\" && /moving from/ {print $8}' | awk '!a[$0]++' | head | peco | xargs git checkout
```

## push.default current
### 課題
作業後に初めてブランチをプッシュする時は `git push origin feat/123-feature1` というような形式でプッシュをしていました。
これは上流ブランチの紐付けが存在しないためです。

### 改善
`git push` の引数を省略した場合の挙動は `push.default` で設定することができ `push.default current` を設定することで、作業中のブランチと同名のリモートブランチに対してpushしてくれるようになります。

この設定をすることで、初めてのプッシュでも `git push` だけでプッシュができるようになります。

```shell
$ g config --global push.default current

~/.gitconfig
[push]
	default = current
```

## git create-pr

### 課題
GitHub上でプルリクエスト(PR)を作成する場合に、初回プッシュをした場合はターミナル上にPR作成のURLを表示してくれます。
しかし、2回目以降の場合はこのURLが表示されずGitHub上からPR作成を進める必要があります。
正直、1回目のURLクリックだけでも面倒だと思っていたので、GitHub上で数クリックの操作が発生するのは非常に手間でした。

### 改善

<img src="/images/posts/good-git-alias/create-pr.gif" alt="create-prコマンドの実行の様子" width="1425" height="810" />

`git create-pr` は現在の作業ブランチのプルリクエストを作成するGitHubのページをブラウザで表示するエイリアスです。
ターミナル上でコマンド一つでPR作成の準備が整うので非常に快適になりました。

仕組みとしては GitHub CLI のコマンドをエイリアスで登録しているだけなので、複雑なことは何もしていません。

```shell
~/.gitconfig
[alias]
  create-pr = !gh pr create --web
```

## git open-pr

### 課題
コードレビュー時にローカルでコードを確認したり、レビューで指摘をもらった箇所の修正後に、改めてGitHub上のPRを表示したい時にいちいちブラウザでページ移動するのが面倒なことがあったりします。

### 改善

<img src="/images/posts/good-git-alias/open-pr.gif" alt="open-prコマンドの実行の様子" width="1425" height="810" />

`git open-pr` は現在の作業ブランチのPRをブラウザで表示するエイリアスです。

これも GitHub CLI のコマンドをエイリアスで登録しているだけです。

```shell
~/.gitconfig
[alias]
  create-pr = !gh pr view --web
```


この記事は YAMAP エンジニア Advent Calendar 2021 の23日目の記事です。自分は普段ターミナルでgitの操作をしているのですが、開発とレビューを並行して多くのブランチを切り替えたりするなど地味にgitの操作に時間を要する事が多く、効率化を求めて色々とgitエイリアスを設定したら良い感じになったのでまとめてみました。

開発効率を劇的に改善しているgitエイリアスと設定


この記事は [YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の21日目の記事です。

## ts-jestの課題感

ts-jestを使っているとコンパイル時間の問題で地味にテストに実行がかかります。

YAMAPではフロントエンドでもユニットテストを書き始めたので、約180ケースで1分ほどCIでテスト実行に時間がかかるようになりました。
またTDDで開発を進めていると、開発中に非常に多くユニットテストを実行するので ts-jest の実行時間の遅さが開発効率に直結してきます。

そこで、ts-jest を @swc/jest に置き換えて、実行時間の改善を試みました。

## 導入効果

@swc/jest に置き換えた結果、CIでのユニットテストの実行時間が1/2に短縮されました🎉

|変更前|変更後|
|--|--|
|53s|21s|

## @swc/jest とは
@sec/jest は Rust製の TypeScriptコンパイラーの swc を利用して作られた Jest の Transformer です。
個人的に感じる @swc/jest のメリットは次の点です。
- swc が Rust製のため ts-jest(tsc) と比較して、高速に動作する
- 設定を `jest.config.js` 内に書くことができるので、`tsconfig.test.json` のようにテスト用の tsconfig ファイルを持つ必要がない

## ts-jest を @swc/jest に置き換える
まずはコンパイラー本体の`@swc/core`と Transformer の`@swc/jest`をインストールします。

```shell
$ yarn install -D @swc/core @swc/jest
```

変更前のJestの設定ファイルはこんな感じです。

```js
/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  testEnvironment: 'jsdom',
  (省略),
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.test.json',
    },
  },
};
```

これを @swc/jest を使うように変更します。
設定ファイル内に swc の設定を追加して `transform` を @swc/jest を使うように修正しています。
また、tsconfigは不要になったので `globals` の設定ごと削除しています。

swc の設定項目についてはコメントに記載してあります。詳細は[公式ドキュメント](https://swc.rs/docs/configuration/compilation)を参照ください。

```js
/** @type {import('@swc/core').Config} */
const swcConfig = {
  // ソースマップの出力を有効にする
  sourceMaps: true,
  module: {
    // JestがCommonJSでモジュールを読み込むのでCommonJS形式で出力する
    type: 'commonjs',
  },
  jsc: {
    parser: {
      // TypeScriptとしてコンパイルする
      syntax: 'typescript',
      // Reactのコンポーネントをテストしたいのでtsxのコンパイルを有効化
      tsx: true,
    },
    transform: {
      react: {
        // React の JSX トランスフォームの指定
        // Reactインポートの手間を省略するために React17 から導入された 
        // _jsx(react/jsx-runtime) の形式にコンパイルする
        runtime: 'automatic',
      },
    },
  },
};

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc/jest', swcConfig],
  },
  (省略),
};
```

## コンパイラーが異なることによる懸念

babelで設定を書いている影響でプロダクションのコンパイルは引き続き tsc を使用しており、テストとプロダクションの実行環境でコンパイラーが異なる状況になってしまっています。コンパイラー依存の問題でテストでは正常に動くみたいな事が起こる可能性はあるかもとという懸念は少し持っています。

ただ、それによるバグが起こる可能性はかなり低くテスト実行の速度向上による開発効率化の方がメリットが大きいと判断しているので、そこは許容範囲かなと考えています。

## さいごに

思ったよりもスムーズに導入ができて特に問題が発生することもなく、今までと変わらずにテスト実行が使い続けれているので、導入して良かったです。


この記事は YAMAP エンジニア Advent Calendar 2021 の21日目の記事です。ts-jestを使っているとコンパイル時間の問題で地味にテストに実行がかかります。YAMAPではフロントエンドでもユニットテストを書き始めたので、約180ケースで1分ほどCIでテスト実行に時間がかかるようになりました。またTDDで開発を進めていると、開発中に非常に多くユニットテストを実行するので ts-jest の実行時間の遅さが、開発効率に直結してきます。そこで、ts-jest を @swc/jest に置き換えて、実行時間の改善を試みました。

実務でts-jestを@swc/jestに置き換えてCIの実行時間を1/2に短縮した


この記事は [YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の22日目の記事です。

## はじめに
現在、輪読会で [テスト駆動開発](https://www.amazon.co.jp/dp/B077D2L69C/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)（TDD）を読み進めています。  
本を読んで色々と知識が入ってきているので、業務でアウトプットしてみたいなと思い、バグ修正からTDDを初めてみたら良かったので紹介します。

## なぜバグ修正から始めるのか？
TDDをする上で一番難しいなと感じるのが、**実装前に何のテストを書けば良いか分からない**という部分です。  
今までテストを書いた経験が少ないと、対象となるコードが無い状態からテストを書き始めるのはイメージがしづらく中々テストを書くことができません。

その点、バグ修正の場合は既にコードが存在しており、バグを再現するテストを書けば良く何をテストするかも明確になっているので、非常にテストコードが書きやすいという利点があります。

そのため、バグ修正は比較的スムーズにTDDのフローを回しやすく手軽にTDDを体験することができます。

## TDDでバグ修正に挑戦する
### 概要
ユーザーのアバター画像とユーザー名を表示する `UserBio` コンポーネントについて考えてみます。

このコンポーネントはアバター画像について考慮が漏れておりリンク切れのバグが発生する可能性があります。
- バグ: アバター画像が未設定の場合にリンク切れで画像が表示される  
- 期待する動作: アバター画像が未設定の場合はサムネイル画像を表示する

```tsx
// src/components/UserBio.tsx
import { FC } from 'react';

type Props = {
  user: {
    name: string;
    avatar?: string;
  }
}

export const UserBio: FC<Props> = ({ user }) => {
  return (
    <div>
      <img src={user.avatar} />
      <span>{user.name}</span>
    </div>
  )
}
```

### バグを再現するテストコードを書く
コードのバグを修正したい気持ちをぐっ！と抑えて、先にテストコードを書いていきます。

どんなテストコードを書けば良いでしょうか？  
今回の目的はバグ修正のため**バグを再現する**テストコードを書けば良いので、何をテストするかは非常に明確です。

本来であれば、テストが全く書かれいない場合はアバター画像を表示するテストも先に書いておいた方が良いですが説明の都合で割愛しています。

```typescript
// src/components/UserBio.spec.tsx
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { UserBio } from "./UserBio";

describe("UserBio", () => {
  it("アバター画像が未設定のときにサムネイル画像を表示する", () => {
    render(<UserBio user={{ name: "テスト太郎" }} />);

    const expected = "https://example.com/images/avatar";
    expect(screen.getByRole("img")).toHaveAttribute("src", expected);
  });
});
```

テストを実行してみます。  
正常にテストが失敗してくれたので、これでバグを再現するテストコードが実装できました。

```shell
$ yarn jest src/components/UserBio.spec.tsx

 FAIL  src/components/UserBio.spec.tsx
  UserBio
    ✕ アバター画像が未設定のときにサムネイル画像を表示する (85 ms)

  ● UserBio › アバター画像が未設定のときにサムネイル画像を表示する

    expect(element).toHaveAttribute("src", "https://example.com/images/avatar") // element.getAttribute("src") === "https://example.com/images/avatar"

    Expected the element to have attribute:
      src="https://example.com/images/avatar"
    Received:
      null
```

### バグ修正対応
バグを再現するテストができたので、後は楽しくバグ修正のコードを書くだけです。

```tsx
const AVATAR_THUMBNAIL = 'https://example.com/images/avatar';

export const UserBio: FC<Props> = ({ user }) => {
  return (
    <div>
      <img src={user.avatar ?? AVATAR_THUMBNAIL} />
      <span>{user.name}</span>
    </div>
  );
}
```

バグ修正ができたので、改めてテストを実行してみます。  
無事にテストが通りバグが修正されたのを確認できました！ ⸜(｡˃ ᵕ ˂ )⸝

```shell
$ yarn jest src/components/UserBio.spec.tsx

 PASS  src/components/UserBio.spec.tsx
  UserBio
    ✓ アバター画像が未設定のときにサムネイル画像を表示する (61 ms)
```

### ブラウザ不要の検証
今回のバグ修正ではコードを変更してバグが修正されたことを確認する過程全くブラウザを利用しませんでした。  
PR作成前に念の為のブラウザ確認はしますが、検証でブラウザ操作をするのはその1度だけに抑えることができます。

フロントエンドをTDDで開発するメリットの一つとしてこの検証の簡略化があります。  
フロントエンドで検証を進めるために何度もコードとブラウザを行き来してブラウザ操作をする事が多いですが、この実装途中におけるブラウザ操作が地味に面倒で開発コストとして発生します。

TDDでテストを先に書いて検証を自動化することで、この検証コストを減らして開発効率を上げられるメリットがあります。

## さいごに
今回は非常に簡単なバグ修正を例にフロントエンドでのTDDについて紹介しました。

TDDやテストを書くには、どんな簡単なモノでも良いので**たくさんテストを書いて経験を得る**ことが何より大事だと思います。  

TDDで開発をしてみたいけどなかなか初めの一歩が踏み出せない場合は、今回のケースのようなすごく簡単な修正からテストを書き始めてみましょう。


この記事は YAMAP エンジニア Advent Calendar 2021 の22日目の記事です。現在、輪読会で「テスト駆動開発」（TDD）を読み進めています。本を読んで色々と知識が入ってきているので、業務でアウトプットしてみたいなと思い、バグ修正からTDDを初めてみたら良かったので紹介します。

バグ修正から始めるフロントエンドのTDD入門


この記事は [YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の14日目の記事です。

## 経緯
ある時、チーム内のコードレビューをしていてスペルミスの指摘が目立つようになってきました。

スペルミスのチェックは人がやるより機械がやった方が早いということで、CIでスペルチェックを自動化してコードレビューで自動でスペルミスを指摘する仕組みを導入してみたので、導入方法とその後の効果をまとめました。

この記事で書いているコードは全て [t-yng/ci-spell-check-sample](https://github.com/t-yng/ci-spell-check-sample) に置いてあります。

## 導入手段の検討
### 既存のGithub Actions
マーケットプレイスの GitHub Actions をリポジトリに導入するパターン。  
いくつか試したが期待する結果が得られなかったので、後述する GitHub Actions を自作する形式にした。

- [Typo CI](https://typoci.com/)
  - Github Actions でリポジトリにスペルチェックを導入可能
  - 調査段階では Github が 404 になっていたので詳細は調べてない
  - 執筆時点(2021/12/13 時点）で確認したら参照可能になっていた
- [Check spelling](https://github.com/marketplace/actions/check-spelling)
  - 調査時点では β版 の状態だった
- [misspell-fixer-action](https://github.com/marketplace/actions/misspell-fixer-action)
  - Developers.ioで[オススメ記事](https://dev.classmethod.jp/articles/spellcheck-on-actions/)があった

### スペルチェックのライブラリを GitHub Actions に組み込む
自前でスクリプトを書いて Github Actions を構築するパターン。  
[cspell](https://github.com/streetsidesoftware/cspell) を GitHub Actions に組み込みCIを構築することにしました。

- [misspell](https://github.com/client9/misspell)
  - 試してみたが期待したようにスペルミスを判定してくれなかった
  - ライブラリとして JavaScript などの言語はサポート外に見えた

- [misspell-fixer](https://github.com/vlajos/misspell-fixer)
  - ↑で挙げた misspell-fixer-action で利用されているライブラリ
  - 環境構築が面倒そうだったので試してない

- [cspell](https://github.com/streetsidesoftware/cspell)
  - VSCode の拡張で圧倒的な人気を誇る [Code Spell Checker
](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) で利用されているライブラリ
  - cliがあり手軽に実行できるのとVSCodeの拡張として使われている実績がある
  - prismjs などのライブラリ名や固有名詞がスペルミスとして扱われる点だけがデメリット  
     (単語辞書を作成すればスキップは可能）

## CIの構築
### cspellの導入とnpmスクリプトの作成
cspell のインストール

```shell
$ yarn add -D cspell
```

cspellの設定ファイル(.cspell.json)を作成

```json
// .cspell.json
{
  "version": "0.2",
  "language": "en",
  "words": [], // 固有名詞などチェックをスキップしたい単語を登録する
  "dictionaries": [
    "softwareTerms", 
    "misc",
    "companies",
    "typescript", 
    "node", 
    "html", 
    "css", 
    "fonts", 
    "filetypes", 
    "npm"
  ],
  "ignorePaths": [
    "**/node_modules/**",
    "**/.git/**",
    "**/.vscode/**",
    "**/.next/**",
    "**/__generated__/**",
    "**/package.json",
    "**/yarn-error.log",
    "**/yarn.lock"
  ]
}
```

npmスクリプトの作成

```json
{
  "scripts": {
    "spell-check": "cspell lint -c .cspell.json --show-suggestions"
  }
}
```

適当にタイポがあるコードを作って実行してみる。  
スペルチェックが正常に動作して代替の単語の提案してくれる部分ができた。

```javascript
// src/index.js
const heloo = (name) => console.log(`hello, ${name}`);
```

```shell
$ yarn spell-check
1/1 ./src/index.js 597.00ms X
/Users/tomohiro/workspace/examples/ci-spell-check/src/index.js:1:7 - Unknown word (heloo) Suggestions:  [helot, helio, hello, Helot, holo]
```

### GitHub Actions の実装
スペルチェックを実行するスクリプトは作れたので、あとは GitHub Actions でスクリプトを実行するだけです。  
`.github/workflows/spell-check.yaml` を作成してプッシュしたタイミングでスペルチェックが走るようにします。

```yaml
# .github/workflows/spell-check.yaml
name: review-on-push

on: push

jobs:
  spell-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: Install Dependencies
        run: yarn install
        env:
          NODE_AUTH_TOKEN: ${{ secrets.AUTH_TOKEN_FOR_GITHUB_PKG }}

      - name: execute spell-check
        run: yarn spell-check
```

### Reviewdog でPRにコメントする
今の状態はどこのコードでスペルミスが発生しているのか分かりにくい状態なので Reviewdog でPRにコメントします。  
さらに cspell はスペルミスが見つかった時にエラーとしてスクリプトが終了するので Reviewdog を通すことでCIがエラーとなるのを防ぐこともできます。

```yaml
# .github/workflows/spell-check.yaml
- uses: reviewdog/action-setup@v1
- run: reviewdog -version

(省略)

- name: execute spell-check
  env:
    REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  run: |
    yarn spell-check \
      | reviewdog -level=warning -efm="%f:%l:%c - %m" -reporter=github-pr-review
```

これでスペルミスがあった時に Reviewdog がPRに自動でコメントしてくれます。

<img src="/images/posts/spell-check-ci/spell-check-reviewdog.png" alt="Reviewdogのコメント" width="1844" height="794" />

### 修正差分に対してのみスペルチェックを実行する
リポジトリが肥大化していくとスペルチェックの対象コードが膨大になりスペルチェックの実行に時間がかかるので、修正差分だけを対象としてスペルチェックを実行するようにします。

```yaml
- uses: actions/checkout@v2
  with:
    fetch-depth: 0 # 差分取得のために全てのブランチを取得する

(省略)

- name: execute spell-check
  env:
    REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  run: |
    git diff remotes/origin/$GITHUB_BASE_REF --name-only \ 
      | yarn spell-check \
      | reviewdog -level=warning -efm="%f:%l:%c - %m" -reporter=github-pr-review
```

## 導入後の結果
導入後はPRでスペルミスが自動で見つかり一定の効果を得ることができました。

しかし、デメリットでも書いたようにライブラリ名や固有名詞がスペルミスとして判定されてしまい、スペルミスでない単語もコメントで指摘されてしまっていました。この指摘が非常にノイズとなりコードレビューがやりづらくなってしまったので、結局CIは廃止する流れになりました。:smiling_face_with_tear:

## 結局どうしたか？
最終的には個々人の開発エディタにプラグインとしてスペルチェックの拡張を導入して、開発中にスペルチェックに気づけるようにする形で落ち着き、結果としてコードレビューでスペルミスを指摘することはほぼ無くなりました！

正直言うと最初からこの方法で良いとも思っていたのですが、個々人の開発環境に依存する解決策はできれば避けたく個人的にやってみたかったという理由でCIを導入を試していました。

CIは廃止する流れになりましたが、チームの問題への意識が高まって結果としてスペルミスの問題を解消されたので良かったです。


この記事はYAMAP エンジニア Advent Calendar 2021の14日目の記事です。ある時、チーム内のコードレビューをしていてスペルミスの指摘が目立つようになってきました。スペルミスのチェックは人がやるより機械がやった方が早いということで、CIでスペルチェックを自動化してコードレビューで自動でスペルミスを指摘する仕組みを導入してみたので、導入方法とその後の効果をまとめました。

CIでスペルチェックを自動化してみたけど最終的にやめた話


この記事は [YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の10日目の記事です。

## はじめに
コードレビュー難しいですよね。  
今年で6年目になりますが未だにコードレビューが出来ると胸を張って言うことができません。

予定よりも時間をかけてしまったり、そこまで指摘しなくても良かったなーという点を細かくレビューしてしまったり、逆に指摘すべき箇所を見逃してしまったり問題点を挙げればキリがありません。

コードレビューのことを考えるにあたり、自分が普段どんな感じでレビューしているか意識したことをがないなと思い、一度自分がレビュー時に意識していることを整理してみました。

## 仕様の把握
コードレビューを始める時に自分が最初にやることは、修正内容の仕様の把握です。ここでいう仕様とは、「どういう場合にどういう状態になるか」を指しています。

コードレビューとは修正されたコードに問題がないかを客観的な目線でチェックする作業です。  
このとき、**何が正しいか** の基準が無いと問題が無いことを判断することはできないため、最初に**何が正しいのか** 知るためにも対象のPRでの仕様を理解することを意識しています。

### 概要欄を読み込む
チームでレビューをしていると、PRの概要欄には修正の目的などが記載されています。  

まずは概要欄を読むことでざっくりと全体を把握できる事が多いので、最初に概要欄をしっかりと読むようにしています。（しっかり書かれている前提ですが）

### ブラウザで動作確認
修正内容を理解するために、ソースコードを読む前にブラウザで実際に動作確認をします。

先に実際に動かして確認をした方が理解を深めやすく、何をやっているかをイメージしながらコードリーディングができるので、コードレビューがやりやすくなります。

最初の動作確認で分からない点や気になった箇所があれば、そこだけピンポイントでコードを読んで仕様を理解するようにしています。この時にバグが見つかることも多々あります。

### APIリクエストの仕様について
APIリクエストをしている場合はAPIレスポンスのデータ構造も意識的に確認するようにしています。
フロントエンドはAPIのレスポンスデータを画面上に表示する事が主な役割なので、表示するデータの仕様を把握しないと正しくデータを扱えているかの判断が難しいためです。

外部APIのレスポンスでデータの意味が分からない場合は、念の為API仕様書でレスポンスの仕様を把握してレビューができると、予想外のバグが見つかったりします。

##  レビューの優先度
レビューをする時は自分の中で項目を分けて優先度を付けてレビューをしています。

1. バグ・デグレが発生しないか
2. セキュリティは問題ないか
3. 変更は容易か（設計）
4. コードは読みやすいか

レビュー項目を分けて優先度を付けておくと、PRの内容に応じてレビューにかける時間配分をコントロールできるようになります。
- コードレビューをする時間が少ない場合は最低限 2 まではしっかり確認して 3,4 にかける時間を短くする。
- 今後も変更が多い重要な機能は、多少を時間をかけてでも全ての項目について細かく確認する。

## 重点的に見る箇所
- サービスとして重要な機能やお金が絡む部分
- XSSなどのセキュリティバグが発生しやすい部分
    - クエリパラメーターを内部で参照する場合など
- 多くの場所から参照されているファイル
    - 共通ライブラリやコンポーネント

## バグ・デグレが発生しないか
- 意地悪な気持ちになって特殊な操作をしてみる
- PC,スマホの両方のviewportでデザイン崩れが発生しないか
- CSS, JS はサポートしているブラウザで利用可能か
 - ここら辺はESLintで自動テストをかけて、ある程度チェックを省略することもできます
- 条件分岐の条件は適切か
- 修正箇所を呼んでいる他の部分に影響がないか

### バグ・デグレが発生やすい箇所
次の箇所は経験的にバグ・デグレが発生しやすいので注意深くレビューをすることが多いです。

- コードの可読性が低い部分
- コードから実装者の意図が読み取れない箇所
  - 裏側に複雑な仕様が隠れていることがあるので、デグレが発生しやすい
- データ構造が複雑な箇所
  - 多くのことをやり過ぎている可能性が高く処理が複雑になっている可能性が高い
- 条件分岐が複雑な箇所
  - 多くのことをやり過ぎている可能性が高く処理が複雑になっている可能性が高い
- 多くの箇所から参照されている部分
  - 呼び出し元に応じた処理が1箇所に書かれて、処理が複雑になりやすい
- パッと見で特殊なことをやっている箇所
  - 読んでいて普通だったらこんな実装しないなと感じる箇所は裏側に複雑な仕様が隠れていることがあるのでバグが発生しやすい
- なんかモヤモヤとした不安感を感じる箇所
  - モヤモヤの正体は経験則による直感であることが多く、過去に似た箇所でバグに遭遇したことがあったりするので、その直感は当たることが多い

## セキュリティに問題はないか
- URLパラメーターなどユーザーが入力可能な値を参照している場合は、XSSなどに問題がないか
- 権限などで機能制限をしている場合は、ローカルプロキシなどでレスポンスを改竄して悪さできないか
  - レスポンスを改竄して制限をすり抜けられる場合は、それをやられた場合のサービスのリスクを考える

## 変更は容易か（設計）
- 発生する可能性のある仕様変更を想像して、その仕様変更に対して容易に対応可能か
  - 仕様変更があった場合に複数箇所を修正する必要があると1箇所だけ修正を忘れてデグレが発生しやすい
  - 修正時の影響範囲が多いとデグレが発生しやすい
- 一つのファイルが責務を持ち過ぎていないか
    - 1箇所で多くのことをしていると処理が複雑になりデグレが発生しやすい
    - 修正時の影響範囲も把握がしづらくなる
    - 修正時に考慮することが増えるので機能改修に時間がかかる

## コードの可読性
- 1か月後の自分が同じコードを読んで理解できそうか
- 無駄に複雑に書かれていないか
- 変数名は誤解を生むような名前になっていないか
- 自分が実装する場合にどう実装するかをイメージする

## レビューコメント
- 可読性や設計を指摘する場合は、極力ダメな理由と改善案（サンプルコード）を一緒に提示する
  - 一方的にダメと言われるとレビュイーも困りますし、気分が悪くなっちゃいます。
- ラベルをつける
  - レビュイーがコメントに対して優先度をつけて対応ができるので効率が上がります
  - FIX(バグ修正）, REFACTOR、COMMENT など
  - [レビューコメントにラベルをつけるだけで開発効率があがって幸せになれそうな話 - Qiita](https://qiita.com/godgarden/items/3ea57a7ee6dbff1df6e6)
- 絵文字やAAを使う
  - コードレビューは書いたコードに対して何かしらの指摘が発生する作業なので、ギスギスしてしまう可能性があります。
  - 少しでもギスギスしないように絵文字やAAを使って雰囲気が柔らかくなるようにしています。
- 良い点があれば Good なリアクションをする
  - 褒められると嬉しい👍
- 人を否定しない
  - こんなコードを書くなんて全然ダメだ！などと個人に対しての言及はダメ。ゼッタイ。
  - 自分が言われたら辛い🥲
- 宗教戦争になり得ると思った指摘はしない
  - ただ、宗教戦争になるかどうかの判断はかなり難しい
  - 書き方の問題であれば、コーディング規約を決めてLinterでチェックできると良い
  - 宗教戦争になりそうだと思ったら、「好みの問題かもしれないですが...」などと前置きをおいてお茶を濁す
  - COMMENT ラベル等でお気持ちの表明だけをする

## コードレビューを楽しむ🎉
自分はコードレビューをゲーム感覚で実施することを心がけています。バグを見つけらたらレビュアーの勝ち！バグが無ければレビュイーの勝ち！という具合です。目標を持ってコードレビューをするとレビューをしていて楽しいですし、バグを見つけることに全力になります。

※ 勝ち負けは自分の中だけに留めておいてください。

## 参考資料
丁寧にまとまっているので、併せて読んでみてください。

- [より良いコードレビューをするために気をつけていること | メルカリエンジニアリング](https://engineering.mercari.com/blog/entry/2019-12-22-080000/)
- [コードレビューの際に気をつけること - Qiita](https://qiita.com/awakia/items/8344ba751426e386e0f5)
- [僕がコードレビューの時に気をつけていること｜su-｜note](https://note.com/su_k/n/nf23ab5c6dba2)


この記事はYAMAP エンジニア Advent Calendar 2021 の10日目の記事です。コードレビュー難しいですよね。今年で6年目になりますが未だにコードレビューが出来ると胸を張って言うことができません。予定よりも時間をかけてしまったり、そこまで指摘しなくても良かったなーという点を細かくレビューしてしまったり、逆に指摘すべき箇所を見逃してしまったりします。

僕がフロントエンドのコードレビューをする時に意識していること


この記事は [YAMAP エンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yamap-engginers) の7日目の記事です。

## はじめに
初めてフロントエンドでコンポーネントのユニットテストを書く時に「何をテストするのか」が分からず、上手くテストが書けないという事があります。

この記事ではコンポーネントの入力と出力を意識することでユニットテストで「何をテストするか」について、まとめています。

## 自動テストは何をテストするのか？
最初に一般的に自動テストでは何をテストするのかを明確にします。

自動テストでは**与えた入力に対して期待した出力が得られるか？** をテストします。基本的にはこれだけ意識しておけば大抵の自動テストは書くことができます。（暴論）

例えば次ような url が Googleのドメインかどうかを判定する関数のテストを考えてみます。

```typescript
const isGoogleDomain = (url: string): boolean => {
  return url.match(/^http[s]:\/\/google.com\//) != null;
}
```

この関数をテストしてくださいとお願いされたら、どのようなテストを書くでしょうか？  
大抵は最低限、次の2つのテストを考えるのではないでしょうか？
1. https://google.com/search?q=テスト の時に true を返すか
2. https://example.com の時に false を返すか

このテストケースの入力と出力をまとめると次のようになります。

|入力|出力|
|--|--|
|https://google.com/search?q=テスト|true|
|https://example.com|false|

## コンポーネントのテストが難しい理由
先ほど見たように、util 系の関数は入力と出力が分かりやすいので、比較的テストが書きやすい部類になると思います。それに比較してコンポーネントは意識しないと入力と出力が分かりにくいのではないでしょうか？

コンポーネントのテストが難しいと感じる理由は **テストの書き方が分からない** のではなく **入力と出力が分からない** ことが大きな原因となっていると考えています。

逆に言えばコンポーネントの入力と出力が把握できれば、コンポーネントのテストも util系の関数と同じように書くことができます。

## コンポーネントの入力と出力
ここからReactの関数コンポーネントを例に話を進めますが、基本的な考え方は Vue のコンポーネントでも同じです。
Reactの関数コンポーネントは名前の通りただの関数です。ただの関数ということは入力と出力が定義できるということです。

では、関数コンポーネントの出力とは何でしょうか？
それは、**HTMLのDOM構造** です。

それに対して入力は主に次の3種類です。
1. props
2. クリックなどのユーザーイベント
3. Reduxなどのグローバルストア

以上のことから、それぞれ**3種類の入力に対して正しくHTMLの構造が出力されるか**を確認することで、コンポーネントのテストを書くことができます。

## コンポーネントはテストを書かない違和感
このように入力と出力を意識して考えると、関数コンポーネントもutil系の関数も同じ関数です。

関数コンポーネントを実装する時には、〇〇なpropsの場合は△△なDOMを出力するといったように条件分岐や、開始日や終了日から滞在日数を計算してテキストを表示するといったような実装をすることがあります。

これらは明らかなロジックにも関わらず、util系の関数のロジックはテストを書くのにコンポーネントのロジックのテストは書かないのは明らかに違和感を感じてしまいます。

なので、コンポーネントのテストもutil関数と同じような感覚でテストを書いていって良いと思います。

## 入力と出力を考えてテストを書いてみる
### 入力と出力を考える
実際に次のカウンターコンポーネントの入力と出力を考えてみます。

次に進む前に試しに自分で入力とを出力を考えてみてください。

```tsx
const Counter = ({count}: {count: number}) => {
    const [countState, setCount] = useState(count);

    const handleClick = () => {
        setCount(count => count + 1);
    }

    return (
        <div>
            <span>{count}</span>
            <button onClick={handleClick}>カウントアップ</button>
        </div>
    );
}
```

入力と出力はこんな感じになります。

|入力|出力|
|--|--|
|count props|count値のテキスト|
|ボタンクリックイベント|現在のcountに+1された値のテキスト|

ここでは、span要素として出力されのるが重要ではなく、**カウントの値がテキストとして出力される**ことが期待している結果なので、出力はテキストという表現をしています。

### テストを書いてみる
入力とを出力を洗い出せたのでテストを書いてみます。

テストの記述には jest + testing-library を利用しますが、触ったことない方でも何をやっているかを把握できると思うので、こんな感じでテストを書くんだという雰囲気を掴む程度で大丈夫です。

最初に props の入力に対する出力のテストを書いてみます。
|入力|出力|
|--|--|
|count props|count値のテキスト|

期待する振る舞いが「props として渡したカウントの値がHTMLのテキストとして出力されるか」なので、入力としてpropsで渡した値(5)が出力としてDOM上にテキストとして表示されているかを確認すればテストを書くことができます。

```tsx
import { render } from '@testing-library/react';
import { Counter } from './Counter';

describe('Counter', () => {
    it('propsで指定したカウント数を表示する',  () => {
        render(<Counter count={5} />);
        const count = screen.queryByText(5);
        expect(count).toBeInTheDocument();
    }
});
```

次にボタンクリックの入力に対してもテストを書いてみます。

|入力|出力|
|--|--|
|ボタンクリックイベント|現在のcountに+1された値のテキスト|

ユーザーイベントの場合もpropsの場合と考え方は同じです。

入力としてボタンクリックイベントを与えた時に、現在のカウントを+1した値がテキストとして出力されるかを確認すればテストを書くことができます。

```tsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Counter } from './Counter';

describe('Counter', () => {
    it('propsで指定したカウント数を表示する',  () => {
        render(<Counter count={5} />);
        const count = screen.queryByText(5);
        expect(count).toBeIntTheDocument();
    }

    it('ボタンをクリックすることで表示するカウント数が増える',  () => {
        render(<Counter count={5} />);
        const button = screen.getByRole('button');
        userEvent.click(button);
        userEvent.click(button);
        const count = screen.queryByText(7);
        expect(count).toBeInTheDocument();
    }
});
```

## 具体的なコンポーネントのテストを考えてみる
サンプルのカウンターコンポーネントではピン来ないと思うので、もう少し具体的なコンポーネントとして通知内容に応じてリンクを表示する `NotificationLink` というコンポーネントのテストを考えてみます。

`NotificationLink` は props で `Notification` オブジェクトを受け取り、プロパティの値に従ってaタグを返す関数コンポーネントです。

仕様は次の通りです。
- `webLaunchUrl` が null or 空文字の場合は span要素でテキストを表示する
- `webLaunchUrl` が外部リンクの場合は、別タブで対象のリンクを開くa要素を表示する
- `webLaunchUrl` が内部リンクの場合は、相対パスをリンクとしたa要素を表示する

これらの情報を元に今までの例に習って、入力と出力を考えみましょう。

```tsx
export const NotificationLink = ({notification}: Notification) => {
    const webLaunchUrl = notification.webLaunchUrl;

    if(webLaunchUrl == null || webLaunchUrl === '') {
        return <span>{notification.text}</span>
    }

    if (isExternalLink(webLaunchUrl)) {
        return <a href={webLaunchUrl} target="_blank">{notification.text}</a>
    }

    const relativePath = getRelativePath(webLaunchUrl);
    return <a href={relativePath}>{notification.text}</a>   
}
```

入力と出力はこんな感じです。

|入力|出力|
|--|--|
|webLaunchUrl が null の notification|notification.textのテキスト(a要素でない)|
|webLaunchUrl が外部リンクの notification|別タブで外部リンクを開くa要素|
|webLaunchUrl が内部リンクの notification|相対パスがリンクとして指定されたa要素|

入力と出力が分かったので、これを元にテストを書いてみます。

```tsx
import { render } from '@testing-library/react';
import { NotificationLink } from './NotificationLink';

describe('NotificationLink', () => {
    it('webLaunchUrlがnullのときにテキストのみを表示する', () => {
        const notification = { webLaunchUrl: null, text: 'test' };
        render(<NotificationLink notification={notification} />;
        const text = screen.queryByText(notification.text);
        const link = screen.queryByRole('link');

        expect(text).toBeInTheDocument();
        expect(link).not.toBeInTheDocument();
    });

    it('webLaunchUrlが外部リンクの時に別タブのリンクを表示する', () => {
        const notification = { webLaunchUrl: 'https://example.com', text: 'test' };
        render(<NotificationLink notification={notification} />;
        const link = screen.queryByRole('link');

        expect(link).toHaveAttribute('href', notification.webLaunchUrl);
        expect(link).toHaveAttribute('target', '_blank');
        expect(link).toHaveTextContent(notification.text);
    });

    it('webLaunchUrlが内部リンクの時に相対パスでリンクを表示する', () => {
        const notification = { webLaunchUrl: 'https://t-yng.jp/tag/typescript', text: 'test' };
        render(<NotificationLink notification={notification} />;
        const link = screen.queryByRole('link');

        expect(link).toHaveAttribute('href', '/activities');
        expect(link).not.toHaveAttribute('target', '_blank');
        expect(link).toHaveTextContent(notification.text);
    });
})
```

## コンポーネントのテストを書くメリット
### 設計の良し悪しの基準になる
「テストが書きにくいコードは設計が良くない」というのはテストを書くときに頻繁に言われる話ですが、コンポーネントでもこの考えは当てはまります。

色々な責務を持っている複雑なコンポーネントに対してテストを書いてみようとすると、入力と出力が分かりにくくなり、様々なモックを利用する必要が出てくるので非常にテストを書くのが困難になります。

特にコンポーネントの設計は良し悪しが難しい部分があるので、テストを書くことでテストが書きやすい=設計が悪くない、と判断して自信を持って実装を進めることができるのは大きなメリットです。

### 安心してリファクタリングができる
一般的に自動テストが効力を発揮するのはリファクタリングをしたときです。つまり、既存コードを修正するタイミングです。

コードレビューをしていると、レビューの指摘を受けてコンポーネントをリファクタするのは日常茶飯事なので、この時にテストを書いておけば安心してコード修正することができます。

テストはリリース前のタイミングでも書いてあるだけで十分に恩恵を得ることができます。

### 検証コストの削減
先ほどの `NotificationLink` コンポーネントに渡される `notification` オブジェクトがAPIレスポンスとして取得される場合には、手動検証をするにはパターンごとにAPIのレスポンスをモックしてブラウザ操作をする必要があり非常に面倒です。準備なども含めると10~15分ほどかかる場合もあるかもしれません。

コンポーネントのテストを書けば入力をモックできるので、1回テストを書けばボタンをポチッと押すだけで、5秒で検証することができます。

このように、APIレスポンスによって表示を切り替えるようなパターンでは手動検証よりもテストを書いた方が圧倒的に検証コストを減らせるメリットがあります。

## まとめ
- コンポーネントのテストも入力と出力を明確にして、期待した出力が得られるかを確認するようにするとテストが書きやすくなる。
- コンポーネントの単体テストは検証コストの削減など十分にテストを書くメリットは多い

コンポーネントのテストは実際に書いてみないと分からないことが多いので、とりあえず簡単な1ケースだけからでも良いので書き始めてみましょう！


初めてフロントエンドでコンポーネントのユニットテストを書く時に「何をテストするのか」が分からず、上手くテストが書けないという事があります。この記事ではコンポーネントの入力と出力を意識することでユニットテストで「何をテストするか」について、まとめています。

コンポーネントの入力と出力を意識してユニットテストを書いてみよう


この記事は
[タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜](https://qiita.com/advent-calendar/2021/timeleap-typescript)  
5日目の記事です。

## はじめに
自分がTypeScriptを書き始めた頃に苦労したのが、Jestでテストを書くときのモックの型をどう書けば良いか分からないことでした。

調べても型の指定方法が分からず、泣く泣く `as any` でコンパイラーを黙らせて、補完が効かなくなりモヤモヤしながらテストコードを書いていました。

TypeScriptで型を妥協してテストコードを書いていた時は次のような弊害もあったので、どう型安全にテストコードを書けば良いのか非常に知りたかったです。  
- 補完が効かなくなるのでコーディングが面倒になる
- プロパティをタイポした事に気づかずに、テストが失敗しても失敗している原因に気付けず疲弊する

## もくじ
- [モジュールモックの型指定](/post/jest-typescript-types#モジュールモックの型指定)
- [関数モックの型指定](/post/jest-typescript-types#関数モックの型指定)
- [スパイモックの型指定](/post/jest-typescript-types#スパイモックの型指定)

## モジュールモックの型指定
APIからユーザーの一覧を取得する関数のテストを考えてみます。

```typescript
// users.ts
import axios from 'axios';

export const all = () => {
  return axios.get('/users').then(res => res.data);
}
```

APIを直接リクエストせずにモックデータを返してテストが出来るように axios のモジュールをモックしてテストを書いてみます。

次の例では TypeScript は axios がモック化されたモジュールとして認識ができないので `axios.get.mockResolvedValue()` は型エラーとなります。  

当時はこの型エラーを解消するために `(axios.get as any).mockResolvedValue()` と書いていました。

```typescript
// users.spec.ts
import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('should fetch users', async () => {
  const usersMock = [{name: 'taro'}];
  // error TS2339: Property 'mockResolvedValue' does not exist on type
  axios.get.mockResolvedValue({ data: { users: usersMock } });  
});
```

モジュールをモックする場合は、モジュールを別の変数に代入して型指定を行うことでモック化されたモジュールとして扱うことができます。

Jestにはモック化の型定義が複数用意されており、モジュールモックの場合は `jest.Mocked<T>` の型定義を利用してモック化されていることを表現できます。  

`typeof axios` と指定することで、ジェネリクスの型もモジュールから自動生成ができます。

```typescript
// users.spec.ts
import axios from 'axios';
import * as users from './users';

jest.mock('axios');

const axiosMock = axios as jest.Mocked<typeof axios>;

test('should fetch users', async () => {
  const usersMock = [{name: 'taro'}];
  axiosMock.get.mockResolvedValue({ data: { users: usersMock } });
});
```

## 関数モックの型指定
次にデータをフェッチする関数を引数として渡す場合の実装を考えてみます。

```typescript
export type Fetch<T = any> = (url: string) => Promise<{ data: T }>;

export const all = (fetch: Fetch) => {
  return fetch("/users").then((res) => res.data);
};
```

関数のモックは `jest.fn()` を使い生成できます。

次のテストコードでは、 `mockImplementation()` を利用してモック関数を実装していますが、実装関数の引数と戻り値が `any` となるので、モック関数に不適切な実装を渡しても型エラーが発生しません。

そのため、型チェックは通過しますがテスト実行時に `fetch(...).then is not a function` というエラーが発生してしまいます。  

このエラーも型安全にテストコードが書けていれば、未然に回避することができます。

```typescript
import * as users from "./users";

describe("users", () => {
  it("fetch all", async () => {
    const usersMock = [{ name: "Bob" }];
    const response = { data: { users: usersMock } };

    // Promise<{data: any}> を返すべき所を誤って、User[] を返している
    // 型エラーにはならない
    const fetchMock = jest.fn().mockImplementation(() => usersMock);

    const result = await users.all(fetchMock);
    expect(result).toEqual(usersMock);
  });
});
```

`jest.fn()` の関数を型安全に実装するには大きく2つの方法があります。

1つは関数実装を`jest.fn()` の引数として直接渡す方法です。

引数として渡した場合に型推論により、モック関数の型が決まるので正しく実装されていない場合に `users.all(fetchMock)` の引数の型チェックで失敗します。

```typescript
const fetchMock = jest.fn(() => usersMock);
// Argument of type 'Mock<{ name: string; }[], []>' is not assignable to parameter of type 'Fetch<any>'.
const result = await users.all(fetchMock);
```

型が正しい関数実装を渡せば、型チェックが通過します。  

```typescript
const fetchMock = jest.fn(async (_url: string) => response);
const result = await users.all(fetchMock);
```

`mockImplementation()` で型安全に関数を実装したい場合は `jest.fn<T, Y>()` のジェネリクスで関数の引数と戻り値の型を指定できます。

```typescript
const fetchMock = jest.fn<ReturnType<Fetch>, Parameters<Fetch>>();

// error Argument of type '() => { name: string; }[]' is not assignable to parameter of type '(url: string) => Promise<{ data: any; }>'.
fetchMock.mockImplementation(() => usersMock);

// 型が正しい実装
fetchMock.mockImplementation(async (_url: string) => response);
users.all(fetchMock);
```

他には `jest.MockedFunction<T>` で変数に型注釈を書く方法があります。  
こちらの方が、ジェネリクスの指定をシンプルに書くことができます。

```typescript
const fetchMock: jest.MockedFunction<Fetch> = jest.fn();

// error Argument of type '() => { name: string; }[]' is not assignable to parameter of type '(url: string) => Promise<{ data: any; }>'.
fetchMock.mockImplementation(() => usersMock);

// 型が正しい実装
fetchMock.mockImplementation(async (_url: string) => response);
const result = await users.all(fetchMock);
```

`jest.MockedFunction<T>` で変数に型注釈を書くやり方は、`beforeEach()` で毎回モックの実装を初期化する場合には特に有効です。

```typescript
let fetchMock: jest.MockedFunction<Fetch>;

beforeEach(() => {
  fetchMock.mockImplementation(async (_url: string) => response);
});

it('fetch all users', () => {
  const result = await users.all(fetchMock);
})
```

## スパイモックの型指定
フロントエンドの実装をしていると、次のような Storage API をラップした `Storage` クラスを書くことがあります。

```typescript
export class Storage {
  get(key: string) {
    return localStorage.getItem(key);
  }
}
```

このクラスをテストしたい場合には `localStorage.getItem` をモックしてテストを書く必要があり、このようなモジュールの一部の関数だけをモックしたい場合には `jest.spyOn()` を利用してテストを書くことができます。

`jest.spyOn()` を普通に書く場合には、型推論によって型が決定されるため、そのままでも型安全に書くことができます。

```typescript
import { Storage } from "./storage";

describe("Storage", () => {
  it("get data", () => {
    const storage = new Storage();
    const spyGet = jest.spyOn(window.localStorage, "getItem");
    // error TS2345: Argument of type '42' is not assignable to parameter of type 'string | null'
    spyGet.mockReturnValue(42);
  });
});
```

`jest.spyOn()` でモックをする場合は、戻り値の型をジェネリクスで指定するような関数をモックする時に型に関する問題が発生します。

改めてユーザー情報の一覧を取得するモジュールを例に考えてみます。

```typescript
import axios from "axios";

export const all = () => {
  return axios.get("/users").then((res) => res.data);
};
```

今回は axios をモジュールモックせずに `axios.get` だけをモックしてテストを書いてみます。

`jest.spyOn<T, M>()` でジェネリクスを指定する場合には、モジュールの型とモックする関数名を文字列で指定します。

次のテストコードではジェネリクスで型を指定していますが、`spyAxiosGet.mockResolvedValue(usersMock)` で型エラーが発生しません。

```typescript
import axios from "axios";
import * as users from "./users";

describe("users", () => {
  it("update user", async () => {
    const usersMock = [{ name: "taro" }];
    const response: AxiosResponse = {
      data: { users: usersMock },
      status: 200,
      statusText: "OK",
      headers: {},
      config: {},
    };

    // spyAxiosGet: SpayInstance<Promise<unknown>>, ...>
    const spyAxiosGet = jest.spyOn<typeof axios, "get">(
      axios,
      "get"
    );
    // Promise<AxiosResponse>} を返すべき所を誤って User[] を返している
    // 型エラーになって欲しいがエラーにならない
    spyAxiosGet.mockResolvedValue(usersMock);
  });
});
```

`jest.spyOn()` と `axios.get()`の型定義をそれぞれ見てみると、`jest.spyOn()` の `SpyInstance<ReturnType<Required<T>[M]>, ...>` の部分で関数の型を取得していますが、関数のジェネリクスを指定していないため、`axios.get()` の戻り値は `Promise<unknown>` となってしまいます。

その結果 `spyAxiosGet` の変数が `SpayInstance<Promise<unknown>>, ...>` という型注釈となります。

上のテストコードでは `spyAxiosGet` の戻り値の型が `Promise<unknown>` となるため型エラーとならないのです。

```typescript
// jest/index.d.ts
function spyOn<T extends {}, M extends FunctionPropertyNames<Required<T>>>(
    object: T,
    method: M
): Required<T>[M] extends (...args: any[]) => any
    ? SpyInstance<ReturnType<Required<T>[M]>, ArgsType<Required<T>[M]>>
    : never;

// axios/index.d.ts
get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
```

この問題は型アサーションで `spyAxiosGet` の型を上書きすることで解消できます。

ここで `jest.fn()` と同様に型注釈で書こうとすると、戻り値の型が `Promise<unknown>` と`Promise<Partial<AxiosResponse<users.User[]>>>` で不一致が発生するので上手くいきません。

```typescript
const spyAxiosGet = jest.spyOn(axios, "get") as jest.SpyInstance<
  Promise<Partial<AxiosResponse>>
>;

// error Argument of type '{ name: string; }[]' is not assignable to parameter ...
spyAxiosGet.mockResolvedValue(usersMock);

// 型エラーは解消される
spyAxiosGet.mockResolvedValue(response);
```

## さいごに
自分のググり力が低いせいかTypeScriptをちゃんと書き始めた頃(2,3年前？)は、ここら辺の情報を検索しても全く見つけることが出来ませんでした。

ライブラリの型定義ファイルをちゃんと読むようにしたら、この型定義を使えば良いのか！このジェネリクスを指定すれば良いのか！と型の指定方法が分かるようになってきました。  

TypeScriptを書き始めて他のライブラリで似たような問題に直面している方がいたら、一歩踏み出してライブラリの型定義ファイルをしっかり読む事から始めてみると色々と型について理解できてくるのでオススメです。


この記事はタイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜の5日目の記事です。自分がTypeScriptを書き始めた頃に苦労したのが、Jestでテストを書くときのモックの型をどう書けば良いか分からないことでした。

TypeScript+Jestでテストを書くときに型安全にモックする方法を教えてほしかった


## 問題
自分は普段 Emacs キーバインドを利用しているのですが、Alfred の検索結果でカーソル移動をするために Ctrl + N をタイプするとカーソル移動せずにパッケージが選択される問題に悩まされていました。

<img src="/images/posts/alfred-ctrl-n/alfred-ctrl-n-bad.gif" alt="ctrl+nでパッケージ選択される" width="840" height="572" />

## 解決策
Alfredの設定で Features > Actions > Show Actions で ctrl のチェックボックスを外せば問題は解消しました。

<img src="/images/posts/alfred-ctrl-n/alfred-settings.jpeg" alt="Alfredの設定画面" width="2280" height="826" />


Alfred で Ctrl + N でパッケージ選択できない問題を解消

Alfred で Ctrl + N でカーソル移動ができない問題を解消

神奈川の田舎で働いてるフロントエンドエンジニアのブログ