$30 off During Our Annual Pro Sale. View Details »

明日からはじめるテストのあるフロントエンド開発 ~ テスティングトロフィー ~

sakito
November 16, 2019

明日からはじめるテストのあるフロントエンド開発 ~ テスティングトロフィー ~

フロントエンドカンファレンス福岡の登壇資料
https://frontend-conf.fukuoka.jp

セッション概要
https://frontend-conf.fukuoka.jp/sessions#b-3

Twitter
https://twitter.com/__sakito__

sakito

November 16, 2019
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

  1. ໌೔͔Β͸͡ΊΔςετͷ͋Δ

    ϑϩϯτΤϯυ։ൃ
    ϑϩϯτΤϯυΧϯϑΝϨϯε෱Ԭ

    View Slide

  2. /BNF
    4BLJUP.VLBJ
    5XJUUFS

    !@@TBLJUP@@
    $PNQBOZ
    $ZCP[VJOD

    'SPOUFOE&YQFSU5FBN
    "CPVUNF

    View Slide

  3. "HFOEB
    wͳͥςετ͕ඞཁͳͷ͔
    w5FTUJOH5SPQIZ
    w6OJU5FTU
    w*OUFHSBUJPO5FTU
    w&&5FTU
    w·ͱΊ

    View Slide

  4. ͳͥςετ͕ඞཁͳͷ͔ʁ

    View Slide

  5. ࠷ॳ͸៉ྷͳϓϩδΣΫτ

    View Slide

  6. ίʔυ͸ৗʹมԽ͍ͯ͘͠
    wػೳͷ௥Ճ
    wϦϑΝΫλϦϯά
    wύοέʔδͷߋ৽
    wόάͷमਖ਼
    wFUDʜ

    View Slide

  7. ஈʑͱ௥Ճ͕೉͘͠ͳ͍ͬͯ͘

    View Slide

  8. ςετΛॻ͘͜ͱͰίʔυʹࣗ৴Λ࣋ͭ
    wϦϑΝΫλϦϯάΛͯ͠΋ɺ

    յΕΔՕॴ͕͙͢ʹΘ͔Δ
    wมߋςετ࣮ߦόάൃ֮·Ͱ

    ͙͢ʹΘ͔Δ

    View Slide

  9. ςετΛॻ͘͜ͱͰ

    ίʔυΛมߋ͢ΔڪාΛͳ͘͢

    View Slide

  10. ͲͷΑ͏ʹςετΛॻ͍͍ͯ͘ͷ͔ʁ

    View Slide

  11. ςετͷ۠෼
    w6OJU5FTU ؔ਺΍ϝιου୯Ґͷςετ

    w*OUFHSBUJPO5FTU ػೳςετ

    w&OE5P&OE5FTU ΞϓϦέʔγϣϯͷςετ

    View Slide

  12. ςετͷόϥϯεͱίετ
    6OJU5FTU
    *OUFHSBUJPO5FTU
    ࣮ߦอकίετ
    ։ൃ࣮ߦ଎౓
    &&5FTU
    ςετͷྔ

    View Slide

  13. ςετͷόϥϯεͱίετΛ

    ϑϩϯτΤϯυ͚ͩʹϑΥʔΧεͯ͠ΈΔ

    View Slide

  14. 5FTUJOH5SPQIZ

    View Slide

  15. 5FTUJOH5SPQIZ
    Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN

    View Slide

  16. 5FTUJOH5SPQIZ
    Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w,FOU$%PEETߟҊ
    wΧόϨοδΛ໨ࢦ͢ͷͰ͸ͳ͍
    wίετɺ଎౓ɺ৴པੑͷόϥϯε

    View Slide

  17. 8SJUFUFTUT/PUUPPNBOZ.PTUMZJOUFHSBUJPO
    IUUQTLFOUDEPEETDPNCMPHXSJUFUFTUT

    View Slide

  18. 5FTUJOH5SPQIZ4UBUJD૚
    Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w-JOU 1SFUUJFS 5ZQF4DSJQUͳͲΛ࢖༻
    wλΠϓϛεɺߏจνΣοΫͳͲΛ୲͏૚

    View Slide

  19. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w+FTU΍UFTUJOHMJCSBSZΛ࢖༻
    wͭͷؔ਺ɺϩδοΫʹରͯ͠ςετΛ
    ॻ͘૚
    5FTUJOH5SPQIZ6OJU૚

    View Slide

  20. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w6OJUςετͰ͸Χόʔͮ͠Β͍ෳ਺ͷ

    ίϯϙʔωϯτ΍ػೳΛ૊ΈΘͤͨςε
    τΛ͢Δ૚
    wϞοΫΛՄೳͳݶΓ࢖༻ͤͣɺ

    ຊདྷͷػೳ௨ΓͷςετΛ໨ࢦ͢
    w6OJU5FTUͱͷ໌֬ͳ۠෼͸ͳ͍ͷͰɺ

    νʔϜͰͲͷػೳൣғ͕*OUFHSBUJPO
    ૚ͳͷ͔ٞ࿦͢ΔͱΑ͍
    5FTUJOH5SPQIZ*OUFHSBUJPO૚

    View Slide

  21. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w$ZQSFTTͳͲͷ

    &&ϑϨʔϜϫʔΫΛ࢖༻
    wαʔόʔͱͷ௨৴ΛڬΉςετͳͲ

    ΞϓϦέʔγϣϯ্Ͱόά͕͋ͬͯ͸ࠔ
    ΔॏཁͳػೳΛςετ͢Δ૚
    5FTUJOH5SPQIZ&OEUP&OE૚

    View Slide

  22. 5FTUJOH8PSLTIPQ
    IUUQTHJUIVCDPNLFOUDEPEETUFTUJOHXPSLTIPQ
    w,FOU$%PEET͕࡞੒ͨ͠ϨϙδτϦ

    View Slide

  23. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    ࠓճ͸্Ґ૚Λίʔυͱڞʹઆ໌͍ͯ͘͠

    View Slide

  24. 6OJU5FTU

    View Slide

  25. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU

    IUUQTUFTUJOHKBWBTDSJQUDPN
    w+FTU
    w'BDFCPPL੡ͷ044ϥΠϒϥϦ
    w6OJU5FTUʹඞཁͳ"TTFSU .PDL $PWFSBHFͳͲ
    ͷػೳΛ΋͍ͬͯΔ
    w5FTUJOH-JCSBSZ
    w,FOU$%PEET͕࡞੒ͨ͠ϥΠϒϥϦ
    w%0.Λૢ࡞͢Δ"1*Λఏڙ
    w%0.5FTUJOH-JCSBSZ΍3FBDU5FTUJOH-JCSBSZ
    ͕͋Δ
    +FTUͱ5FTUJOH-JCSBSZ

    View Slide

  26. +FTUΛ༻͍ͨίʔυ੒ޭ
    wKFTU UTKFTUΛ࢖༻

    View Slide

  27. +FTUΛ༻͍ͨίʔυ੒ޭ

    View Slide

  28. +FTUΛ༻͍ͨίʔυࣦഊ
    wظ଴͢Δ݁Ռͱࠓͷ݁Ռͷҧ͍͸ɺ͙͢ʹΘ͔Δ

    View Slide

  29. +FTUΛ༻͍ͨίʔυࣦഊ

    View Slide

  30. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻
    wϥϯμϜͷ݁ՌΛऔಘ͢ΔͷͰ҆ఆ͠ͳ͍ςετ

    View Slide

  31. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻

    View Slide

  32. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻
    w.PDL͢Δ͜ͱʹΑΓ݁Ռ͕҆ఆ͢Δ

    View Slide

  33. +FTUΛ༻͍ͨίʔυ.PDLͷ࢖༻

    View Slide

  34. 3FBDUͷςετ৔߹
    w!UFTUJOHMJCSBSZSFBDUΛ࢖༻

    View Slide

  35. 3FBDUͷςετ৔߹

    View Slide

  36. 3FBDUͷςετ৔߹

    View Slide

  37. 3FBDU$VTUPN)PPLTͷςετ৔߹
    w!UFTUJOHMJCSBSZSFBDUIPPLTΛ࢖༻

    View Slide

  38. 3FBDU$VTUPN)PPLTͷςετ৔߹

    View Slide

  39. 3FBDU$VTUPN)PPLTͷςετ৔߹

    View Slide

  40. 5FTUJOH3FDJQFT
    IUUQTSFBDUKTPSHEPDTUFTUJOHSFDJQFTIUNM

    View Slide

  41. *OUFHSBUJPO5FTU

    View Slide

  42. 5FTUJOH8PSLTIPQͷ5FTUΛݟ͍ͯ͘

    View Slide

  43. ࣮ࡍʹςετ͍ͯ͠ΔMPHJOػೳ

    View Slide

  44. ϩάΠϯػೳͷςετίʔυ

    View Slide

  45. ϩάΠϯػೳͷςετίʔυ

    View Slide

  46. ϩάΠϯػೳͷςετίʔυ

    View Slide

  47. ϩάΠϯػೳͷςετίʔυ

    View Slide

  48. &OEUP&OE5FTU

    View Slide

  49. $ZQSFTT
    Ҿ༻ݩɿDZQSFTTJP

    IUUQTXXXDZQSFTTJP

    View Slide

  50. $ZQSFTTʹ͍ͭͯ
    w&OEUP&OEςετϑϨʔϜϫʔΫ
    w044 IUUQTHJUIVCDPNDZQSFTTJPDZQSFTT

    wෳ਺ͷϒϥ΢βΛαϙʔτ
    wಈ࡞͕ૣ͍
    w࿥ը΍Ωϟϓνϟ͕Ͱ͖Δ
    w$*Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
    wৄ͘͠͸͜͜

    IUUQTEPDTDZQSFTTJPHVJEFTPWFSWJFXXIZDZQSFTTIUNM


    View Slide

  51. $ZQSFTTͷಈ࡞

    View Slide

  52. $ZQSFTTͷίʔυ

    View Slide

  53. $ZQSFTTͰ௨৴Λςετ

    View Slide

  54. $ZQSFTTͷઃఆ
    wDZQSFTTKTPOʹઃఆΛهड़Ͱ͖Δ
    wϒϥ΢β෯΍ߴ͞ɺςετϑΥϧμͷࢦఆͳͲ

    View Slide

  55. $ZQSFTTΛศརʹ͢Δπʔϧ
    w$ZQSFTT5FTUJOH-JCSBSZ

    $ZQSFTTͷDZίϚϯυΛ֦ுͯ͘͠ΕΔ
    w$ZQSFTT&4-JOU1MVHJO

    $ZQSFTTͷ5FTUϑΝΠϧʹద༻Ͱ͖Δ

    View Slide

  56. ·ͱΊ

    View Slide

  57. ·ͱΊ
    w໌೔͔ΒςετΛॻ͍͍ͯ͜͏ʂ
    wςετͰίʔυʹ৴པΛ࣋ͬͯɺ

    ։ൃ͍ͯ͘͠
    wςετ΋όϥϯεͱύϑΥʔϚϯεΛ

    ҙࣝ͢Δ
    w5FTUJOH 5SPQIZ ͸ϑϩϯτΤϯυͷͭͷ
    5FTUख๏
    w*OUFHSBUJPO5FTU΍6OJU5FTUͲ͏෼͚Δ
    ͷ͔νʔϜͰ࿩͠߹͏ͷ͕େࣄ

    View Slide

  58. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide