Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発_台湾版

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発_台湾版

Transcript

1. ኺ Development Experience ٴ։ᚙ੒ຊ୳౼࢖༻
   Laravel + Nuxt.js + Firebase ᐽՍ։ᚙ SPA ܥ౷
   ླ໦޹೭
   

   View Slide

2. 2 ٕज़બᎩ
   Agenda
   4 ᅶୂݐߏ
   1 ࣗզհ঺
   3 ᮫ԙબఆతٕज़
   - Overall product design
   - JWT authentication
   - Chat function with Firebase

   - Test, GitlabCI etc
   

   View Slide

3. 0 Ұ։࢝
   

   View Slide

4. 4
   ނࣄతओ୊
   ɾٕज़બఆΛ͢Δਓ
   ɾٕज़੹೚ऀͷਓ
   ɾϚωʔδϟʔͷਓ
   ɾ͜Ε͔ΒϚωδϝϯτΛ΍ͬͯΈ͍ͨਓ
   

   View Slide

5. 1 ࣗզհ঺
   

   View Slide

6. 6
   ࣗզհ঺
   ◆໊લ
   ླ໦ ޹೭(Suzuki Takayuki)
   ◆ࣗݾ঺հ
   ɾ1990೥ɺ೔ຊͷਆಸ઒ݝੜ·Εɻ
   ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ
   ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥5݄ʹϑϦʔ
   ϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ
   ◆झຯ
   ԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓɺίεϓϨ
   ◆Twitter
   @kanbo0605
   υϥΰϯϘʔϧͷ
   ϐοίϩͰ͢ʂ
   

   View Slide

7. 7
   ࣗզհ঺
   ԭೄ
   I came from
   Okinawa
   

   View Slide

8. 8
   ࣗզհ঺
   ೔ຊͷԭೄͰෳ਺ͷίϛϡχςΟΛӡӦͯ͠·͢
   

   View Slide

9. Copyright Re:Build.inc All Rights Reserved.
   ࣗզհ঺
   ◆ձ໊ࣾ
   גࣜձࣾRe:Build
   ◆ॅॴ
   ԭೄݝԭೄࢢ
   ◆ࣄۀ಺༰
   ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
   ɾडୗ։ൃ
   ◆ࣾһ
   5໊
   ◆ΤϯδχΞͷಇ͖ํ
   ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
   ΤϯδχΞืूதͰ͢ʂ
   

   View Slide

10. 1 0
    ࣗࣾWebαʔϏεͷ։ൃ
    ɾαʔϏε໊
    Tadoru

    https://tadoru.work/

    

    ɾγεςϜ֓ཁ
    ΤϯδχΞಛԽܕͷ
    ϦϑΝϥϧ
    Ϋϥ΢υιʔγϯά
    

    View Slide

11. Re:Build
    اۀͷ୲౰ऀ͕
    ΤʔδΣϯτΛબͿ
    ΤʔδΣϯτ͕ࣗ෼ͷܨ
    ͕Γͷ͋ΔΤϯδχΞ·
    ͨ͸νʔϜʹ੠Λ͔͚Δ
    ΤʔδΣϯτ͸
    ࣄલʹ৹੍ࠪ
    ϫʔΧʔ
    ΤʔδΣϯτ
    اۀ
    ϏδωεϞσϧ
    ࠾༻ใु
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    εΩϧ
    ܦݧ
    Քಇঢ়گ
    ࢓ࣄΛ঺հ͢Δ
    ˕
    ̋
    ̋
    ×
    ˕
    ̋
    ×
    ̋
    ̋
    

    View Slide

12. 1 2
    ։ൃνʔϜߏ੒
    Suzuki Takayuki
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    Kakazu Yuki
    (ਖ਼ࣾһ)
    Ϛωδϝϯτ&։ൃ
    ։ൃ
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि1೔ۈ຿)
    ཁ݅ఆٛ
    UI/UX
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    ෭ۀ
    (ि1೔ۈ຿)
    ͜ͷϙδγϣϯΛ
    ΍ͬͯ·͢ʂ
    

    View Slide

13. 2 ٕज़બᎩ
    

    View Slide

