RAKSUL TechBlog

ラクスルグループのエンジニアが技術トピックを発信するブログです

【PLAID × ラクスル】Vue.js for 2020 イベント開催レポート

こんにちは。TVCM事業でフロントエンドを担当している堀です。

先日、ラクスルはPLAIDさんと合同でvue for 2020と題してVue.jsの合同勉強会を主催しました!

フロントエンドエンジニアのメンバーでイベントに参加してきましたので、その様子をレポートします。

今回のイベントでは上記の2社以外にもスポンサーとして出展していただき、通常の勉強会としてのLTセッションの時間とスポンサーブースめぐりの時間を設けて、来場された約100名の方と交流することができました。

会場提供してくださったPLAIDさん、スポンサーをしてくださった技術評論社さん、ギフティさん、メドピアさん、モバイルファクトリーさん、ありがとうございます!

 

それでは早速、イベントの様子を振り返ってみましょう!

 

まずは会場から。会場はPLAIDさんのオフィス。イベントスペースは綺麗な人工芝が敷かれていて、とても開放的なスペースです。この芝に座ってLT聴くスタイルですね。

少し早めについたラクスルのメンバーは、ブースの準備を整え、イベント開始に備えます。

イベント開始前にブースを訪れてくれる方もおり、ラクスルのノベルティサービスを早くも体験していただけました。

ブースの詳細は後ほど見ていただくとして、ここからは、登壇された方々のLTを振り返っていきます!

 

Vue.js に支えられてきた KARTE の今までとこれから

1番目のLTは「Vue.js に支えられてきた KARTE の今までとこれから」というタイトルでお話いただきました。 PLAIDさんの運営するサービス、KARTEとVue.jsについてのお話をしていただきました。短い時間の中でしたが、海外展開を見据えたi18nの話、セキュリティ対策、開発スピードを上げていくために検討しているVue3.0、Composition APIの活用の話など、盛りだくさんの内容でした。今とても勢いのあるPLAIDさん、エンジニアも50名くらいの体制になってきたそうです。Googleさんからの資金調達を経て、さらに事業が加速されることを願っています!

 

条件に応じた状態管理方法の選択

2番目のLTは「条件に応じた状態管理方法の選択」というタイトルでお話いただきました。 Vuex、EventBus、Simple Store、Vue.observableなど色々あるけど、どれがどういう情報管理に適しているの?ということを、保守性、開発コスト、デバッグのしやすさなどの分類をご自身でまとめた内容となっています。

今回初めてLTをされたそうですが、開発経験4ヶ月でいきなり100人くらいの前で話すのは勇気がいりますよね。お疲れ様でした!

 

Vue CLI - Library Buildでハマった話

3番目のLTは我らが姜さん!「Vue CLI - Library Buildでハマった話」というタイトルでお話をしていただきました。 ラクスルで使っている技術スタックの紹介を簡単にした後に、今回取り組んでいたnpm package化をなぜ行おうと思ったか、そしてどのように取り組んだかということに言及。

Vue+Railsのアプリケーション、Nuxtのアプリケーションなど色々とあるアプリケーションの中に共通で使えるものを作ろうということですね。

Vue CLIにLibrary Buildができる機能を見つけて実行してみたものの、storeをモジュール化したり、typescriptで処理を書いたりする中でハマってしまったということをデモを見せながら説明してくれました。

vue-nextから始めるソースコードリーディング

4番目のLTは「vue-nextから始めるソースコードリーディング」というタイトルでのお話でした。 vue-nextのGithubのソースコード、いまならとても読みやすいから読んでみよう!という形でvue-nextの紹介をされていました。リポジトリの構成のシンプルさやファイル名とメソッド名が一致していること、テストコードがメソッドと対になっていることなどの理由で確かに読みやすそうです。少し眺めてみたことはあったのですが、これを機にしっかり読んでみたいと思います。

Vue 3.0 Composition API を利用した Store と Composables の違い

