How to develop a huge Single Page Application

Developers Summit 2016 の一日目ランチセッションにて発表した資料です。
http://event.shoeisha.jp/devsumi/20160218/

Transcript

1. - How to develop a Huge SPA using TypeScript & AngularJS - %FWFMPQFST
   4VNNJU
    
2. ࣗݾ঺հ Զͷ໊લΛݴͬͯΈΖ - Introduce myself -
3. ࢁా
   ௚थ
   !XBLBNTIB ࣗݾ঺հ גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
   
   ೥݄
   ʙ
   
   ϑϩϯτΤϯυΤϯδχΞ Naoki YAMADA
4. http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
7. ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷ
   ΤϯδχΞɺσβΠφʔɺεΫϥϜϚελʔ͕ͨͪ ൃ৴͢Δ
   8FC
   ։ൃ৘ใϝσΟΞ http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
8. https://eigosapuri.jp ӳޠαϓϦ
9. https://eigosapuri.jp ӳޠαϓϦ w ʰௌ͘ྗʱʰ࿩͢ྗʱͷ޲্ʹಛԽֶͨ͠शαʔϏε w υϥϚ࢓ཱͯͷετʔϦʔʹొ৔͢ΔΩϟϥʹͳΓ͖ͬͯձ࿩ͷ ࿅श w Ի੠ೝࣝػೳʹΑΓൃԻͷղੳɾϑΟʔυόοΫΛϦΞϧλΠϜʹ දࣔ w ฉ͖औΕͳ͔ͬͨൃԻͱͦͷݪҼΛࣗಈݕ஌͠ɺҰਓͻͱΓͷݪҼ ʹ߹ͬͨτϨʔχϯάΛఏڙ
10. ೥
    ্݄० - April 2015 early -
11. ৽نαʔϏε࡞ΔΜͰ͢Αɻ
    ͔͠΋
    J04ɺ"OESPJEɺ8FC
    ͷϚϧνϓϥο τϑΥʔϜల։Ͱʂ ΤϯδχΞ
    " XBLBNTIB ɹ΁͐ʙʜ ͔ͤͬ͘ͳͷͰ
    4XJGUɺ,PUMJOɺ4DBMBɺ5ZQF4DSJQU
    ͱ ౎಺๭ॴ
    ͱ͋ΔವΈձʹͯ
12. ͔ͤͬ͘ͳͷͰ
    4XJGUɺ,PUMJOɺ4DBMBɺ5ZQF4DSJQU
    ͱ શ෦ܕਪ࿦ͳݴޠͰ࡞ͬͯ΍Ζ͏͔ͳͱߟ͑ͯ ͍·͢ʂ ΤϯδχΞ
    " ͋ɺαʔόʔαΠυ͸
    "1*
    ͔͠ฦ͞ͳ͍Α͏ ͳ࢓༷ʹ͍ͨ͠ͷͰɺ8FC
    ͸
    41"
    ʹͳͬͪΌ ͍·͢Ͷ XBLBNTIB ΁ʔɺ͍͢͝͡Όͳ͍Ͱ͔͢ɻ
    ׬શ
    41"
    ͳΜ࣮ͯݱͨ͠ΒϦΫϧʔτ্࢙ॳ ͳΜ͡Όͳ͍Ͱ͔͢Ͷʁ ౎಺๭ॴ
    ͱ͋ΔವΈձʹͯ
13. ͡Όɺ8FC
    ൛ͷϑϩϯτΤϯυ։ൃ
    ͓Ͷ͕͍͠·͢Ͷ ΤϯδχΞ
    " XBLBNTIB ɹϑΝοʂʁ ౎಺๭ॴ
    ͱ͋ΔವΈձʹͯ
14. ౰࣌ͷ
    ɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR
15. ౰࣌ͷ
    ɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR w )5.-ɺ$44
    ͸ͦΕͳΓʹࣗ৴͋Γ w +BWB4DSJQU
    ͸ਓฒΈఔ౓
    
    $P⒎FF4DSJQU
    ΛϝΠϯʹ࢖͏
    w +BWB4DSJQU
    ϑϨʔϜϫʔΫ͸
    7VFKT
    Λ࣮຿Ͱ࢖ͬͨ͜ͱ͋Γ w ݩʑ
    'MBTI
    σΟϕϩούʔ͕ͩͬͨɺ"DUJPO4DSJQU
    ͸ຆͲ๨Εͯ ͠·͍ͬͯΔ