14. 1 4
    ౰࣌ͷ։ൃϝϯόʔͷεΩϧηοτ
    SPAͷWebΞϓϦܦݧ
    ऀ Ұਓ
    αʔόαΠυ(Laravel)
    ͸ಘҙͳਓ͕ଟ͍
    Vue.js(MPA)͸৮ͬͨ͜ͱ
    ͋Δϝϯόʔ͕ଟ͍
    20୅લ൒ʙ20୅ޙ൒Ͱ
    ։ൃܦݧ͸গ͠ઙ͍
    

    View Slide

15. 1 5
    Development schedule
    2018೥12݄ʙ 2019೥3݄ 2019೥4݄ʙ6݄
    ։ൃ։࢝ Ϋϩʔζυβ൛׬੒
    ࠷௿ݶͷ։ൃج൫ɺυ
    Ωϡϝϯτɺ։ൃମ੍
    Λ੔උͯ͠ɺ͕ͬͭΓ
    ։ൃΛਐΊΔ
    ଟগɺόά͕͋ͬͯ΋
    ྑ͍ͷͰɺશମతʹ࠷
    ௿ݶͷॳظͷػೳ͕Ϧ
    Ϧʔε͞Ε͍ͯΔঢ়ଶ
    Λ໨ࢦ͢ɻ
    γʔυϥ΢ϯυͷࢿۚ
    ௐୡ༧ఆ
    ॳظͷػೳ͕ϦϦʔε
    ͞Ε͓ͯΓɺ͋Δఔ౓ɺ
    Ϣʔβͷొ࿥΋֬อ͞
    Ε͍ͯΔঢ়ଶΛ໨ࢦ͢
    

    View Slide

16. 1 6
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ࠓޙɺࢢ৔ͱͯ͠஫໨͞Ε
    ͦ͏ͳٕज़
    ݕࡧͨ͠Β͋Δఔ౓ɺωοτʹ
    υΩϡϝϯτ͕͋Δ
    ԭೄͰ͸ઑ͍ͬͯΔٕज़
    ։ൃίετ͕ߴ͗ͣ͢ɺఔ
    Α͘௅ઓ͍ͨ͠
    

    View Slide

17. 1 7
    DXͱ͸ʁ
    Developer Experience ʢ։ൃମݧʣͱ͸ɺ͋Δγ
    εςϜΛʮؾ࣋ͪΑ͘։ൃɾอकͰ͖Δ͔Ͳ͏͔ʯ
    Λࣔ͢΋ͷ
    ։ൃऀ͸։ൃɾอकͱ͍͏ߦҝΛ௨ͨͦ͡ͷγε
    ςϜͷϢʔβʔͰ͋ΓɺDX͸UXͷҰछͰ͋Δ
    https://gfx.hatenablog.com/entry/2018/06/28/100103
    

    View Slide

18. 1 8
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ࢢ৔Ձ஋͕ߴ͍
    ΤϯδχΞͷ฼਺ଟ͍
    ΤϯδχΞͷ฼਺গͳ͍
    ࢢ৔Ձ஋͕௿͍
    ͜͜Λૂ͏ʂ
    ༏लͳਓࡐΛ
    ࠾༻͠΍͍͢
    

    View Slide

19. 1 9
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ࢢ৔Ձ஋͕ߴ͍
    ΤϯδχΞͷ฼਺ଟ͍
    ΤϯδχΞͷ฼਺গͳ͍
    ࢢ৔Ձ஋͕௿͍
    

    View Slide

20. 2 0
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    Google Trend
    - Laravel͸ࠓޙ΋ਓؾ͸ଓ͖ͦ͏
    

    View Slide

21. 2 1
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    Google Trend

    - ͏ʔΜɺΘ͔Βͳ͍ɻɻɻ
    

    View Slide

22. 2 2
    ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺
    ౦ژͷNuxt MeetupʹࢀՃͯ͠ࢀՃऀͷ൓Ԡ΋ݟͯΈΔࣄʹͨ͠ʂ
    2018/10/18
    ࢀՃ࿮100ਓʹରͯ͠ɺ
    Ԡื͕161ਓ΋͍Δʂʂ
    

    View Slide

