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でリリースした
Search
hatappi
August 24, 2016
Technology
0
1.5k
お盆にポータルサイトをSPAでリリースした
Angular2とRails5 api modeで作成したポータルサイトの話
hatappi
August 24, 2016
Tweet
Share
More Decks by hatappi
See All by hatappi
Cloudflare を活用して変わったメルカリの開発体験 / How Cloudflare Changed Mercari's Development Experience
hatappi
1
640
RubyではじめるGraphQL
hatappi
0
860
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
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
200
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
860
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
210
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
250
OPENLOGI Company Profile for engineer
hr01
1
37k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
250
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
160
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
710
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
150
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Into the Great Unknown - MozCon
thekraken
40
2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Practical Orchestrator
shlominoach
190
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Embracing the Ebb and Flow
colly
86
4.8k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
740
Speed Design
sergeychernyshev
32
1.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Transcript
͓ຍʹϙʔλϧαΠτΛϦϦʔεͨ͠ 2016/08/17 @Speee LTେձ
ࣗݾհ • @hatappi (yusaku.hatanaka) • ذෞग़ • ࠷ۙAngular2Λॻ͍ͨΓRailsॻ͍ͨ Γͯ͠·͢
ੈͷதʹ͋Γ;ΕΔ֤ۀքͷϙʔλϧ αΠτ
ͳΜ͔୳͠ʹ͍͘ɾɾɾ
࡞Ζ͏ʂʂ
࡞ͬͨ!! • ͨ͠ͷ༁͋ͬͯݟͤΒΕ·ͤΜ
·ͣڝ߹ͷੳ͔Β
None
None
ٕज़બఆɹ • Rails5 api mode • Angular2.rc4 • GCP
Rails5 api mode ݩʑgemͩͬͨrails-api͕RailsʹϚʔδ͞Εͨ • helperassets, views͕ͬͦ͝Γফ͑ͯΔ • cookieͱ͔session storeͷఆٛͳ͚Εassetsͳ͍
Angular2 GoogleͷJSϑϨʔϜϫʔΫ ݩʑ͋ͬͨAngular1ͷޙܧ͕ͩޓੑ΄ͱΜͲͳ͍ͱͷ͜ͱ! ਖ਼ࣜϦϦʔε͞Ε͓ͯΒͣ࠷৽rc5 rc6͕ग़ΔΒ͍͕͠େ͖ͳΞοϓσʔτrc5ͰऴΘΓΒ͍͠
GCP • railsͱangularʹؔͯ͠GCE(AWSͰ͍ ͏EC2) • ը૾ͷ৴ʹؔͯ͠GCS(AWSͰ͍͏ ͱ͜ͷS3)ʹ͓͖ɺͦͷ··CDNͱ͠ ͯ͏ • GCElet's
encryptͰূ໌ॻΛͱͬͯɺ http/2Ͱఏڙ
ࠓճRailsͱ͍͏͔JSONΑΓͷ
Έͳ͞ΜRailsͰJSONͷϨεϙϯε Λฦ͢͜ͱ͕͋Γ·͔͢ʁ
༻్༷ʑ • ΞϓϦͱ͔Ͱ༻͢ΔAPIαʔόʔͷߏங࣌ • AJAXͰ௨৴Λ͢Δ࣌ • etc...
RFC4627,7159ʹJSONͷ༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ [ ɺऴྃʹ ] • ͷ۠Γʹ ,
• string " Ͱғ͏ • etc...
RFC4627,7159ʹJSONͷ༷͕͔͔Ε ͍ͯΔ • arrayͷ։࢝ʹ [ ɺऴྃʹ ] • ͷ۠Γʹ ,
• string " Ͱғ͏ • etc... ༷कͬͯ͋Εޙࣗ༝
/users { "result":[ { "id":1, "name":"yusaku.hatanaka" }, { "id":2, "name":"hoge.taro"
} ] }
/users { "response":{ "status":200, "users":[ { "id":1, "name":"yusaku.hatanaka" }, {
"id":2, "name":"hoge.taro" } ] } }
ϑΥʔϚοτ͕ఆ·Βͳ͍!
ϑϩϯτܹ͓͜! • API͝ͱʹϨεϙϯεͷܗ͕ࣜҟͳΔͷͰɺͦΕͧΕͰύʔαʔ Λॻ͔ͳ͍ͱ͍͚ͳ͍
ੈͷதʹJSONͷϑΥʔϚοτΛఆ Ίͨͷ͕͋Δ
HAL
{ "_links": { "self": { "href": "/comments/1" } }, "id":
1, "message": "LTେձʹࢀՃͯ͠·͢", "_embedded": { "user": { "_links": { "self": { "href": "/users/7" } }, "id": 7, "name": "yusaku.hatanaka" } } }
JSON:API
{ "data":{ "id":"1", "type":"users", "links":{ "self":"http://hoge.com/users/1" }, "attributes":{ "name":"yusaku.hatanaka" },
"relationships":{ "comments":{ "links":{ "self":"http://hoge.com/users/1/relationships/comments", "related":"http://hoge.com/users/1/comments" }, "data":{ "type":"comments", "id":"8" } } }, "included":[ { "id":"8", "type":"comments", "links":{ "self":"http://hoge.com/comments/8" }, "attributes":{ "context":"LTେձʹࢀՃͯ͠·͢" }, "relationships":{ } } ] } }
JSON:APIͱHAL • HAL • intergent draftʹೖ͍ͬͯΔ • AWSͷAPIGatewayͰ༻͞Ε͍ͯΔ࣮ • JSON:API
• error࣌ͷϨεϙϯεͳͲͷݴٴ͋Δ • ձࣾͷϓϩμΫτͰ༻͞Ε͍ͯΔ࣮ • GET͚ͩͰͳ͘ɺPOSTDELETEͳͲCRUDͷݴٴ͋Δ
ͦΕͧΕͷϑΥʔϚοτͰϨεϙϯε Λฦ͘͢͢͠Δgem͋Δ • HAL => apotonick/roar • JSON:API => cerebris/jsonapi-resources
·ͱΊ • ෳਓͰ։ൃ͢ΔࡍʹJSONͷϑΥʔϚοτΛ͖Ί͓ͯ͘ͱɺ ϑϩϯτͱྑ͘ͳΕΔʢ͔͠Εͳ͍ʣ • νʔϜͰܾΊͯྑ͍͕ɺάμάμʹͳΒͳ͍Α͏ʹ
࠷ޙʹ
None
ΞΫηε·ͩ·ͩ
index1݅ɾɾɾɾ ͜͜·༷ͩࢠݟ ͔ͨ͠͠ΒSPAͰ࡞ͬͨ͜ͱʹΑΓbot͕͏·͘ճ༡ग़དྷͯͳ͍ ͔͠Εͳ͍
໘indexΛ૿͍ͯ͘͠