メドピア開発者ブログ

LTトップバッターはスマートバンクohbaryeさん（@ohbarye）。
スマートバンクさんはKaigi on Railsで3名もの方が登壇されていたのが記憶に新しいですが、プロポーザル採択のためにどんな活動をしたか、というテーマでお話しされていました。
どんなプロポーザルが通りやすいかという実践的な話から、プロポーザルを作る上でチームとしてはどんなサポートをしているか、なぜカンファレンス登壇の挑戦に力を入れているか、といった内容まであり、刺さった方も多いんじゃないでしょうか。
個人的には、「感情は伝染する」「情熱やモチベーションも伝染する」という言葉が印象に残っています。

LT② WebAuthnを使ったパスワードレス認証をRailsアプリケーションで実装する

二番手はメドピアの伊藤さん（@yuma_ito_bd）がRailsにおけるWebAuthnを使ったパスワードレス認証についてのLTを行いました。
Kaigi on Railsのセッションに触発されこのテーマを選んだそうです。
QRコードで実際にWebAuthnを体験するところから始まり、FIDOやパスキーといったパスワードレス認証に必要な前提知識の説明からWebAuthnの仕組み、Railsにおける具体的な実装例の説明まで、短い時間の中で非常に綺麗にまとまっている素晴らしいLTでした！
私も興味が湧いたので、Railsアプリで簡単なFIDO認証を試しに実装してみようと思いました。

LT③ こわくないフレームグラフ - Singedで始めるパフォーマンス改善

続いてのマイベスト横山さん（@_shrrk）のLTは、フレームグラフは怖くない！という内容のトークです。
パフォーマンス改善において、APMツール上には現れない、クエリ元となっているRubyのメソッドをフレームグラフというツールを使って可視化するためのノウハウについてお話しされていました。
フレームグラフのどういった要素に恐怖を感じやすいかを分解し、それぞれの要素に対しどんなアプローチができるか、複数選択肢があるgemをどう使い分けるかという詳細な説明が論理立てて説明され、比較的難しい内容でも理解しやすい説明になっていたんじゃないでしょうか。
導入方法の説明も実際のプロダクトでイメージが付きやすい内容で、パフォーマンス改善をする際は是非試してみたいツールの一つだなと感じました。

公募LT① Sidekiqのオブザーバビリティを向上させた話

shinkufencer.hateblo.jp speakerdeck.com

公募LTの一番手は、imaharuさん（@imaharuTech）によるSidekiqにおけるオブザーバビリティの向上についてのトークです。
Sidekiqにおけるにオブザーバビリティは、遅いジョブがどれか、ジョブが完了していない原因は何かを特定できる能力であり、それを実現するためにSidekiqのログに必要な情報を吐くように改善した、という内容でした。
エラーログにjidやジョブの状態をハッシュに詰め込んだSidekiq::Context.currentを出力することでこれらのオブザーバビリティを実現したとのことです。

公募LT② Kaigi on Rails 2023 〜運営の裏側〜

続いては寺井さん（@krpk1900_dev）によるKaigi on Rails 2023の運営の裏側についてのトークです。
時系列で今回のKaigi on Rails 2023の開催に向けて2022年11月から何をやってきたかを事細かに語っていただけました。
本業が終わった後に20時から23時までミーティングをやっていたこと、2024年の会場を23年の3月時点で始めていること、スポンサー抽選にRubyのshuffleメソッドを使っていること、115件ものCFPを19時間かけて見たことなど、へぇ〜な話から衝撃的な話まで聞けて非常に面白い内容でした。
そして何より運営の大変さが伝わって来て、本当にたくさんの人の大きな労力で成り立っているイベントなんだなと思いました。
そんな運営が大変な中でKaigi on Railsに登壇もされて、直後の勉強会でも登壇されて、今回のアフターイベントでも登壇された寺井さんのすごさが際立つLTでもありました。

公募LT③ 無用な認知負荷を減らしてお手入れしやすいコードを書こう

最後の公募LTは、しんくうさん（@shinkuFencer）による認知負荷に関するトークです。人間には長期記憶と短期記憶があり、短期記憶を長期記憶に効率良く移すにはどんな認知負荷の種類があり、どんな負荷を減らすべきかという話から始まり、プログラミングにおいて保守性の高いコードがどんなものかを考える上でのヒントになる、という内容でした。しんくうさんの説明では課題外在性負荷、つまり本質的ではない本来は不要な負荷を取り除くことが重要で、コードで言うとlinterや分かりやすい命名を使おうねという話に繋がるものでした。ある程度経験があるエンジニアであれば感覚的に理解していることかもしれませんが、初学者の理解を助けることもできる普遍的な内容と言えるLTだったのではないでしょうか。

懇親会

LTの後は懇親会が行われました！
LTの終盤、お腹が空き始める時間に続々とピザが届き、そわそわしていた方も多いんじゃないでしょうか。
マイベストさんからはCTO選りすぐりの日本酒をご提供いただきました。ありがとうございます！
各所ではKaigi on Railsや各社のプロダクト開発についてなど、技術的な話を中心に大きな盛り上がりを見せていました。
懇親会は1時間半ほど行われ、皆さん名残惜しい中お開きとなりました。
後片付けも参加者の皆様にご協力いただきスムーズに終えることができました。この場を借りてお礼を申し上げます！