23. 2 3
    ౰೔ͷ༷ࢠ
    https://techblog.scouter.co.jp/entry/2018/10/19/153000
    ը૾͸SCOUTER։ൃऀϒϩάΑΓҾ༻ͤͯ͞௖͖·ͨ͠ɻ
    ੌ͍೤ؾʂʂ
    

    View Slide

24. 2 4
    ࢀՃऀͷ੠
    ࢖͍͍͚ͨͲɺ·ͩ౦ژͷ
    ձࣾͰ΋ͳ͔ͳ͔ɺಋೖ͠
    ͍ͯΔاۀ͸গͳ͍
    ϓϥΠϕʔτͰ͸ษڧͯ͠
    ͍Δਓ͕ଟ͍
    Nuxtͷٻਓࣗମ͸૿͖͑ͯ
    ͍ͯΔҹ৅
    

    View Slide

25. 3 䎔ဋ࿊ఆతٕඌ
    Overall product design
    

    View Slide

26. 2 6
    બఆٕͨ͠ज़
    ■ٕज़ཁ݅
    ɾαʔόαΠυ
    PHP(Laravel5.8)
    ɾϑϩϯτΤϯυ
    JavaScript(Vue.js,Nuxt.js)
    ɾςετ
    PHPUnit,Cypress
    ɾ੩తղੳ
    ESlint,PHPStan
    ɾΠϯϑϥ
    AWS(EC2,S3,RDS(mariadb))
    ɾ։ൃ؀ڥ
    php7,nginx,mariadb,docker,webpack
    ɾͦͷଞ
    gitlab,gitlabCI(ࣗಈσϓϩΠͳ
    Ͳ),Slack,phpStorm
    

    View Slide

27. ϑϩϯτΤϯυ αʔόαΠυ
    શମߏ੒
    Gitlab CI
    ϥΠϒϥϦͳͲ
    Firebase
    ϥΠϒϥϦͳͲ
    

    View Slide

28. (1)PUSH
    (2)GitlabCI࣮ߦ (3)ίϯςφىಈ
    Gitlab
    (6)Envoy࣮ߦ
    ςετ࣮ߦ
    ίϯςφ
    σϓϩΠ࣮ߦ
    ίϯςφ
    (5)ίϯςφىಈ
    (4)UnitTest࣮ߦ
    (7)Pull
    εςʔδϯά؀ڥ
    ϦϙδτϦ
    Gitlab CI
    

    View Slide

29. αʔόߏ੒
    

    View Slide

30. 3 ᮫ԙબఆతٕज़
    JWT authentication
    

    View Slide

31. 3 1
    JWTͱ͸
    JWTʢδϣοτʣͱ͸ JSON Web
    Token ͷུͰɺిࢠॺ໊෇͖ͷ
    URL-safeͳJSONΛ࢖ͬͨೝূํ
    ࣜͰ͢ɻ
    Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕ͭ
    ͍͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ
    ͕େ͖͍Ͱ͢ɻ
    

    View Slide

32. 3 2
    JWTͱ͸
    [ೝূϑϩʔͷ࢓૊Έ]
    ᶃΫϥΠΞϯτ͸ɺೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ
    ᶄαʔό͸ೝূ৘ใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴
    Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δɻ
    ᶅΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞ
    ΫηεΛߦ͏ɻ
    

    View Slide

33. 3 3
    JWTͱ͸
    ■JWT࢖༻ͷϝϦοτ
    JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ
    ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ
    ɾਫฏͷεέʔϧ͕༰қ
    ɾσόοάͱ؅ཧ͕؆୯
    ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍
    ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ
    ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ
    ɾJWT͕ಠཱܕͰ͋Δ͜ͱ
    https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
    

    View Slide

