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
大規模Angularの向こう側
Search
OKUNOKENTARO
December 14, 2017
Technology
2
510
大規模Angularの向こう側
Dec 14, 2017 @ng-sake #10 発表資料
OKUNOKENTARO
December 14, 2017
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Technology
See All in Technology
A2Aのクライアントを自作する
rynsuke
1
110
Cloud Native Scalability for Internal Developer Platforms
hhiroshell
2
490
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
0
110
実践! AIエージェント導入記
1mono2prod
0
130
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
460
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
130
Agentic Workflowという選択肢を考える
tkikuchi1002
1
220
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
640
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
2
1.6k
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
460
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
27
9.3k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What's in a price? How to price your products and services
michaelherold
245
12k
Facilitating Awesome Meetings
lara
54
6.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
How to Ace a Technical Interview
jacobian
276
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Balancing Empowerment & Direction
lara
1
330
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How STYLIGHT went responsive
nonsquared
100
5.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Transcript
େن"OHVMBSͷ͜͏ଆ %FD !OHTBLF
୭ w !PLVOPLFOUBSP w ͪ͞Μ w גࣜձࣾϐΫηϧάϦ ο υ w
OHKBQBOͷதͷਓ
ຊΛॻ͖·ͨ͠
ࠓΔ w େن"OHVMBSΞϓϦ͕ߋʹେ͖͘ͳΔ࣌ɺ Ͳ͏͢ΕΑ͍͔ w ᠘ͩΒ͚
͜ͷลͷଓ͖Ͱ͢ https://speakerdeck.com/armorik83
େنͷͭΒ͍ͱ͜Ζ w ίʔ υͷॏෳΛͲͷΑ ͏ʹநԽ ɾ ڞ௨Խ͢Δ͔ w େͳϑΝΠϧΛͲ͏ͬͯѻ͏͔ w
ϝϯόʔ͕ଟ͍ϓϩδΣΫ τͰͲ͏࣭ͬͯΛ୲อ͢Δ͔
Ͱͳ͘ ͯ
Ϗϧυ͕͍݅
Ϗϧυͷ͞ w ϑΝΠϧ͕ଟ͍͔Βํͳ͍ ʢສߦʣ w ͱʹ͔͍͘ w ng serveͰͨΓલ
w ng buildͰͨΓલ w $*͑༨༟
ੜ࢈ੑͷԼ w Ϗϧυͷ͞ຊʹόΧʹͳΒͳ͍ w ճ$*Λճ͢ͱࣦ࣌ؒΘΕΔ ʢّʹ͍ͬͯΕɺ ͕ͩʣ w ͤΊͯ։ൃதαΫαΫ͍ͨ͠
ͦ͏ͩϑΝΠϧΛݮΒͦ͏
૯ϑΝΠϧͷݮ w ݱࡏɺ ཁ݅ͷͷఔ͕࣮ྃͰɺ ͢Ͱʹ͜ͷ͞ w ཁ݅Λ΄΅࣮͖͠ΔͰ͋Ζ͏ ϓϩδΣΫ τऴ൫ɺ
ݱࡏΑ Γഒ͕͔͔࣌ؒΔͱ༧ w ͩͬͨΒείʔϓΛখ͞ ͘͢Δ͜ͱͰɺ Ϗϧυ࣌ؒΛ͜ΕҎ্૿͞ͳ͍Α ͏ʹ͠Α ͏
ΞϓϦͷׂ w "OHVMBS$-*ʹෳͷΞϓϦΛཧ͢ΔΈ͕͋Δ w ng serve --app=app-nameͳͲ w લྫΛࢀߟʹ͍ͨ͠
/Y w IUUQTOSXMJPOY w 7JDUPS4BWLJOࢯͷձࣾɺ "OHVMBSͷίϯαϧλϯ τͷձࣾΒ͍͠ w ͜͏͍͏໊લͷπʔϧ͔ͱࢥ͍͖ɺ
ςϯϓϨʔ τूɺ ϊϋूͱࢥͬͨ΄͏͕Α͍ w ෳΞϓϦཧͷϊϋ͕٧·ͬͯΔ
4DIFNBUJDT w "OHVMBS$-*Α Γ#MVFQSJOUTʹΘͬͯಋೖ͞ΕͨςϯϓϨʔ τੜ ͷج൫ w Α ͏͘ಠࣗςϯϓϨʔ τΛੜͰ͖ΔΑ
͏ʹͳͬͨ w schema.json, index.tsΛطଘͷͷΛࢀߟʹෳ͢Ε࡞ΕΔ w ݱࡏӡ༻தɺ ϊϋੵதͳͷͰ·͍ͨͣΕ͠·͢
ΞϓϦׂ͕Ͱ͖ͨ w ͱࢥ͍͔ͨͬͨ
Կ͕μϝ͔ w ࠷ॳ͔ΒΞϓϦׂΛఆ͍ͯ͠ͳ͍ͱɺ ్த͔Βͷׂઃܭ্͔ͳΓͭΒ͍ w ϧʔςΟ ϯά͕େʹͳΔ ʢ-B[ZMPBEJOHͱ4JOHMFUPOͷʣ
w "ΞϓϦ ͱ#ΞϓϦΛಉ࣌ʹىಈͯ͠ϧʔςΟ ϯάΛৼΓ͚͚ͨΕɺ ϧʔςΟ ϯά༻ͷϋϒΞϓϦͷ࡞ඞཁ w ཧίε τ͕ΞϓϦʹ૿͑Δ ʢϏϧυ͕͍͜ͱΑ Γ खؒͳՄೳੑʣ
ͰϏϧυ࣌ؒΛݮΒ͍ͨ͠
ͤΊͯ։ൃத͘ʜ w ͱ͍͏ ͜ͱͰTestBed.configureTestingModule()ʹΑͬͯ ࡞ΒΕΔখنϞδϡʔϧͷඳըͰಈ࡞ݕূͰ͖ͳ͍͔࣮ݧͨ͠ w ͜͏͢Εείʔϓ͕5FTU#FEʹಡΈࠐ·ΕΔґଘؔͷΈʹͳΓɺ ߴϏϧυ͕ՄೳʹͳΔ͔ ʁ
͘ͳͬͨ w ͱࢥ͍͔ͨͬͨ
Կ͕μϝ͔ w "OHVMBS$-*ͷXFCQBDL͕ղ͗ͯ͢ɺ ෦తϏϧυͷΈ͕ ͔ͳΓߏஙͮ͠Β͍ w ng ejectͤͣʹ࣮ݱ͠Α ͏ ͱ͢Δͱݫ͍͠
w ng ejectΛͤͣʹɺ ng ejectͯ͠ಘΒΕͨwebpack.configΛ ϕʔεʹվ͢Δ͜ͱߟ͕͑ͨɺ ࠓޙͷόʔδϣϯΞοϓʹ͍ͭͯߦ͚ͣ ෛ࠴Խ͢Δະདྷ͕ݟ͑ͨ
ଥڠ w "OHVMBS$-*͕ੜ͢Δsrc/test.tsΛෳͯ͠ΠδΔ w const context = require.context()ͷείʔϓΛݶఆ͢Ε ಡΈࠐ·ΕΔϑΝΠϧ͕ݮΒͤΔͣ w
ݱࡏࢼߦࡨޡதʜ w ͍͍Γํ͋Ε୭͔ڭ͑ͯʜ
ͪͳΈʹ
େنͷͭΒ͍ͱ͜Ζճฤ w ίʔ υͷॏෳΛͲͷΑ ͏ʹநԽ ɾ ڞ௨Խ͢Δ͔ ɹˠ%%%ͷֶΛ༝དྷͱͨ͠ϞσϦϯάख๏ͷप w େͳϑΝΠϧΛͲ͏ͬͯѻ͏͔
ɹˠಠࣗ4DIFNBUJDTʹΑΔࣗಈੜ w ϝϯόʔ͕ଟ͍ϓϩδΣΫ τͰͲ͏࣭ͬͯΛ୲อ͢Δ͔ ɹˠ1SFUUJFS༷ສࡀɺ ୭ʹจ۟ݴΘͤͳ͍
Α͍͓Λ