【イベントレポート】 Meguro.es#23 @ Wantedly, Inc

はじめに

2019年10月10日、ウォンテッドリー株式会社様のオフィスにて開催された Meguro.es#23 の参加レポートです。

Meguro.es では受付で名札を渡される他に自分の属性を表すシールを選んで貼ることができます。

これがあることで、懇親会で「 Vue やってるんですね、私は React をやっているのですが〜」みたいに会話が生まれやすいのでとても助かります。

また、輪になるときはスペースを空けてねという案内がありました。

今回も懇親会の時は、1人分のスペースの確保をお願いします。

物理的な入るスペースだけではなく、お気持ちもあわせてお願いします。 #meguroes pic.twitter.com/js2r9GK1XB

— Meguro.es (@meguroes) October 10, 2019

知り合いがいないと懇親会で1人になってしまうことはどうしても発生してしまうので、このような配慮が行き届いているのはとてもありがたいなと思いました。

ちなみにMeguro.esという名前ですが、会場は港区でした。前回は六本木でやっていました。ゆる〜い感じですね。

コンテンツ

Ma_gician （世界中のフロントエンダーの残業時間を減らす、新しい JavaScript フロントエンドフレームワーク）＜拡大版＞

発表者の @StewEucen さんが独自に開発している JavaScript フレームワークの紹介でした。

Twitterで開発状況などをつぶやいており、最近は勉強会で精力的に発表しているようです。

ちなみに Ma_gician というのは開発中のコードネームで、年内に正式 OSS として公開する予定で、そのときは別の名前になるようです。楽しみですね！

Apollo のキャッシュを理解する

Wantedly の @kbys_02 さんによる GraphQL のクライアントライブラリ Apollo Client のキャッシュについての解説でした。

私も最近 React Native の開発で使っているのですが、 Apollo Client はキャッシュと最適化の機能が強力でとても便利だと感じています。一方でデフォルトのキャッシュポリシーが cache-first となっておりキャッシュが見つかればネットワークリクエストを送信しないため、キャッシュがどうなっているかを理解することは必須です。

Twitter のタイムラインを見ていても分かりやすくて助かるという感想が多かったです！

GraphQL サーバーのスキーマファースト開発を半年経て

1つ前の発表に続いて Wantedly の @chloe463 さんによる GraphQL に関する登壇でした。 Wantedly さんの GraphQL への注力ぶりがわかりますね。

GraphQL 自体がリクエストの柔軟性があってフロントエンドと相性が良いというのもありますが、 Apollo Client v2 が登場した後のこの1年くらいで注目度が高まっている気がします。

Wantedly では BFF サーバーとして GraphQL サーバーを利用しているとのことでした。 BFF とは Backends For Frontends の略で、複数のバックエンドをフロントエンドから利用しやすい形として提供するための中間層です。
Nexus というライブラリを使ってまず TypeScript のコードでスキーマを宣言し、そこからGraphQLスキーマを生成しているというのが興味深かったです。これは私も調査してみようと思いました。

ライブで学ぶ The Elm Architecture

@y_taka_23 さんによる Elm 言語で提供される The Elm Architecture フレームワークの紹介でした。
私は、 Elm 言語は名前は聞いたことがありますが実際に動くコードを目にしたのは初めてでした。

The Elm Architecture では Model, Update, View という要素が登場しますが、これがほぼ React + Redux の Reducer, Action, Component に対応するので、すんなり理解できました。
（そもそもが Redux が Elm に影響されているらしいです）

BigQueryでprotobufをパースした話

Wantedly の @qnighy さんによる登壇でした。

BigQuery で複雑な処理を書きたいときは JavaScript でカスタムクエリを実装できるので、それを使って protobuf を無理やりパースしたという話でした。

なるほどわからんという感じでしたが、 JavaScript の裾野の広さを認識させられました。

Vue.js / Nuxt.js のグローバルエラーハンドリング実装

@nori3tsu さんによる、 エラー処理をカスタムエラークラスの実装とグローバルエラーハンドリングによって共通化するという話でした。

エラー処理は毎回書いているとコードが肥大化しますし、あちこちに書いてしまうと変更したいときに大変なので、できるだけ共通化したいですね。

window.addEventlistener('error', (event) => {
  // event.error でエラーインスタンス取得
}); 

window.addEventListener('unhandledrejection', (event) => {
  // event.reason でエラーインスタンス取得
});

これらの書き方は Vue.js じゃなくても使えるテクニックなので参考になりました。

まとめ

Meguro.es は回数を重ねていますが、配慮が行き届いており初参加の方に優しい勉強会で、それでいてレベルが高いという印象です。
およそ2ヶ月に1回開催されますので、近隣の方、興味を持った方は参加してみてはいかがでしょうか。

最後になりますが、 @fuya さんをはじめとする運営メンバーの方々は、いつもこのような場を提供していただきありがとうございます。機会があれば今後も参加させていただこうと思っています。