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

by Wakame

Slide 1

Slide 1 text

Nuxt.jsで業務システムを作った話 @wakame_isono_ / 株式会社KEY SELECT Vue.js Tokyo v-meetup #5 2017.10.04

Slide 2

Slide 2 text

@wakame_isono_ • 元Sler(VB.NET) • Ruby on Rails ちょっとできる • 今はフロントエンド(Nuxt.js、Vue.js)

Slide 3

Slide 3 text

流れ • なぜNuxt.jsなのか？ • 作ったもの • 共通処理問題 • Component問題 • FormのVuex対応問題 • Nuxt.jsを使ってみて • これからやりたいこと

Slide 4

Slide 4 text

なぜNuxt.jsなのか？

Slide 5

Slide 5 text

わかめさんと仲間たち Web初⼼者上司 Nuxt.jsがいいんじゃない？

Slide 6

Slide 6 text

• 上司に⾔われたから • Vue.jsに先⾒性 • Nuxt.jsはVue-Router、Vuex、Vue-Meta等のサポートがあり、未経験者にとって学習コストが低いと想定

Slide 7

Slide 7 text

作ったもの

Slide 8

Slide 8 text

• SPA ( Nuxt.js の SPA Mode) • Request Point 500 以上 Component 350 以上 • ソース管理にGitLab • API 側は PHP7.1 (Symfony3.3) • 社内のGitLabにPushしたら、⾃動でビルドしてAmazon S3にデプロイされる ECサイトのバックヤード

Slide 9

Slide 9 text

共通処理問題

Slide 10

Slide 10 text

1. 初期化処理 2. 検索処理 3. ページング処理検索フォームリストページング業務システムあるある画⾯リスト更新中はローディング

Slide 11

Slide 11 text

検索フォームリストページング検索フォームリストページング検索フォームリストページング保守性なしこんな画⾯がいっぱいあったコピペしまくり

Slide 12

Slide 12 text

Page Component Request URL 検索条件 Mixinを使ってみた！初期処理 Mixin Page Component Request URL 検索条件 Page Component Request URL 検索条件検索処理ページング処理リスト更新処理

Slide 13

Slide 13 text

………でも？イレギュラーがあった場合にどうするの？

Slide 14

Slide 14 text

チェックボックスがついたリスト XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX リストを更新するときにチェックボックスを初期化したい

Slide 15

Slide 15 text

リスト更新処理を再定義初期処理 Mixin 検索処理ページング処理リスト更新処理 Page Component Request URL 検索条件リスト更新処理リスト更新処理を再定義してチェックボックスを初期化

Slide 16

Slide 16 text

superみたいなことはできないの？

Slide 17

Slide 17 text

https://jsfiddle.net/wakame_isono_/oy98h6f8/

Slide 18

Slide 18 text

mixinオブジェクトのメソッドを呼ぶ⼿法で擬似的なsuperを実現

Slide 19

Slide 19 text

Component問題

Slide 20

Slide 20 text

コンポーネント設計とはいうけれど。。。よくわからん

Slide 21

Slide 21 text

Atomic Design 検索原⼦検索分⼦有機物テンプレートページ XXXX XXXX XXXX XXXX

Slide 22

Slide 22 text

………でも？データからみた視点がほしい

Slide 23

Slide 23 text

Objectの階層単位で考えてみる

Slide 24

Slide 24 text

受注Object 商品Array

Slide 25

Slide 25 text

商品Object 商品Array

Slide 26

Slide 26 text

商品Object 商品の⼊荷処理を⾏う

Slide 27

Slide 27 text

処理が単純化された

Slide 28

Slide 28 text

FormのVuex対応問題

Slide 29

Slide 29 text

業務システムのフォームは複雑 • Nested Object • ⼀つのフォームに何⼗項⽬

Slide 30

Slide 30 text

双⽅向算出プロパティだと項⽬数分の getter setter が必要つらい

Slide 31

Slide 31 text

Objectの階層単位で考えてみる

Slide 32

Slide 32 text

https://jsfiddle.net/wakame_isono_/c7dru691/

Slide 33

Slide 33 text

⼀つのComponentに⼀組のGetter Setterのみ

Slide 34

Slide 34 text

Nuxt.jsで業務システムを作ってみて

Slide 35

Slide 35 text

良かったこと • ドキュメントが⽇本語化されていること • Vue-RouterやVuexを⾃動で⽣成してくれるなど、開発を効率化してくれる機能がある • Component化することで処理を単純化できた

Slide 36

Slide 36 text

課題もある • 情報が少ない • Vue.js⽤のPluginがそのまま使えないことが多い • 拡張しにくい(Vue-Router等) • サーバーサイドとクライアントサイドでDOMのミスマッチが起こる

Slide 37

Slide 37 text

これからやりたいこと

Slide 38

Slide 38 text

Nuxt.js、 Vue.jsを使った業務システムのベストプラクティスを作り上げる！

Slide 39

Slide 39 text

エンジニア募集中！