5番目のLTは「Vue 3.0 Composition API を利用した Store と Composables の違い」というタイトルでお話しいただきました。 Composition APIのDemoを見たときに感じた疑問がきっかけで、ご自身でコードを動かしながらComposablesとstoreの違いを探っていったというお話でした。

グローバルで参照するものはprovide/injectを使ってstoreへ入れて、そうでないものはComposablesへ入れるということを、具体的な例を話しながらシェアしてくださいました。わかりやすいLTありがとうございます!

 

ここで前半のLTが終わり、休憩時間を利用して、来場者のみなさんはスポンサーブース巡りの時間を楽しまれていました。

ラクスルのブースではボールペンや、ラクチュル(ハイチュウ)、ステッカーなどを用意してみなさんをお出迎え。

 

中でもノベルティサービスを使って、ボールペンに対して印字をする体験ができるコーナーにみなさん興味を持ってくださいました。

 

[caption id="attachment_4228" align="aligncenter" width="1024"] こちらがノベルティ印刷の発注用画面。 この画面ももちろんVue.jsで作られています。[/caption]

ブースにたくさんの方が遊びにきてくださり、休憩時間はあっという間に過ぎていってしまいました!

ここから休憩後に発表のあった、残り2つのLTについてもシェアしたいと思います。

 

Hack your Nuxt router!

6番目のLTは「Hack your Nuxt router!」というタイトルでのLTでした。 Nuxtの暗黙のrouterを使うのではなくて、vue-routerに喰わせるrotrer-objectとしてextractしてそれを使っていくというお話でした。metaプロパティの視認性が良くなったり、一括でtsオブジェクトとして管理することでtypescriptの型チェックができるというメリットがあるということが印象に残っています。router moduleを使った時のtipsも紹介されていて、簡単に自前のプロジェクトにいれられそうな方法も紹介されていました。

vue-function-testerを作ってみた話

7番目のLTは「vue-function-testerを作ってみた話」というタイトルでお話いただきました。 ご自身の「こんな感じでテストを書きたいな〜」という思いから実装されたとのこと。メソッドチェーンで書きたい、コードを短くしたい、$emitのモックを省略したい、といった特徴のあるテスト用のライブラリだそうです。世の中で使われている広くライブラリもこういった自分の疑問や不満から生まれることが多いので、私も見習っていきたいですね。

 

TypeScript CompilerAPI によるVuexの参照型生成

LTが終わり、最後はtakepepeさんこと吉井さんのセッション。 今回は「TypeScript CompilerAPI によるVuexの参照型生成」というタイトルでのお話でした。

VuexとTypescriptはあまり相性が良くないと言われますが、「型の課題は型で解決する」ということができれば「ライブラリ・型システムの双方の良さ」が取り戻せるのではないか、という考えから作られたvue-guardianというライブラリの紹介。vuex-guardianはTypescript Compiler APIを内部に用いて、コンパイラが知り得ないエイリアスを作成し、欠落した型参照を生成するというものでVue.extend記法にも対応しているとのこと。セッション時間も長かったので、内部でどういった処理が行われているかということも含めてお話いただきました。詳細は資料を見ていただければと思いますが、Vue.jsとTypescriptで開発している人にとってはかなり価値の高いお話が聞けたと思います。

ちなみにこの発表のあと、弊社のLT枠で登壇していた姜さんが「あのライブラリ神じゃないっすか」とつぶやいていたのが印象的でした。笑

懇親会

皆さんのためになるLT、セッショントークが終わった後は懇親会。

懇親会はピザ、お寿司、冷凍みかん、チョコレートなど様々なものが提供されており、100名以上いた参加者全員、お腹いっぱい食べることができたのではないかと思います。スポンサー企業の皆さま、改めてありがとうございます!

私は偶然友人が来ており、友人と同じ会社で勤務している方を中心に話をしていたのですが、Vue.jsを普段使っている人、これから使いたいと思っている人、Reactを主に使っている人、様々なエンジニアの方と交流することができました。

私の場合、実は2019年がVue.js元年でしたので、2020年はもっとVue(とNuxt)の世界に浸かっていきたいと思っています。

以上、長くなってしまいましたがイベントレポートでした!