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
730
フロントエンド メタフレームワーク 選定の際に考えたこと
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
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
Delegating the chores of authenticating users to Keycloak
ahus1
0
120
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
970
M3 Expressiveの思想に迫る
chnotchy
0
110
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.2k
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
160
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
770
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
530
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
750
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
GraphQLとの向き合い方2022年版
quramy
48
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Become a Pro
speakerdeck
PRO
28
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
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を採用すると幸せになれるかも…?