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
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
240
成立するElixirの再束縛(再代入)可という選択
kubell_hr
0
540
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
370
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
600
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
1
390
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
460
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
250
IIWレポートからみるID業界で話題のMCP
fujie
0
650
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2k
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
400
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
250
In Praise of "Normal" Engineers (LDX3)
charity
2
1.2k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Speed Design
sergeychernyshev
31
1k
Statistics for Hackers
jakevdp
799
220k
Balancing Empowerment & Direction
lara
1
340
Code Review Best Practice
trishagee
68
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Facilitating Awesome Meetings
lara
54
6.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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