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
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
890
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Porting a visionOS App to Android XR
akkeylab
0
470
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
830
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
690
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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を使った業務システムの ベストプラクティスを作り上げる!
エンジニア募集中!