株式会社クリモ CTO 渡邊達明 React Native for WebでもOGP対応がしたい！ ~ TECH STAND #2 React Native 2020/12/18 ~

◉ 自己紹介と最近作っているもの ◉ React Native for Webの仕組み ◉ Expoを使ったセットアップ ◉ SPAでの課題 ◉ Cloudflare Workersの紹介 ◉ Workersを使ったSPAでのOG画像差し替え ◉ デモ 目次

◉ 渡邊 達明（わたなべ たつあき） ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉ 妻（代表）と二人で法人 ◉ React Nativeアプリ, Webフロント, Firebaseが専門 ◉ 趣味はマンガとボルダリング 自己紹介

AnotionというWebサービスを作ってます

“ みなさん React Native for Web 使ってますか？

引用元　なかざんさん（@nkzn）のブログ https://blog.nkzn.info/entry/2018/05/29/210030 React Native for Webの仕組み

超ざっくりいうと React Nativeのこれが Webでこれになるイメージ ※ホントはもっと色々複雑

React Native for Web のセットアップ with Expo $ npm install -g expo-cli $ expo init $ expo build:web web-buildディレクトリにブラウザで動く React Native製アプリケーションがビルドされる！ S3とかFirebase Hostingにデプロイすればもう動く！

SaaSのExpo（会社） - Expoのコミッターが経営 - Expo ClientやSnack等を開発 - Expoを使ったPush通知やOTA 用サーバーシステム、クラウド ビルド環境などを提供している ソフトウェアのExpo - React Nativeをラップして、完全にjsだけ で書けるようにしたツール郡（Xcodeや Android Studioも不要） - React Native for Webも入っててWebで も動く - 基本こっちのことを話します Expoって？

SPAでの課題（Vue.jsやFlutter Webでも） ExpoでビルドするとSPAとして動きます。 しかし質問箱やマシュマロのようなサービスを 作るにはシンプルなSPAではできません。 最近人気のNext.jsを使ってVercelなどにデプ ロイすればできますがアプリとソースを共通化 したい！ SPAのままなんとかならんのか！

“ OG画像の差し替えくらいなら、 SSRしなくても出来ます！

Cloudflare Workersの紹介

Cloudflare Workersとは Cloudflare Workersとは、Cloudflare社が提供するCDN（コンテンツデリバリーネット ワーク）のエッジで開発者がJavaScriptを実行できるサーバーレスなサービスです。 Lambdaなどのサーバーレスサービスの問題ともいえるコールドスタート問題です が、Cloudflare Workersでは他のサーバーレスプラットフォームよりコールドスタート のスループットが最大50倍高速となっています。 引用元：Classmethodさんのブログ https://dev.classmethod.jp/articles/cloudflare-workers-tutorial/

Workersを使ったSPAでのOG画像差し替え

デモとコード紹介 ※登壇用に書きなぐったコードになっているので、お目 汚しすいません - ネイティブアプリとしても動作する、React Native for WebでできたWebアプリの紹介 - （ただちょっと間に合わず画像アップロードだけアプリだとコケるｗ） - - Cloudflareにデプロイしてるコード

サンプルとデモ - サンプルサイト https://telop-maker.tokyo/ - サンプルリポジトリ https://github.com/nabettu/telop-maker

まとめ - React Native Expoを使ってると、ネイティブアプリ向けで作ってた ソースほとんどそのままでWebでも動く - その場合シンプルなSPAになってしまうので、Edge Workerを使っ てOG画像対応を解決 プラスの工数を少なく「RNアプリのWeb対応」が可能！

質問あればTwitterでも https://twitter.com/nabettu YouTubeコメントなどでもどうぞ Thanks!