34. front end
    login process flow
    API request
    Server side
    Vuex
    Token is returned
    Component
    Action
    Mutations
    State
    Plugin
    /login
    Routing
    Middleware
    Dispatch
    Render
    Commit
    Mutate
    eyJ0eXAiOiJKV1QiLCJhbGci
    OiJIUzI1NiJ9.eyJpc3MiOiJod
    HRwOlwvXC9sb2NhbGhvc3
    RcL2FwaVwvdjFcL2xvZ2luIiw
    iaWF0IjoxNTQxMzk3NDAyLC
    JleHAiOjE1NDE0MDEwMDIs
    Im5iZiI6MTU0MTM5NzQwMi
    wianRpIjoiSGx1eUVXRU5Jc
    TdWRHZ6ZyIsInN1YiI6MSwi
    cHJ2IjoiMWFiMTVlMTVhNG
    NiODBjOWY3MTJkZTQ3OD
    ViMmIyMDk4ZGFlMjhjMyJ9.
    Qkbo7Mf4kMlTbWT-
    r4L6GhSUUlTUE7p7OHPdob
    FEXiI
    Token example
    HTML
    CSS
    JS
    Receive Token
    and set to
    localStorage
    Every time,
    check if Token
    is in
    localStrage.
    If not, redirect
    to login screen
    Each time, check
    localStorage and
    set token in
    Authorization
    header
    localStrage
    token
    get token
    On the server side
    Execute login
    process
    Issue a token.
    Access from browser,
    Enter user ID and password
    set token
    

    View Slide

35. 3 5
    ࣮૷͢Δ΋ͷ
    ɾ/api/login ϢʔβʔͱύεϫʔυΛૹΔͱτʔΫϯ͕ൃߦ͞ΕΔɻ
    ɾ/api/me Ϣʔβʔͷ৘ใΛฦ͢ɻτʔΫϯ͕ແ͍ͱΞΫηεͰ͖ͳ͍ɻ
    •
    

    View Slide

36. 3 6
    खॱ
    ᶃೝূػೳΛ࡞੒
    ᶄcomposerͰjwt-authΛΠϯετʔϧ
    ᶅEmployeeϞσϧΛमਖ਼
    ᶆguardΛमਖ਼
    ᶇApiControllerΛੜ੒
    ᶈroutes/api.phpΛฤू
    

    View Slide

37. 3 7
    ᶃೝূػೳΛ࡞੒
    $ php artisan make:auth
    $ php artisan migrate
    ԼهͷίϚϯυΛ࣮ߦ͠ɺೝূػೳΛ࡞੒͢Δɻ
    ͜ΕͰ؆୯ʹೝূػೳΛ࡞੒Ͱ͖·͢ɻ
    

    View Slide

38. 3 8
    ᶄcomposerͰjwt-authΛΠϯετʔϧ
    jwt-authͷॳظઃఆΛߦ͍·͢ɻ
    jwt-authΛLaravelϓϩδΣΫτʹΠϯετʔϧ͠·͢ɻ
    config/jwt.php͕ੜ੒͞Ε·͢ɻ
    ࠷ޙʹൿີ伴Λੜ੒
    

    View Slide

39. 3 9
    ᶅEmployeeϞσϧΛमਖ਼
    EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ
    

    View Slide

40. 4 0
    ᶅEmployeeϞσϧΛमਖ਼
    EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ
    

    View Slide

41. 4 1
    ᶆguardΛमਖ਼(config/auth.php)
    guard͸ೝূΛ؅ཧ͢Δ࢓૊ΈͰɺσϑΥϧτͰ͸
    webͱapi͕͋Γ·͢ɻ

    web͸html͔ΒͷϩάΠϯΛ؅ཧ͍ͯ͠·͢ɻ

    Ұํɺapi͸໊લͷ௨ΓɺWebAPIͷϩάΠϯͰ͢ɻ
    jwt-authΛ࢖͏ͷͰapiΛjwtʹม͑·͢ɻ
    config/auth.phpΛฤू
    

    View Slide

42. 4 2
    ᶇApiControllerΛੜ੒
    ࣍ʹAPIͷίϯτϩʔϥʔΛ࡞੒͠·͢ɻ
    app/Http/Controllers/ApiController.php͕ੜ੒͞Ε·͢ɻ
    

    View Slide

43. 4 3
    ᶇApiControllerΛੜ੒
    

    View Slide

44. 4 4
    ᶈroutes/api.phpΛฤू
    

    View Slide

45. 4 5
    ࣮ࡍʹಈ͔͢
    

    View Slide

