社内勉強会

1. LaravelでVueを使うアレコレ
2019/04/12 sh-ogawa

2. Lara-Vue
● 全部Vueで作る
● 永続データはVuexに放り込む
● 多言語化はLaravel -> Vue I18n
● サーバサイドバリデーションエラーの表示
● サーバサイドからのflashメッセージの扱い
● ドメインロジックのエラーメッセージ
● アセットコンパイルするjsファイルは分ける
● webpackの設定を認識させる

3. 全部Vueで作る
● async、deferが使えるようになるため、
ターンアラウンドタイムが短くなる可能性
● Blade噛ませると、タグ内が一瞬見える
● 部分的にやるなら、リアクティブに画面を動か
す場所だけに限定する

4. 永続データはVuexに
放り込む
● コンポーネントが疎結合になる
● 永続化済データだけを入れるのがポイント
● 編集中データは入れてはいけない
● Vuex storeがmutation以外で更新されると
エラーログが出るので即修正
● storeの読込みはNuxt.jsをパクると良い

5. 多言語化はLaravel
-> Vue I18n
● Composer required
martinlindhe/laravel-vue-i18n-generato
● php artisan vue-i18n:generate
https://github.com/martinlindhe/laravel-vue-i18n-
generator

6. サーバサイドバリデーシ
ョンエラーの表示
● VueのerrorCapturedを使う
● rsp.data.errorsに入ってるからそれを投げる
● ErrorBoundaryで拾って表示
<error-boundary>
<hoge-screen />
</error-boundary>

7. サーバサイドからのflash
メッセージの扱い
● エラーはerrorCaptureに拾わせる
● 成功時は、Promise内でhref書き換えればOK
● その場で表示したい場合は、Event Hub使う

8. Event Hub
● 名前付いてるけど、専用のVueインスタンスを作
って、Vueプラグインとしてインストールするだ
け
● グローバルインスタンス経由でイベントのやり
取りを行うTIPS

9. Event Hub
const eventHub = {
install: function (Vue, options) {
Vue.prototype.$eventHub = new Vue()
}
}
export default eventHub

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

11. ドメインロジックの
エラーメッセージ
● IlluminateSupportViewErrorBag使う
● PHPの癖にイミュータブルだから使い方注意
● response()->json([‘errors’ => $errors])
で返すとバリデーションエラーと同じになる

12. アセットコンパイルする
jsファイルは分ける
● 自前のjsとライブラリを分ける
● Laravel Mixのversionはファイルのハッシュ
取ってるだけだから、中身変わらなければ、
versionのIDは変わらない
● extractに外部ライブラリは全部記述する

13. アセットコンパイルする
jsファイルは分けるmix.js('resources/js/app.js', 'public/js')
.extract(['axios', 'bulma', 'lodash.defaultsdeep', 'vee-validate', 'vue', 'vue-i18n', 'vue-template-compiler', 'vuex'])
.sass('resources/sass/app.scss', 'public/css', {
implementation: require('node-sass')
})
.options({
processCssUrls: false
})
.version()

14. webpackの設定を認識
させる
● 相対パスがとにかく怠い
● エイリアスが無いと実際詰むと思う
● __ide.webpack.config.js作ってideaに認識さす

15. const path = require('path')
module.exports = {
entry: path.resolve(__dirname, "resources/js/app.js"),
output: {
path: path.resolve(__dirname, 'public/js'),
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': __dirname + '/resources/js'
}
}
}