おわりに

アフターイベント、楽しんでいただけましたでしょうか？
登壇者の皆さん、スマートバンクさん、マイベストさん、ありがとうございました。
RubyやRailsのコミュニティは大きくて強い繋がりで結ばれているな、と感じることができるイベントになったかなと思います。
また次のイベントで皆さんにお会いできる日を楽しみにしております！

メドピアでは一緒に働く仲間を募集しています。
少しでも当社に興味が湧いた方は、ぜひ下記をご覧いただければと思います。ご応募をお待ちしております！

■募集ポジションはこちら medpeer.co.jp

■エンジニア紹介ページはこちら engineer.medpeer.co.jp

■メドピア公式YouTube　 www.youtube.com

■メドピア公式note style.medpeer.co.jp

是非読者になってください！

2023-11-15

Daniel Roe から学ぶ！Nuxt ワークショップ参加レポート

Vue Nuxt

こんにちは、フロントエンドサウナーの土屋 (@tutti2612) です。
フロントエンドサウナーとは、サウナの UI/UX にこだわるサウナ好きのことです。今考えました。
サウナ室、水風呂、外気浴スペースの動線がスムーズなサウナはポイント高いです。

先日、日本で唯一の Nuxt 公式パートナーである NuxtLabs Japan が主催する Nuxt ワークショップに参加してきたので、その様子をレポートしたいと思います。

ワークショップの概要
会場の雰囲気
ワークショップの内容
懇親会の様子
おわりに

ワークショップの概要

このワークショップは、Nuxt コアチームのテックリードである Daniel Roe さんが講師を務めるというなんとも贅沢なワークショップです。
さらに、NuxtLabs Japan のエキスパートの方々もワークショップのサポート役として参加してくれていました。

開催日時: 2023年10月25日(水) 13:30～ 18:30
開催場所: コワーキングスペース茅場町 Co-Edo

イベントの詳細は以下のページをご確認ください。
https://zenadvisor.io/nuxtlabs-japan/workshop

会場の雰囲気

ワークショップは、コワーキングスペース茅場町 Co-Edo で開催されました。親しみやすい雰囲気の中、Daniel さんに直筆のサインを書いてもらったり、記念撮影をしたり、参加者とスタッフとの距離の近さが感じられました。

さらに、サプライズゲストとして、Nuxt コアチームの Harlan Wilton さんが登場し、ワークショップを盛り上げてくれました。

ワークショップの内容

ワークショップは Daniel さんがデモを交えながら Nuxt の機能についてわかりやすく解説するという形式で進みました。
内容は Nuxt と Nitro の二つに大きく分けられ、以下のような特徴的な機能が紹介されました。

Nuxt
- Volar
- Routing
- Nuxt DevTools
- Middleware
- Layout
- client.js, server.js
- useNuxtApp
- definePageMeta
- Nuxt Image
- Nuxtr
- useAppConfig
- Nuxt Layers
- runtimeConfig
- useState
Nitro
- useFetch
- SWR
- useStorage
- Plugins
- useSession

Nuxt3 の目玉機能から Nuxt エキスパートの方でも知らないような細かい機能まで丁寧に紹介してくれました。

この中でも、私は特に「Nuxt DevTools」に興味を持ちました。

Nuxt DevTools は Nuxt コアチームメンバーの Anthony Fu さんが中心となって開発している、Nuxt アプリケーションの構造を視覚的に理解することができるツールです。
詳しくは彼のブログ記事を見ていただけるとイメージが掴めると思います。

私が特に有用だと思った機能は、「コードジャンプ」機能と「Inspect」機能です。
Nuxt DevTools を使えば、ブラウザ上でコンポーネントをクリックすることで、そのコンポーネントのソースコードに素早くアクセスすることができます。
Inspect 機能は、Nuxt デフォルトのバンドリングツールである Vite が SFC（シングルファイルコンポーネント）をどのように処理しているのかをステップバイステップで確認できる機能です。
Inspect 機能のデモが行われたとき、参加者からは「おおー！」という感嘆の声が上がっていました。

Nuxt DevTools の一通りの機能は、公式の Playground で体験することができます。興味のある方はぜひ、試してみてはいかがでしょうか。

全編英語で進行されたワークショップでは、適宜通訳の方が Daniel さんの言葉を日本語に翻訳してくれたため、言語の壁を感じることなく内容を理解することができました。
参加者はワークショップ専用の GitHub リポジトリを通じて質問を投稿し、機能解説の合間に Daniel さんがそれに答えてくれました。質問は英語でも日本語でも受け付けていたのがありがたかったです。

機能紹介の後、ワークショップの締めとして、Nuxt と Supabase を使用した TODO アプリの作成に挑戦しました。Daniel さんと共に作業を進めることで、彼の卓越したタイピング速度とツール操作を間近で学ぶことができ、ツールの習熟度がいかに生産性に寄与するかを実感しました。

