Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

97b4a8f693c3eec1425ab99e3517189a?s=47 Wakame
October 04, 2017
Programming
4
1.7k

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

97b4a8f693c3eec1425ab99e3517189a?s=128

Wakame

October 04, 2017
Tweet

Other Decks in Programming

See All in Programming
01e0fceaff6bfbd259c4a5ad3daa8ff8?s=48 fumist23
1
820
Ab1b72230a5b6ddc97322af27ad91618?s=48 ohayoukenchan
0
420
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
700
6bf08ada80199f23061a6c22f03f0ed2?s=48 masahiro_nishimi
0
470
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
2
190
C3a47a823a1e7adcb5be27cc3df5c482?s=48 akiyoko
3
880
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
220
Bf71b646607bbe6916ccefc6548ebedd?s=48 lyakaap
0
290
Ac6dba8ce93944d17714de362ca17e54?s=48 muryoimpl
0
100
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
320
9516a84fcc28d6456d4fc87a5c8b130f?s=48 kidel
0
1.2k
D840733454bebebb5d6f0a2d95754897?s=48 aokabic
1
150

Featured

See All Featured
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.8k
Ba530e786553390f3fb271848485681c?s=48 3n
167
22k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
55k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
203
9.9k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
347
27k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
28
2.6k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k

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. エンジニア募集中！