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
Technology
5
1.1k
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
0
450
RightTouch Company Deck ver1.0
righttouch
PRO
5
20k
小規模組織のプロダクトエンジニアとして、アンラーニングしたこと
righttouch
PRO
4
850
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
5
650
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
5
580
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
5
1.3k
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
righttouch
PRO
4
550
Other Decks in Technology
See All in Technology
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
10
4.4k
Amazon Qで2Dゲームを作成してみた
siromi
0
130
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
1
190
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.9k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
210
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1.1k
リリース2ヶ月で収益化した話
kent_code3
1
240
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
210
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
410
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
1
200
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.7k
20250807 Applied Engineer Open House
sakana_ai
PRO
0
210
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Writing Fast Ruby
sferik
628
62k
Designing for Performance
lara
610
69k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
The Invisible Side of Design
smashingmag
301
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
For a Future-Friendly Web
brad_frost
179
9.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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をぜひ使ってみてください!