懇親会の様子

ワークショップの後は、懇親会が開催され、参加者は Daniel さんや Nuxt エキスパートたちと気軽に交流できました。Daniel さんからはまだ一般には公開されていない情報も聞くことができ、大変有意義な時間となりました。

おわりに

直接、著名なライブラリの作者と話ができる機会は、格別の学びがあると感じました。彼らの言葉は一次情報としての価値を持ちます。
日本において、国際的なエンジニアと交流できる機会は限られているため、今後もこのようなイベントには積極的に参加していきたいと考えています。

メドピアでは一緒に働く仲間を募集しています。ご応募をお待ちしております！

■募集ポジションはこちら medpeer.co.jp

■エンジニア紹介ページはこちら engineer.medpeer.co.jp

■メドピア公式YouTube　 www.youtube.com

■メドピア公式note
style.medpeer.co.jp

2023-11-10

Vue Fes Japan 2023 After Meetupを開催しました！

フロントエンド

この画像は「Vue Fes Japan 2023 After Meetup」というイベントのバナーです。

MedPeerの開発をしている栗崎 (Ryohei Kurisaki (@0ryo0ryo) / X )です。

11月7日(火)に弊社オフィスにて、MNTSQ株式会社、株式会社hacomonoと３社合同でVue Fes Japan 2023 After Meetup を開催しました。

5年ぶりのオフライン開催となった Vue Fes Japan 2023の感想や思い出を語り合いました。

セッションのハイライト

メインセッション

Vue Fes Japan 2023のオーガナイザーであるkazuponさんによる「Vue & Vite Rustify」のお話でした。

まずはViteの現状の課題についてお話されていました。

productionビルドが遅い
dev環境とproduction環境のbundleの一貫性がない

※ dev環境はesbuild, production環境はRollup

ViteはRollup互換のAPIを使用したRust製バンドラーRolldown*1をbytedance社のRspackチームと協力して開発を進めているそうです。

kazuponさんからはRolldownの構造についての解説や、webpackと比較したパフォーマンスの向上について話がありました。

また、Rust製のツールOXC について紹介されていました。

OXCはbytedance社のweb-infra-dev チームにより作成され、JavaScript、TypeScript向けのツールチェインになります。

Playgroundを始め、VSCodeの拡張機能も存在するそうです。

さらに、APIの提供もされており、今後もコミュニティとコラボし、より開発が進んでいくということでした。

終盤には、VSCode リポジトリを例にOXCを使ったLinterのが実行のデモされていました。

一瞬すぎて何が起きたのかわからない速さでLinterの実行が終わりびっくりしました!!

GitHubのREADMEにも記載があったので、私も手元でVSCodeリポジトリをcloneしLinterの実行をしてみました。 github.com

 $ npx oxlint@latest .

をディレクトリで実行すると、以下のような結果になりました。

Finished in 1.6s on 4560 files with 64 rules using 8 threads.
Found 1609 warnings and 0 error

1、2秒弱でリポジトリ内全てのソースコードの解析が終わりました(すごい!!)

ご紹介のあった、Rolldown、OXCを始め、すでに存在するvue-compiler等Rustを利用したツールが増えてきており、Rustの波がやってきているのを実感できました。

さらにエコシステムが強化され今後が楽しみだなと感じました。

LTの様子

「Vue Fes Japan を振り返る」　

トップバッターは弊社メドピアの岡澤さんの発表です。

Vue.jsクリニック*2で公開されていた質問とエキスパートの回答を聞き、過去のコンポーネント設計を振り返り、現在の考えをお話しされていました。

過去の失敗からの教訓

Pagesコンポーネントから書き始める
ファイル分割しすぎない
共通処理以外は外部ファイルにしない

個人的にはコンポーネント設計に悩ましく同様の課題を感じていたため、岡澤さんの発表、Vue.jsクリニックでのエキスパートの回答のように、まずはシンプルに始め、リファクタリングしやすい小さいコンポーネントを作ることを意識したいなと思いました。

「UI フレームワークから始めるアクセシビリティ」

続いては、MNTSQ株式会社の中島晃さんの発表でした。

Vue Fes Japan 2023での以下の2つのセッションを聞き、自身の関わるプロダクトに関するアクセシビリティの向き合い方についてお話しされていました。

アクセシビリティ対応を2つの具体的な方法で紹介されていました。

最低限の部分から対応
オリジナルのデザインシステムで対応する

2つの方法にはそれぞれメリット、デメリットがあり、どちらもハードルは低くないため、 a11y*3に対応したFW、ライブラリを選定することが大切だというお話でした。

また、必要に応じて、独自のデザインシステムを利用するのが良いということでした。

個人的に印象的だったのが、MNTSQさんのビジョン「すべての合意をフェアにする」とa11y対応をやる意義を関連づけ待ったなしで対応したというのが素敵だなと思いました。

「Nuxt2 -> 3 を戦っていくには」

