コメントを追加

hooks-testing/slides.md

@@ -32,12 +32,20 @@ src: "../reuse/me.md"
 
 https://ja.react.dev/reference/rules/rules-of-hooks
 
+<!--
+ちょっといきなりReactの用語を出してしまって申し訳ないのでちょっと軽くHooksの説明だけさせてください。HooksというのはReactが提供しているAPIの一つです。まあいろいろとルールがあったりするのですが今回の説明では特殊な制約を持った関数ぐらいの認識でも大丈夫です。
+-->
+
 ---
 layout: center
 ---
 
 ## 関数の単体テストについて簡単に確認
 
+<!--
+一回Hooksについては忘れてまずは関数の単体テストについてちょっと振り返ろうと思います。
+-->
+
 ---
 
 ### 単体テストはどのように書くか
@@ -62,6 +70,10 @@ export const sum = (array: number[]): number => {
 
 この関数に対してのテストを書く想定
 
+<!--
+今表示されている関数sumなんですが、これは下記のような仕様をもっているのでそれを単体テストで確認する想定で進めていきます。
+-->
+
 ---
 
 ### 単体テストはどのように書くか
@@ -156,6 +168,10 @@ describe('引数として与えられた配列を全て足し合わせるsum関
 
 ````
 
+<!--
+ざっとテストを書いてみるとこんな感じになると思います。ちょっとこれはテストを構造化していますが3種類のテストケースが書けます。
+-->
+
 ---
 
 ### 単体テストと純粋関数
@@ -177,6 +193,10 @@ export const sum = (array: number[]) => {
 }
 ```
 
+<!--
+先程の例はめちゃくちゃテストが書きやすい例だったのですが、実際はそんなことは多くありません。実際のプロダクションコードでは実行単位で結果が異なる関数などがあります。Math.random();とかが分かりやすいですね。
+-->
+
 ---
 
 ### 単体テストと純粋関数
@@ -215,6 +235,10 @@ export const sum = (array: number[], randomize: number) => {
 ```
 ````
 
+<!--
+なのでそのような場合は、副作用を外部から受け取るようにするとテストが楽になります。今回の場合はこのように（Click）乱数を外部から受け取らせます。
+-->
+
 ---
 
 ### 副作用を除去してテストしやすい関数を作る
@@ -236,19 +260,31 @@ export const sum = (array: number[], randomize: number) => {
 }
 ```
 
+<!--
+そうするとテスト時は乱数を固定して、常に同じ結果を返させることにより簡潔なテストケースをスピーディーに書くことができます。
+-->
+
 ---
 layout: center
 ---
 
 ## 単体テストの考え方をHooksにも適用する
 
+<!--
+ではこの考え方をReactのHooksにも適用してみましょう。
+-->
+
 ---
 
 ## 単体テストの考え方をHooksにも適用する
 
 - テストしづらい副作用は外部から受け取る
 - テストコードが簡潔になるようにI/Fを設計する
 
+<!--
+先程までの内容を要約するとこのようになります。
+-->
+
 ---
 
 ## 単体テストの考え方をHooksにも適用する
@@ -277,6 +313,10 @@ export const useFizzBuzz = () => {
 
 `pathname`を参照元にFizzBuzzをしてその履歴をstoreに格納するHooks
 
+<!--
+いきなりめちゃくちゃ量が多いコードになっちゃって申し訳ないのですが、これは要約すると動的なパスを取得してそれでFizzBuzzを実行して履歴をstoreに保存するって感じです。
+-->
+
 ---
 
 ### 依存を整理する
@@ -348,12 +388,20 @@ export const useFizzBuzz = <T>(pathname: string, atom: Atom<T>) => { // atomも
 
 ````
 
+<!--
+実際に動かしてみないと分かりづらいんですがこれだとモックを用意したりする必要があってテストが面倒なのでちょっと書き方を変えてみます。（Click）まずはルーターですね、こいつは面倒なので外部からURLの文字列を受け取るようにしちゃいましょう（Click）次はAtomですね、アプリケーション全体で値を持ってくれるオブジェクトみたいなものなんですがこれも面倒なので外部からもらうように変えちゃいます。
+-->
+
 ---
 layout: center
 ---
 
 ## 関数とHooksのテストの共通項
 
+<!--
+バーっと話してしまいましたが、Hooksの例も出しつつ単体テストの話をしてみました。改めて関数の単体テストとHooksのテストの共通点を探ってみました。
+-->
+
 ---
 layout: two-cols
 ---
@@ -408,6 +456,10 @@ export const sum = (array: number[], randomize: number) => {
 </p>
 </div>
 
+<!--
+2つは全然別のコードですが単体テストし易い関数の作り方のコツとしてはとにかくテストの障害となる副作用は外部から受け取るようにすると非常に評価しやすい関数になります。こうすることで関数が担うべき責務がはっきりしてくるというメリットもあるので、テストコードを通じたリファクタリングなどもやりやすくなるので単体テストとかを書いたことがないよって人の参考になれば幸いです。
+-->
+
 ---
 
 ## まとめ