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
84
RightTouch_mind
righttouch
PRO
2
6.7k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
660
RightTouch Company Deck ver1.2
righttouch
PRO
6
26k
小規模組織のプロダクトエンジニアとして、アンラーニングしたこと
righttouch
PRO
4
890
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
6
760
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
5
600
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
5
1.4k
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
righttouch
PRO
4
570
Other Decks in Technology
See All in Technology
組織全員で向き合うAI Readyなデータ利活用
gappy50
5
1.6k
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
220
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
180
Azure Well-Architected Framework入門
tomokusaba
1
140
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.6k
猫でもわかるAmazon Q Developer CLI 解体新書
kentapapa
1
140
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
150
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
iwashi86
6
3k
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
190
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.4k
実践マルチモーダル検索!
shibuiwilliam
1
330
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.2k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Into the Great Unknown - MozCon
thekraken
40
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
A better future with KSS
kneath
239
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
BBQ
matthewcrist
89
9.9k
Facilitating Awesome Meetings
lara
57
6.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Side Projects
sachag
455
43k
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をぜひ使ってみてください!