最後は、株式会社hacomonoのみゅーとんさんの発表でした。

Vue Fes Japan 2023のセッションを聞き、どこの会社もバージョンアップに苦労しているんだなという感想とVue Fes Japan 2023で得た知見について話されていました。

具体的にはNuxt 3 化の方法の知見をお話されていました。

一気に乗り換える
Nuxt Bridge を導入
段階的に乗り換える

hacomonoさんは巨大リポジトリ、Nuxt Bridgeを使えない背景からもっともパワーのいる段階的に乗り換える方法を取ったそうです。

iframeを使い、Nuxt 2 側のページを開くという方法は驚きでした！

似たような話を聞いたなと思っていたのですが、Vue Fes Japan 2023のランチセッションで弊社の小林さんがVue2から3へのマイグレーションについても似たような対応方法のまとめを話されていましたね。

（こちらも併せてご覧ください。）

パネルディスカッションの様子

kazuponさんとVue Fes Japan 2023のランチセッションで登壇された3名をパネリストに迎え、モデレーターをメドピアVPoTの平川さんが行いました。

登壇者のご紹介

メドピア株式会社: 小林さん
MNTSQ 株式会社: 安積さん
株式会社hacomono: みゅーとんさん

テーマ1.「Vue.jsコミュニティと企業の関わり方」

いくつか話されていた内容をご紹介します。

Q 企業側に求めていることはありますか？

kazuponさん「Vueコミュニティの支援、フルタイムのコミッターが少ないため、支援があると嬉しいです。」

Q Vue Fes Japan 2023の登壇のきっかけは？

小林さん「メドピアグループの多くのプロダクトでVueを使用しています。Vueを使っているため、報告とスポンサーシップをするのは当たり前の状態でした。」

安積さん「会社の認知度向上のために行っています。 v-tokyoのイベントをきっかけに関与しやすくなりました。」

Q 企業からコミュニティへの貢献についてのお考えはありますか？

みゅーとんさん「自分が主導して、会社内のGitHubにPublic Organizationを作成して、公開したりしています。」

安積さん「eslintとか自分達が使う場面が多い、ユーティリティ的な機能はOSSで公開したいと思っています。」

安積さん「自分達が作っているものがVueでできているんよというのも公開していくといいのではと思います！最近だとOpenAIのサイトもVueで作られているんですよ。」

小林さん「Apple 開発者向けのドキュメントページもVueで作られていますしね！」

kazuponさん「OSSではなくてもテックブログとかの記事公開することもコミュティへの貢献につながると思います。」

スポンサーで参加された企業だけでなく、個人スポンサーも行われていて、Vue Fes Japan 2023に参加して、多くの方がコミュニティへの貢献をされているなと思いました。

そして、このブログもコミュニティの貢献になったら嬉しいです 🙂

テーマ2.「WebFrontendを学んだ後のキャリアパス Now and Then」

時間が少しオーバーしてしまうほどの盛り上がりを見せたこちらのテーマについてもいくつかご紹介します。

Q WebFrontendを学んだ後のキャリアパスについてどうお考えですか？

安積さん「フロントエンドエンジニアを含む、エンジニアチームのスキルマップを作成しています。」

※ Xでも公開されていました。

フロントエンドエンジニアを含む、 #MNTSQ の技術陣のスキルマップ、まだまだWIPなんですが公開しちゃいます！#vuefes_after pic.twitter.com/AAyak1c7KM
— AZUMI.h (@cyber_snufkin) 2023年11月7日

安積さん「マインドマップの近しい部分から勉強してみて、領域を広げていくのが良いと思います。」

この後、登壇者の皆さんの過去の経験談がお話されました。

懐かしい技術と感じる方も多くいらっしゃったようで会場は沸いていました。

みゅーとんさん「好きなところを勉強していくのは大切だと思います。フロントエンドの見た目があって使い勝手の良さを追求できるのが好きです。それに加えて、開発者体験やデザイナーのデザインを再現できるのが良いと思います。」

小林さん「フロントエンドが好きで勉強を続けるのは大事です。私も中学生くらいからHP制作をしていまして、今も好きが高じてキャリアができています。」

個人的にはスキルマインドマップのお話がとても印象に残っております。

私自身、Ruby on Railsを使ったサーバサイドの開発がメイン業務ですが、業務の中でVueを使ったフロントエンドを始め、フロントエンドに興味を持ち、プライベートでは、Nuxt3を使ったアプリケーションなどを作成しています。

その時に、Ruby on Railsとの類似箇所や、接点になる部分などは、勉強もしやすく、理解しやすいことを痛感しました。

懇親会の様子

リアルイベントならでは懇親会の様子を写真を交えてご紹介します。

大量のピザとドリンクを手に交流を行いました。

メドベアチョコも作りました 🎉

登壇者を始め、多くの参加者と交流することができ、いい情報交換ができとても刺激的な時間になりました。

最後に

登壇者の皆さん、合同開催のMNTSQ株式会社、株式会社hacomonoの皆さんありがとうございました。

