Nuxt.jsで業務システムを作った話

Transcript

1. Nuxt.jsで業務システムを 作った話 @wakame_isono_ / 株式会社KEY SELECT Vue.js Tokyo v-meetup #5 2017.10.04
2. @wakame_isono_ • 元Sler(VB.NET) • Ruby on Rails ちょっとできる • 今はフロントエンド(Nuxt.js、Vue.js)
3. 流れ • なぜNuxt.jsなのか？ • 作ったもの • 共通処理問題 • Component問題 • FormのVuex対応問題 • Nuxt.jsを使ってみて • これからやりたいこと
4. なぜNuxt.jsなのか？
5. わかめさんと仲間たち Web初⼼者 上司 Nuxt.jsがいいんじゃない？
6. • 上司に⾔われたから • Vue.jsに先⾒性 • Nuxt.jsはVue-Router、Vuex、Vue-Meta等のサポートがあり、 未経験者にとって学習コストが低いと想定
7. 作ったもの
8. • SPA ( Nuxt.js の SPA Mode) • Request Point 500 以上 Component 350 以上 • ソース管理にGitLab • API 側は PHP7.1 (Symfony3.3) • 社内のGitLabにPushしたら、⾃動でビルドしてAmazon S3に デプロイされる ECサイトのバックヤード
9. 共通処理問題
10. 1. 初期化処理 2. 検索処理 3. ページング処理 検索フォーム リスト ページング 業務システムあるある画⾯ リスト更新中は ローディング
11. 検索フォーム リスト ページング 検索フォーム リスト ページング 検索フォーム リスト ページング 保守性なし こんな画⾯がいっぱいあった コピペしまくり
12. Page Component Request URL 検索条件 Mixinを使ってみた！ 初期処理 Mixin Page Component Request URL 検索条件 Page Component Request URL 検索条件 検索処理 ページング処理 リスト更新処理
13. ………でも？ イレギュラーがあった場合にどうするの？
14. チェックボックスがついたリスト XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX リストを更新するときに チェックボックスを 初期化したい
15. リスト更新処理を再定義 初期処理 Mixin 検索処理 ページング処理 リスト更新処理 Page Component Request URL 検索条件 リスト更新処理 リスト更新処理を 再定義して チェックボックス を初期化
16. superみたいなことはできないの？
17. https://jsfiddle.net/wakame_isono_/oy98h6f8/
18. mixinオブジェクトのメソッドを呼ぶ⼿法で 擬似的なsuperを実現
19. Component問題
20. コンポーネント設計とはいうけれど。。。 よくわからん
21. Atomic Design 検索 原⼦ 検索 分⼦ 有機物 テンプレート ページ XXXX XXXX XXXX XXXX
22. ………でも？ データからみた視点がほしい
23. Objectの階層単位で考えてみる
24. 受注Object 商品Array
25. 商品Object 商品Array
26. 商品Object 商品の⼊荷処理を⾏う
27. 処理が単純化された
28. FormのVuex対応問題
29. 業務システムのフォームは複雑 • Nested Object • ⼀つのフォームに何⼗項⽬
30. 双⽅向算出プロパティだと項⽬数分の getter setter が必要 つらい
31. Objectの階層単位で考えてみる
32. https://jsfiddle.net/wakame_isono_/c7dru691/
33. ⼀つのComponentに⼀組のGetter Setterのみ
34. Nuxt.jsで業務システムを作ってみて
35. 良かったこと • ドキュメントが⽇本語化されていること • Vue-RouterやVuexを⾃動で⽣成してくれるなど、開発を効率 化してくれる機能がある • Component化することで処理を単純化できた
36. 課題もある • 情報が少ない • Vue.js⽤のPluginがそのまま使えないことが多い • 拡張しにくい(Vue-Router等) • サーバーサイドとクライアントサイドでDOMのミスマッチが起 こる
37. これからやりたいこと
38. Nuxt.js、 Vue.jsを使った業務システムの ベストプラクティスを作り上げる！
39. エンジニア募集中！