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

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

Transcript

1. ኺ Development Experience ٴ։ᚙ੒ຊ୳౼࢖༻ Laravel + Nuxt.js + Firebase ᐽՍ։ᚙ SPA ܥ౷ ླ໦޹೭
2. 2 ٕज़બᎩ Agenda 4 ᅶୂݐߏ 1 ࣗզհ঺ 3 ᮫ԙબఆతٕज़ - Overall product design - JWT authentication - Chat function with Firebase
 - Test, GitlabCI etc
3. 0 Ұ։࢝
4. 4 ނࣄతओ୊ ɾٕज़બఆΛ͢Δਓ ɾٕज़੹೚ऀͷਓ ɾϚωʔδϟʔͷਓ ɾ͜Ε͔ΒϚωδϝϯτΛ΍ͬͯΈ͍ͨਓ
5. 1 ࣗզհ঺
6. 6 ࣗզհ঺ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺ೔ຊͷਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥5݄ʹϑϦʔ ϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓɺίεϓϨ ◆Twitter @kanbo0605 υϥΰϯϘʔϧͷ ϐοίϩͰ͢ʂ
7. 7 ࣗզհ঺ ԭೄ I came from Okinawa
8. 8 ࣗզհ঺ ೔ຊͷԭೄͰෳ਺ͷίϛϡχςΟΛӡӦͯ͠·͢
9. Copyright Re:Build.inc All Rights Reserved. ࣗզհ঺ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 5໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ ΤϯδχΞืूதͰ͢ʂ
10. 1 0 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru
 https://tadoru.work/
 
 ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά
11. Re:Build اۀͷ୲౰ऀ͕ ΤʔδΣϯτΛબͿ ΤʔδΣϯτ͕ࣗ෼ͷܨ ͕Γͷ͋ΔΤϯδχΞ· ͨ͸νʔϜʹ੠Λ͔͚Δ ΤʔδΣϯτ͸ ࣄલʹ৹੍ࠪ ϫʔΧʔ ΤʔδΣϯτ اۀ ϏδωεϞσϧ ࠾༻ใु εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ ࢓ࣄΛ঺հ͢Δ ˕ ̋ ̋ × ˕ ̋ × ̋ ̋
12. 1 2 ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ) Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿) ͜ͷϙδγϣϯΛ ΍ͬͯ·͢ʂ
13. 2 ٕज़બᎩ
14. 1 4 ౰࣌ͷ։ൃϝϯόʔͷεΩϧηοτ SPAͷWebΞϓϦܦݧ ऀ Ұਓ αʔόαΠυ(Laravel) ͸ಘҙͳਓ͕ଟ͍ Vue.js(MPA)͸৮ͬͨ͜ͱ ͋Δϝϯόʔ͕ଟ͍ 20୅લ൒ʙ20୅ޙ൒Ͱ ։ൃܦݧ͸গ͠ઙ͍
15. 1 5 Development schedule 2018೥12݄ʙ 2019೥3݄ 2019೥4݄ʙ6݄ ։ൃ։࢝ Ϋϩʔζυβ൛׬੒ ࠷௿ݶͷ։ൃج൫ɺυ Ωϡϝϯτɺ։ൃମ੍ Λ੔උͯ͠ɺ͕ͬͭΓ ։ൃΛਐΊΔ ଟগɺόά͕͋ͬͯ΋ ྑ͍ͷͰɺશମతʹ࠷ ௿ݶͷॳظͷػೳ͕Ϧ Ϧʔε͞Ε͍ͯΔঢ়ଶ Λ໨ࢦ͢ɻ γʔυϥ΢ϯυͷࢿۚ ௐୡ༧ఆ ॳظͷػೳ͕ϦϦʔε ͞Ε͓ͯΓɺ͋Δఔ౓ɺ Ϣʔβͷొ࿥΋֬อ͞ Ε͍ͯΔঢ়ଶΛ໨ࢦ͢
16. 1 6 ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺ ࠓޙɺࢢ৔ͱͯ͠஫໨͞Ε ͦ͏ͳٕज़ ݕࡧͨ͠Β͋Δఔ౓ɺωοτʹ υΩϡϝϯτ͕͋Δ ԭೄͰ͸ઑ͍ͬͯΔٕज़ ։ൃίετ͕ߴ͗ͣ͢ɺఔ Α͘௅ઓ͍ͨ͠
17. 1 7 DXͱ͸ʁ Developer Experience ʢ։ൃମݧʣͱ͸ɺ͋Δγ εςϜΛʮؾ࣋ͪΑ͘։ൃɾอकͰ͖Δ͔Ͳ͏͔ʯ Λࣔ͢΋ͷ ։ൃऀ͸։ൃɾอकͱ͍͏ߦҝΛ௨ͨͦ͡ͷγε ςϜͷϢʔβʔͰ͋ΓɺDX͸UXͷҰछͰ͋Δ https://gfx.hatenablog.com/entry/2018/06/28/100103
18. 1 8 ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺ ࢢ৔Ձ஋͕ߴ͍ ΤϯδχΞͷ฼਺ଟ͍ ΤϯδχΞͷ฼਺গͳ͍ ࢢ৔Ձ஋͕௿͍ ͜͜Λૂ͏ʂ ༏लͳਓࡐΛ ࠾༻͠΍͍͢
19. 1 9 ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺ ࢢ৔Ձ஋͕ߴ͍ ΤϯδχΞͷ฼਺ଟ͍ ΤϯδχΞͷ฼਺গͳ͍ ࢢ৔Ձ஋͕௿͍
20. 2 0 ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺ Google Trend - Laravel͸ࠓޙ΋ਓؾ͸ଓ͖ͦ͏
21. 2 1 ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺ Google Trend
 - ͏ʔΜɺΘ͔Βͳ͍ɻɻɻ
