Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to develop a huge Single Page Application
Search
wakamsha
February 21, 2016
Technology
0
89
How to develop a huge Single Page Application
Developers Summit 2016 の一日目ランチセッションにて発表した資料です。
http://event.shoeisha.jp/devsumi/20160218/
wakamsha
February 21, 2016
Tweet
Share
More Decks by wakamsha
See All by wakamsha
Storybook 勉強会
wakamsha
0
180
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.7k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.3k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
320
JavaScript ( 時々 TypeScript ) で ゆるやかにはじめる関数型プログラミング
wakamsha
6
3.1k
【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう
wakamsha
4
3.5k
My name is WAKAMSHA - I’m a programmer / web frontend engineer.
wakamsha
1
2.1k
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
wakamsha
9
14k
LP 制作フローを抜本的に改善した話
wakamsha
1
470
Other Decks in Technology
See All in Technology
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
210
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
250
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
310
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
CDK Vibe Coding Fes
tomoki10
1
600
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
580
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
510
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
580
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Six Lessons from altMBA
skipperchong
28
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Statistics for Hackers
jakevdp
799
220k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimizing for Happiness
mojombo
379
70k
Done Done
chrislema
184
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
54
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
- How to develop a Huge SPA using TypeScript &
AngularJS - %FWFMPQFST4VNNJU
ࣗݾհ Զͷ໊લΛݴͬͯΈΖ - Introduce myself -
ࢁాथ !XBLBNTIB ࣗݾհ גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ݄ʙ ϑϩϯτΤϯυΤϯδχΞ Naoki YAMADA
http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
None
None
ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷ ΤϯδχΞɺσβΠφʔɺεΫϥϜϚελʔ͕ͨͪ ൃ৴͢Δ8FC։ൃใϝσΟΞ http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
https://eigosapuri.jp ӳޠαϓϦ
https://eigosapuri.jp ӳޠαϓϦ w ʰௌ͘ྗʱʰ͢ྗʱͷ্ʹಛԽֶͨ͠शαʔϏε w υϥϚཱͯͷετʔϦʔʹొ͢ΔΩϟϥʹͳΓ͖ͬͯձͷ ࿅श w ԻೝࣝػೳʹΑΓൃԻͷղੳɾϑΟʔυόοΫΛϦΞϧλΠϜʹ දࣔ
w ฉ͖औΕͳ͔ͬͨൃԻͱͦͷݪҼΛࣗಈݕ͠ɺҰਓͻͱΓͷݪҼ ʹ߹ͬͨτϨʔχϯάΛఏڙ
্݄० - April 2015 early -
৽نαʔϏε࡞ΔΜͰ͢Αɻ ͔͠J04ɺ"OESPJEɺ8FCͷϚϧνϓϥο τϑΥʔϜల։Ͱʂ ΤϯδχΞ" XBLBNTIB ɹ͐ʙʜ ͔ͤͬ͘ͳͷͰ 4XJGUɺ,PUMJOɺ4DBMBɺ5ZQF4DSJQUͱ ॴͱ͋ΔವΈձʹͯ
͔ͤͬ͘ͳͷͰ 4XJGUɺ,PUMJOɺ4DBMBɺ5ZQF4DSJQUͱ શ෦ܕਪͳݴޠͰ࡞ͬͯΖ͏͔ͳͱߟ͑ͯ ͍·͢ʂ ΤϯδχΞ" ͋ɺαʔόʔαΠυ"1*͔͠ฦ͞ͳ͍Α͏ ͳ༷ʹ͍ͨ͠ͷͰɺ8FC41"ʹͳͬͪΌ ͍·͢Ͷ XBLBNTIB ʔɺ͍͢͝͡Όͳ͍Ͱ͔͢ɻ
શ41"ͳΜ࣮ͯݱͨ͠ΒϦΫϧʔτ্࢙ॳ ͳΜ͡Όͳ͍Ͱ͔͢Ͷʁ ॴͱ͋ΔವΈձʹͯ
͡Όɺ8FC൛ͷϑϩϯτΤϯυ։ൃ ͓Ͷ͕͍͠·͢Ͷ ΤϯδχΞ" XBLBNTIB ɹϑΝοʂʁ ॴͱ͋ΔವΈձʹͯ
࣌ͷɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript )
Vue.js GRUNT MIDDLEMAN RoR
࣌ͷɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript )
Vue.js GRUNT MIDDLEMAN RoR w )5.-ɺ$44ͦΕͳΓʹࣗ৴͋Γ w +BWB4DSJQUਓฒΈఔ $P⒎FF4DSJQUΛϝΠϯʹ͏ w +BWB4DSJQUϑϨʔϜϫʔΫ7VFKTΛ࣮Ͱͬͨ͜ͱ͋Γ w ݩʑ'MBTIσΟϕϩούʔ͕ͩͬͨɺ"DUJPO4DSJQUຆͲΕͯ ͠·͍ͬͯΔ
࣌ͷɹɹεΩϧηοτ HTML CSS ( SCSS ) JavaScript ( CoffeeScript )
Vue.js GRUNT MIDDLEMAN RoR 41"ͬͨ͜ͱͳ͍
݄ - May 2015 -
ϦϦʔεܾ·͍ͬͯΔ͕༷നࢴঢ়ଶ ͋Δͷ10 ϓϩμΫτΦʔφʔ ͷ େͳເ͕ॻ͔Εͨࣾ8JLJ͘Β͍ ͜Ε·Ͱʹແ͍৽͍͠ӳޠֶशαʔϏε ϦεχϯάྗͱεϐʔΩϯάྗͷ܇࿅ʹಛԽ
ԻೝࣝςΫϊϩδʔΛ͍͍ͨ ஶ໊ͳઌੜํʹग़ԋ͍͖͍ͨͩͨΑͶʂ Ϣʔβʔ͝ͱʹ࠷దͳֶशํ๏ΛఏҊ͠Α͏ ͦͷଞʹͨ͘͞Μʜ ʁ
ͱΓ͋͑ͣ 41"Λ࡞ΔͨΊͷ ٕज़ௐࠪΛ͡ΊΔ͜ͱʹ
4JOHMF1BHF"QQMJDBUJPOͳͷͰ +BWB4DSJQU͕େنʹͳΔͷඞવ 5PP'BU'SPOUFOE$PEF
None
None
w .JDSPTPGU͕։ൃͨ͠"MU+4 τϥϯεύΠϥ w +BWB4DSJQUͷεʔύʔηοτ શ্Ґޓ w ੩తܕ͚ݴޠ
w ܕਪ͋Γ w ѹతଟػೳ w $MBTT *OUFSGBDF "SSPXGVOD (FOFSJD .PEVMF /BNFTQBDFʜ 5ZQF4DSJQU
None
None
w (PPHMF͕։ൃͨ͠ϑϧελοΫ+4ϑϨʔϜϫʔΫ w ѹతଟػೳ w %BUBCJOEJOH 3PVUJOH $VTUPNEJSFDUJWF %* 1SPNJTF
BOENPSFʜ w ಛʹڧྗͳϧʔςΟϯάػೳ41"ʹ͏͚ͬͯͭ "OHVMBS+4
None
None
w ܰྔɾߴͳλεΫϥϯφʔ w νΣʔϯϝιου෩ʹλεΫΛఆٛ͢Δͷ͕ಛ w (36/5ͱҧ͍ɺΑΓϓϩάϥϚϒϧʹఆٛͰ͖Δ w ෳࡶͳλεΫϓϩμΫγϣϯίʔυΛॻ͘ϊϦͰԡ͠ Δࣄ͕Ͱ͖Δ (VMQ
FUDʜ
w ௐࠪͨ͠༰ͯ͢ฐࣾϒϩάʹͯެ։ࡁΈ w ใͷग़͠੯͠Έ͠ͳ͍ w Ξτϓοτ·Ͱͬͯ͡Ίٕͯज़ௐࠪ http://tech.recruit-mp.co.jp NET BIZ DIV.
TECH BLOG
͜ΕͰ͍͜͏ ͔ͳ
্݄० - June 2015 early -
༷͕Ұʹܾ·Βͳ͍ʜ
Ͳ͏༷͕ܾͯ͠·Βͳ͍ʁ w 10ͱ͋Δࣄ͔ΒݱͱڑΛஔ͍ͯ͠·͍ͬͯΔ w ݱϦʔμʔ͕νʔϜͷҙΛ·ͱΊͯ10ʹใࠂ͢Δ ʹɺඍົʹ͓ޓ͍ͷೝ͕ࣝ߹Θͣিಥͷ܁Γฦ͠ w ʹʹጧድ͍ͯ͘͠ݱϦʔμʔ ɾТɾA
w ؍͢Δ
݄Լ० - June 2015 in late -
༷͕Ұʹܾ·Βͳ͍ʜ γϟϨʹͳͬͯͳ͍ͷͰೋճݴ͍·ͨ͠
None
None
w શһͰ༷ࡦఆͷͨΊͷΧϯρϝΛߦ w ே͔Β൩·ͰձٞࣨʹΓɺશһͰ༷ΛܾΊΔ w 10ʹձٞʹࢀՃͯ͠Β͍ɺεΫϥϜ։ൃͷҰһͱ͠ ͯಈ͍ͯΒ͏ w ͓ΑͦिؒͰˋ΄Ͳͷ༷͕ݻ·Δ
݄ - July 2015 -
ϝϯόʔ૿͍͑ͯΑ͍Αຊ։ൃελʔτ - Two man cell Front-end engineers - New Comer
2 DAYS 1 WEEK ۃ Ί ͨ ʂ ϑ ϩ
ϯ τ Τ ϯ υ
͜ͷΈͩͱμϝͬ͢Ͷʜ XBLBNTIB ɹ͑ʜʁ /FX$PNFS ઃܭԿͰݟ͢
͜Ε͕ϠόΠ̍ /FX$PNFS ͜Ε͕ϠόΠ̎ ͜Ε͕ϠόΠ̏ ઃܭԿͰݟ͢
ͪΐͬͱઌഐ ͦΜͳΜͰେৎ͔ͬ͆͆͆͢ /FX$PNFS XBLBNTIB ɹ͕͕͕͕ɺؤுΓ·͢ʂ ઃܭԿͰݟ͢
6*3PVUFSಋೖ The companion suite(s) to the AngularJS framework.
ίʔυͷ࣭ʹଥڠ͠ͳ͍ ϓϧϦΫΤετ༏ઌతʹରԠ ͔Βͳ͚Εଈ࠲ʹڭ͑Λ͏ ։ൃϙϦγʔ
݄Լ० - October 2015 in late -
์ஔ͍ͯͨ͠ࡉ͔͍όά͕େྔʹੵΈ্͕Δ J04"OESPJEΤϯδχΞ8FCʹࢀઓ ͔Βͳ͍ͱ͜Ζ͕͋Εɺ ϓϧϦΫϨϏϡʔϖΞϓϩͰΧόʔ Ղڥʹֻ͔ࠩͬͨ͠ͷͰ૯ྗઓ
݄Լ० - November 2015 in late -
ϦϦʔεલʹͳͬͯൃੜ *&Αɺ͓લͲΕ͚ͩզʑΛۤ͠ΊΕؾ͕ࡁΉΜͩʜ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ "1*ૄ௨͕Ͳ͏ͯ͠ग़དྷͳ͍ʜ
͜Ε͏ແཧͬ͢Αɻ ࣌ؒͳ͍͜ͱͰ͢͠ɺ *&ͷαϙʔτΓ·͠ΐ͏Αʂ XBLBNTIB ɹͬ͘ɺ͜Ε·Ͱ͔ʜ /FX$PNFS *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ
10 σʔλղੳ൝ Ϛδ͔ʙɻ ͪͳΈʹ͞ɺଞͷฐࣾαʔϏεʹ͓͚Δ*&ͷ ར༻ͬͯͲΕ͘Β͍ͳͷʁ ͑ʔͱʜ ݱࡏͰ͢Ͷ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ
10 Μ͡Όɺ ͻͱ·ͣΓࣺͯΑ͏ʂ XBLBNTIB ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ /FX$PNFS ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ
10 Μ͡Όɺ ͻͱ·ͣΓࣺͯΑ͏ʂ XBLBNTIB ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ /FX$PNFS ͏͓͓͓͓͓͓͓͓͓͓͓͓͓͓ ͓͓͓͓͓͓͓͓͓ʔͬʂʂʂʂ *&ͷΈͰൃੜ͢ΔΫϩευϝΠϯ
w ҰԠ͜ͷϦϦʔεޙʹվमࡁΈ w ͨͩ͠8JOEPXTdͷ߹ɺ*&ະຬαϙʔτର ֎ͱͳΔͨΊɺࠓޙ*&ͷαϙʔτফۃతʹͳΔͱ ࢥΘΕ
݄ - November 30, 2015 -
https://eigosapuri.jp ӳޠαϓϦ Out Now !!
ӳޠαϓϦ8FC൛ϦϦʔε w ϦϦʔεલ·ͰԿ͔ͱΞʔΩςΫνϟͷݟ͠Λߦ w ϦϑΝΫλϦϯάͷख࠷ޙ·ͰࢭΊͳ͔ͬͨ w ϦϦʔεલൺֱతԺ͔ w ͜ͷࠒʹͳΔͱۀ΄΅φγ w
ৼΓฦͬͯΈΕ։ൃظؒதͷٳग़ۈθϩ
ࣈͰৼΓฦͬͯΈΔ 3 6 CUSTOM DIRECTIVE ARCHITECTURE 8 2 1 7
1 5 STEP COUNT ,
ֶͼ w 5ZQF4DSJQUʹٹΘΕͨ w ܕਖ਼ٛ w ɾίʔυྔ͕૿͑Δͱ͍͏ͷͰ͋ΕɺͦΕ༻͍ͯ͠ ΔςΩετΤσΟλΛݟ͢νϟϯε w +BWB4DSJQU͕ۤखͱ͍͏ਓʹͦ͜Φεεϝ͍ͨ͠
ֶͼ w "OHVMBS+4ͷ࠾༻ਖ਼ղͩͬͨ w ֶशίετߴ͍͕ɺͦͷঈΛ͏Ձॆʹ͋Δ w ϋʔυϧ͕ߴ͍ͱ͍͏ͷͰ͋Εɺ7VFKT͔ΒೖΔͷΞϦ w 6*3PVUFSੵۃతʹ࠾༻͍͖͍ͯͨ͠
ֶͼ w ίʔυͷ࣭ʹຬͤͣɺઈ͑ͣϦϑΝΫλϦϯάΛ w ϓϧϦΫΤετཷΊࠐ·ͣ༏ઌతʹࡹ͘ w ͲΜͳখ͞ͳ͜ͱͰ͔Βͳ͚Ε㘤͘ w 10 εςʔΫϗϧμʔ
ͱ͍ͭͰͲ͜Ͱίϛϡχ έʔγϣϯΛऔΕΔΑ͏ͳνʔϜମ੍Λங͘
࠷ޙʹ w 5XJUUFSϒϩάͳͲͰײΛ͍͚ͨͩΔͱඇৗʹྭΈʹ ͳΓ·͢ w ฐࣾͷςοΫϒϩάΛޚཡ͍͍ͨͩͨํγΣΞͳͲͯ͠ ͍͚ͨͩΔͱ࠷ߴʹخ͍͠Ͱ͢
5IBOLZPV