3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発

Transcript

1. 3rd party scriptでもReactを使いたい！ 
 Preact + Reactのハイブリッド開発 
 
 @2024/11/06

   【Qiita Bash】推しフロントエンド技術について語ろう！ 
 1

2. © 2024 RightTouch Inc. 2 自己紹介
 2020 東京大学理学系研究科博士課程修了 
 


   2020-2021 日立製作所
 
 2021-2024 株式会社プレイド
 
 2021-現在 株式会社RightTouch
 
 
 レーザー物理で博士号取得後、日立製作所で ITプラットフォームの設 計・開発に従事。
 
 その後、プレイド/RightTouchで、テックリード/フルスタックエンジニア としてアプリケーション開発に従事。 
 
 
 好きなもの: 旬
 
 
 齋藤 成之
 X: @nakaakist


3. © 2024 RightTouch Inc. 会社紹介
 沿革 
 2021年12月 株式会社RightTouch設立
 2022年3月

   次世代のコンタクトセンターを創ることに賛同いただいた 
 お客様との実証実験を経て、 KARTE RightSupport（β版）
 をリリース 2023年10月 Webサイトとコールセンターの分断をなくし、問い合わせ体験を抜 本から変革する新プロダクト「 RightConnect by KARTE」β版を 提供開始
 2023年10月 RightSupport by KARTEの正式版をリリース 
 
 主な導入企業様 設立：2021年12月
 従業員：40名、うちエンジニア15名（2024年8月1日現在）
 資本金：10,000,000円（資本準備金含む） 
 RightTouch 3

4. 4 34
 18636


5. © 2024 RightTouch Inc. 悲しい現実 
 5 ☆: 228k
 npm

   DL: 25M
 ☆: 36k
 npm DL: 4M
 Qiita記事数


6. 6 Preactとは？


7. © 2024 RightTouch Inc. Preactとは
 7 Preact = 超軽量なReact
 ※gzip後の値。後述のpreact/compatを入れるとpreactのサイズは2

   kb程度増える
 preact
 4.6 kB
 react + react-dom
 44.4 kB


8. © 2024 RightTouch Inc. API
 8 Reactと似たAPI。preact/compatという補助ライブラリでほぼ Reactのように使える
 ただし完全互換ではないので、 React用のライブラリをそのまま入れるのは避けた方が無難

   
 Preact React

9. 9 何に使える？ 


10. © 2024 RightTouch Inc. 我々の利用例 : カスタマーサポート向けのツール (=サポートアクション )をWebサイトに埋め込み 


    1 0 • すでに存在するお客様のウェブサイトに、 コーチマークやヘルプアイコンを追加表⽰で きる • サイトに<script>タグで我々のスクリプト埋 めて配布する形 (=3rd party script) • サイト本体のパフォーマンスへの影響を最⼩ 限にするため、スクリプトの軽量化が必須 • 2023年末から約1年間本番運⽤ 既存のwebサイト(お客様環境)
 Preactで追加したボタン


11. © 2024 RightTouch Inc. Preactの良さ
 1 1 開発⽣産性の向上
 滑らかな編集プレビューの実現 2


    1
 full-Reactにすることで、技術キャッチアップの効率化、コードの 共通化により開発生産性が向上 
 サポートアクションの編集画面上で、編集内容を即時反映する プレビューが簡単に作れる 
 軽量FWにはSvelte等もあるが、すでにReactが開発のメインだった我々には Preactが適していた


12. © 2024 RightTouch Inc. 開発生産性の向上例 : コードの共通化 
 1 2

    編集画面 お客様のツール運用担当がコンテンツ編集 
 編集内容を
 サイト側に反映
 React
 Preact
 サイト
 編集画面のプレビューとサイトに配布する scriptのコードを共通化可能 
 React
 サポートアクションのコード 
 編集フォーム
 プレビュー
 ビルド
 ビルド


13. © 2024 RightTouch Inc. 滑らかな編集プレビューの実現 
 1 3 編集画面全体を同じ Reactのrender

    treeに収めることで、編集内容を即時でプレビュー反映 
 プレビュー
 編集フォーム
 編集画面の render tree
 状態変化


14. 14 運用上の工夫 


15. © 2024 RightTouch Inc. Preactの運用上の工夫 
 1 5 • React/Preact向けに2つビルドするにあたって互換性の考慮

    ◦ サポートアクションのコード⾃体はpreact/compatを前提に書いている。 ◦ このとき、preact特有の構⽂が混⼊すると、react⽤にビルドしたときにバグる可能性がある。 ◦ 下記の構⽂はeslintで禁⽌ ▪ “class”、”onChange”属性 ▪ preact/compatからの直接インポート (“react”に”preact/compat”へのエイリアスをはる) • ランタイムでの外部ライブラリ依存はゼロに ◦ バンドルサイズ節約とバグ防⽌ ◦ スタイリングにはゼロランタイムCSS in JS(vanilla-extract)を利⽤ • その他、ビルド時のバンドルサイズのチェックなど 今のところ、Preact起因での障害は起きていない

16. 16 サイズ制限の厳しいプロジェクトに 
 Preactをぜひ使ってみてください！