16. ౰࣌ͷ
    ɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR 41"
    ΍ͬͨ͜ͱͳ͍
17. ೥
    ݄ - May 2015 -
18. ϦϦʔε೔͸ܾ·͍ͬͯΔ͕࢓༷͸നࢴঢ়ଶ ͋Δͷ͸
    10
    
    ϓϩμΫτΦʔφʔ
    
    ͷ
    ૖େͳເ͕ॻ͔Εͨࣾ಺
    8JLJ
    ͘Β͍
     ͜Ε·Ͱʹແ͍৽͍͠ӳޠֶशαʔϏε
     ϦεχϯάྗͱεϐʔΩϯάྗͷ܇࿅ʹಛԽ
     Ի੠ೝࣝςΫϊϩδʔΛ࢖͍͍ͨ
     ஶ໊ͳઌੜํʹ΋ग़ԋ͍͖͍ͨͩͨΑͶʂ
     Ϣʔβʔ͝ͱʹ࠷దͳֶशํ๏ΛఏҊ͠Α͏
     ͦͷଞʹ΋ͨ͘͞Μʜ ʁ
19. ͱΓ͋͑ͣ
    41"
    Λ࡞ΔͨΊͷ
    ٕज़ௐࠪΛ͸͡ΊΔ͜ͱʹ
20. 4JOHMF1BHF"QQMJDBUJPO
    ͳͷͰ
    +BWB4DSJQU
    ͕େن໛ʹͳΔͷ͸ඞવ 
    5PP
    'BU
    'SPOUFOE
    $PEF
    
