失敗から学ぶNuxt.jsプロジェクトでの作り込み事例

Transcript

1. 失敗から学ぶNuxt.js プロジェクトでの作り込み事例 Nuxt道場 2021.06.23 三宅 祐介

2. 自己紹介

3. 自己紹介 株式会社Hajimari / エンジニア 三宅 祐介 ※Twitter上はくまモンエンジニア(@miyakey7)です 新卒でSIer(C/C++,C#,VB...) 2018年にWEBエンジニアとして転職 (PHP(Laravel/CakePHP),Vue.js/Nuxt.js)

4. 会社紹介

5. None
6. None

7. エンジニア募集中です！

8. History

9. History 2018年1月からの新規Projectで Nuxt.jsを採用 当時v1.0.0が出たばかりでリスクも あったが開発からリリースまでが長 かった事もあり導入した

10. History フロントエンド開発の知見を溜めなが ら開発は進み... 複数のNuxt.jsプロジェクトを引き継 いだ際に、あらゆる(小さな)事件が起 きていた

11. 事例

12. 事例 １．とりあえずclient-only ２．全入れVuex ３．画像がupload出来ないaxios ４．マスターデータ管理はどこ？

13. とりあえずclient-only

14. 画面が真っ白です！ 事件発生

15. 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. よく見るエラーが...

16. とりあえず client-onlyで解決

17. ハイドレーションエラー - クライアント側でレンダリングされた仮想 DOMツリーが、サーバー側でレンダリングさ れたコンテンツと一致しない (データのタイミングなど) - 不正なHTML(tbody抜け)

18. 事象はVueのUIライブラリなどで特 定のコンポーネントを呼んだ際に起 きていました →制御できない事が多くclient-only で囲って解決した 今回の事象

19. Client-Onlyで挟む事でサーバー 側でレンダリングしなくなります のでこのエラーは無くなりました 解決

20. Client-Onlyで挟む事でサーバー 側でレンダリングしなくなります のでこのエラーは無くなりました 解決...?

21. どういう仕組みで client-onlyに なってるんですか？

22. これを期に理解しよう

23. Nuxt.jsにおけるClientOnlyの機能 はvue-client-onlyという外部のプラ グインを利用して実装されていまし た ClientOnlyを調査...

24. Nuxt.jsのコード的には...

25. features...?

26. nuxt.configファイルに features listを追加 し、fales設定にすると 不要な機能を抜いてビル ドする事が出来る featuresとは...?

27. そういえば<no-ssr>はどうなったのか 非推奨になっており、まもなく消える...

28. vue-client-only 本体 めっちゃシンプル

29. 全入れvuex

30. 全部vuexに入ってます 事件発生

31. Vuexが無法地帯

32. ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 とあるメッセージ画面

33. ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 全てのメッセージをvuexへ保存 名前 メッセージ

    ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか

34. ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 コンポーネント間で参照 名前 メッセージ

    ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか

35. ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 限界が来た... 名前 メッセージ

    ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか 容量 パンク！

36. Vuexとは...

37. Vuex Vuexアプリケーションの中心にあるも のはストアです "ストア" は、基本的にアプリケーショ ンの状態(state)を保持するコンテナ です

38. コンポーネント間で情報共有し やすいためコンポーネント間の 依存が減る

39. Vuex自体はリロードなどでクリアされてし まうためvuex-persistedstateなどを使って データを永続化することが多いと思います その場合、Vuexが持ちうる容量は - local storage...5M程度 - window session

    storage...5M程度 - cookie...4K byte程度

40. ヘッダー サイド メニュー ユーザーリストコ ンポーネント ユーザーメッセージコンポーネント 送信 変えるべきは... 名前 メッセージ

    ID メッセージ Aさん 1 こんにちは 2 あああ 3 本当ですか Bさん 1 むむむ 2 本当ですか ユーザーリストだけにする or ユーザーリストの今の取得 状態を持つ このコンポーネント で過去メッセージを 都度取得 このコンポーネント でメッセージを持た ない or 状態を見てAPIコール

41. 画像がupload出来ない axios

42. 画像がアップロード 出来ません 事件発生

43. axiosラッパーに何かあるぞ

44. axiosを使う際は全てservices/http.jsにあり 今回もそれを使ってアップロード....

45. 実際のpostメソッド内でconfigなどが変わっ ており、画像アップロードを想定されていな かった

46. 本来はリクエスト数削減 のためにAPIをまとめて 投げるために作られてい た機能で、汎用的に使う ものではなかった

47. http.jsだと汎用性あ りそうに感じてしま う

48. マスターデータ管理は どこ？

49. マスターデータの 管理どこだ？ 事件発生

50. DB ID name 1 申し込み済 2 参加確定 3 選考漏れ 4

    キャンセル マスターテーブル マスター取得API

51. DB フロントで定義

52. DB ビルド時にマスター取得API jsonファイル化

53. 1. サーバーから最初に一度取得し保持しておく(Vuex) 2. 都度必要な際にサーバーへ取りに行く 3. ID,nameの組み合わせでフロントに定義 4. ビルド時にサーバーからAPIで取得しjsonファイル化 DBにあるmasterデータとクライアントで使いたい定義

54. どれが正解...？

55. ▪基本 →サーバーから最初に一度取得し保持しておく(Vuex) ▪巨大なマスターデータがある時は →ビルド時にサーバーからAPIで取得しjsonファイル化 ▪フロントでカスタマイズなど →ID,nameの組み合わせでフロントに定義してもよい 指針を立てて運用

56. 他にも...

57. • 画像URL変換共通処理の落とし穴 • PC/SP分離コンポーネント管理失敗 • 入れかけのatomic design • 置き去りにされた storybook

    ...etc

58. まとめ

59. client-only →Nuxtのコードを読むきっかけが生まれ 　SSR/client-onlyへの理解が深まった Vuex →API設計、component設計見直しのきっかけ axios →header理解/機能のわかりやすさ/命名 マスターデータ →SPA設計におけるデータ設計考慮

60. 何か起こった時が深堀りのチャンス として学んでいく 事件を楽しもう でも何か起きないに越したことはない

61. Nuxt3の導入で事件が起きないように...🙏 Nuxt開発LIFEを楽しみましょう!

62. ご清聴ありがとうございました