46. 4 6
    ࣮ࡍʹಈ͔͢
    

    View Slide

47. 4 7
    ࣮ࡍʹಈ͔͢
    

    View Slide

48. 3 ᮫ԙબఆతٕज़
    Chat function with Firebase
    

    View Slide

49. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦
    WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ
    ɾ൑அج४
    - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ
    - ϝϯςφϯείετ͕௿͍ɻ
    - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ
    - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
    

    View Slide

50. ٞ࿦ͷ݁Ռ
    Firebaseʹܾఆʂʂ
    ɾબఆཧ༝
    - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ
    - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ
    όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ
    - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ
    ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ
    - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ
    

    View Slide

51. FirebaseͰͷݒ೦఺
    - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ҝɺ
    ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘Δͷ͸ΩπΠɻ
    - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ
    - ݕࡧ৚݅ʹҰ෦ɺ੍ݶ͋Γɻ
    

    View Slide

52. FirebaseΛ࢖ͬͨνϟοτػೳͷશମߏ੒(૝ఆ)
    ϩάΠϯ
    Token͕ฦ٫͞ΕΔ
    /message
    αʔόαΠυଆͰ
    ϩάΠϯॲཧΛ࣮ߦ
    tokenΛൃߦɻ
    νϟοτΛߦ͏
    ϑϩϯτΤϯυ
    /login
    ϒϥ΢β͔ΒΞΫηε͠ɺ
    ϢʔβIDͱύεϫʔυΛೖྗ
    ϦΞϧλΠϜͰϝοηʔδͷ΍ΓͱΓ
    ఆظతʹDBʹϝοηʔδσʔ
    λΛॻ͖ࠐΈʹ͍͘
    eyJ0eXAiOiJKV1QiLCJhbGci
    OiJIUzI1NiJ9.eyJpc3MiOiJod
    HRwOlwvXC9sb2NhbGhvc3
    RcL2FwaVwvdjFcL2xvZ2luIiw
    iaWF0IjoxNTQxMzk3NDAyLC
    JleHAiOjE1NDE0MDEwMDIs
    Im5iZiI6MTU0MTM5NzQwMi
    wianRpIjoiSGx1eUVXRU5Jc
    TdWRHZ6ZyIsInN1YiI6MSwi
    cHJ2IjoiMWFiMTVlMTVhNG
    NiODBjOWY3MTJkZTQ3OD
    ViMmIyMDk4ZGFlMjhjMyJ9.
    Qkbo7Mf4kMlTbWT-
    r4L6GhSUUlTUE7p7OHPdob
    FEXiI
    Tokenͷྫ
    {
    "users": {
    "user_01": {
    "user_id": 23,
    "company_id": 43
    "rooms": ["room01", "room02"]
    },
    },
    "rooms": {
    "room01": {
    "last_message": "͜Μʹͪ͸ʂ",
    "created_at": datetime
    },
    "room02": { ... }
    },
    }
    αʔόαΠυ
    

    View Slide

53. ίϨΫγϣϯ͸جຊతʹ͸Ұͭʹ·ͱΊͯɺ಺෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ
    ίϨΫγϣϯͷJSONߏ଄ྫ
    FirebaseͷDatabaseྫ
    

    View Slide

54. ߏ੒
    

    View Slide

55. ը໘Πϝʔδ
    

    View Slide

56. 3 ᮫ԙબఆతٕज़
    Test, GitlabCI etc
    

    View Slide

57. Cypressͱ͸ʁ
    https://www.kaizenprogrammer.com/entry/2017/12/23/144242
    Cypress ͸ɺςετͷηοτΞοϓɺ
    ࡞੒ɺ࣮ߦɺσόοάͳͲΛγϯϓϧʹ͢Δϒϥ΢βςε
    τπʔϧͰ͢ɻ
    E2E ςετΛطଘͷ Selenium ͷΑ͏ͳπʔϧͰ࣮૷ɾӡ
    ༻͢Δͱ͖ʹ͋Γ͕ͪͳਏ͍ମݧΛվળͯ͠ɺ։ൃऀΛ޾
    ͤʹ͢Δ͜ͱ͕໨తͷΑ͏Ͱ͢ɻ
    

    View Slide