23. w .JDSPTPGU
    ͕։ൃͨ͠
    "MU+4
    
    τϥϯεύΠϥ
    
    w +BWB4DSJQU
    ͷεʔύʔηοτ
    
    ׬શ্Ґޓ׵
    
    w ੩తܕ෇͚ݴޠ
    w ܕਪ࿦͋Γ
    w ѹ౗తଟػೳ
    w $MBTT
    *OUFSGBDF
    "SSPX
    GVOD
    (FOFSJD
    .PEVMF
    /BNFTQBDF
    ʜ 5ZQF4DSJQU
26. w (PPHMF
    ͕։ൃͨ͠ϑϧελοΫ
    +4
    ϑϨʔϜϫʔΫ
    w ѹ౗తଟػೳ
    w %BUB
    CJOEJOH
    3PVUJOH
    $VTUPN
    EJSFDUJWF
    %*
    1SPNJTF
    BOE
    NPSFʜ
    w ಛʹڧྗͳϧʔςΟϯάػೳ͸
    41"
    ʹ͏͚ͬͯͭ "OHVMBS+4
29. w ܰྔɾߴ଎ͳλεΫϥϯφʔ
    w νΣʔϯϝιου෩ʹλεΫΛఆٛ͢Δͷ͕ಛ௃
    w (36/5
    ͱҧ͍ɺΑΓϓϩάϥϚϒϧʹఆٛͰ͖Δ
    w ෳࡶͳλεΫ΋ϓϩμΫγϣϯίʔυΛॻ͘ϊϦͰԡ͠੾ Δࣄ͕Ͱ͖Δ (VMQ
30. FUD
    ʜ
31. w ௐࠪͨ͠಺༰͸͢΂ͯฐࣾϒϩάʹͯެ։ࡁΈ
    w ৘ใͷग़͠੯͠Έ͸͠ͳ͍
    w Ξ΢τϓοτ·Ͱ΍ͬͯ͸͡Ίٕͯज़ௐࠪ http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
32. ͜ΕͰ͍͜͏
    
    ͔ͳ
    
33. ೥
    ্݄० - June 2015 early -
34. ࢓༷͕Ұ޲ʹܾ·Βͳ͍ʜ
35. Ͳ͏ͯ͠࢓༷͕ܾ·Βͳ͍ʁ w 10
    ͸ͱ͋Δࣄ৘͔Βݱ৔ͱڑ཭Λஔ͍ͯ͠·͍ͬͯΔ
    w ݱ৔Ϧʔμʔ͕νʔϜ಺ͷҙ޲Λ·ͱΊͯ
    10
    ʹใࠂ͢Δ ʹ΋ɺඍົʹ͓ޓ͍ͷೝ͕ࣝ߹Θͣিಥͷ܁Γฦ͠
    w ೔ʹ೔ʹጧድ͍ͯ͘͠ݱ৔Ϧʔμʔ
    ɾТɾA
    w ๣؍͢Δ
36. ೥
    ݄Լ० - June 2015 in late -
37. ࢓༷͕Ұ޲ʹܾ·Βͳ͍ʜ γϟϨʹͳͬͯͳ͍ͷͰೋճݴ͍·ͨ͠
40. w શһͰ࢓༷ࡦఆͷͨΊͷΧϯρϝΛ׶ߦ
    w ே͔Β൩·Ͱձٞࣨʹ࿜΋ΓɺશһͰ࢓༷ΛܾΊΔ
    w 10
    ʹ΋ձٞʹࢀՃͯ͠΋Β͍ɺεΫϥϜ։ൃͷҰһͱ͠ ͯಈ͍ͯ΋Β͏
    w ͓Αͦ
    िؒͰ
    ˋ
    ΄Ͳͷ࢓༷͕ݻ·Δ
41. ೥
    ݄ - July 2015 -
42. ϝϯόʔ΋૿͍͑ͯΑ͍Αຊ։ൃελʔτ - Two man cell Front-end engineers - New Comer
43. 2 DAYS 1 WEEK ۃ Ί ͨ ʂ ϑ ϩ ϯ τ Τ ϯ υ
44. ͜ͷ࢓૊Έͩͱμϝͬ͢Ͷʜ XBLBNTIB ɹ͑ʜʁ /FX
    $PNFS ઃܭ͸Կ౓Ͱ΋ݟ௚͢
45. ͜Ε͕ϠόΠ̍ /FX
    $PNFS ͜Ε͕ϠόΠ̎ ͜Ε͕ϠόΠ̏ ઃܭ͸Կ౓Ͱ΋ݟ௚͢
46. ͪΐͬͱઌഐ
    ͦΜͳΜͰେৎ෉͔ͬ͆͆͆͢ /FX
    $PNFS XBLBNTIB ɹ͕͕͕͕ɺؤுΓ·͢ʂ ઃܭ͸Կ౓Ͱ΋ݟ௚͢
47. 6*
    3PVUFS
    ಋೖ The companion suite(s) to the AngularJS framework.
48. ίʔυͷ඼࣭ʹଥڠ͠ͳ͍
    ϓϧϦΫΤετ͸༏ઌతʹରԠ
    ෼͔Βͳ͚Ε͹ଈ࠲ʹڭ͑Λ੥͏ ։ൃϙϦγʔ
49. ೥
    ݄Լ० - October 2015 in late -
50. ์ஔ͍ͯͨ͠ࡉ͔͍όά͕େྔʹੵΈ্͕Δ
    J04
    
    "OESPJE
    ΤϯδχΞ΋
    8FC
    ʹࢀઓ
    ෼͔Βͳ͍ͱ͜Ζ͕͋Ε͹ɺ
    ϓϧϦΫϨϏϡʔ
    ΍
    ϖΞϓϩͰΧόʔ Ղڥʹֻ͔ࠩͬͨ͠ͷͰ૯ྗઓ
51. ೥
    ݄Լ० - November 2015 in late -
52. ϦϦʔε௚લʹͳͬͯ໰୊ൃੜ *&
    Αɺ͓લ͸ͲΕ͚ͩզʑΛۤ͠ΊΕ͹ؾ͕ࡁΉΜͩʜ *&
    
    ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊
    "1*
    ૄ௨͕Ͳ͏ͯ͠΋ग़དྷͳ͍ʜ
53. 
    ͜Ε΋͏ແཧͬ͢Αɻ
    
    
    ࣌ؒ΋ͳ͍͜ͱͰ͢͠ɺ
    
    *&
    ͷαϙʔτ੾Γ·͠ΐ͏Αʂ XBLBNTIB ɹͬ͘ɺ΋͸΍͜Ε·Ͱ͔ʜ /FX
    $PNFS *&
    ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊
54. 10 σʔλղੳ൝
    Ϛδ͔ʙɻ
    
    ͪͳΈʹ͞ɺଞͷฐࣾαʔϏεʹ͓͚Δ
    *&
    ͷ
    
    ར༻཰ͬͯͲΕ͘Β͍ͳͷʁ
    ͑ʔͱʜ
    
    ݱࡏ
    ໿
    
    Ͱ͢Ͷ *&
    ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊
55. 10
    Μ͡Όɺ
    
    ͻͱ·ͣ੾ΓࣺͯΑ͏ʂ XBLBNTIB ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ /FX
    $PNFS ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ *&
    ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊
56. 10
    Μ͡Όɺ
    
    ͻͱ·ͣ੾ΓࣺͯΑ͏ʂ XBLBNTIB ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ /FX
    $PNFS ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ *&
    ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊ w ҰԠ͜ͷ໰୊͸ϦϦʔεޙʹվमࡁΈ
    w ͨͩ͠
    8JOEPXT
    d
    
    ͷ৔߹ɺ*&
    ະຬ͸αϙʔτର ৅֎ͱͳΔͨΊɺࠓޙ
    *&
    ͷαϙʔτ͸ফۃతʹͳΔͱ ࢥΘΕ
57. ೥
    ݄ ೔ - November 30, 2015 -
58. https://eigosapuri.jp ӳޠαϓϦ Out Now !!
59. ӳޠαϓϦ
    8FC
    ൛ϦϦʔε w ϦϦʔε೔લ·Ͱ͸Կ͔ͱΞʔΩςΫνϟͷݟ௚͠Λ׶ߦ
    w ϦϑΝΫλϦϯάͷख΋࠷ޙ·ͰࢭΊͳ͔ͬͨ
    w ϦϦʔε௚લ͸ൺֱతԺ΍͔
    w ͜ͷࠒʹͳΔͱ࢒ۀ΋΄΅φγ
    w ৼΓฦͬͯΈΕ͹։ൃظؒதͷٳ೔ग़ۈ͸θϩ
60. ਺ࣈͰৼΓฦͬͯΈΔ 3 6 CUSTOM DIRECTIVE ARCHITECTURE 8 2 1 7 1 5 STEP COUNT ,
61. ֶͼ
     w 5ZQF4DSJQU
    ʹٹΘΕͨ
    w ܕ͸ਖ਼ٛ
    w ৑௕ɾίʔυྔ͕૿͑Δͱ͍͏ͷͰ͋Ε͹ɺͦΕ͸࢖༻͍ͯ͠ ΔςΩετΤσΟλΛݟ௚͢νϟϯε
    w +BWB4DSJQU
    ͕ۤखͱ͍͏ਓʹͦ͜Φεεϝ͍ͨ͠
62. ֶͼ
     w "OHVMBS+4
    ͷ࠾༻͸ਖ਼ղͩͬͨ
    w ֶशίετ͸ߴ͍͕ɺͦͷ୅ঈΛ෷͏Ձ஋͸ॆ෼ʹ͋Δ
    w ϋʔυϧ͕ߴ͍ͱ͍͏ͷͰ͋Ε͹ɺ7VFKT
    ͔ΒೖΔͷ΋ΞϦ
    w 6*
    3PVUFS
    ͸ੵۃతʹ࠾༻͍͖͍ͯͨ͠
63. ֶͼ
     w ίʔυͷ඼࣭ʹຬ଍ͤͣɺઈ͑ͣϦϑΝΫλϦϯάΛ
    w ϓϧϦΫΤετ͸ཷΊࠐ·ͣ༏ઌతʹࡹ͘
    w ͲΜͳখ͞ͳ͜ͱͰ΋෼͔Βͳ͚Ε͹㘤͘
    w 10
    
    εςʔΫϗϧμʔ
    
    ͱ͸͍ͭͰ΋Ͳ͜Ͱ΋ίϛϡχ έʔγϣϯΛऔΕΔΑ͏ͳνʔϜମ੍Λங͘
64. ࠷ޙʹ w 5XJUUFS
    ΍ϒϩάͳͲͰײ૝Λ͍͚ͨͩΔͱඇৗʹྭΈʹ ͳΓ·͢
    w ฐࣾͷςοΫϒϩάΛޚཡ͍͍ͨͩͨํ͸γΣΞͳͲͯ͠ ͍͚ͨͩΔͱ࠷ߴʹخ͍͠Ͱ͢
65. 5IBOL
    ZPV