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
フロントエンド メタフレームワーク 選定の際に考えたこと
Search
YuppeEng
November 06, 2024
Technology
0
720
フロントエンド メタフレームワーク 選定の際に考えたこと
11/6(水)【Qiita Bash】推しフロントエンド技術について語ろう!で登壇した内容です。
https://increments.connpass.com/event/328720/
YuppeEng
November 06, 2024
Tweet
Share
More Decks by YuppeEng
See All by YuppeEng
小規模組織において、これから一緒にSREを考える仲間を増やすために実践したこと
yuppeeng
0
550
Other Decks in Technology
See All in Technology
CSSDay, Amsterdam
brucel
0
270
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
690
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
460
GitHub Copilot Use Cases at ZOZO
horie1024
1
350
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.4k
TypeScript をより型安全に扱うプラクティス #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2.1k
ai bot got sick (abc 2025s version)
kojira
0
120
やさしい認証認可
minorun365
PRO
25
9.5k
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
510
Java 30周年記念! Javaの30年をふりかえる
skrb
4
2.6k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.2k
Java で学ぶ 代数的データ型
ysknsid25
2
1.2k
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
670
Navigating Team Friction
lara
186
15k
Thoughts on Productivity
jonyablonski
69
4.7k
KATA
mclloyd
29
14k
Building an army of robots
kneath
306
45k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
How to Ace a Technical Interview
jacobian
276
23k
Speed Design
sergeychernyshev
30
980
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Transcript
フロントエンド メタフレームワーク 選定の際に考えたこと 2024/11/6 【Qiita Bash】推しフロントエンド技術に ついて語ろう! yuppe(yuppe0328)
自己紹介 中村 友多朗(@yuppe0328) 仕事: アジャイル開発(@KDDIアジャイル開発センター) 趣味: 音楽(ギターなど), アニメ鑑賞, 旅行 興味:
フロントエンドアーキ,コンテナ,ネットワーク, アジャイル開発 Qiita: https://qiita.com/yuppe0328
Q.フロントエンドメタフレームワーク の選定どうしてる? ・フレームワークの人気? ・アプリケーションの要件? ・シンプルに使いたいやつ?
求めていたものは何? ①チームの技術スタック/状況 ・社内小規模プロジェクトのアプリを React使ってSPAで構築した経験あり ・バックエンドFW中心に触ってきた メンバーが多く、いきなりのマインド チェンジは難しい ・各種レンダリングパターンの理解 ・比較的複雑なキャッシュ最適化 ・なるべく複雑性を排除した形で、
UIライブラリにReactを採用 ・クライアントサイドはコンポーネント ベースで開発 ・バックエンドはこれまで通りリクエ ストベースの動的アプリに寄せたい
求めていたものは何? ②アプリケーションの要件 ・業務用アプリケーションではないた め、できるだけ初期リクエスト時のク ライアント側のストレスを減らしたい ・ターゲットの性質上、十分な顧客の端末 スペック/ネットワーク環境が保証できない 可能性がある → レンダリング負荷をできるだけサー
バーサイドに寄せたい ・SPAではなくSSRを利用できる メタフレームワークの採用 ・Next.js? ・Pages Router ・App Router(2023.5〜 stable) →Pages Routerは積極的に 採用しづらい
ぶっちゃけ… App Routerキツそう…? ・まともにSSRするのにuse client境界 を狭めるためのある程度しっかりし たコンポーネント設計が必要 ・外から見てて事前に知ってなきゃ事故る 事象が多いように見える ・キャッシュの仕様
・静的/動的レンダリングを意識しなが らコード書くのも慣れないと大変そう ・爆弾を踏まないに越したことはない (回避すればいいというのはあるが) ・頑張ってキャッチアップした末に得 られるもの(顧客/開発者体験的価値) がそのキャッチアップコストを超える 自信がない ・上手な設計をしなくても/できなくて も同じ価値を実現する方法があるの ならそちらでも良いのでは…
Remixを採用してみました
Remixを採用したわけ ②Next.jsだとまともにSSRするのに use client境界を狭めるための節度 あるコンポーネント設計が必要な気 がした ①バックエンドFW採用時からなるべ く大きなマインドチェンジをせずに使 用できたらいいな ②サーバー/クライアントバンドルを
あまり意識せずともRemix側でよしな にバンドルしてくれ、簡単にSSR可能 ①Remixのシンプルさの所以である フルスタックデータフローがこれまで 自分たちが扱ってきたFWの使い勝 手と非常に近い
①フルスタックデータフローに馴染みやすい
②容易にSSRを実現 build/server ・Remix側でloader/actionとそのimportモ ジュールは自動でサーバーバンドルへ ※./serverフォルダもしくは.server.tsとするこ とで強制も可(clientも同様) build/server & client ・初回リクエスト時はjsx()でHTML化したペー
ジ要素とクライアントサイド依存 (useEffect,State等)のjsファイルおよび manifest(routeごとのassetを記述)ファイルを 返却 ・以降、SPAとして機能
まとめ ①バックエンドFW経験があって、まだReactの世界に慣れきってないメン バーが多い中、要件に照らし合わせて最適だと思う選択肢(Remix)を採用 したら結構上手くいった ②柔軟なキャッシュ戦略を必要とするアプリケーションの作成には Next.jsがマッチするが、そういった要件もなく手軽にSSRを実現したいな ら、Remixを採用すると幸せになれるかも…?