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
社内で初SPAをAngularで完成させるまでとその後
Search
hatappi
May 31, 2017
Technology
1
2.4k
社内で初SPAをAngularで完成させるまでとその後
#roppongirb
hatappi
May 31, 2017
Tweet
Share
More Decks by hatappi
See All by hatappi
Cloudflare を活用して変わったメルカリの開発体験 / How Cloudflare Changed Mercari's Development Experience
hatappi
1
630
RubyではじめるGraphQL
hatappi
0
850
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
310
できるだけ楽して楽しくRails開発しよう
hatappi
2
330
EKSにRailsをのせた
hatappi
1
1.2k
RubyとApache Arrow
hatappi
0
2.4k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.4k
Fargateで夢は見られるのか
hatappi
1
2.2k
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
180
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
LLM時代の検索
shibuiwilliam
2
620
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
170
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
130
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
140
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
610
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
250
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
190
AI エージェントと考え直すデータ基盤
na0
17
6.8k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
0
360
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Become a Pro
speakerdeck
PRO
29
5.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
BBQ
matthewcrist
89
9.7k
Facilitating Awesome Meetings
lara
54
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing for humans not robots
tammielis
253
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
We Have a Design System, Now What?
morganepeng
53
7.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
ࣾͰॳSPAΛAngularͰ ͤ͞Δ·Ͱͱͦͷޙ by hatappi @Roppongi.rb #3 "Rails x Frontend-Tech" 1
ࣗݾհ • ໊લ: ാத ༔࡞ • hatappi: hatappi1225: • ձࣾ:
גࣜձࣾSpeee 2
3
4 ͜Ε1ϲ݄લ ·Ͱ͓͠Ͱ͢
5 ·ͣ͡Ίʹ
6 Angular2 ??? Angular4 ???
AngularͬͯݺΜͰͶ 7 IUUQTXXXZPVUVCFDPNXBUDI WB+*.P-HR6@PGFBUVSFZPVUVCFU
ސ٬ཧγεςϜͷ࡞ • ݩʑӡ༻͞Ε͍ͯͨ֎෦αʔϏεΛϦϓϨΠε͢Δ ϓϩδΣΫτ • 20166݄͘Β͍ʹfirst commitͯ͠10݄͘Β͍ ʹϦϦʔε • RailsΛAPIͱͯ͠༻ͯ͠ϑϩϯτTypescriptͰ
AngularΛͬͯ·͢ 8
γεςϜߏ • Rails5͔ΒೖͬͨAPI ModeΛ ༻ͨ͠APIαʔόʔ • JSϑΝΠϧ܈Λ͢ΔΠϯ ελϯε • ͯ͢httpsԽࡁΈ
(GCS͕httpsʹରԠ͍ͯͨ͠JS ϑΝΠϧ܈͔ͦ͜Β͠ ͔ͨͬͨ) 9
Angularͷར༻ཧ༝ • جװγεςϜͱͳΔͷͰଞͷαʔϏε͔Βࢀর͞ ΕΔલఏ͕͋ΔͷͰAPIͱϑϩϯτΛ͢Δઃܭ ʹͨ͠ͷͰϑϩϯτͰಠཱͨ͠ͷ͕ඞཁͩͬͨ • AngularΛͬͯΈ͔ͨͬͨ 10
AngularΛ࠾༻ͯ͠ྑ͔ͬͨ • webpackͷઃఆͱ͔ࣗͰ͢Δͷ... • AngularͰఏڙ͍ͯ͠·͢ @angular/cli 11 • http clientԿ͓͏…
• AngularͰఏڙ͍ͯ͠·͢ @angular/http • routerͲ͏͠Α͏... • AngularͰఏڙ͍ͯ͠·͢ @angular/router
AngularΛ࠾༻ͯ͠ྑ͔ͬͨ 12 ΄͍͠ͷ΄ͱΜͲ "OHVMBS͕ఏڙͯ͘͠Εͨ
13 ։ൃ࣌ͷۤ࿑
։ൃ࣌ͷۤ࿑ • ֶशίετͷ૿Ճ • Rails͚ͩͰͳ͘Angularͱ͍͏Framework • Railsͷศརͳhelper༻Ͱ͖ͳ͍ • form_for,link_toͳͲ͑ͳ͍ͷͰࣗͰhtml Λॻ͘
• I18nʹؔͯ͠APIͱFrontͰͷ2ॏͰཧ 14
15 ϦϦʔεޙͷۤ࿑
16 ॳظϩʔσΟϯά͕͍! ͍͍ͩͨ8ඵڧ
17 SPAͳΜͰ࠷ॳͷϩʔσΟϯά ͔͔࣌ؒΓ·͢ʁ
18
ྲྀೖͷେChatwork 19 Google Analytics
ղܾࡦ • ϦϦʔεॳຊ൪ͰJITίϯύΠϧΛߦ͍ͬͯͨ • CLIͰAoTίϯύΠϧͰϏϧυ͢ΔΦϓγϣϯ͕͋ ΔͷͰͦΕΛ༻ 20 # 1.0.0-beta.28͔Β--prodͰ--aot͕defaultͰtrue ng
build --prod --aot=true
ͦͷ݁Ռ • ॳظϩʔσΟϯά2ඵҎԼ͘Β͍ • ࣄલʹίϯύΠϧͨ͠ͷΛ͢ΔͷͰϑΝΠϧ αΠζ૿͑Δ͕gzipͰѹॖͯ͠ 21 ,# .
ංେԽ͠ͳ͍ͨΊʹ • Կߟ͑ͳ͍ͱػೳΛ͚͍ͯ͘͠͝ͱʹϑΝΠ ϧαΠζ૿͍͑ͯ͘ • Lazy LoadingػೳΛ༻ͯ͋͠·ΓΘͳ͍ػೳ ͳͲΞΫηε͕͋ͬͨ࣌ʹಡΈࠐ·ΕΔΑ͏ʹ͢ Δ 22
23 ·ͱΊ
·ͱΊ • Ϣʔβʔʹ৽͍͠Ϣʔβʔମݧ͕༩͑ΒΕͨ • ڹ͕͋ͬͨͱݴΘͳ͍ • RailsͱAngularͱ͍͏Έ߹ΘͤΛߟ͑ΔͳΒݸਓతʹ webpackerΛΘͣʹCLIΛͬͨ΄͏͕ྑ͍ • ࢀߟ:Rails+webpackerͰAngularΛ͞ΘͬͯΈΔ
http://hatappi.hateblo.jp/entry/2017/05/20/180706 • AngularΛΔ্Ͱng-japanͱ͍͏slackνʔϜʹೖΔͱ ͔ͲΔ 24