Laravel/Vue.js勉強会#10 at heyオフィス
update 2019-07-19 20:00
7月18日（木） に heyオフィス で開催された Laravel/Vue.js勉強会#10 にブログ枠で参加してきました。
heyオフィス入り口では、写真のブラケットの羊が出迎えてくれました。今は売り切れてしまっているので買えません。残念…
Laravel/Vue.js勉強会#10 に参加した際にとっていたメモをまとめます。 詳しく見たい方はそれぞれの登壇者のスライドをご覧ください！
スポンサーLT：Storybookを用いた Vue.js共通コンポーネント開発との戦い
登壇者：@howdy39 さん （heyinc (STORES.jp) Front-end engineer）
STORES.jpでは、30種類以上のコンポーネント集を Storybook で管理しています。 そして、なんと CSSフレームワーク使ってないそうなのです！大変そう…
これらのコンポーネントを管理するにあたって、以下のような戦いがありました
予期せぬUI崩れ
レビューの面倒くささ
git checkoutして Storybook 起動して確認...
モジュール配布どうしよう
npm organization 結構高いし…
予期せぬUI崩れ
REG-SUIT を使って画像回帰テストをするように！
Storybook のコンポーネントをキャプチャし、変更があるものを通知してくれる（GitHubのPR）
ハマりどころ
storybook-addon-vue-info 等を使って説明文等を記載していると、説明文の変更も検知されてしまう
画像比較用のストーリーを作って回避。ダイアログ等のコンポーネントは出した状態のものを作成しておく
日本語が豆腐になってしまう（公式のDockerファイル）
フォントを入れよう
レビューの面倒臭さ
Storybook をビルドして作られるのは html, css, js などの静的ファイル
→ PR 時に CircleCI の Artifacts に格納してブラウザで見られるように。いちいち CircleCI 見に行くのも面倒だから PR のコメントに URL を通知するように
モジュール配布どうしよう
実は GitHub 経由で npm インストールができます！
タグも CircleCi の approval job を利用して生成されるように
まとめ
Storybook できょうつコンポーネント作るのは大変だけど、一度作ってしまえば後が楽なのでぜひ活用しよう！
Vuex ORM フロントエンドのORMとデータのノーマライズ
登壇者：@Yasshieeee さん
Vuex ORM は Vuex Store へ ORM ライクなアクセスを可能にするライブラリです。
Laravel の Eloquent ORM のようにリレーションアクセス等が簡単にできます
データのノーマライズ
リレーション構造を持った json を投げたときに、リレーション構造とそれぞれのモデルに分解し保存してくれる
Model の定義
Model の定義と hasMany などのリレーションの定義をしてやれば使えます
Laravel + AWS で CI/CDしてみた
登壇者：@mjima さん（株式会社カラーズ ペット通販サイト：GREEN DOG）
ECCUBE が乗っている通販サイトのインフラを AWS に更新したよというお話
AWS CodePipeline を使ってリリース作業の自動化をした。そのときに PHPUnit も回してる。
Vue.jsでFormをAtomic Designしてみた時のコンポーネント間のデータのやりとり
登壇者：@blue_goheimochi さん（さわやかのげんこつハンバーグが好き）
Laravel jp conf 20 を主催されているそうです
Atomic Design
Webページを構成する要素を、Page > Template > organism > molecule > atom と細分化してコンポーネントを作成し、これらのコンポーネントを組み合わせて一つのページを作り上げる手法
機能ごとにコンポーネント化していくことで、変更に強くなったり、管理が楽になったりする。
Atomic Design では基本的に、Page、または Template 階層でデータの保持、API アクセスなどを行う。 その時、Page が持っているデータはどのように atom まで伝えるのがいいだろうか？
Vue.js では、親子コンポーネント間のやり取りは props in / event out という構想で行われる
props in / event out
親から子にデータを渡す際は、 props が使われる。親のデータが更新された際、props でデータの伝搬が行われる
子から親にデータを渡す際は、 event が使われる。子要素で event を $emit して発行し、おやにデータの変更を通知することでデータが更新される
親のデータが更新されることで、props で子に新しいデータが渡る。 というなが
スライドではわかりやすく図解されているのでそちらを見るのをおすすめします！
Laravelにイベントディスカバリーが実装されたので試してみる
スライドのアップはありませんでした。
登壇者：@niisantokyo さん（株式会社ROXX）
Laravel にはイベントとリスナーという仕組みにより、特定のイベントが発火すると、それに応じたコールバックを実行することができる。
Queue と組み合わせることで、重たい処理などを非同期で実行することができる。
従来のイベント作成
EventServiceProvider にイベントとリスナーを定義する
php artisan event:generateでイベントとリスナーを記述するファイルを生成する
イベント増えていったとき、listen property が太っていくよね
生成する前のイベントとリスナーを先に登録する という変な感じあるよね
App\Events\... みたいにいちいちフルパス書いていくの面倒くさいよね
イベントディスカバリー
EventServiceProvider を使わないで済む仕組み
自分でイベントとリスナを登録する代わりに、自動的にイベントを検出させる
本番環境で使用する際は、イベントディスカバリーの操作がいちいち走らないよう、
php artisan event:cacheでキャッシュさせておく手動でイベントとリスナーを作成していた場合、二重にイベントが登録されてしまうことがあるため、消しておく
複数のイベントに共通のリスナーを登録することができないため、やりたい場合従来のイベント作成方法で作成する
PHPUnit + openapi-validator で「スキーマが正、実装が追従」にする
スライドはリンク先にて
登壇者：@korn_shonery さん
PHPUnitで、APIがスキーマと異なるレスポンスを返したら、落ちるテストを書きたい。TDDみたい
OpenAPI
「OpenApiはスキーマを定めるためのすごいyaml」
redoc-cli を使って OpenAPI の yaml ファイルを html にする。（私は Swagger を使ってます）
PHPUnit で OpenAPI のスキーマを読み込んでバリデータとして活用するために、openapi-validator をつかう
PHPUnit で、API のレスポンス と OpenAPI で定義したスキーマが一致しているかをテストすることで、スキーマに沿った実装ができているかを確認する。
辛い点：OpenAPI でスキーマ定義を書くこと
LT6
スライドはありません
登壇者：@masaakikunsan さん （株式会社ROXX back check 開発責任者）
LT枠が急遽空いたので、急遽登壇されました。急遽過ぎてスライドもないし見せられるものもあんまりなかったとのこと
会社の受付システムが電話なの辛いよね
→ Nuxt で サクッと Slack に通知するアプリ作る（現在進行系）
Nuxt 今から使うなら TypeScript でやろう
ts-node と nuxt-ts 入れて、nuxt.config.js → nuxt.config.ts に変える
Nuxt では vue-property-decorator を使っているけど Vue 3系では非推奨に？
まとめ
特に、Laravel、Vue.js をこれから始めようと思っている方、始めたての方は参加してみるといいと思います！
最近 Nuxt.js, Vue.js ばっか触ってて Laravel 使ってないなぁ。