Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Takayuki

July 19, 2019
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    - Test, GitlabCI etc

    View full-size slide

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

    View full-size slide

  4. 1 ࣗզհ঺

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    https://tadoru.work/


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 2 ٕज़બᎩ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  41. 4 3
    ᶇApiControllerΛੜ੒

    View full-size slide

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

    View full-size slide

  43. 4 5
    ࣮ࡍʹಈ͔͢

    View full-size slide

  44. 4 6
    ࣮ࡍʹಈ͔͢

    View full-size slide

  45. 4 7
    ࣮ࡍʹಈ͔͢

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. 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 full-size slide

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

    View full-size slide

  52. ը໘Πϝʔδ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. ը໘Πϝʔδ
    https://www.kaizenprogrammer.com/entry/2017/12/23/144242
    ϒϥ΢βͷίϚϯυϩά্ͰίϚϯυΛΫ
    ϦοΫ͢ΔͱɺͦͷίϚϯυ͕࣮ߦ͞Εͨ
    ࣌఺ͷ DOM εφοϓγϣοτΛݟΔ͜ͱ͕
    Ͱ͖Δɻ

    CLICK Λબ୒͢Δͱ্ͷը૾ͷΑ͏ʹΫ
    ϦοΫΠϕϯτ͕ൃੜͨ͠৔ॴ͕ϐϯϙΠϯ
    τͰ੺͘දࣔ͞ΕΔɻ

    View full-size slide

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

    View full-size slide

  59. ϩʔΧϧͷDockerߏ੒

    View full-size slide

  60. ϩʔΧϧͷDockerઃఆ

    View full-size slide

  61. Cypressͷίʔυ

    View full-size slide

  62. Cypressͷىಈํ๏

    View full-size slide

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

    View full-size slide

  64. 4 ᅶୂݐߏ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. 7 8
    Slackͷ෼ใͷ׆༻

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    εϓϦϯτϓϥϯ
    χϯά

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. 8 5
    εΫϥϜ։ൃ

    View full-size slide

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

    View full-size slide

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

    View full-size slide