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
3rd party scriptでもReactを使いたい! Preact + Reactのハイ...
Search
RightTouch
PRO
November 06, 2024
Programming
1
190
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
2024/11/06 【Qiita Bash】推しフロントエンド技術について語ろう! 登壇資料
https://increments.connpass.com/event/328720/
RightTouch
PRO
November 06, 2024
Tweet
Share
More Decks by RightTouch
See All by RightTouch
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
1
210
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
1
980
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
righttouch
PRO
0
430
Other Decks in Programming
See All in Programming
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.9k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.8k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.3k
Golang と Erlang
taiyow
8
1.9k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
370
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
200
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
400
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
220
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1.1k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
390
gopls を改造したら開発生産性が高まった
satorunooshie
8
260
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
Why Our Code Smells
bkeepers
PRO
334
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Designing for Performance
lara
604
68k
Ruby is Unlike a Banana
tanoku
96
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Teambox: Starting and Learning
jrom
132
8.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Designing for humans not robots
tammielis
249
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Transcript
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発 @2024/11/06
【Qiita Bash】推しフロントエンド技術について語ろう! 1
© 2024 RightTouch Inc. 2 自己紹介 2020 東京大学理学系研究科博士課程修了
2020-2021 日立製作所 2021-2024 株式会社プレイド 2021-現在 株式会社RightTouch レーザー物理で博士号取得後、日立製作所で ITプラットフォームの設 計・開発に従事。 その後、プレイド/RightTouchで、テックリード/フルスタックエンジニア としてアプリケーション開発に従事。 好きなもの: 旬 齋藤 成之 X: @nakaakist
© 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 34 18636
© 2024 RightTouch Inc. 悲しい現実 5 ☆: 228k npm
DL: 25M ☆: 36k npm DL: 4M Qiita記事数
6 Preactとは?
© 2024 RightTouch Inc. Preactとは 7 Preact = 超軽量なReact ※gzip後の値。後述のpreact/compatを入れるとpreactのサイズは2
kb程度増える preact 4.6 kB react + react-dom 44.4 kB
© 2024 RightTouch Inc. API 8 Reactと似たAPI。preact/compatという補助ライブラリでほぼ Reactのように使える ただし完全互換ではないので、 React用のライブラリをそのまま入れるのは避けた方が無難
Preact React
9 何に使える?
© 2024 RightTouch Inc. 我々の利用例 : カスタマーサポート向けのツール (=サポートアクション )をWebサイトに埋め込み
1 0 • すでに存在するお客様のウェブサイトに、 コーチマークやヘルプアイコンを追加表⽰で きる • サイトに<script>タグで我々のスクリプト埋 めて配布する形 (=3rd party script) • サイト本体のパフォーマンスへの影響を最⼩ 限にするため、スクリプトの軽量化が必須 • 2023年末から約1年間本番運⽤ 既存のwebサイト(お客様環境) Preactで追加したボタン
© 2024 RightTouch Inc. Preactの良さ 1 1 開発⽣産性の向上 滑らかな編集プレビューの実現 2
1 full-Reactにすることで、技術キャッチアップの効率化、コードの 共通化により開発生産性が向上 サポートアクションの編集画面上で、編集内容を即時反映する プレビューが簡単に作れる 軽量FWにはSvelte等もあるが、すでにReactが開発のメインだった我々には Preactが適していた
© 2024 RightTouch Inc. 開発生産性の向上例 : コードの共通化 1 2
編集画面 お客様のツール運用担当がコンテンツ編集 編集内容を サイト側に反映 React Preact サイト 編集画面のプレビューとサイトに配布する scriptのコードを共通化可能 React サポートアクションのコード 編集フォーム プレビュー ビルド ビルド
© 2024 RightTouch Inc. 滑らかな編集プレビューの実現 1 3 編集画面全体を同じ Reactのrender
treeに収めることで、編集内容を即時でプレビュー反映 プレビュー 編集フォーム 編集画面の render tree 状態変化
14 運用上の工夫
© 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 サイズ制限の厳しいプロジェクトに Preactをぜひ使ってみてください!