Tweet
Tweet

Slide 1

Slide 1 text

- How to develop a Huge SPA using TypeScript & AngularJS - %FWFMPQFST4VNNJU

Slide 2

Slide 2 text

ࣗݾ঺հ Զͷ໊લΛݴͬͯΈΖ - Introduce myself -

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷ ΤϯδχΞɺσβΠφʔɺεΫϥϜϚελʔ͕ͨͪ ൃ৴͢Δ8FC։ൃ৘ใϝσΟΞ http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

Slide 8

Slide 8 text

https://eigosapuri.jp ӳޠαϓϦ

Slide 9

Slide 9 text

https://eigosapuri.jp ӳޠαϓϦ w ʰௌ͘ྗʱʰ࿩͢ྗʱͷ޲্ʹಛԽֶͨ͠शαʔϏε w υϥϚ࢓ཱͯͷετʔϦʔʹొ৔͢ΔΩϟϥʹͳΓ͖ͬͯձ࿩ͷ ࿅श w Ի੠ೝࣝػೳʹΑΓൃԻͷղੳɾϑΟʔυόοΫΛϦΞϧλΠϜʹ දࣔ w ฉ͖औΕͳ͔ͬͨൃԻͱͦͷݪҼΛࣗಈݕ஌͠ɺҰਓͻͱΓͷݪҼ ʹ߹ͬͨτϨʔχϯάΛఏڙ

Slide 10

Slide 10 text

೥ ্݄० - April 2015 early -

Slide 11

Slide 11 text

৽نαʔϏε࡞ΔΜͰ͢Αɻ ͔͠΋J04ɺ"OESPJEɺ8FCͷϚϧνϓϥο τϑΥʔϜల։Ͱʂ ΤϯδχΞ" XBLBNTIB ɹ΁͐ʙʜ ͔ͤͬ͘ͳͷͰ 4XJGUɺ,PUMJOɺ4DBMBɺ5ZQF4DSJQUͱ ౎಺๭ॴͱ͋ΔವΈձʹͯ

Slide 12

Slide 12 text

͔ͤͬ͘ͳͷͰ 4XJGUɺ,PUMJOɺ4DBMBɺ5ZQF4DSJQUͱ શ෦ܕਪ࿦ͳݴޠͰ࡞ͬͯ΍Ζ͏͔ͳͱߟ͑ͯ ͍·͢ʂ ΤϯδχΞ" ͋ɺαʔόʔαΠυ͸"1*͔͠ฦ͞ͳ͍Α͏ ͳ࢓༷ʹ͍ͨ͠ͷͰɺ8FC͸41"ʹͳͬͪΌ ͍·͢Ͷ XBLBNTIB ΁ʔɺ͍͢͝͡Όͳ͍Ͱ͔͢ɻ ׬શ41"ͳΜ࣮ͯݱͨ͠ΒϦΫϧʔτ্࢙ॳ ͳΜ͡Όͳ͍Ͱ͔͢Ͷʁ ౎಺๭ॴͱ͋ΔವΈձʹͯ

Slide 13

Slide 13 text

͡Όɺ8FC൛ͷϑϩϯτΤϯυ։ൃ ͓Ͷ͕͍͠·͢Ͷ ΤϯδχΞ" XBLBNTIB ɹϑΝοʂʁ ౎಺๭ॴͱ͋ΔವΈձʹͯ

Slide 14

Slide 14 text

౰࣌ͷɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR

Slide 15

Slide 15 text

౰࣌ͷɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR w )5.-ɺ$44͸ͦΕͳΓʹࣗ৴͋Γ w +BWB4DSJQU͸ਓฒΈఔ౓ $P⒎FF4DSJQUΛϝΠϯʹ࢖͏ w +BWB4DSJQUϑϨʔϜϫʔΫ͸7VFKTΛ࣮຿Ͱ࢖ͬͨ͜ͱ͋Γ w ݩʑ'MBTIσΟϕϩούʔ͕ͩͬͨɺ"DUJPO4DSJQU͸ຆͲ๨Εͯ ͠·͍ͬͯΔ

Slide 16

Slide 16 text

౰࣌ͷɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR 41"΍ͬͨ͜ͱͳ͍

Slide 17

Slide 17 text

