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

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

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

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

なぜNuxt.jsなのか？

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

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

作ったもの

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

共通処理問題

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

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

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

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

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

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

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

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

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

Component問題

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

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

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

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

受注Object 商品Array

商品Object 商品Array

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

処理が単純化された

FormのVuex対応問題

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

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

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

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

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

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

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

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

これからやりたいこと

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

エンジニア募集中！

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

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

Other Decks in Programming

Featured

Transcript