ReactNative + microCMS の設計にすごく悩んだ話

ReactNative + microCMS の設計にすごく悩んだ話株式会社BeatFit CTO 飯塚浩也

医師循環器内科、総合診療医として、⼤学 - 地⽅の病院を 8 年間勤務。 IT は⼤の苦⼿。パソコン教室のアビバに
通っていた。エンジニア株式会社BeatFit にエンジニアとして⼊社。 [ ⽇課] Codewars, LeetCode Hack The Box Type Challenge

今⽇のお話 Headless CMS の技術選定に⾄るまでの経緯悩んだ設計の話 CMS との差分を埋める React Native ライブラリ

みんなの広場

弊社運営チームは CMS から投稿したいでも、CMS 周りをコーディングしたくない期限まであと3 ヶ⽉しかない

そうだ microCMS でいこう

運⽤⾯・⽇本語が魅⼒的だった・中の⼈が、twitter でだった・料⾦プランが、優しかった友達

いいね、返信コメント、通知など複雑な機能がある React Native での事例の少なさよくある HeadlessCMS の
Usecase と違う・・・

実際に悩んだ設計

設計 1. 責務を分離通常の Feed コンテンツは、CMS ヘ複雑なwrite 要件のデータは、RDS へ

Get request 時に、frontend 側で mapping するロジックが必要になる 😣

WebHook を使い、CMS 上からの投稿や削除が可能。運営が、不適切な投稿を、CMS でチェックできる。設計 2. 全データを microCMS
で管理

データの⼆重管理になり、データ不整合が⼼配。定期的に同期をする処理が必要になる。 Post request が多く、コストが⾼くなる。設計 2.

twitter でぶつぶつ悩んでたら → microCMS 創業者 ( 柴⽥さん、松⽥さん) からDM

神対応、ありがとうございました・・・！😭

最終設計：こうなりました！

最終設計: Usecase での分離運営の投稿 User の投稿

Appendix Usecase で分離することで、設計が simple になった Post request が少ない設計になり、費⽤⾯で優れた運営側の投稿のカスタマイズを、細かくできる設計になった運営側の投稿頻度は少なく、当⾯は
Webhook 通信の失敗は許容できる設計になった

microCMS との差分を埋めるライブラリーのご紹介 react-native-rich-editor react-native-render-html

Rich Editor in microCMS "textContent": "<p><br></p><h2 id=\"hf99e890528\"> あああいいい</h2> <p><a ref=\"https://beatfit.jp\"target=\"_blank\"
rel=\"noopenernoreferrer\"> アイウエオ</a><br><br> </p>", ↓

react-native-rich-editor

HTML を取得 const richText = useRef<RichEditor | null>() const html
= richText.current?.getContentHtml() <RichEditor ref={r => (richText.current = r)} placeholder={' ⼊⼒してください'} onChange={handleChange} initialFocus /> 1 2 3 4 5 6 7 8 9 10

HTML を取得 const richText = useRef<RichEditor | null>() const html
= richText.current?.getContentHtml() <RichEditor ref={r => (richText.current = r)} placeholder={' ⼊⼒してください'} onChange={handleChange} initialFocus /> 1 2 3 4 5 6 7 8 9 10 const html = richText.current?.getContentHtml() const richText = useRef<RichEditor | null>() 1 2 3 4 <RichEditor 5 ref={r => (richText.current = r)} 6 placeholder={' ⼊⼒してください'} 7 onChange={handleChange} 8 initialFocus 9 /> 10

react-native-render-html import React, { Component } from "react"; import {
ScrollView, useWindowDimensions } from "react-native"; import HTML from "react-native-render-html"; const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; export default function Demo() { const contentWidth = useWindowDimensions().width; return ( <ScrollView style={{ flex: 1 }}> <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> </ScrollView> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

ScrollView, useWindowDimensions } from "react-native"; import HTML from "react-native-render-html"; const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; export default function Demo() { const contentWidth = useWindowDimensions().width; return ( <ScrollView style={{ flex: 1 }}> <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> </ScrollView> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; import React, { Component } from "react"; 1 import { ScrollView, useWindowDimensions } from "react-native"; 2 import HTML from "react-native-render-html"; 3 4 5 6 7 8 9 10 11 export default function Demo() { 12 const contentWidth = useWindowDimensions().width; 13 return ( 14 <ScrollView style={{ flex: 1 }}> 15 <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> 16 </ScrollView> 17 ); 18 } 19

ScrollView, useWindowDimensions } from "react-native"; import HTML from "react-native-render-html"; const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; export default function Demo() { const contentWidth = useWindowDimensions().width; return ( <ScrollView style={{ flex: 1 }}> <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> </ScrollView> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const htmlContent = ` <h1>This HTML snippet is now rendered with native components !</h1> <h2>Enjoy a webview-free and blazing fast application</h2> <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> <em style="textAlign: center;">Look at how happy this native cat is</em> `; import React, { Component } from "react"; 1 import { ScrollView, useWindowDimensions } from "react-native"; 2 import HTML from "react-native-render-html"; 3 4 5 6 7 8 9 10 11 export default function Demo() { 12 const contentWidth = useWindowDimensions().width; 13 return ( 14 <ScrollView style={{ flex: 1 }}> 15 <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> 16 </ScrollView> 17 ); 18 } 19 <HTML source={{ html: htmlContent }} contentWidth={contentWidth} /> import React, { Component } from "react"; 1 import { ScrollView, useWindowDimensions } from "react-native"; 2 import HTML from "react-native-render-html"; 3 4 const htmlContent = ` 5 <h1>This HTML snippet is now rendered with native components !</h1> 6 <h2>Enjoy a webview-free and blazing fast application</h2> 7 <img src="https://i.imgur.com/dHLmxfO.jpg?2" /> 8 <em style="textAlign: center;">Look at how happy this native cat is</em> 9 `; 10 11 export default function Demo() { 12 const contentWidth = useWindowDimensions().width; 13 return ( 14 <ScrollView style={{ flex: 1 }}> 15 16 </ScrollView> 17 ); 18 } 19

まとめ設計に悩んだときは、UseCase で分離すると単⼀責任になり、設計が simple になる microCMS は、複雑な機能が必要な時も、有効な選択肢となる react-native-render-html
と react-native-rich-editor で差分を埋められる

ReactNative + microCMS の設計にすごく悩んだ話

ReactNative + microCMS の設計にすごく悩んだ話

hiroya iizuka

More Decks by hiroya iizuka

Other Decks in Technology

Featured

Transcript