セッション、パネルディスカッションにもあったように、コミュニティとVueの関わりはとても強く、大切なものだなと感じました。

これからもVue、Nuxtのコミュニティが発展することを願っています。

来年のVue Fes Japanも楽しみにしています!!

メドピアでは一緒に働く仲間を募集しています。
ご応募をお待ちしております！

■募集ポジションはこちら

■エンジニア紹介ページはこちら

*1:現時点では、private repositryでの開発みたいです。

*2:Vue Fes Japan 2023で行われた、Vue.js に関して困っていること、素朴な疑問、ベストプラクティスなどをエキスパートに聞けるコーナー

*3:Web アクセシビリティの略語

2023-11-02

Vue Fes Japan 2023にゴールドスポンサーとして参加しました！#vuefes

フロントエンド

こんにちは、サーバーエンジニアの千葉です。

今回は日本最大級のVue.jsのカンファレンス「Vue Fes Japan 2023」に参加してきましたので、そのレポートをお届けしたいと思います。

私は今年が初参加でしたが、ブースやセッショントラックがいっぱいになるほどの盛り上がりを見せていました。

ゴールドスポンサーとして

メドピアは今年、ゴールドスポンサーとして協賛させていただきました。それに加え、セッションルームネーミングライツスポンサーやスペシャルランチスポンサーとしても協賛しました。

セッションルームネーミングライツスポンサー

セッションルームネーミングライツスポンサーでは「メドピアトラック」という名前のルームを開設し、満席で立ち席ができるほど多くの方に来場していただきました。

スペシャルランチスポンサー

スペシャルランチスポンサーでは、フロントエンドテックリーダーの小林さんが「Vue 2のEOLまで二ヶ月ですが進捗どうですか？」というタイトルで登壇しました。

Vue2 EOLの2023/12/31が迫る中、メドピアの各サービスがどのようにVue3へのmigrationにアプローチしているのかについて紹介しました。

まだVue2を使っているという参加者も多く見受けられたため、Vue3化への対応方針を考える上で参考になった方も多かったのではないでしょうか。

スポンサーブース

メドピアはスポンサーブースも出展し、多くの方がアルコールパッチテストを実施してくださいました。

お酒を飲める方が半数以上という結果となったので、アフターパーティでも安心してお酒を楽しめたはずですね👍

＼🎉アルコールパッチテスト集計結果発表🎉／

『飲める』68％
『弱い』21％
『飲めない』5%
という結果に！

いかがでしたか？
このあとのドリンクアップやアフターイベントも安全にお楽しみください🍺✨#vuefes #vuejs #エンジニア
🟢みどり🟢 https://t.co/64v0wv4Hdk
— メドピア採用担当みどり＆ひろこ (@MedPeer_R) October 28, 2023

セッションの様子

今回のVue Fes Japanでは34ものセッションが行われました。その中で私が聞いたセッションを3つほど紹介したいと思います。

Vue.jsを活用して開発リードタイムが1/3になった話

Vue.jsを活用して開発リードタイムが1/3になった話ではなく、価値を生む技術提案についてのセッションです。（登壇者曰く、急遽話したいことが変わったらしい）

提案の質がソフトウェア改善の成功要因になるということを、自身の経験則を元に話していただきました。開発内容ではなく、開発前の提案に関するプレゼンを聞くことは初めてだったため、とても新鮮で勉強になるセッションでした。

Vueを使ってGrid Systemを実装した話

Vue.jsを使ってGrid Systemをライブコーディングするセッションです。

Grid Systemの実装はmedia queryにおける仕様上の問題もあり、上手く実装・運用できないことが多々あるため、セッションとして話すことにしたそうです。

個人的には業務でGrid Systemを使った実装を行い、苦戦したという背景があったのでとても参考になった回でした。

18営業日で350コンポーネント規模のVueアプリにデザインシステムを導入する方法

18営業日で350コンポーネント規模のVueアプリにデザインシステムを導入する方法や知見を共有するセッションです。

技術的知見

AST を使用して事前にできる限り自動でマイグレーションした上で判別できない部分に全て TODO コメントを自動付与
ESLint のカスタムルールを実装してできる限りレビューは自動化
デザインシステムが壊れていないか確認するために VRT を実施
Autify による E2E テスト

プロジェクト管理上の知見

手作業は短期集中でタスクのスイッチングコストをゼロに
進捗は数値で管理
マニュアルテストを複数回実施してバグに対処
最後にデザイナーとペアプロで細かいデザインを修正

システム導入ではBig Bangリリース（一度に大きな変更を加えるリリース手法）を採用したとのことで、その知見を聞けたことは個人的に一番の収穫でした。

アフターパーティの様子

アフターパーティでは、Vue.js 日本ユーザーグループ代表のkazuponさんやNuxtコアメンバーのHarlanさんといったプロフェッショナルな方々とも交流することができました。

まとめ

文字通り「Fes = お祭り」のように大盛り上がりのカンファレンスでした。

個人的には業務でフロントエンドを触る機会があり、Vueに対する熱が高まったため参加しましたが、とても良い経験と機会になりました。