58. Selenium ͱͷҧ͍
    https://www.kaizenprogrammer.com/entry/2017/12/23/144242
    ·ͣࠜຊతͳҧ͍ͱͯ͠ɺSelenium ͸͋͘·Ͱϒϥ΢βΛࣗಈૢ࡞͢Δπʔϧ
    Ͱ͋ͬͯςετҎ֎ͷ༻్ʢεΫϨΠϐϯά΍खݩͷૢ࡞ͷࣗಈԽͳͲʣͰ΋࢖
    ͑Δͷʹରͯ͠ɺCypress ͸׬શʹςετ໨తʹಛԽ͍ͯ͠·͢ɻ
    ͳͷͰɺཁૉͷදࣔΛ଴ͬͨΓϖʔδભҠͷ׬ྃΛ଴ͬͨΓͱ͍ͬͨෆ҆ఆͳς
    ετରࡦ͸ඪ४ͰߦΘΕ·͢ɻ
    ݱঢ়Ͱ͸ E2E ςετ΍౷߹ςετͷͨΊͷػೳ͕ଟ͍Ͱ͕͢ɺJavaScript ͷϢ
    χοτςετͷαϙʔτ΋ڧԽ͍ͯ͘͠Α͏Ͱ͢ɻ
    

    View Slide

59. ը໘Πϝʔδ
    https://www.kaizenprogrammer.com/entry/2017/12/23/144242
    

    View Slide

60. ը໘Πϝʔδ
    https://www.kaizenprogrammer.com/entry/2017/12/23/144242
    ϒϥ΢βͷίϚϯυϩά্ͰίϚϯυΛΫ
    ϦοΫ͢ΔͱɺͦͷίϚϯυ͕࣮ߦ͞Εͨ
    ࣌఺ͷ DOM εφοϓγϣοτΛݟΔ͜ͱ͕
    Ͱ͖Δɻ
    
    CLICK Λબ୒͢Δͱ্ͷը૾ͷΑ͏ʹΫ
    ϦοΫΠϕϯτ͕ൃੜͨ͠৔ॴ͕ϐϯϙΠϯ
    τͰ੺͘දࣔ͞ΕΔɻ
    

    View Slide

61. ը໘Πϝʔδ
    https://www.kaizenprogrammer.com/entry/2017/12/23/144242
    ͜ͷঢ়ଶͰ Chrome ͷ Developer Tools
    Λ։͘͜ͱ͕Մೳ
    

    View Slide

62. ϩʔΧϧͷDockerߏ੒
    

    View Slide

63. ϩʔΧϧͷDockerઃఆ
    

    View Slide

64. Cypressͷίʔυ
    

    View Slide

65. Cypressͷىಈํ๏
    

    View Slide

66. DEMO
    

    View Slide

67. DEMO
    ςετͷϏσΦ͕
    ੜ੒͞ΕΔ
    

    View Slide

68. DEMO
    

    View Slide

69. 4 ᅶୂݐߏ
    

    View Slide

70. 7 0
    ΤϯδχΞ࠾༻ʹ͍ͭͯ
    ɾ೔ຊͰ͸༏लͳΤϯδχΞΛ࠾༻͢Δͷ͕
    ೉͘͠ͳ͍ͬͯΔɻ
    ɾਓࡐ঺հձࣾʹཔΉͱߴ͍͓͕͔͔ۚΔɻ
    

    View Slide

71. 7 1
    ΤϯδχΞ࠾༻ʹ͍ͭͯ
    SNSΛ׆༻ͯ͠࠾༻ίετΛ཈͑Α͏ʂ
    

    View Slide