22. 2 2 ΤϯδχΞ࠾༻Ͱͷٕज़બఆ؍఺ ౦ژͷNuxt MeetupʹࢀՃͯ͠ࢀՃऀͷ൓Ԡ΋ݟͯΈΔࣄʹͨ͠ʂ 2018/10/18 ࢀՃ࿮100ਓʹରͯ͠ɺ Ԡื͕161ਓ΋͍Δʂʂ
23. 2 3 ౰೔ͷ༷ࢠ https://techblog.scouter.co.jp/entry/2018/10/19/153000 ը૾͸SCOUTER։ൃऀϒϩάΑΓҾ༻ͤͯ͞௖͖·ͨ͠ɻ ੌ͍೤ؾʂʂ
24. 2 4 ࢀՃऀͷ੠ ࢖͍͍͚ͨͲɺ·ͩ౦ژͷ ձࣾͰ΋ͳ͔ͳ͔ɺಋೖ͠ ͍ͯΔاۀ͸গͳ͍ ϓϥΠϕʔτͰ͸ษڧͯ͠ ͍Δਓ͕ଟ͍ Nuxtͷٻਓࣗମ͸૿͖͑ͯ ͍ͯΔҹ৅
25. 3 䎔ဋ࿊ఆతٕඌ Overall product design
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
27. ϑϩϯτΤϯυ αʔόαΠυ શମߏ੒ Gitlab CI ϥΠϒϥϦͳͲ Firebase ϥΠϒϥϦͳͲ
28. (1)PUSH (2)GitlabCI࣮ߦ (3)ίϯςφىಈ Gitlab (6)Envoy࣮ߦ ςετ࣮ߦ ίϯςφ σϓϩΠ࣮ߦ ίϯςφ (5)ίϯςφىಈ (4)UnitTest࣮ߦ (7)Pull εςʔδϯά؀ڥ ϦϙδτϦ Gitlab CI
29. αʔόߏ੒
30. 3 ᮫ԙબఆతٕज़ JWT authentication
31. 3 1 JWTͱ͸ JWTʢδϣοτʣͱ͸ JSON Web Token ͷུͰɺిࢠॺ໊෇͖ͷ URL-safeͳJSONΛ࢖ͬͨೝূํ ࣜͰ͢ɻ Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕ͭ ͍͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ ͕େ͖͍Ͱ͢ɻ
32. 3 2 JWTͱ͸ [ೝূϑϩʔͷ࢓૊Έ] ᶃΫϥΠΞϯτ͸ɺೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ ᶄαʔό͸ೝূ৘ใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴 Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δɻ ᶅΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞ ΫηεΛߦ͏ɻ
33. 3 3 JWTͱ͸ ▪JWT࢖༻ͷϝϦοτ JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
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
35. 3 5 ࣮૷͢Δ΋ͷ ɾ/api/login ϢʔβʔͱύεϫʔυΛૹΔͱτʔΫϯ͕ൃߦ͞ΕΔɻ ɾ/api/me Ϣʔβʔͷ৘ใΛฦ͢ɻτʔΫϯ͕ແ͍ͱΞΫηεͰ͖ͳ͍ɻ •
36. 3 6 खॱ ᶃೝূػೳΛ࡞੒ ᶄcomposerͰjwt-authΛΠϯετʔϧ ᶅEmployeeϞσϧΛमਖ਼ ᶆguardΛमਖ਼ ᶇApiControllerΛੜ੒ ᶈroutes/api.phpΛฤू
37. 3 7 ᶃೝূػೳΛ࡞੒ $ php artisan make:auth $ php artisan migrate ԼهͷίϚϯυΛ࣮ߦ͠ɺೝূػೳΛ࡞੒͢Δɻ ͜ΕͰ؆୯ʹೝূػೳΛ࡞੒Ͱ͖·͢ɻ
38. 3 8 ᶄcomposerͰjwt-authΛΠϯετʔϧ jwt-authͷॳظઃఆΛߦ͍·͢ɻ jwt-authΛLaravelϓϩδΣΫτʹΠϯετʔϧ͠·͢ɻ config/jwt.php͕ੜ੒͞Ε·͢ɻ ࠷ޙʹൿີ伴Λੜ੒
39. 3 9 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ
40. 4 0 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ
41. 4 1 ᶆguardΛमਖ਼(config/auth.php) guard͸ೝূΛ؅ཧ͢Δ࢓૊ΈͰɺσϑΥϧτͰ͸ webͱapi͕͋Γ·͢ɻ
 web͸html͔ΒͷϩάΠϯΛ؅ཧ͍ͯ͠·͢ɻ
 Ұํɺapi͸໊લͷ௨ΓɺWebAPIͷϩάΠϯͰ͢ɻ jwt-authΛ࢖͏ͷͰapiΛjwtʹม͑·͢ɻ config/auth.phpΛฤू
