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
82
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
120
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.1k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.1k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
290
JavaScript ( 時々 TypeScript ) で ゆるやかにはじめる関数型プログラミング
wakamsha
6
3k
【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう
wakamsha
4
3.3k
My name is WAKAMSHA - I’m a programmer / web frontend engineer.
wakamsha
1
2k
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
wakamsha
9
14k
LP 制作フローを抜本的に改善した話
wakamsha
1
450
Other Decks in Technology
See All in Technology
X-Correlation Injections (or How to break server-side contexts)
fransrosen
0
360
Azure Cosmos DB での時系列ログの運用と改善
sansantech
PRO
0
190
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
100
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
220
Datadog を使ったプロダクトとクラウドの セキュリティモニタリング
mrtc0
0
450
Oracle Database 23ai 新機能 #3 Oracle Globally Distributed Database(GDD)
oracle4engineer
PRO
1
160
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
Binary Authorizationと友達になろう / Let's be friends with Binary Authorization
iselegant
2
130
React Aria で実現する次世代のアクセシビリティ
ryo_manba
3
290
[RSJ24] Object Retrieval in Large-Scale Indoor Environments Using Dense Text with a Multi-Modal Large Language Model
keio_smilab
PRO
0
220
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
3
470
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Practical Orchestrator
shlominoach
185
10k
For a Future-Friendly Web
brad_frost
173
9.3k
What the flash - Photography Introduction
edds
67
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
27
1.6k
The World Runs on Bad Software
bkeepers
PRO
64
11k
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