フロントエンド少し触っただけ、触ったことないけど興味がある程度でも、分かりやすいセッションとお祭りのような雰囲気を味わうことができるため、まだ参加したことがない方は来年参加してみてはいかがでしょうか。

最後に

2023年11月7日（火）にメドピア株式会社、MNTSQ 株式会社、及び株式会社 hacomono でVue Fes Japan 2023 After Meetupをメドピアオフィスでオフライン開催します。

Vue.js 日本ユーザーグループ代表のkazuponさんを特別ゲストとして迎え、セッションやパネルディスカッションといったコンテンツを用意しています。

こちらのイベントもご興味がある方はぜひご参加ください！

medpeer.connpass.com

メドピアでは一緒に働く仲間を募集しています。
ご応募をお待ちしております！

■募集ポジションはこちら

■エンジニア紹介ページはこちら

2023-10-31

Kaigi on Rails 2023 セッションレポート #kaigionrails

こんにちは！サーバーサイドエンジニアの近藤です。

Kaigi on Rails 2023 が、10月27日から10月28日にかけて開催されました。 2020年から続くKaigi on Railsですが、今年が初のオンライン&オフライン同時のハイブリット開催となります。メドピアはゴールドスポンサーとして協賛し、15名ほどのメンバーが現地で参加しました。

当記事では、現地で聴いたセッションのうち印象に残った発表をピックアップしてご紹介したいと思います。

Exceptional Rails

メドピアで技術顧問をしていただいている前島さんによるセッションです。 Railsにおいて例外をいかにして扱うか、というお話でした。

Railsコード中の例外処理ひとつ取っても、考えることは数多くあります。

いつ例外を発生させるか
発生した例外をいつどのようにrescueするのか
通知が必要な例外をどのように開発者に通知するのか
エラーページをユーザにどう表示するのか

エラーを扱う際のこれらの観点について、方針とその理由を身近な具体例を交えながら解説していました。

個人的に印象的だった話題は、外部サービス起因のエラーの通知についての話題です。エラーを通知するか否かについて

エラーが起きる状況を考えてみる
そのエラーが開発者側では対応できないこと（外部サービスの不具合など）が原因で起きるものであれば（即時の）通知はしない
- 対応できないエラーが来てもノイズになるため
- レベルをwarningなどに設定し、短期間に頻発するようであれば通知するのはあり

といった判断基準を紹介しており、通知に対する考え方の面で学びになったお話でした。

全体的に、今後例外を扱う際にぜひ見返したくなるようなセッションでした。

Update Billion Records

レコード数が50~60億という巨大なテーブルに対してカラムを追加し埋める際に、なにを考えどのような手段を取ったかについてのお話です。

この巨大なテーブルを更新するにあたって、
「更新中にサービスを止めてはいけない」
「更新処理はいつでも中断・再開できなければならない」
などの要件がありました。

適切な更新手段を見つけるために、最初は既存手法の踏襲から始め、

（要件や現状の）整理 →（手段の）発案 → 検証

というサイクルを繰り返し、最終的にたどり着いた手段は「更新対象をqueueで管理し非同期jobで少しずつ更新する」というものでした。

発表の後半で、スピーカーのtokutomiさんは今回の改修を次のように振り返っています。

最終的な構成も参考になるものでしたが、それと同じくらい、最終的な構成に至るまでの改善プロセスも参考になる発表でした。

Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術

弊社エンジニアの草分さんが「Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術」というタイトルで登壇しました。

[草分さん]「Hotwireという名前をご存知でしょうか？」

[会場] 「👏 👏 」

[草分さん]「では、Hotwireを本番環境等でちゃんと使っていましたでしょうか？」

[会場] 「......」

[草分さん]「🤯」

という笑い溢れる導入から始まったこのセッションは、なにかと避けられがちなHotwireを実プロダクトで採用した話と、その際にどのようにHotwireを使い時短を実現したかについての発表でした。

タイトルにもある「時短」について、

create (= フォームのsubmit) 前の確認画面
フォームの動的切り替え

という2つの状況を例に、 Hotwireを使った時短実装術をデモと共に紹介していました。

確認画面をモーダルで出すことでユーザー入力の再描画処理を省けたり、 Hotwireを使うことでリッチなUIもお手軽に実装できたとのことです。

Hotwireをオススメできる状況として

画面側がHotwireで十分実現できるとき
社内向けの管理画面
バックエンドエンジニアが多いプロジェクト

を挙げており、実際にヤクチエの開発で採用した実例も紹介していました。

スライドの所々に小ネタが散りばめられており、会場から笑い声が絶えないセッションでした。

32個のPRでリリースした依存度の高いコアなモデルの安全な弄り方

既存システムを動かしたままREAD/WRITEの多いテーブルのカラムを置き換えるために、MySQLのオンラインDDL機能（ロックを取得せずにマイグレーションを行える機能）を利用したお話です。

一言で「オンラインDDL機能を利用」といっても、考慮すべき点は数多くあります。

たとえばオンラインDDLそのものに対する注意点として、

