くろおーかみ*てっく

しがないくろおーかみの勉強記

Laravel/Vue.js勉強会#10 に参加しました #Laravue

Report Vue Vuex Nuxt Laravel 勉強会

今日は勉強会に参加したので、レポートを書きます✨

laravue.connpass.com

もくじ

[Vue] スポンサー: Storybookを用いたVue.js共通コンポーネント開発との戦い

t.co

Storybookを使っている環境でどのようにレグレッションテストや組織内でのモジュール配布をしたか、というお話です。

reg-suitで画面キャプチャーを使ったテストができるのは便利ですね✨
モーダルダイアログ等で背景が暗くなったとき、背景分の差分も出てしまう場合 のテスト方法も解説されています。

[Vue] LT1: Vuex ORMの紹介 - フロントエンドのORMとデータのノーマライズ

t.co

Vuexをデータベースみたいに使えるものVuex ORMの紹介です。
Vuex ORMを実践した SOKUSEKIというタスクかんばんのアプリも作っているそうです！

f:id:y-mix:20190718202450j:plain
Vuex ORMを実践したアプリ 『SOKUSEKI』

永続化が今後の課題など、使い所が気になりますね✨

[Laravel] LT2: Laravel + AWSで CI/CDしてみた話

slides.com

資料は見つかりませんでした…
資料がアップされたのでまとめました🙇‍♂️

S3->ECR->運用開始 という流れでCodePipeline, CodeBuildを使った話になります。 CodeBuild内でPHPUnitを動かしているそうです。

CodeBuild/PHPUnitなどの解説があるため、はじめての方でもわかりやすいですね！

[Vue] LT3: Vue.jsでFormをAtomic Designしてみたときのコンポーネント間のやり取り

t.co

「Atomic Designについて」から「Atomic Designにした構成でどのようにデータをやり取りするか」まで解説されていました。
また、Atomic Designのデータのやり取りが分かりづらい方に向けてprops in / event outの考え方を用いた解説になっています。

[Laravel] LT4: Laravel のイベントディスカバリー

qiita.com

スライドではなくQiitaの記事になります。

Laravelのイベントの作り方 から Laravel 5.8.9から出た最近の イベントディスカバリー の使い方を解説しています。

[Laravel] LT5: PHPUnit + openapi-validator で「スキーマが正、実装が追従」にする

qiita.com

API仕様書を元にしてLaravelで作ったAPIをテストする話になります。

「API仕様書に当たるYAMLを作るのが大変」ということですが、作ってしまえばそれをソースにしてAPIのテストができるのは楽そうですね💪

[Nuxt] LT6

スライドは無いそうです。

FlutterからNuxtに変えた受付システムを作る話で、入力があったらSlackに送る…
はずが発表時にSlackに通知を送れていない状況だそうです！

「Nuxtはvue-property-decoratorを使っているが非推奨になるので要注意」というお話を聴けました。

懇親会

f:id:y-mix:20190718222617j:plain

各テーブルごとに軽食が違っていて、(撮っていなかったのですが)メロンが出ました！🍈🍈🍈

感想

Vueの v-model は v-bind と v-on を組み合わせた効果になる、というのは初耳で有用な話でした✨

www.shookuro.com

Atomic Designでのデータの受け渡しですが、子で起きた変更は親にイベントを渡して変更を伝え、親でデータを変更するなど、こちらの話とつながってきたなという感じもしました💪

懇親会で話を聞いたところ「VuexはSPAを用いたときに画面間でデータを渡すために使うべき」という意見があり、
Atomic Designでは親-子コンポーネント間のデータの渡し方を徹底する必要があるという課題は残りました…

＼ 勉強会の皆様、ありがとうございました！ ／