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
610
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
220
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
1
1k
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
righttouch
PRO
0
440
Other Decks in Programming
See All in Programming
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1.2k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
140
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
1k
Leveling Up Developer Tooling for the Modern Rails & Hotwire Era @ Ruby Türkiye, November 2024
marcoroth
0
100
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
230
CSC509 Lecture 13
javiergs
PRO
0
110
Arm移行タイムアタック
qnighy
0
370
Develop iOS apps with Neovim / vimconf_2024
uhooi
1
100
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
160
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
5
3.3k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Documentation Writing (for coders)
carmenintech
65
4.4k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Producing Creativity
orderedlist
PRO
341
39k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
How to Ace a Technical Interview
jacobian
276
23k
Designing Experiences People Love
moore
138
23k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building an army of robots
kneath
302
43k
Being A Developer After 40
akosma
87
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
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をぜひ使ってみてください!