本来はオンラインDDLの対象になる操作であっても、場合によってはそうならない場合がある
オンラインDDLは一部の期間でメタデータロックというロックを取得するため、ロックを取る他の処理の確認が必要

などの注意点を紹介していました。

また、リリースフローに関する注意として、コンテナを用いてBlue/Greenデプロイをしているような環境では、
「マイグレーションの完了タイミング」と
「コンテナの入れ替わりタイミング」にずれが生じてしまいます。

これにより、古いアプリが新しいデータベースを見に行ってしまう状況が発生するため、単純に「カラム名の変更」をするのではなく「カラムの追加 → 役割の置き換え → 古いカラムの削除」という手順を踏んでリリースしたとのことです。

実際のリリースでは下図のような段階的な対応を行ったとのことで、このリリースに万全の体制で臨んだことが伺えます。

現在私が携わっているプロダクトでも大きなテーブルのマイグレーションには苦しんでおり、オンラインDDLの注意点や段階的なリリース手法など、ぜひ今後の参考にしたいセッションでした。

おわりに

全体的なセッションの傾向として、実際のプロダクト開発に関連する内容のものが多くを占めており、 drinkupや懇親会の会場でもプロダクト開発の話題が数多く飛び交っていたように思えます。 Kaigi on Railsを軸にして、Railsまわりの知見の交換が行われているのを感じました。

今回のイベントで得た知見を、私も日々のプロダクト開発に活かしたいなと思いました。 Kaigi on Railsへの参加は初めてだったのですが、とても充実した2日間でした！

Afterイベントやります！

connpass.com

11/9（木）の19時から、メドピア株式会社、株式会社スマートバンクさん、株式会社マイベストさんの3社合同で、アフターイベント「After Kaigi on Rails LT Night」を行います。

各社から1名ずつのLTと公募によるLTが3つの、計6つのLTが行われる予定です。会場はメドピアのオフィスで、最寄り駅は東銀座駅となります。 RubyやRailsの関連技術について、食事とともにお話できる場になればなと思います。

ご興味ありましたら上記リンクからぜひご参加ください！

是非読者になってください！

メドピアでは一緒に働く仲間を募集しています。
ご応募をお待ちしております！

■募集ポジションはこちら

■エンジニア紹介ページはこちら

2023-10-18

Vue 2 の EOL まで 2 ヶ月ですが進捗どうですか？～Vue Fes Japan 2023 ゴールドスポンサーとして登壇します～

フロントエンド

フロントエンドの小林和弘です。

遂にオフラインでの開催となった Vue Fes Japan 2023 が今月末に迫っています。
2019 年は台風、2020 年、2021 年は新型コロナウィルス感染症による開催見送り、去年は感染予防のためオンライン開催となっていました。
2018 年以来、実に 5 年ぶりのオフラインカンファレンスです（めでたい）🎉🎉🎉

メドピアは例年に引き続き Vue Fes Japan 2023 にゴールドスポンサーとして協賛しています。
（去年に引き続き、個人スポンサーもさせてもらいました）

その他にセッションルームネーミングライツスポンサー、スペシャルランチスポンサーとしても協賛しています。
タイムテーブル上の 4 つのトラックのうちのひとつが「メドピアトラック」という名前になっていて、さらにランチタイムでは「メドピアトラック」にてスペシャルランチセッションのお時間をいただいています。そこでは Vue3 の migration についてのお話をする予定です。

セッションの概要

メドピアではいくつもの医療系サービスを開発・運用しています。そのほとんどのサービスで Vue を使わせてもらっています。

Vue は Single File Component で双方向データバインディングができるため Multi Page Application で部分的にリッチな UI が簡単につくれたり、Nuxt を使って Single Page Application が構築できたりする非常に便利なフレームワークだと思っています。

その Vue ですが Vue2 が 2023 年 12 月 31 日に LTS が終了して EOL を迎えてしまいます。Nuxt2 も同日に EOL になります。
年始にも Vue の開発者の Evan You がブログのポストで EOL についてリマインドのアナウンスを行っていました。今年は Vue2 / Nuxt2 の migration に追われたプロジェクトがいくつもあると思います。

Vue Fes Japan 2023 のランチセッションでは、メドピアで利用している Vue2 / Nuxt2 の migration をどのようにして行っているのか紹介したいと思います。
migration 中のプロジェクト、migration を考えているプロジェクトの一助になれば幸いです。

ご興味がある方は、Vue Fes Japan 2023 のランチセッションに足を運んでみてください。

ブース出展について

会場ではブースも出展します。

ブースに足を運んでいただくと、お酒との相性をセルフチェックできる「アルコールパッチテスト」をお試しいただけます。アフターパーティーで飲酒される方はぜひ試してみてください🍻
「アルコールパッチテスト」をお試しいただいて、X（旧 Twitter）で結果投票に参加いただくと大きなオリジナルバッグがもらえます 👜

また、メドピアのノベルティグッズも配布する予定です。
LINE スタンプにもなっているメドピア公式キャラクター「メドベア」がプリントされたかわいいノベルティグッズです。ご興味がある方は会場でゲットしてみてください。

