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
失敗から学ぶNuxt.jsプロジェクトでの作り込み事例
Search
kumamon_engineer
June 24, 2021
Technology
0
88
失敗から学ぶNuxt.jsプロジェクトでの作り込み事例
6/23 Nuxt道場
kumamon_engineer
June 24, 2021
Tweet
Share
More Decks by kumamon_engineer
See All by kumamon_engineer
Laravel_Slack通知で実践した_リアルタイムエラー共有開発
miyakeylab
2
1.4k
Other Decks in Technology
See All in Technology
ObsidianをMCP連携させてみる
ttnyt8701
2
140
エンジニア向け技術スタック情報
kauche
1
120
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
930
Welcome to the LLM Club
koic
0
150
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
110
成立するElixirの再束縛(再代入)可という選択
kubell_hr
0
970
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
140
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
130
Wasm元年
askua
0
120
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
780
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
590
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Balancing Empowerment & Direction
lara
1
350
Statistics for Hackers
jakevdp
799
220k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Become a Pro
speakerdeck
PRO
28
5.4k
RailsConf 2023
tenderlove
30
1.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Unsuck your backbone
ammeep
671
58k
Transcript
失敗から学ぶNuxt.js プロジェクトでの作り込み事例 Nuxt道場 2021.06.23 三宅 祐介
自己紹介
自己紹介 株式会社Hajimari / エンジニア 三宅 祐介 ※Twitter上はくまモンエンジニア(@miyakey7)です 新卒でSIer(C/C++,C#,VB...) 2018年にWEBエンジニアとして転職 (PHP(Laravel/CakePHP),Vue.js/Nuxt.js)
会社紹介
None
None
エンジニア募集中です!
History
History 2018年1月からの新規Projectで Nuxt.jsを採用 当時v1.0.0が出たばかりでリスクも あったが開発からリリースまでが長 かった事もあり導入した
History フロントエンド開発の知見を溜めなが ら開発は進み... 複数のNuxt.jsプロジェクトを引き継 いだ際に、あらゆる(小さな)事件が起 きていた
事例
事例 1.とりあえずclient-only 2.全入れVuex 3.画像がupload出来ないaxios 4.マスターデータ管理はどこ?
とりあえずclient-only
画面が真っ白です! 事件発生
The client-side rendered virtual DOM tree is not matching server-rendered
content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. よく見るエラーが...
とりあえず client-onlyで解決
ハイドレーションエラー - クライアント側でレンダリングされた仮想 DOMツリーが、サーバー側でレンダリングさ れたコンテンツと一致しない (データのタイミングなど) - 不正なHTML(tbody抜け)
事象はVueのUIライブラリなどで特 定のコンポーネントを呼んだ際に起 きていました →制御できない事が多くclient-only で囲って解決した 今回の事象
Client-Onlyで挟む事でサーバー 側でレンダリングしなくなります のでこのエラーは無くなりました 解決
Client-Onlyで挟む事でサーバー 側でレンダリングしなくなります のでこのエラーは無くなりました 解決...?
どういう仕組みで client-onlyに なってるんですか?
これを期に理解しよう
Nuxt.jsにおけるClientOnlyの機能 はvue-client-onlyという外部のプラ グインを利用して実装されていまし た ClientOnlyを調査...
Nuxt.jsのコード的には...
features...?
nuxt.configファイルに features listを追加 し、fales設定にすると 不要な機能を抜いてビル ドする事が出来る featuresとは...?
そういえば<no-ssr>はどうなったのか 非推奨になっており、まもなく消える...
vue-client-only 本体 めっちゃシンプル
全入れvuex
全部vuexに入ってます 事件発生
Vuexが無法地帯
ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 とあるメッセージ画面
ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 全てのメッセージをvuexへ保存 名前 メッセージ
ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか
ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 コンポーネント間で参照 名前 メッセージ
ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか
ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 限界が来た... 名前 メッセージ
ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか 容量 パンク!
Vuexとは...
Vuex Vuexアプリケーションの中心にあるも のはストアです "ストア" は、基本的にアプリケーショ ンの状態(state)を保持するコンテナ です
コンポーネント間で情報共有し やすいためコンポーネント間の 依存が減る
Vuex自体はリロードなどでクリアされてし まうためvuex-persistedstateなどを使って データを永続化することが多いと思います その場合、Vuexが持ちうる容量は - local storage...5M程度 - window session
storage...5M程度 - cookie...4K byte程度
ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 変えるべきは... 名前 メッセージ
ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか ユーザーリストだけにする or ユーザーリストの今の取得 状態を持つ このコンポーネント で過去メッセージを 都度取得 このコンポーネント でメッセージを持た ない or 状態を見てAPIコール
画像がupload出来ない axios
画像がアップロード 出来ません 事件発生
axiosラッパーに何かあるぞ
axiosを使う際は全てservices/http.jsにあり 今回もそれを使ってアップロード....
実際のpostメソッド内でconfigなどが変わっ ており、画像アップロードを想定されていな かった
本来はリクエスト数削減 のためにAPIをまとめて 投げるために作られてい た機能で、汎用的に使う ものではなかった
http.jsだと汎用性あ りそうに感じてしま う
マスターデータ管理は どこ?
マスターデータの 管理どこだ? 事件発生
DB ID name 1 申し込み済 2 参加確定 3 選考漏れ 4
キャンセル マスターテーブル マスター取得API
DB フロントで定義
DB ビルド時にマスター取得API jsonファイル化
1. サーバーから最初に一度取得し保持しておく(Vuex) 2. 都度必要な際にサーバーへ取りに行く 3. ID,nameの組み合わせでフロントに定義 4. ビルド時にサーバーからAPIで取得しjsonファイル化 DBにあるmasterデータとクライアントで使いたい定義
どれが正解...?
▪基本 →サーバーから最初に一度取得し保持しておく(Vuex) ▪巨大なマスターデータがある時は →ビルド時にサーバーからAPIで取得しjsonファイル化 ▪フロントでカスタマイズなど →ID,nameの組み合わせでフロントに定義してもよい 指針を立てて運用
他にも...
• 画像URL変換共通処理の落とし穴 • PC/SP分離コンポーネント管理失敗 • 入れかけのatomic design • 置き去りにされた storybook
...etc
まとめ
client-only →Nuxtのコードを読むきっかけが生まれ SSR/client-onlyへの理解が深まった Vuex →API設計、component設計見直しのきっかけ axios →header理解/機能のわかりやすさ/命名 マスターデータ →SPA設計におけるデータ設計考慮
何か起こった時が深堀りのチャンス として学んでいく 事件を楽しもう でも何か起きないに越したことはない
Nuxt3の導入で事件が起きないように...🙏 Nuxt開発LIFEを楽しみましょう!
ご清聴ありがとうございました