Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsで業務システムを作った話
Search
Wakame
October 04, 2017
Programming
4
2.4k
Nuxt.jsで業務システムを作った話
Wakame
October 04, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
960
品質ワークショップをやってみた
nealle
0
430
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.8k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
180
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Go言語はstack overflowの夢を見るか?
logica0419
0
360
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
200
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
180
Swift Concurrency - 状態監視の罠
objectiveaudio
2
530
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
A Tale of Four Properties
chriscoyier
161
23k
Six Lessons from altMBA
skipperchong
29
4k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Docker and Python
trallard
46
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
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を使った業務システムの ベストプラクティスを作り上げる!
エンジニア募集中!