アフターイベントについて

Vue Fes Japan 2023 の 2 週間後、2023 年 11 月 7 日（火）にメドピア株式会社、MNTSQ 株式会社、及び株式会社 hacomono で Vue Fes Japan 2023 After Meetup を開催します。
Vue.js 日本ユーザーグループ代表の kazupon さんを特別ゲストとして迎え、セッションやパネルディスカッションを行います。

Vue Fes Japan 2023 と同じく、アフターイベントもオフライン開催を予定しています。
会場はメドピアのオフィスで、最寄り駅は東銀座駅になっています。

medpeer.connpass.com

こちらのイベントもご興味がある方はぜひ参加してみてください。

是非読者になってください！

メドピアでは一緒に働く仲間を募集しています。
ご応募をお待ちしております！

■募集ポジションはこちら

■エンジニア紹介ページはこちら

参考: https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-Evidently-segments.html

2023-10-06

A/BテストツールとしてCloudWatch Evidentlyを導入してみた

サーバーサイドエンジニアの熊木（@k_kumaki_）です。

先日、私が担当しているヤクメドにA/BテストツールとしてAWSのサービスであるCloudWatch Evidentlyを導入したので、その経緯や内容についてまとめます。

CloudWatch Evidentlyとは

AWS上でA/Bテストやフィーチャーフラグの管理ができるサービスです。比較的新しいサービスのため、馴染みのない方も多いかもしれません。

aws.amazon.com

導入に至った経緯

私が開発しているサービスであるヤクメドでは、UX向上のためA/Bテストを実施しています。

そのA/Bテストツールとして、Google Optimizeを使用していましたが、この度2023年9月30日をもってサポートが終了することが発表されました。そのため、A/Bテストの代替案を探す必要がありました。

導入理由

一番の理由は低価格であることです。 CloudWatch EvidentlyではEvidentlyイベントとEvidently分析ユニットに基づいて課金が発生する仕組みになっています。これをもとに料金を試算すると、他のサービスに比べてかなり低額でA/Bテストを実施できるためCloudWatch Evidentlyを採用することとしました。

docs.aws.amazon.com

導入方法

1. プロジェクトの作成

ここではプロジェクト名と説明を設定するのみです。また、データストアとしてS3かCloudWatch Logsが選択できるので、今回はS3を選択しました。発生したイベントをデータストアに保存して、他のサービスと組み合わせることでより柔軟な分析が可能になります。

ヤクメドではTerraformでAWSリソースの管理をしており、以下のコードで作成しました。

resource "aws_evidently_project" "evidently" {
  name        = "${local.prefix}-evidently"
  description = "${local.prefix}-evidently"

  data_delivery {
    s3_destination {
      bucket = aws_s3_bucket.evidently_logs.id
      prefix = "${local.prefix}-evidently"
    }
  }

  tags = {
    Name = "${local.prefix}-evidently"
  }

  depends_on = [aws_s3_bucket_policy.evidently_logs]
}

2. 機能の追加

次に作成したプロジェクトに機能を追加します。どういった分岐をするか、ユーザートラフィックを何％ずつ割り振るかなどの設定を行います。

3. アプリ側の対応

ヤクメドではバックエンドはRailsで書かれているため、CloudWatch EvidentlyのSDKを導入しました。

docs.aws.amazon.com

どこからでも使用できるA/Bテスト用のモジュールを作成し、以下のようなリクエストをCloudWatch Evidentlyに送信します。

evidently_client.evaluate_feature(
  {
    entity_id: entity_id, # ユーザーを特定する一意のID
    feature: feature, # 設定した機能名
    project: project, # 設定したプロジェクト名
  }
)

レスポンスとして、以下のような形式で返ってきます。今回は機能でブール値を設定したためvalueとしてbool_value が返却されており、これをもとにアプリ内で分岐をさせることができます。

#<struct Aws::CloudWatchEvidently::Types::EvaluateFeatureResponse
 details="{}",
 reason="DEFAULT",
 value=#<struct Aws::CloudWatchEvidently::Types::VariableValue::BoolValue bool_value=true, double_value=nil, long_value=nil, string_value=nil, unknown=nil>,
 variation="LP">

よかった点

自分で細かな定義が可能

アプリ側で設定している情報に対して細かく制御が可能
- 例えば、特定の地域のユーザーやChromeを使用しているユーザーなど細かく分けられます

導入が簡単

この記事にも書いた通り、元々AWSを使っているサービスであればかなり簡単に導入することが可能です

終わりに

今回は、シンプルな構成での導入をご紹介しました。

CloudWatch Evidentlyを導入してみてまだ数週間ですが、Google Optimizeと遜色なくA/Bテストを行うことができています。この記事が、A/Bテストツールでお悩み中の方の参考になれば幸いです。

是非読者になってください！

メドピアでは一緒に働く仲間を募集しています。
ご応募をお待ちしております！

■募集ポジションはこちら

■エンジニア紹介ページはこちら