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

2917a3c430817eb71086f8973c06ebba?s=47 sakito
November 16, 2019

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

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

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

Twitter
https://twitter.com/__sakito__

2917a3c430817eb71086f8973c06ebba?s=128

sakito

November 16, 2019
Tweet

Transcript

  1. ໌೔͔Β͸͡ΊΔςετͷ͋Δ
 ϑϩϯτΤϯυ։ൃ ϑϩϯτΤϯυΧϯϑΝϨϯε෱Ԭ

  2. /BNF 4BLJUP.VLBJ 5XJUUFS
 !@@TBLJUP@@ $PNQBOZ $ZCP[VJOD
 'SPOUFOE&YQFSU5FBN "CPVUNF

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

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

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

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

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

  8. ςετΛॻ͘͜ͱͰίʔυʹࣗ৴Λ࣋ͭ wϦϑΝΫλϦϯάΛͯ͠΋ɺ
 յΕΔՕॴ͕͙͢ʹΘ͔Δ wมߋςετ࣮ߦόάൃ֮·Ͱ
 ͙͢ʹΘ͔Δ

  9. ςετΛॻ͘͜ͱͰ
 ίʔυΛมߋ͢ΔڪාΛͳ͘͢

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

  11. ςετͷ۠෼ w6OJU5FTU ؔ਺΍ϝιου୯Ґͷςετ  w*OUFHSBUJPO5FTU ػೳςετ  w&OE5P&OE5FTU ΞϓϦέʔγϣϯͷςετ

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

  13. ςετͷόϥϯεͱίετΛ
 ϑϩϯτΤϯυ͚ͩʹϑΥʔΧεͯ͠ΈΔ

  14. 5FTUJOH5SPQIZ

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

  16. 5FTUJOH5SPQIZ Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w,FOU$%PEETߟҊ wΧόϨοδΛ໨ࢦ͢ͷͰ͸ͳ͍ wίετɺ଎౓ɺ৴པੑͷόϥϯε

  17. 8SJUFUFTUT/PUUPPNBOZ.PTUMZJOUFHSBUJPO IUUQTLFOUDEPEETDPNCMPHXSJUFUFTUT

  18. 5FTUJOH5SPQIZ4UBUJD૚ Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w-JOU 1SFUUJFS 5ZQF4DSJQUͳͲΛ࢖༻ wλΠϓϛεɺߏจνΣοΫͳͲΛ୲͏૚

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

  20. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w6OJUςετͰ͸Χόʔͮ͠Β͍ෳ਺ͷ
 ίϯϙʔωϯτ΍ػೳΛ૊ΈΘͤͨςε τΛ͢Δ૚ wϞοΫΛՄೳͳݶΓ࢖༻ͤͣɺ
 ຊདྷͷػೳ௨ΓͷςετΛ໨ࢦ͢ w6OJU5FTUͱͷ໌֬ͳ۠෼͸ͳ͍ͷͰɺ
 νʔϜͰͲͷػೳൣғ͕*OUFHSBUJPO ૚ͳͷ͔ٞ࿦͢ΔͱΑ͍

    5FTUJOH5SPQIZ*OUFHSBUJPO૚
  21. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN w$ZQSFTTͳͲͷ
 &&ϑϨʔϜϫʔΫΛ࢖༻ wαʔόʔͱͷ௨৴ΛڬΉςετͳͲ
 ΞϓϦέʔγϣϯ্Ͱόά͕͋ͬͯ͸ࠔ ΔॏཁͳػೳΛςετ͢Δ૚ 5FTUJOH5SPQIZ&OEUP&OE૚

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

  23. Ҿ༻ݩɿ5FTUJOH+BWB4DSJQU
 IUUQTUFTUJOHKBWBTDSJQUDPN ࠓճ͸্Ґ૚Λίʔυͱڞʹઆ໌͍ͯ͘͠

  24. 6OJU5FTU

  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
  26. +FTUΛ༻͍ͨίʔυ੒ޭ wKFTU UTKFTUΛ࢖༻

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

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

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

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

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

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

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

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

  35. 3FBDUͷςετ৔߹

  36. 3FBDUͷςετ৔߹

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

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

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

  40. 5FTUJOH3FDJQFT IUUQTSFBDUKTPSHEPDTUFTUJOHSFDJQFTIUNM

  41. *OUFHSBUJPO5FTU

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

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

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

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

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

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

  48. &OEUP&OE5FTU

  49. $ZQSFTT Ҿ༻ݩɿDZQSFTTJP
 IUUQTXXXDZQSFTTJP

  50. $ZQSFTTʹ͍ͭͯ w&OEUP&OEςετϑϨʔϜϫʔΫ w044 IUUQTHJUIVCDPNDZQSFTTJPDZQSFTT  wෳ਺ͷϒϥ΢βΛαϙʔτ wಈ࡞͕ૣ͍ w࿥ը΍Ωϟϓνϟ͕Ͱ͖Δ w$*Ͱ΋ಈ͔͢͜ͱ͕Ͱ͖Δ wৄ͘͠͸͜͜


    IUUQTEPDTDZQSFTTJPHVJEFTPWFSWJFXXIZDZQSFTTIUNM

  51. $ZQSFTTͷಈ࡞

  52. $ZQSFTTͷίʔυ

  53. $ZQSFTTͰ௨৴Λςετ

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

  55. $ZQSFTTΛศརʹ͢Δπʔϧ w$ZQSFTT5FTUJOH-JCSBSZ
 $ZQSFTTͷDZίϚϯυΛ֦ுͯ͘͠ΕΔ w$ZQSFTT&4-JOU1MVHJO
 $ZQSFTTͷ5FTUϑΝΠϧʹద༻Ͱ͖Δ

  56. ·ͱΊ

  57. ·ͱΊ w໌೔͔ΒςετΛॻ͍͍ͯ͜͏ʂ wςετͰίʔυʹ৴པΛ࣋ͬͯɺ
 ։ൃ͍ͯ͘͠ wςετ΋όϥϯεͱύϑΥʔϚϯεΛ
 ҙࣝ͢Δ w5FTUJOH 5SPQIZ ͸ϑϩϯτΤϯυͷͭͷ 5FTUख๏

    w*OUFHSBUJPO5FTU΍6OJU5FTUͲ͏෼͚Δ ͷ͔νʔϜͰ࿩͠߹͏ͷ͕େࣄ
  58. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