しゅんすの頭ん中

プログラミングのことだったり関係無いことだったり

【初参加】Laravel/Vue.js勉強会#8 オールスターズ に参加してきたのでレポート

目次

 

はじめに

どうも。最近、 LaraDock を新卒研修に取り組めたら面白いんじゃないかと試行錯誤するのにハマっているしゅんすです。

先日参加してきました奇跡の Conference と噂される Laravel  JP Conference (以下 LaraCon )に引き続き、 自分の中で PHP の機運が高まっているのと業務でも Vue.js を使う機会が出てきたのでこのビッグウェーブに乗ろうと、先輩が募集をかけていた Laravel/Vue.js勉強会#8 オールスターズ に参加してきました。

なんと既に第8回目で登壇企業枠は6社...(結構大きいな...)。人生初 LTという方から LaraCon 実行副委員長までという様々な方からの様々な観点での LT 大会でした。

その様子をレポートにしましたのでご査収ください。

LTレポート

■ グローバルstoreを利用する際はMixinではなくPlugin使った方がいいんじゃないか?説

株式会社レアジョブ様【田原 一樹 さん】

内容は、Vue.js の Mixin利用する上での注意代替案についてのお話でした。

「別コンポーネントから特定の機能を使いたい時」にぶつかる壁について考えた内容で、Mixin 一択よりも良い手段は他にどんなものがあるんだろうと考えさせられました。

 Mixin と今回代替案として紹介された store の plugin 化、それぞれメリットデメリットがあり、ケースによって使い分ける手段もあるんだということを学べました。

感想

定義や記法が不明瞭になりやすく、運用で使うのは確かにテクニックがいると思いました。ルールをしっかりつくっていくべき何だろうけどどうつくっていくのがベスト何だろう...。

■ Laravelを本番環境にデプロイするまで

株式会社うるる様【@yukure3 さん】

内容は、LaraDock を用いて開発環境の立ち上げから本番へのデプロイ→ 運用方法についてお話してくださいました。

Laradock を使ったローカル環境構築の話や記事はよくある中、本番リリースから運用フェーズの知見についてはなかなか少なかったりするので結構需要のある発表だったと思います。AWS の Elastic Beanstalk の使い方についてまだまだ甘々だったので勉強になりました。

感想

「キタ!LaraDock!!」と思ったのと、社会人1年目で人生初 LT と言いながらも感情を込めながら且つ淡々とわかりやすく話されていて「自分ももうちょい頑張ろうな」と戒められた良い LT でした。

■ SPAリリース後の問題とその対策

株式会社ITプロパートナーズ様【@frostndays さん】

こちらめちゃくちゃ探したのですがスライドが見当たらなかったので、YouTube Live での中継からご覧ください(本 LT はココから)。

 

内容は、サービスを SPA にしたものの起きたいくつかの問題に対しての対策についてでした。

 問題は「画面の表示が遅い」「特定ページへの API が増える→ 遅くなる」の大きく2つ。Laravel 側, Nuxt 側 それぞれで工夫したことで改善に向かわせたそう。

Nuxt 側でページの表示データを取得する際に、fetch の一部記述を created に持っていくことでデータ取得のタイミングをズラしたり、複数のAPIを一本にまとめる共通の仕組みとしてサーバにリクエストを投げ、Laravel 側でそれらを一本のまま処理する為のエンドポイントを作成したりなどなど、それぞれのライフサイクルを完全に理解したからこそできる創意工夫たちでした。

感想

時間的制約があり、今回こういう対応になったらしいですが工夫する発想がそもそも凄いし、それを実行したのも凄い。モチベ頂いた。

■ アイスタイル特設サイトにおけるVue.jsの導入事例 

弊社【@kubotak_public さん】

www.slideshare.net

我らが先輩 kubotak さんの発表は、昨年行われた 「@cosmeBeauty Day のティザーサイト開発での辛みと解消の為に行ったこと」と「Vue.jsを導入してみたポイント」についてでした。

当日のスパイクアクセスに備えて全て AWS 上で運用したアーキテクチャや、何とも驚くディレクトリ構成をしていたり、中の社員でも知っている人が案外少ない事情など。そして、そんな構成にならざるを得ない状況下でもビルド時に gulp を採用したりして楽にしていたなど対応の話もありました。