72. 7 2
    ೔ຊͷSNSͷൺֱ
    20୅Ҏ্ͷஉঁ
    ݎΊͳงғؾ
    ɾϏδωεܥͷ৘ใൃ৴ˍऩू
    ɾ݁ࠗ΍స৬ͷۙگใࠂͳͲ
    ɾϏδωεͰͷ׆༻ɺχϡʔε
    ͷγΣΞ౳
    ɾۙگใࠂ౳ɺগ͠ݎΊͷ ౤ߘ
    গ͠࢖͏ ΄ͱΜͲ࢖Θͳ͍
    20୅ʙ30୅ঁੑ
    ϋΠηϯεͳงғؾ
    ϏδϡΞϧʹؔ͢Δ͜ͱ
    ͷ৘ใൃ ৴ˍऩू
    ɾϙδςΟϒͳ౤ߘ͹͔Γ
    ɾϢʔβʔͷੈք؍͕ॏࢹ͞ΕΔ
    10ʙ20୅ͷஉঁ
    ࠷ۙ͸30୅΋ଟΊɻ
    ΧδϡΞϧͳงғؾ
    ɾଈ࣌ੑͷߴ͍৘ใൃ৴ˍऩू
    ɾࢥͬͨ͜ͱײͨ͜͡ͱΛϥϑ ʹͭͿ΍͘
    ɾಗ໊ੑ
    ɾϦΞϧλΠϜੑ͕ߴ͍
    ɾΧδϡΞϧͳ౤ߘ
    Α͘࢖͏
    ओཁ
    Ϣʔβʔଐੑ
    ར༻໨త
    ಛ௃
    ΤϯδχΞ͕࢖͏͔ʁ
    

    View Slide

73. 7 3
    TwitterͰืूͯ͠ΈΔ
    ஌Γ߹͍ͷΤϯδχΞ͞Μ
    5ਓ͘Β͍͔Β࿈བྷ͕͖ͨʂ
    

    View Slide

74. 7 4
    ։ൃνʔϜߏ੒
    Suzuki Takayuki
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    Kakazu Yuki
    (ਖ਼ࣾһ)
    Ϛωδϝϯτ&։ൃ
    ։ൃ
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि2೔ۈ຿)
    ϑϦʔϥϯε
    (ि1೔ۈ຿)
    ཁ݅ఆٛ
    UI/UX
    ਖ਼ࣾһ
    (ि5೔ۈ຿)
    ෭ۀ
    (ि1೔ۈ຿)
    

    View Slide

75. LaravelΛख़஌͓ͯ͠Γɺ
    ਂ͍஌͕ࣝ͋Δ
    εΫϥϜϚελʔͷ
    ܦݧ͕͋Δ
    ϑϩϯτΤϯυ
    (Nuxt.jsɺVue.js)͕ಘҙ
    7 5
    ϑϦʔϥϯεͷํͷεΩϧηοτ
    

    View Slide

76. 7 6
    ϑϦʔϥϯεͷํʹґཔ͢Δ࢓ࣄ
    ϑϩϯτΤϯυ(Nuxt.js)ͷ։ൃ
    ৽͍ٕ͠ज़ͷબ୒ʹ
    ͋ͨͬͯͷ૬ஊ
    (Firebase΍CypressͳͲ)
    શମͷΞʔΩςΫνϟͷ૬ஊ
    εΫϥϜͷճ͠ํͷ૬ஊ
    

    View Slide

77. 7 7
    ϦϞʔτϫʔΫͷ׆༻
    ౦ژ
    ٶ࡚ ԭೄ
    ීஈ͔ΒϦϞʔτϫʔΫΛಋೖ
    ͍ͯ͠ΔࣄʹΑͬͯɺ
    ݝ֎ͷํʹ΋࢓ࣄΛґཔͰ͖Δ
    

    View Slide

78. 7 8
    Slackͷ෼ใͷ׆༻
    

    View Slide

79. 7 9
    εΫϥϜ։ൃͱ͸
    ɾϓϩμΫτ΁ͷཁ๬Λ༏ઌॱҐ͝ͱʹฒ΂͔͑ɺ
    ͦͷॱʹػೳΛ࡞Δɻ
    ɾݻఆͷ୹͍ظؒʢ1ʙ4िؒఔ౓ʣͷ୯ҐͰ։ൃΛ
    ۠੾ΓɺͦͷதͰܭըΛཱͯΔɻ
    ※ʰεΫϥϜʢScrumʣ։ൃʱɿ
    ϥάϏʔͰ྆ਞ͕ɺ8໊ͣͭݞΛ૊ΜͰҰͭͷूஂΛ
    ࡞ΓɺͿ͔ͭΓ߹͏ࡍͷϑΥʔϝʔγϣϯʮεΫϥ
    Ϝʯ͕ޠݯɻͦͷ͔࢟Βूஂ͕ྗΛ߹ΘͤΔ͜ͱΛ”
    εΫϥϜΛ૊Ή”ͱදݱ͢Δ͜ͱ΋͋Δɻ
    

    View Slide

