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
800
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.2k
Red Chainerを なぜ作って今後どうするのか
hatappi
2
2.3k
Fargateで夢は見られるのか
hatappi
1
2.1k
個人サービスをFargateに移行したよ
hatappi
1
640
Other Decks in Technology
See All in Technology
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
640
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
510
AIエージェント入門
minorun365
PRO
31
18k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
手を動かしてレベルアップしよう!
maruto
0
220
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
180
AIエージェント元年@日本生成AIユーザ会
shukob
1
210
php-conference-nagoya-2025
fuwasegu
0
150
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
380
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Facilitating Awesome Meetings
lara
52
6.2k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building an army of robots
kneath
303
45k
Practical Orchestrator
shlominoach
186
10k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Automating Front-end Workflow
addyosmani
1368
200k
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