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
RubyではじめるGraphQL
hatappi
0
810
RubyでChainerつくってます!!
hatappi
2
1.4k
TDDな個人開発
hatappi
0
280
できるだけ楽して楽しくRails開発しよう
hatappi
2
310
EKSにRailsをのせた
hatappi
1
1.1k
RubyとApache Arrow
hatappi
0
2.3k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.3k
Fargateで夢は見られるのか
hatappi
1
2.1k
個人サービスをFargateに移行したよ
hatappi
1
640
Other Decks in Technology
See All in Technology
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
790
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
390
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
120
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
170
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.7k
貧民的プログラミングのすすめ
kakehashi
PRO
1
150
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
360
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership, regardless of position
madoxten
21
9.9k
20250307_エンジニアじゃないけどAzureはじめてみた
ponponmikankan
2
180
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
2k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Writing Fast Ruby
sferik
628
61k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Adopting Sorbet at Scale
ufuk
75
9.2k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A better future with KSS
kneath
238
17k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Become a Pro
speakerdeck
PRO
26
5.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
It's Worth the Effort
3n
184
28k
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