42. 4 2 ᶇApiControllerΛੜ੒ ࣍ʹAPIͷίϯτϩʔϥʔΛ࡞੒͠·͢ɻ app/Http/Controllers/ApiController.php͕ੜ੒͞Ε·͢ɻ
43. 4 3 ᶇApiControllerΛੜ੒
44. 4 4 ᶈroutes/api.phpΛฤू
45. 4 5 ࣮ࡍʹಈ͔͢
46. 4 6 ࣮ࡍʹಈ͔͢
47. 4 7 ࣮ࡍʹಈ͔͢
48. 3 ᮫ԙબఆతٕज़ Chat function with Firebase
49. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ ɾ൑அج४ - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕௿͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
50. ٞ࿦ͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ
51. FirebaseͰͷݒ೦఺ - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ҝɺ ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘Δͷ͸ΩπΠɻ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ৚݅ʹҰ෦ɺ੍ݶ͋Γɻ
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": { ... } }, } αʔόαΠυ
53. ίϨΫγϣϯ͸جຊతʹ͸Ұͭʹ·ͱΊͯɺ಺෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ ίϨΫγϣϯͷJSONߏ଄ྫ FirebaseͷDatabaseྫ
54. ߏ੒
55. ը໘Πϝʔδ
56. 3 ᮫ԙબఆతٕज़ Test, GitlabCI etc
57. Cypressͱ͸ʁ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 Cypress ͸ɺςετͷηοτΞοϓɺ ࡞੒ɺ࣮ߦɺσόοάͳͲΛγϯϓϧʹ͢Δϒϥ΢βςε τπʔϧͰ͢ɻ E2E ςετΛطଘͷ Selenium ͷΑ͏ͳπʔϧͰ࣮૷ɾӡ ༻͢Δͱ͖ʹ͋Γ͕ͪͳਏ͍ମݧΛվળͯ͠ɺ։ൃऀΛ޾ ͤʹ͢Δ͜ͱ͕໨తͷΑ͏Ͱ͢ɻ
58. Selenium ͱͷҧ͍ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 ·ͣࠜຊతͳҧ͍ͱͯ͠ɺSelenium ͸͋͘·Ͱϒϥ΢βΛࣗಈૢ࡞͢Δπʔϧ Ͱ͋ͬͯςετҎ֎ͷ༻్ʢεΫϨΠϐϯά΍खݩͷૢ࡞ͷࣗಈԽͳͲʣͰ΋࢖ ͑Δͷʹରͯ͠ɺCypress ͸׬શʹςετ໨తʹಛԽ͍ͯ͠·͢ɻ ͳͷͰɺཁૉͷදࣔΛ଴ͬͨΓϖʔδભҠͷ׬ྃΛ଴ͬͨΓͱ͍ͬͨෆ҆ఆͳς ετରࡦ͸ඪ४ͰߦΘΕ·͢ɻ ݱঢ়Ͱ͸ E2E ςετ΍౷߹ςετͷͨΊͷػೳ͕ଟ͍Ͱ͕͢ɺJavaScript ͷϢ χοτςετͷαϙʔτ΋ڧԽ͍ͯ͘͠Α͏Ͱ͢ɻ
59. ը໘Πϝʔδ https://www.kaizenprogrammer.com/entry/2017/12/23/144242
60. ը໘Πϝʔδ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 ϒϥ΢βͷίϚϯυϩά্ͰίϚϯυΛΫ ϦοΫ͢ΔͱɺͦͷίϚϯυ͕࣮ߦ͞Εͨ ࣌఺ͷ DOM εφοϓγϣοτΛݟΔ͜ͱ͕ Ͱ͖Δɻ CLICK Λબ୒͢Δͱ্ͷը૾ͷΑ͏ʹΫ ϦοΫΠϕϯτ͕ൃੜͨ͠৔ॴ͕ϐϯϙΠϯ τͰ੺͘දࣔ͞ΕΔɻ
61. ը໘Πϝʔδ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 ͜ͷঢ়ଶͰ Chrome ͷ Developer Tools Λ։͘͜ͱ͕Մೳ
62. ϩʔΧϧͷDockerߏ੒
63. ϩʔΧϧͷDockerઃఆ
64. Cypressͷίʔυ
65. Cypressͷىಈํ๏
66. DEMO
67. DEMO ςετͷϏσΦ͕ ੜ੒͞ΕΔ
68. DEMO
69. 4 ᅶୂݐߏ
70. 7 0 ΤϯδχΞ࠾༻ʹ͍ͭͯ ɾ೔ຊͰ͸༏लͳΤϯδχΞΛ࠾༻͢Δͷ͕ ೉͘͠ͳ͍ͬͯΔɻ ɾਓࡐ঺հձࣾʹཔΉͱߴ͍͓͕͔͔ۚΔɻ
71. 7 1 ΤϯδχΞ࠾༻ʹ͍ͭͯ SNSΛ׆༻ͯ͠࠾༻ίετΛ཈͑Α͏ʂ
72. 7 2 ೔ຊͷSNSͷൺֱ 20୅Ҏ্ͷஉঁ ݎΊͳงғؾ ɾϏδωεܥͷ৘ใൃ৴ˍऩू ɾ݁ࠗ΍స৬ͷۙگใࠂͳͲ ɾϏδωεͰͷ׆༻ɺχϡʔε ͷγΣΞ౳ ɾۙگใࠂ౳ɺগ͠ݎΊͷ ౤ߘ গ͠࢖͏ ΄ͱΜͲ࢖Θͳ͍ 20୅ʙ30୅ঁੑ ϋΠηϯεͳงғؾ ϏδϡΞϧʹؔ͢Δ͜ͱ ͷ৘ใൃ ৴ˍऩू ɾϙδςΟϒͳ౤ߘ͹͔Γ ɾϢʔβʔͷੈք؍͕ॏࢹ͞ΕΔ 10ʙ20୅ͷஉঁ ࠷ۙ͸30୅΋ଟΊɻ ΧδϡΞϧͳงғؾ ɾଈ࣌ੑͷߴ͍৘ใൃ৴ˍऩू ɾࢥͬͨ͜ͱײͨ͜͡ͱΛϥϑ ʹͭͿ΍͘ ɾಗ໊ੑ ɾϦΞϧλΠϜੑ͕ߴ͍ ɾΧδϡΞϧͳ౤ߘ Α͘࢖͏ ओཁ Ϣʔβʔଐੑ ར༻໨త ಛ௃ ΤϯδχΞ͕࢖͏͔ʁ
73. 7 3 TwitterͰืूͯ͠ΈΔ ஌Γ߹͍ͷΤϯδχΞ͞Μ 5ਓ͘Β͍͔Β࿈བྷ͕͖ͨʂ
74. 7 4 ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ) Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿)
75. LaravelΛख़஌͓ͯ͠Γɺ ਂ͍஌͕ࣝ͋Δ εΫϥϜϚελʔͷ ܦݧ͕͋Δ ϑϩϯτΤϯυ (Nuxt.jsɺVue.js)͕ಘҙ 7 5 ϑϦʔϥϯεͷํͷεΩϧηοτ
76. 7 6 ϑϦʔϥϯεͷํʹґཔ͢Δ࢓ࣄ ϑϩϯτΤϯυ(Nuxt.js)ͷ։ൃ ৽͍ٕ͠ज़ͷબ୒ʹ ͋ͨͬͯͷ૬ஊ (Firebase΍CypressͳͲ) શମͷΞʔΩςΫνϟͷ૬ஊ εΫϥϜͷճ͠ํͷ૬ஊ
77. 7 7 ϦϞʔτϫʔΫͷ׆༻ ౦ژ ٶ࡚ ԭೄ ීஈ͔ΒϦϞʔτϫʔΫΛಋೖ ͍ͯ͠ΔࣄʹΑͬͯɺ ݝ֎ͷํʹ΋࢓ࣄΛґཔͰ͖Δ
78. 7 8 Slackͷ෼ใͷ׆༻
79. 7 9 εΫϥϜ։ൃͱ͸ ɾϓϩμΫτ΁ͷཁ๬Λ༏ઌॱҐ͝ͱʹฒ΂͔͑ɺ ͦͷॱʹػೳΛ࡞Δɻ ɾݻఆͷ୹͍ظؒʢ1ʙ4िؒఔ౓ʣͷ୯ҐͰ։ൃΛ ۠੾ΓɺͦͷதͰܭըΛཱͯΔɻ ※ʰεΫϥϜʢScrumʣ։ൃʱɿ ϥάϏʔͰ྆ਞ͕ɺ8໊ͣͭݞΛ૊ΜͰҰͭͷूஂΛ ࡞ΓɺͿ͔ͭΓ߹͏ࡍͷϑΥʔϝʔγϣϯʮεΫϥ Ϝʯ͕ޠݯɻͦͷ͔࢟Βूஂ͕ྗΛ߹ΘͤΔ͜ͱΛ” εΫϥϜΛ૊Ή”ͱදݱ͢Δ͜ͱ΋͋Δɻ
80. 8 0 εΫϥϜ։ൃͷճ͠ํ
81. 8 1 εΫϥϜ։ൃ ݄ Ր ਫ ໦ ۚ Sprint ϙʔΧʔϓϥϯχ ϯά/։ൃ/
 ϦϦʔε σΠϦʔεΫϥϜ/ ։ൃ σΠϦʔεΫϥϜ/ ։ൃ σΠϦʔεΫϥϜ/ ։ൃ εϓϦϯτϨϏϡ ʔ/
 εϓϦϯτϓϥϯ χϯά
