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

How to develop a huge Single Page Application

82ed567f8497acfed7f7b464225dd536?s=47 wakamsha
February 21, 2016

How to develop a huge Single Page Application

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

82ed567f8497acfed7f7b464225dd536?s=128

wakamsha

February 21, 2016
Tweet

Transcript

  1. - How to develop a Huge SPA using TypeScript &

    AngularJS - %FWFMPQFST4VNNJU 
  2. ࣗݾ঺հ Զͷ໊લΛݴͬͯΈΖ - Introduce myself -

  3. ࢁా௚थ !XBLBNTIB ࣗݾ঺հ גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ೥݄ʙ  ϑϩϯτΤϯυΤϯδχΞ Naoki YAMADA

  4. http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

  5. None
  6. None
  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

  21. None
  22. None
  23. w .JDSPTPGU͕։ൃͨ͠"MU+4 τϥϯεύΠϥ  w +BWB4DSJQUͷεʔύʔηοτ ׬શ্Ґޓ׵  w ੩తܕ෇͚ݴޠ

    w ܕਪ࿦͋Γ w ѹ౗తଟػೳ w $MBTT *OUFSGBDF "SSPXGVOD (FOFSJD .PEVMF /BNFTQBDFʜ 5ZQF4DSJQU
  24. None
  25. None
  26. w (PPHMF͕։ൃͨ͠ϑϧελοΫ+4ϑϨʔϜϫʔΫ w ѹ౗తଟػೳ w %BUBCJOEJOH 3PVUJOH $VTUPNEJSFDUJWF %* 1SPNJTF

    BOENPSFʜ w ಛʹڧྗͳϧʔςΟϯάػೳ͸41"ʹ͏͚ͬͯͭ "OHVMBS+4
  27. None
  28. None
  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. ࢓༷͕Ұ޲ʹܾ·Βͳ͍ʜ γϟϨʹͳͬͯͳ͍ͷͰೋճݴ͍·ͨ͠

  38. None
  39. None
  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 ͨͩ͠8JOEPXTdͷ৔߹ɺ*&ະຬ͸αϙʔτର ৅֎ͱͳΔͨΊɺࠓޙ*&ͷαϙʔτ͸ফۃతʹͳΔͱ ࢥΘΕ
  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. 5IBOLZPV