80. 8 0
    εΫϥϜ։ൃͷճ͠ํ
    

    View Slide

81. 8 1
    εΫϥϜ։ൃ
    ݄ Ր ਫ ໦ ۚ
    Sprint
    ϙʔΧʔϓϥϯχ
    ϯά/։ൃ/

    ϦϦʔε
    σΠϦʔεΫϥϜ/
    ։ൃ
    σΠϦʔεΫϥϜ/
    ։ൃ
    σΠϦʔεΫϥϜ/
    ։ൃ
    εϓϦϯτϨϏϡ
    ʔ/

    εϓϦϯτϓϥϯ
    χϯά
    

    View Slide

82. 8 2
    Wrikeͱ͸ʁ
    ϓϩδΣΫτ؅ཧπʔϧͰ͢ɻ
    ػೳɾಛ௃ͱͯ͠͸ɺ
    ɾεέδϡʔϧ࡞੒ɾߋ৽ʹ͕͔͔࣌ؒΒͳ͍
    ɾλεΫొ࿥͕؆୯ʹߦ͑Δ
    ɾΨϯτνϟʔτΛ؆୯ʹදࣔͰ͖Δ
    ɾλεΫͷਐḿ͕ઃఆͰ͖Δ
    ɾλεΫʹίϝϯτ͕Ͱ͖Δ
    ɾπʔϧͷಋೖɾֶशίετ͕௿͍ʢ௚؍తʹ࢖͑Δʣ
    

    View Slide

83. 8 3
    εϓϦϯτϓϥϯχϯά
    ɾεϓϦϯτΛ࢝ΊΔʹ͋ͨͬͯɺ
    εϓϦϯτϓϥϯχϯάϛʔςΟϯά͕
    ։࠵͞Ε·͢ɻ
    ɾ͜ͷϛʔςΟϯάͰ͸ɺόοΫϩάͷ಺༰Λ
    ݩʹɺεϓϦϯτ಺ͰʮԿΛ࡞Δͷ͔ʯʮͲΕ͘
    Β͍࡞Δͷ͔ʯΛܾఆ͠·͢ɻ
    

    View Slide

84. 8 4
    ϓϥϯχϯάϙʔΧʔ
    ɾདྷि༧ఆλεΫͷݟੵ
    ɾ୯Ґ͸࣌ؒͰ͸ͳ͘ɺײ֮஋
    →ϑΟϘφον਺Ͱݟੵ΋Δ
    ɾ1ʙ12ஈ֊Ͱݟੵ΋Δ
    ɾ࣍ͷεΫϥϜͰऩ·ΔྔΛௐ੔
    ໨҆ͱͯ͠͸ɺ
    1: 1ʙ2࣌ؒ
    2: 3ʙ5࣌ؒ
    3: 1೔
    5: 2ʙ3೔
    8: 4ʙ5೔
    13: ೋिؒ
    

    View Slide

85. 8 5
    εΫϥϜ։ൃ
    

    View Slide

86. 8 6
    ·ͱΊ
    ɾٕज़બఆ͸ษڧձʹࢀՃͯ͠ɺ࣮ࡍͷԹ౓ײ΋ݟΔ
    ɾٕज़తʹকདྷੑ͕͋Γͦ͏ͳ΋ͷΛબఆ
    ɾϦϞʔτϫʔΫͷ׆༻Ͱ࠾༻ൣғ͸શࠃʹ޿͛ΒΕΔ
    ɾεΫϥϜ։ൃͳΒϦϞʔτϫʔΫͰ΋ԁ׈ʹ࢓ࣄΛਐΊ
    ΒΕΔ
    

    View Slide

87. 8 7
    ࠂ஌
    10/12 PHPΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂ
    https://phpcon.okinawa.jp
    

    View Slide