೥ ݄ - May 2015 -

Slide 18

Slide 18 text

ϦϦʔε೔͸ܾ·͍ͬͯΔ͕࢓༷͸നࢴঢ়ଶ ͋Δͷ͸10 ϓϩμΫτΦʔφʔ ͷ ૖େͳເ͕ॻ͔Εͨࣾ಺8JLJ͘Β͍ ͜Ε·Ͱʹແ͍৽͍͠ӳޠֶशαʔϏε ϦεχϯάྗͱεϐʔΩϯάྗͷ܇࿅ʹಛԽ Ի੠ೝࣝςΫϊϩδʔΛ࢖͍͍ͨ ஶ໊ͳઌੜํʹ΋ग़ԋ͍͖͍ͨͩͨΑͶʂ Ϣʔβʔ͝ͱʹ࠷దͳֶशํ๏ΛఏҊ͠Α͏ ͦͷଞʹ΋ͨ͘͞Μʜ ʁ

Slide 19

Slide 19 text

ͱΓ͋͑ͣ 41"Λ࡞ΔͨΊͷ ٕज़ௐࠪΛ͸͡ΊΔ͜ͱʹ

Slide 20

Slide 20 text

4JOHMF1BHF"QQMJDBUJPOͳͷͰ +BWB4DSJQU͕େن໛ʹͳΔͷ͸ඞવ 5PP'BU'SPOUFOE$PEF

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

