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
2018-09-29.okayama.pdf
Search
Okamuuu
September 29, 2018
Technology
0
69
2018-09-29.okayama.pdf
Okamuuu
September 29, 2018
Tweet
Share
More Decks by Okamuuu
See All by Okamuuu
2018-08-04.js-beer-bash.pdf
okamuuu
0
75
hachiojipm#72
okamuuu
0
39
チームで取り組む Singe Page Application
okamuuu
0
760
Other Decks in Technology
See All in Technology
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
980
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
360
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
140
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
220
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
170
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
180
AI エージェントと考え直すデータ基盤
na0
18
7.4k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
10
700
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Balancing Empowerment & Direction
lara
1
440
It's Worth the Effort
3n
185
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How GitHub (no longer) Works
holman
314
140k
Building Adaptive Systems
keathley
43
2.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
Transcript
Contentful を使ってみました 岡山城 天守閣 2018-09-29 okamuuu 1 / 17
あくまで個人の感想です。 2 / 17
Contentful とは? いわゆる Headless CMS です。 Contentful ButterCMS storyblok GraphCMS
など 3 / 17
CMS vs Headless CMS ざっくり説明すると Response を HTML で返すのが CMS
Response を JSON で返すのが Headless CMS わかりやすく言うと WordPress は CMS Contentful は Headless CMS 4 / 17
Contentful の特徴 型を自由に定義できる 型に沿ったオブジェクトを出し入れできる CRUD 画面が現れる REST API も生える 位置情報検索もできる
個人で開発する時にとても便利 5 / 17
Contentful を使ってみた感想 CRUD 画面が自動生成される。気持ちいい。 API にちょっと癖がある。 リレーションできない? 通信回数がN+1 にならないように工夫が必要? 6
/ 17
CRUD 画面が自動生成される 7 / 17
CRUD 画面が自動生成される users という型を管理画面で作成する この時点で CRUD 画面が用意される。 そこに user object
を追加する /entries?content_type=users で一覧取得できる 8 / 17
API にちょっと癖がある 9 / 17
API にちょっと癖がある 期待している Response { "id": 2073765716208129 "name": " 神牛前3
丁目", "state: " 東京", } 10 / 17
API にちょっと癖がある { "fields": { "id": { "en-US": 2073765716208129 },
"name": { "en-US": " 神牛前3 丁目" }, "state": { "en-US": " 東京" } }, "sys": { "id": "5KsDBWseXY6QegucYAoacS", "type": "Entry", "createdAt": "2016-12-20T10:43:35.772Z", "updatedAt": "2016-12-20T10:43:35.772Z", "revision": 1 } 11 / 17
リレーションできない? 12 / 17
リレーションできない? Entry 取得した場合、関連する型の sys.id しか取得 できない。ドキュメントには include を指定するよ うに書いているが... //
console.log(user.fields.status) { sys: { type: 'Link', linkType: 'Entry', id: '6Bw3NLBDJ6KEyOc2YwucYk' } } 13 / 17
通信回数がN+1 にならないよう にする 14 / 17
通信回数がN+1 にならないよう にする リレーションができないのであれば、の話ですが 一覧表示画面を実装するときにあえて非正規化す る場面がでてくるかも Promise.all してももっさりしがちなのでできれ ば API
の向こう側で解決したい 15 / 17
まとめ Contentful はかなり便利だった なんだけどリレーションができない? ドキュメントを分かりやすくして欲しい example がもっと欲しい Cognito と Contentful
があれば色々できる予感 16 / 17
おしまい 17 / 17