82. 8 2 Wrikeͱ͸ʁ ϓϩδΣΫτ؅ཧπʔϧͰ͢ɻ ػೳɾಛ௃ͱͯ͠͸ɺ ɾεέδϡʔϧ࡞੒ɾߋ৽ʹ͕͔͔࣌ؒΒͳ͍ ɾλεΫొ࿥͕؆୯ʹߦ͑Δ ɾΨϯτνϟʔτΛ؆୯ʹදࣔͰ͖Δ ɾλεΫͷਐḿ͕ઃఆͰ͖Δ ɾλεΫʹίϝϯτ͕Ͱ͖Δ ɾπʔϧͷಋೖɾֶशίετ͕௿͍ʢ௚؍తʹ࢖͑Δʣ
83. 8 3 εϓϦϯτϓϥϯχϯά ɾεϓϦϯτΛ࢝ΊΔʹ͋ͨͬͯɺ εϓϦϯτϓϥϯχϯάϛʔςΟϯά͕ ։࠵͞Ε·͢ɻ ɾ͜ͷϛʔςΟϯάͰ͸ɺόοΫϩάͷ಺༰Λ ݩʹɺεϓϦϯτ಺ͰʮԿΛ࡞Δͷ͔ʯʮͲΕ͘ Β͍࡞Δͷ͔ʯΛܾఆ͠·͢ɻ
84. 8 4 ϓϥϯχϯάϙʔΧʔ ɾདྷि༧ఆλεΫͷݟੵ ɾ୯Ґ͸࣌ؒͰ͸ͳ͘ɺײ֮஋ →ϑΟϘφον਺Ͱݟੵ΋Δ ɾ1ʙ12ஈ֊Ͱݟੵ΋Δ ɾ࣍ͷεΫϥϜͰऩ·ΔྔΛௐ੔ ໨҆ͱͯ͠͸ɺ 1: 1ʙ2࣌ؒ 2: 3ʙ5࣌ؒ 3: 1೔ 5: 2ʙ3೔ 8: 4ʙ5೔ 13: ೋिؒ
85. 8 5 εΫϥϜ։ൃ
86. 8 6 ·ͱΊ ɾٕज़બఆ͸ษڧձʹࢀՃͯ͠ɺ࣮ࡍͷԹ౓ײ΋ݟΔ ɾٕज़తʹকདྷੑ͕͋Γͦ͏ͳ΋ͷΛબఆ ɾϦϞʔτϫʔΫͷ׆༻Ͱ࠾༻ൣғ͸શࠃʹ޿͛ΒΕΔ ɾεΫϥϜ։ൃͳΒϦϞʔτϫʔΫͰ΋ԁ׈ʹ࢓ࣄΛਐΊ ΒΕΔ
87. 8 7 ࠂ஌ 10/12 PHPΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂ https://phpcon.okinawa.jp