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.2k
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
音声AIエージェント開発とプロダクトエンジニアチームの挑戦
righttouch
PRO
3
48
RightTouch_mind
righttouch
PRO
2
4.8k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
620
RightTouch Company Deck ver1.1
righttouch
PRO
5
24k
小規模組織のプロダクトエンジニアとして、アンラーニングしたこと
righttouch
PRO
4
880
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
6
730
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
5
600
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
5
1.4k
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
righttouch
PRO
4
560
Other Decks in Technology
See All in Technology
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
How to achieve interoperable digital identity across Asian countries
fujie
0
120
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
950
Trust as Infrastructure
bcantrill
0
350
「Verify with Wallet API」を アプリに導入するために
hinakko
1
250
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
400
自動テストのコストと向き合ってみた
qa
0
190
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
240
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
590
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
480
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Thoughts on Productivity
jonyablonski
70
4.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Making Projects Easy
brettharned
119
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
What's in a price? How to price your products and services
michaelherold
246
12k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Rails Girls Zürich Keynote
gr2m
95
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
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をぜひ使ってみてください!