w .JDSPTPGU͕։ൃͨ͠"MU+4 τϥϯεύΠϥ w +BWB4DSJQUͷεʔύʔηοτ ׬શ্Ґޓ׵ w ੩తܕ෇͚ݴޠ w ܕਪ࿦͋Γ w ѹ౗తଟػೳ w $MBTT *OUFSGBDF "SSPXGVOD (FOFSJD .PEVMF /BNFTQBDFʜ 5ZQF4DSJQU

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

w (PPHMF͕։ൃͨ͠ϑϧελοΫ+4ϑϨʔϜϫʔΫ w ѹ౗తଟػೳ w %BUBCJOEJOH 3PVUJOH $VTUPNEJSFDUJWF %* 1SPNJTF BOENPSFʜ w ಛʹڧྗͳϧʔςΟϯάػೳ͸41"ʹ͏͚ͬͯͭ "OHVMBS+4

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

w ܰྔɾߴ଎ͳλεΫϥϯφʔ w νΣʔϯϝιου෩ʹλεΫΛఆٛ͢Δͷ͕ಛ௃ w (36/5ͱҧ͍ɺΑΓϓϩάϥϚϒϧʹఆٛͰ͖Δ w ෳࡶͳλεΫ΋ϓϩμΫγϣϯίʔυΛॻ͘ϊϦͰԡ͠੾ Δࣄ͕Ͱ͖Δ (VMQ

Slide 30

Slide 30 text

FUDʜ

Slide 31

Slide 31 text

w ௐࠪͨ͠಺༰͸͢΂ͯฐࣾϒϩάʹͯެ։ࡁΈ w ৘ใͷग़͠੯͠Έ͸͠ͳ͍ w Ξ΢τϓοτ·Ͱ΍ͬͯ͸͡Ίٕͯज़ௐࠪ http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

Slide 32

Slide 32 text

͜ΕͰ͍͜͏ ͔ͳ

Slide 33

Slide 33 text

೥ ্݄० - June 2015 early -

Slide 34

Slide 34 text

࢓༷͕Ұ޲ʹܾ·Βͳ͍ʜ

Slide 35

Slide 35 text

Ͳ͏ͯ͠࢓༷͕ܾ·Βͳ͍ʁ w 10͸ͱ͋Δࣄ৘͔Βݱ৔ͱڑ཭Λஔ͍ͯ͠·͍ͬͯΔ w ݱ৔Ϧʔμʔ͕νʔϜ಺ͷҙ޲Λ·ͱΊͯ10ʹใࠂ͢Δ ʹ΋ɺඍົʹ͓ޓ͍ͷೝ͕ࣝ߹Θͣিಥͷ܁Γฦ͠ w ೔ʹ೔ʹጧድ͍ͯ͘͠ݱ৔Ϧʔμʔ ɾТɾA w ๣؍͢Δ

Slide 36

Slide 36 text

೥ ݄Լ० - June 2015 in late -

Slide 37

Slide 37 text

࢓༷͕Ұ޲ʹܾ·Βͳ͍ʜ γϟϨʹͳͬͯͳ͍ͷͰೋճݴ͍·ͨ͠

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

w શһͰ࢓༷ࡦఆͷͨΊͷΧϯρϝΛ׶ߦ w ே͔Β൩·Ͱձٞࣨʹ࿜΋ΓɺશһͰ࢓༷ΛܾΊΔ w 10ʹ΋ձٞʹࢀՃͯ͠΋Β͍ɺεΫϥϜ։ൃͷҰһͱ͠ ͯಈ͍ͯ΋Β͏ w ͓ΑͦिؒͰˋ΄Ͳͷ࢓༷͕ݻ·Δ

Slide 41

Slide 41 text

೥ ݄ - July 2015 -

Slide 42

Slide 42 text

ϝϯόʔ΋૿͍͑ͯΑ͍Αຊ։ൃελʔτ - Two man cell Front-end engineers - New Comer

Slide 43

Slide 43 text

2 DAYS 1 WEEK ۃ Ί ͨ ʂ ϑ ϩ ϯ τ Τ ϯ υ

Slide 44

Slide 44 text

͜ͷ࢓૊Έͩͱμϝͬ͢Ͷʜ XBLBNTIB ɹ͑ʜʁ /FX$PNFS ઃܭ͸Կ౓Ͱ΋ݟ௚͢

Slide 45

Slide 45 text

͜Ε͕ϠόΠ̍ /FX$PNFS ͜Ε͕ϠόΠ̎ ͜Ε͕ϠόΠ̏ ઃܭ͸Կ౓Ͱ΋ݟ௚͢

Slide 46

Slide 46 text

ͪΐͬͱઌഐ ͦΜͳΜͰେৎ෉͔ͬ͆͆͆͢ /FX$PNFS XBLBNTIB ɹ͕͕͕͕ɺؤுΓ·͢ʂ ઃܭ͸Կ౓Ͱ΋ݟ௚͢

Slide 47

Slide 47 text

6*3PVUFSಋೖ The companion suite(s) to the AngularJS framework.

Slide 48

Slide 48 text

ίʔυͷ඼࣭ʹଥڠ͠ͳ͍ ϓϧϦΫΤετ͸༏ઌతʹରԠ ෼͔Βͳ͚Ε͹ଈ࠲ʹڭ͑Λ੥͏ ։ൃϙϦγʔ

Slide 49

Slide 49 text

೥ ݄Լ० - October 2015 in late -

Slide 50

Slide 50 text

์ஔ͍ͯͨ͠ࡉ͔͍όά͕େྔʹੵΈ্͕Δ J04"OESPJEΤϯδχΞ΋8FCʹࢀઓ ෼͔Βͳ͍ͱ͜Ζ͕͋Ε͹ɺ ϓϧϦΫϨϏϡʔ΍ϖΞϓϩͰΧόʔ Ղڥʹֻ͔ࠩͬͨ͠ͷͰ૯ྗઓ

Slide 51

Slide 51 text

೥ ݄Լ० - November 2015 in late -

Slide 52

Slide 52 text

ϦϦʔε௚લʹͳͬͯ໰୊ൃੜ *&Αɺ͓લ͸ͲΕ͚ͩզʑΛۤ͠ΊΕ͹ؾ͕ࡁΉΜͩʜ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊ "1*ૄ௨͕Ͳ͏ͯ͠΋ग़དྷͳ͍ʜ

Slide 53

Slide 53 text

͜Ε΋͏ແཧͬ͢Αɻ ࣌ؒ΋ͳ͍͜ͱͰ͢͠ɺ *&ͷαϙʔτ੾Γ·͠ΐ͏Αʂ XBLBNTIB ɹͬ͘ɺ΋͸΍͜Ε·Ͱ͔ʜ /FX$PNFS *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊

Slide 54

Slide 54 text

10 σʔλղੳ൝ Ϛδ͔ʙɻ ͪͳΈʹ͞ɺଞͷฐࣾαʔϏεʹ͓͚Δ*&ͷ ར༻཰ͬͯͲΕ͘Β͍ͳͷʁ ͑ʔͱʜ ݱࡏ໿Ͱ͢Ͷ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊

Slide 55

Slide 55 text

10 Μ͡Όɺ ͻͱ·ͣ੾ΓࣺͯΑ͏ʂ XBLBNTIB ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ /FX$PNFS ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊

Slide 56

Slide 56 text

10 Μ͡Όɺ ͻͱ·ͣ੾ΓࣺͯΑ͏ʂ XBLBNTIB ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ /FX$PNFS ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ໰୊ w ҰԠ͜ͷ໰୊͸ϦϦʔεޙʹվमࡁΈ w ͨͩ͠8JOEPXTdͷ৔߹ɺ*&ະຬ͸αϙʔτର ৅֎ͱͳΔͨΊɺࠓޙ*&ͷαϙʔτ͸ফۃతʹͳΔͱ ࢥΘΕ

Slide 57

Slide 57 text

೥ ݄ ೔ - November 30, 2015 -

Slide 58

Slide 58 text

https://eigosapuri.jp ӳޠαϓϦ Out Now !!

Slide 59

Slide 59 text

ӳޠαϓϦ8FC൛ϦϦʔε w ϦϦʔε೔લ·Ͱ͸Կ͔ͱΞʔΩςΫνϟͷݟ௚͠Λ׶ߦ w ϦϑΝΫλϦϯάͷख΋࠷ޙ·ͰࢭΊͳ͔ͬͨ w ϦϦʔε௚લ͸ൺֱతԺ΍͔ w ͜ͷࠒʹͳΔͱ࢒ۀ΋΄΅φγ w ৼΓฦͬͯΈΕ͹։ൃظؒதͷٳ೔ग़ۈ͸θϩ

Slide 60

Slide 60 text

਺ࣈͰৼΓฦͬͯΈΔ 3 6 CUSTOM DIRECTIVE ARCHITECTURE 8 2 1 7 1 5 STEP COUNT ,

Slide 61

Slide 61 text

ֶͼ w 5ZQF4DSJQUʹٹΘΕͨ w ܕ͸ਖ਼ٛ w ৑௕ɾίʔυྔ͕૿͑Δͱ͍͏ͷͰ͋Ε͹ɺͦΕ͸࢖༻͍ͯ͠ ΔςΩετΤσΟλΛݟ௚͢νϟϯε w +BWB4DSJQU͕ۤखͱ͍͏ਓʹͦ͜Φεεϝ͍ͨ͠

Slide 62

Slide 62 text

ֶͼ w "OHVMBS+4ͷ࠾༻͸ਖ਼ղͩͬͨ w ֶशίετ͸ߴ͍͕ɺͦͷ୅ঈΛ෷͏Ձ஋͸ॆ෼ʹ͋Δ w ϋʔυϧ͕ߴ͍ͱ͍͏ͷͰ͋Ε͹ɺ7VFKT͔ΒೖΔͷ΋ΞϦ w 6*3PVUFS͸ੵۃతʹ࠾༻͍͖͍ͯͨ͠

Slide 63

Slide 63 text

ֶͼ w ίʔυͷ඼࣭ʹຬ଍ͤͣɺઈ͑ͣϦϑΝΫλϦϯάΛ w ϓϧϦΫΤετ͸ཷΊࠐ·ͣ༏ઌతʹࡹ͘ w ͲΜͳখ͞ͳ͜ͱͰ΋෼͔Βͳ͚Ε͹㘤͘ w 10 εςʔΫϗϧμʔ ͱ͸͍ͭͰ΋Ͳ͜Ͱ΋ίϛϡχ έʔγϣϯΛऔΕΔΑ͏ͳνʔϜମ੍Λங͘

Slide 64

Slide 64 text

࠷ޙʹ w 5XJUUFS΍ϒϩάͳͲͰײ૝Λ͍͚ͨͩΔͱඇৗʹྭΈʹ ͳΓ·͢ w ฐࣾͷςοΫϒϩάΛޚཡ͍͍ͨͩͨํ͸γΣΞͳͲͯ͠ ͍͚ͨͩΔͱ࠷ߴʹخ͍͠Ͱ͢

Slide 65

Slide 65 text

5IBOLZPV