Vue.js Night Nagoya #2の発表資料

1. JavaScript何も判らんマンが、
Vueなら扱えそうだと思って、
業務システムのGUIをほぼVueで作った話
2019/07/12 sh-ogawa

2. 自己紹介
sh-ogawa
SNSアカウント
■Twitter：@kroyeeg
■Qiita：sh-ogawa
■GitHub：sh-ogawa
■SlideShare：sh-ogawa
■はてブロ：sh-ogawa
■AWSで自責高額請求
&支払い免除された人 New!!

3. 今日の話
フロント弱者がVueを使って
業務システムを１から作りながら、
俺的スタイルを構築していった
という話

4. 目的
（得た知見と）悩みを共有して、
あとで意見交換をしたい

5. 中身について
● MPA
● 業務システム

6. バックエンドフロント
UIコンポーネント
最初期の要素
(Vue + Vuex)
言語ファイル

7. 画面構成
ヘッダーメニュー
サ
イ
ド
メ
ニ
ュ
｜
フッター
メインコンテンツ
タイトル + beadcrumb
タイトル（errorCapturedでのエラーメッセージの表示含む）

8. レベル１
● ログイン画面
○ formのサブミットで入力値を送信
○ サーバサイドのバリデーションエラーは
Laravelの機能で表示
○ クライアントサイドバリデーション自作
ベターJQuery的な使い方

9. レベル２
DB管理のマスタデータ
Laravelのbladeテンプレートから、
$root.$dataに対してデータを設定
mounted時はundefinedなので課題を感じてる

10. レベル２
● 動的な画面
○ やたら動的に増える項目が多いから
Vueの恩恵
○ 配列削除に弱い
■ Keyの壁
○ Atomic Designの恩恵
○ vee-validate導入

11. レベル３
<hoge-view
:data="{{ $hoge->toJson() }}"
hoge1-url="{{ route('web.hoge1.index') }}"
hoge2-url="{{ route('web.hoge2.store', [$hoge2_id]) }}"
hoge3-url="{{ route('web.hoge3.update', [$hoge3_id]) }}"
hoge4-url="{{ route('web.hoge4.delete', [$hoge4_id]) }}"
hoge5-url="{{ route('web.hoge5.store', [$hoge5_id]) }}"
hoge6-url="{{ route('web.hoge6.store', [$hoge6_id]) }}"
hoge7-url="{{ route('web.hoge7.update', [$hoge7_id]) }}"
hoge8-url="{{ route('web.hoge8.update', [$hoge8_id]) }}"
/>

12. レベル３
● 項目が増え続ける画面
○ URLの追加がしんどい
○ そのバケツリレーに心底疲れる
■ Vuexのストアに放り込む
● ziggyの追加
○ notify messageの表示が怠い問題
■ EventHubの追加
● ステップ入力しないといけないような長大画面

13. ziggy
● Laravelのルーティング定義をjson形式にする
● Laravelのrouteヘルパーと同じ書き口で書ける
● vuexから呼ぶと気分が微妙になる()
Laravel
route(‘web.home’)
vue
route(‘web.home’)
vuex
this._vm.route(‘web.home’)

14. EventHub
● 専用のVueインスタンスを作って、
Vueプラグインとしてインストールするだけ
● グローバルインスタンス経由で
イベントのやり取りを行うTIPS

15. EventHub
import EventHub from '@/EventHub'
Vue.use(EventHub)
```component.vue
this.$eventHub.$on(‘event-name’, (value) => {/* 処理 */})
this.$eventHub.$emit(‘event-name’, value)

16. this.$eventHub.$on(‘event-name’, (value) => {
// 何か処理
・・・
this.$eventHub.$emit(‘return-event-name’, returnValue)
})
this.$eventHub.$once(‘return-event-name’, (value) => {処理})
this.$eventHub.$emit(‘event-name’, value)
EventHubの応用

17. 画面構成
ヘッダーメニュー
サ
イ
ド
メ
ニ
ュ
｜
フッター
メインコンテンツ
タイトル + beadcrumb
タイトル（errorCapturedでのエラーメッセージの表示含む）
notification(event Hub)
モーダル表示(event Hub)

18. バックエンドフロントエンド
UIコンポーネント
今現在の要素
Vue + Vuex 言語ファイル
ルーティング
ファイル

19. まとめ
● 簡単すぎる画面からやらない
● サーバサイドFWのリソース
-> Vueで使用するリソースを自動生成
● $refsは積極採用
● イベントハブは重要
● Nuxtの仕組みは参考になる

20. 課題
● DBに持ってるデータで入力フォーム生成するとき
のデータの取り方
● 画面遷移以外で画面の表示をガサっと変えたい
○ 今日扱えなかった
○ イベントハブで通知してv-if
○ vue-rouerで履歴登録させないとか出来ると達
成できるんだけど、、情報求む

21. 参考
● Buefy
https://buefy.org/
● ziggy
https://github.com/tightenco/ziggy
● generate vue-i18n file
https://github.com/martinlindhe/laravel-vue-i18n-generator
● VeeValidate
https://baianat.github.io/vee-validate/
● Vue.js入門 基礎から実践アプリケーション開発まで
https://www.amazon.co.jp/dp/4297100916/ref=cm_sw_em_r_mt_dp_U_BKbkDb2XSD6QF

22. おしまい