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
90
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
190
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
5.8k
Vite を使ってアプリケーションに環境変数を参照させる方法を考える
wakamsha
0
1.3k
小さくはじめる車輪の再発明のすゝめ
wakamsha
0
330
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
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
380
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
600
roppongirb_20250911
igaiga
1
240
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
220
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
180
Featured
See All Featured
It's Worth the Effort
3n
187
28k
How STYLIGHT went responsive
nonsquared
100
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
79
6.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Code Review Best Practice
trishagee
71
19k
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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