Vue.js については Mixin を採用してみて処理を共通化を図っていたり、各デバイスへ向けたビルドで VueCLI (初めて知った)コマンドを使ってみたりなど... Vue.js を存分に活かした開発をしていたんだなぁということを今回知れました。

感想

AWS でメインに基盤をつくり、Vue.js を存分に活かしてページ単位からミクロな部分での手法を取り入れた開発をしていたんだなぁと初めて具体的に知れたし、めちゃくちゃナウい開発をしていてシンプルに楽しそうと思った。ティザーサイトならではの辛みが多めで大変そうだけど...。

■ Laravel Queueの運用管理

株式会社オープンロジ様【@migrs さん】

こちらもスライドが見当たらなかったので、YouTube Live での中継からご覧ください(本 LT はココから)。

 

内容は、コマンドクエリの責務分離(CQRS)についてのお話でした。 

オープンロジさんはほぼ全ての更新処理系を Queue で行っているらしく、そこで実感した「ジョブステータス管理が運用にどれだけ大事なのか」について話してくださりました。今回はその手段としてある Laravel ライブラリとして Laravel Horizon と Laravel Telescopeの紹介がありました。

  • Telescope
    リクエストからLaravelの中で起こる様々な情報(ジョブの中でのログやクエリ、ジョブの状態など)を一元的に見ることができる開発用のデベロッパーツール
  • Horizon
    本番運用用で扱うQueue のモニタリングツール(ジョブのスループットやランタイム、実行の失敗など)

ジョブ実行をすることで、スケーラブルな開発ができ、ジョブのログを残すことで監視もしやすいよね!という話で納得しかない。

感想

こんなに優秀なツールたちがいるのだから JobQueue やろうなと思ったけど、Telescope 使えるの Laravel 5.7からなのね...。

■ Monolith→MultiRepo→MonoRepoでのリポジトリ戦略 

株式会社 SCOUTER 様【@kotamat さん】

 内容は、Monolith→MultiRepo→MonoRepo と経緯していったリポジトリ開発の戦略の推移についてでした。サービスが大きくなるにつれて、「関連したユーザが多い中、重複コードも増えてきて扱いが大変になってきた」問題に対して、最終的に MonoRepo という手法で単一のリポジトリにまとめてみると幸せになることが結構あるよ、というお話でした。

感想 

むつかしいお話でしたが...MonoRepo がもたらすダイヤモンド関係の依存を解決したり、コード依存によるチーム間の境界が無くなったりするなどもたらすメリットは思いの外多く、とても良いなと思いました。結構有名企業も取り入れているらしく、それぞれどんな風に取り組んでいるのか知りたい。面白そうだし課題もまだまだ多い分野なのでこれからの開発手法の勉強の意味も込めてアンテナを張ってこうと思った。

懇親会

株式会社うるる様よりお酒等飲み物とオードブルを用意して頂きました。

ありがとうございました!

銀色のやつと男梅サワーで気持ちよくなりながら交流を楽しめました。業務後のお酒はすぐ回るからコスパ良いけど気をつけよ...笑

参加してみての感想

著者は Vue.js 何なら JS のズブ素人で、fetch() など Vue.js が SSR する際の挙動も知らず、ライフサイクルの理解もほぼ無いレベルでした(お恥ずかしい)。ですが、発表内容から「こんな実例があるのか」と知識の点を具体的に線にしやすくなるような視野を持つことができました。

今回初の参加でしたが、初見さんでも馴染みやすい空気感があり(初参加者も結構いらっしゃった)、「Laravel/Vue.js 勉強会」だけあって発表もバックエンドの知見から、フロント周りの知見まで横断的に聞けるのも良いところだなと思いました。広く Laravel/Vue.js の知見を得たい・アウトプットしたい方にとって打ってつけな場だと思います。 

また、今回やむを得なく後ろの席について登壇のスライドが見えにくい状況だったのですが YouTube Live で中継していた為、聴講する点では問題ありませんでした。素晴らしい配慮。

所感として全体的にある意味初めてな感覚が多い勉強会だったかもしれない。

最後に

今後、自分としても Laravel と Vue.js に触れる機会が多くなってくると思うので、次回以降は得た知見・体験をネタに発表側として参加してみたいと思いました。

運営の皆さん、当日参加者の皆さん、共有してくれた kubotak さんありがとうございました!