サーバーサイド出身のフロントエンドエンジニアが変える現場

2017 FALL #jjug_ccc でのLT資料です。

Transcript

1. αʔόʔαΠυग़਎ͷ
 ϑϩϯτΤϯυΤϯδχΞ ͕ม͑Δݱ৔ JJUG CCC 2017 FALL LT
 UGA
2. ࣗݾ঺հ Ӊլਆ ੣໵ʢ@uggdsʣ ϑϦʔͷϑϩϯτΤϯυΤϯδχΞʢUGAP LLC.ʣ ๭੢৽॓ͷSIerग़਎JavaΤϯδχΞ ๭΢ϧτϥո्ͷ෉ʢϨουΩϯάʣ
3. ݩSIͰαʔόʔαΠυग़਎ͷ
 ϑϩϯτΤϯυΤϯδχΞ͕ WEBܥͷݱ৔ͰͲ͏׆༂
 ͍ͯ͠Δ͔ͱ͍͏͓࿩͠
4. ※͋͘·ͰݸਓͷҙݟͰ͢
 ͪͳΈʹ SI LOVE Ͱ͢
5. ϑϩϯτΤϯυΤϯδχΞ ͷΠϝʔδ͸Ͳ͏Ͱ͔͢ʁ
6. 5IF
   FWPMVUJPO
   PG
   )PNP
   'SPOUFOEBJMT
   4PVSDF
   CMPHHNPJP ։ൃ؀ڥपΓͷٸ଎ͳਐԽʹ௥ਵ
7. ϑϨʔϜϫʔΫͷબఆ 4XJUDIGSPNSFBDUUPWVFKT
   4PVSDF
   WVFKTEFWFMPQFSTDPN
8. ୤jQuery WVFKTTBGFMZKRVFSZQMVHJO
   4PVSDF
   WVFKTEFWFMPQFSTDPN
9. BFFʹࢥ͍Λ஘Δ
 ʢBest Friend Foreverʣ
10. WEBܥͷΠϝʔδ
11. DESIGN PLAN DEVEL OP TEST DESIGN PLAN DEVEL OP TEST DESIGN PLAN DEVEL OP TEST ϦϦʔεͷαΠΫϧ͕ૣ͍
12. ৽͍ٕ͠ज़ͷಋೖ͕׆ൃ
13. ͔ͧ͞͠ઑͬͨ؀ڥ ͳΜͩΖ͏ͳ
14. ࣮ࡍɺࢀըͨ͠ݱ৔
15. Server Side Front End WEB Director SIer ϑϦʔϥϯε ϓϩύʔ ௕͘ଓ͍͍ͯΔWEBαʔϏε
16. Server Side Front End WEB Director ௕͘ଓ͍͍ͯΔWEBαʔϏε HTML, CSS, JS
17. αʔόʔαΠυ͸SVN
19. ϑϩϯτΤϯυࢿࡐ͸ όʔδϣϯ؅ཧͯ͠ͳ͍
21. ϑϩϯτΤϯυࢿࡐͷ ड͚౉͠͸zipͰ
23. ϑϩϯτΤϯυࢿࡐͷ ϦϦʔε͸खಈ
24. ϑΝΠϧΛҰݸҰݸखͰ…
26. ΍ͬͯΔ৔߹͡Όͳ͍ WVFKTTBGFMZKRVFSZQMVHJO
    4PVSDF
    WVFKTEFWFMPQFSTDPN
27. Server Side Front End WEB Director ͦͬͪ͸ ͦͬͪͰ վળ͍͚ͨ͠Ͳ ख෇͔ͣ ͱΓ͋͑ͣ ϦϦʔεΛʂ ϊ΢ϋ΢͕ͳ͍ ݪҼ
28. Server Side Front End WEB Director ˇ ͦ͜ʹݩSIerͷࢲ
29. ϑϩϯτΤϯυࢿࡐͷ
 ϦϦʔε΋Jenkins࢖ͬͯ ࣗಈԽʂ ϑϩϯτΤϯυࢿࡐΛ Gitʹͯ͠ɺड͚౉͠ ΋νΣοΫΞ΢τͯ͠ ͖ͯ΋Β͏Α͏ʹʂ
30. SIͷݱ৔Ͱ΍͍ͬͯͨ͜ͱ͕ ϑϩϯτΤϯυͷཱ৔Ͱ΋
 ໾ʹཱͭʂ
31. ͞Βʹ όοΫΤϯυ͕Javaͷ৔߹ ։ൃܦݧ͕΋Ζʹ׆͖Δ
 ※Ή͠ΖɺόοΫΤϯυܦݧ͕ͳ͍ͱͭΒ͍ • ςϯϓϨʔτ௚઀मਖ਼ • APIͷI/FͷఏҊ • όοΫΤϯυଆͷ
 ॲཧΛ௥ͬͯσόοά Server 
 Side Front 
 End
32. FRONT END WEB DIRECTOR DESIGN BACK END SEO ϑϩϯτΤϯυ͸ଞʹ΋
 σβΠφʔɺWEBσΟϨΫλʔɺSEOͱ
 ϋϒʹͳΔ͜ͱ͕ଟ͍ͷͰ༷ʑͳ
 ݱ৔ͷ՝୊͕Έ͑ͯ͘Δ ͲΜͲΜվળͯ͠
 ݱ৔ͷ৴པ౓UPʂ
33. ඇΤϯδχΞͷਓ͔Βͷ ײँ͕൒୺ͳ͘خ͍͠ʂ
34. ϑϩϯτΤϯυͲ͏Ͱ͔͢ʁ
35. ͓·͚ɿվળྫ
36. jsp͸htmlͱͯ͠ΈΕͳ͍ͷͰ WEBσΟϨΫλͱσβΠφʔ͸ຊ൪Ͱը໘ભҠ͢Δ͔͠ͳ͍ jsp ʜ ܰ͘σβΠϯ֬ೝ͍͚ͨͩ͠ͳͷʹɺ ͍͍ͪͪϑΥʔϜΛೖྗͭΒ͍ʂ WEBσΟϨΫλ σβΠφʔ
37. jsp ͱ͍͏͜ͱͰɺKotlinͱVue.jsͰϞοΫαΠτ࡞੒ ʜ ϞοΫαΠτ ʜ jsoupͰ htmlԽ
38. jsp ʜ ϞοΫαΠτ ௚઀ΈΕͯ ࡞ۀޮ཰Ξοϓ ϑϩϯτΤϯυͳΒͰ͸ͷΞΠσΞͰݱ৔Λվળ jsoupͰ htmlԽ