Laravel/Vue.js勉強会#7のまとめ


この記事は先日開催された「Laravel/Vue.js勉強会#7」の参加レポートになります。
https://laravue.connpass.com/event/112626/

## 概要
- 「初めてのLaravelで学習を始めるまでのお話」 [show60さん](https://twitter.com/show60)
- 「コンシューマ向けVue SPAでプロダクトを開発して得た知見。」[jiyuujinlabさん](https://twitter.com/jiyuujinlab)
- 「実運用におけるLaravelとNuxtでのRepositoryのレイヤ分割の話」[kon-shouさん]()
- 「VueのUIフレームワークをまとめました」[plumsaさん](https://twitter.com/plumsa)
- 「Testing on Laravel」[nunulkさん](https://twitter.com/nunulk)

参加者数は合計40名強いたので、結構な人気だった。
今回は株式会社オープンロジさんの協賛で実施していた。
https://www.openlogi.com/

オープンロジさんは物流のスタートアップ企業さんで、スタートアップとしては珍しい池袋にオフィスを構えている。
CTOの[五十嵐さん](https://twitter.com/migrs)が会のスタートを切ってくれた。

技術スタックとしては、Laravel、Vue.js、React、Nuxtを使っているらしく、新しい技術に投資している。

プロダクトの技術要件として疎結合と非同期処理を大事にしているそうで、
PHPでは、同期的な処理になりやすいところを非同期で実行できるようにこだわって実装したとのこと。


## 初めてのLaravelで学習を始めるまでのお話
https://speakerdeck.com/show60/chu-metefalselaraveldexue-xi-woshi-merumadefalseohua

show60さんは、プログラミングスクールで技術を学び、エンジニアに転向した一人。

プログラミングスクールで学ぶのと、実務でやるときの違いや大変さを中心に話していた。

MySQL8からユーザー認証方式が変わったことでversionに苦しめられた、という話はとても共感した。

印象的だったのは、
新しい言語やFWをやるとわからない単語、用語、知識にたくさん触れるが、
その時点では学ばなくてもいいものもある。
自分のその時の力量を見極めて、必要な知識を線引して吸収していくことが大事。
という話。

また、公式ドキュメントはやっぱり偉大だし、学習ツールもその時のレベルに応じて柔軟に切り替えたほうが学びのスピードと質があがるというのも納得だった。

## コンシューマ向けVue SPAでプロダクトを開発して得た知見
https://master.d1xmp1dbc0142d.amplifyapp.com/

発表者のjiyuujinlabさんは、今回のLTのために京都から来たそうで、Vue Kansaiの立ち上げとかを担っているすごい人。

スライドに細かい仕様は記載しているが、発表内のプロダクトの基本的な構成は以下。
Laravel, EB, S3/CloudFront

アプリケーションをどのように管理するかにこだわったらしい。特に以下2点。
・お知らせやガチャなどの動的な部分はresourceで管理し、分離
・Atomic Designを採用せず、View側に表示させるものはtemplatesとscreensに分け管理

時期やデプロイする環境に応じてルーティング周りを調整したりしたこともこだわりポイントのようだった。

## 実運用におけるLaravelとNuxtでのRepositoryのレイヤ分割の話
https://speakerdeck.com/konshou/shi-yun-yong-niokerularaveltonuxtdefalserepositoryfalsereiyafen-ge-falsehua

kon-shouさんの発表は、Laravel内でのレイヤー構造についてのお話。

フロントエンドにはNuxtを採択し、バックエンドはRepository経由で欲しいデータを返すようにしている。

Controller内でRepositoryを経由してデータを取得するような構成にしているが、
Laravel内でRepositoryクラスに仕事を色々やらせている実装にしたとのこと。
DBへのアクセス、Elastic Searchの利用, Micro Serviceへのアクセス、etc...

このようにRepostitoryクラスに仕事を集める（責務をもたせる）ことで、保守が楽になった。
ただし、最初のキャッチアップコストが大変で、新メンバーの立ち上がりに少しコストがかかるデメリットはあるとのこと。

## VueのUIフレームワークをまとめてみた
https://speakerdeck.com/fromarm4/popular-vue-dot-js-ui-frameworks-in-2019

この発表者のハトさんは今度開かれるLaravelカンファレンスに登壇予定で、プラムザさんでCTOを担っているバリバリな人だった。

Vueの人気のUIフレームワークを、GitHubスター数でランキング形式で発表されていた。
その時点でのランキングではElementUIが一番人気だった。

ハトさん的にはVuetifyを推していて、
Vuetifyのメリットは、コンポーネント数がElementUIよりも多いことで、大体揃っている。
また、ElementUIはレスポンシブ対応がいまいちだが、Vuetifyはすごくしっかりしているので、事業要件とも合っており採択したらしい。

続いて、社内の具体的な管理画面プロダクトにLaravelとVue.jsを採択したときの話をされていた。
こだわりはルーティング部分で、Laravelでメニューごとのルーティングをし、ページ内の階層ごとのルーティングはVue Routerにまかせている。
あとで詳しくお話を聞いたところ、認証以外のルーティングのレスポンス先を1ファイルに集約させ、
main.jsのようなコンポーネントの読み込みが詰まっているファイルをローディングし、
クライアントサイドにレスポンスが返るときには必要なパッケージがすべて使える状態にしているとのことで。

SPAならではの良さを活かして設計されているので、とても参考になった。

## Testing on Laravel
https://speakerdeck.com/nunulk/testing-on-laravel
nunulkさんは、フリーランスのエンジニアさんで、最近はテストコードだけ書く仕事も請け負っていたりも。
スタートアップのプロダクトでそれなりに成長してきたフェーズで頼まれることもあるそうで、フリーランスの仕事の種類も多くあるんだなと感じた。

個人的に最近はテストを書く大切さ、楽しさがわかってきたので目からウロコな話が多かった。
大事なことはすべてスライドに書いてあるので、個人的に印象に残ったところを抜粋。

・Assert系
sameは型までみる、equalは見ない

・DataProvider系
そのままテストケースになるから、仕様をぱっと把握することができる
→ 新しいメンバーが、テストコードを見るだけで仕様がわかるテストを目指そう

・defineでテストケースを定義する

・アノテーションテストをすることでシンプルなテストコードになる

## さいごに
全体的にとても温かい雰囲気の勉強会であった。
コミュニティ特有の身内感とかもあまりなく、初めて参加しても溶け込みやすい雰囲気であった。
内容も優しいものから凝ったところまでLTらしいLTで楽しかった。
また参加したい。