BATONZ Tech Blog

M&Aプラットフォーム運営の株式会社バトンズによる技術ブログです。

【Vue Fes Japan 2024】Vueに恩返し:7年お世話になっているのでボランティアにいきました

まぁ、恩返しどころか恩恵を授かって帰ってきましたけれども!!

初めまして。株式会社バトンズの土屋と申します。 バトンズには2024年7月から参画させていただいております。前職はフロントエンド系フリーランスエンジニアです。

先日、Vue Fes Japan 2024のボランティアへ行ってきまして、終始とても楽しく、学びあり刺激あり笑いありの1日を過ごせましたので、執筆させていただきます。

Vue Fesの様子や、得た知見・感想など書いています。 本稿を通して、Vueに関わる人が増え、世のプロダクトもVue自体もよりよくなっていく一助になればと思います。

ネームカードを下げていました

ボランティア参戦の経緯

入社して早々、エンジニア雑談チャンネルにこんな投稿がありました。

思い返せば私は、2017年頃からフロントエンドエンジニアの道を志し、Vueのお世話になってきました。 バトンズに入社できたのもVueプロジェクトの構築経験のおかげです。

これはVueに恩返しできるチャンスと思い、すぐさまボランティアに応募してみました。

当社のカジュアルな情報共有文化のありがたさを感じました。

Vue Fes Japan 2024当日のお話

事前打ち合わせから誘導の任務を仰せつかっていました。午前は来場者を2Fの受付へ進めたり、午後は参加者にクリエイティブウォールにて寄せ書きを勧めたり写真撮影をしていました。配置は希望がなければランダムです。

クリエイティブウォールで想いや宣伝を

Vue Fes では、トーク系の枠以外に、タトゥーシールやクリエイティブウォール、アフターパーティといった催しがあります。

Vue Fes タトゥー&ネイル

初期状態のクリエイティブウォール

みなさん、やはり真面目なのか企業ロゴや手堅いコメントが多く、整列された横書きになりがちではありましたが、優しいので「描いてください」というと基本的に描いてくれました。

何度も描かされてる人もいました。

イベント後のクリエイティブウォール

スポンサーブースでは楽しい企画やお話も

常時、スポンサーブースとして18の企業が魅力的な展示を行なっていました。

  • コードレビューしたらくじが引ける
  • 話を聞いたらサウナハットがもらえる
  • Vueへの想いを書いて貼る(Vue3への苦労が最多)
  • 生成AIで作られたコードで好きなものを選ぶ
  • 他多数

企画として面白い上に、これらをキッカケに、サービスだけでなく実装やデザインシステムの話を聞かせていただくことまでできました。

建設業向けサービスを複数提供する株式会社アンドパッドさんは、独自にStorybookベースのデザインシステムを構築し、VueだけでなくReactもplaygroundを用意していてお見事でした。 デザインシステム専任が1名いることまで教えていただきました。

ボランティアの合間に視聴したセッションのご紹介

Vue Fes Japanはボランティアにも温かく、よしなに交代してイベント視聴をすることができます。

私も4つほど試聴させていただいたので、感想を添えて一部をご紹介します。

VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~

Vue Fes Japanプラチナスポンサーでもある弁護士ドットコムさんの登壇です。

speakerdeck.com

コンポーネントが200を超え、複数プロダクトに横展開する必要性、チームの拡大などからデザインシステムの責務分離を図ることに至ったとのことでした。

どうしてもプロダクト実装とデザイン実装の二重メンテの二度手間感も生じるものですが、この形の整理はキレイでいいと思いました。

実装の後追いでデザインシステムを整備する場面でもコンフリクトや負荷が低減される気がします。

IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み

つづいて、Vue Fes Japanプラチナスポンサーのフューチャーアーキテクト株式会社さんのスピーチ。

実は私の新卒入社の会社でして、まさに新人研修を受けたので当時の思い出も振り返りながらの視聴でした。 speakerdeck.com

印象的だったのは、IT基礎パートとペア・ワークパートに大まかに分かれていて、IT基礎パートでは教えない時間の方が長いということでした。 教科書と課題を渡し、質問とレビューで個人で進めてアウトプットをみて進捗を把握。進捗度合いに合わせ、早期卒業・研修延長もあり得るとのことです。

その後、仮想プロジェクトで先輩社員とペアワークを通し、現場感のある業務体験から技術だけでなくプロジェクト進行も学ぶ形式です。

まさにITコンサルの一気通貫を研修でも実現されていました。学生時代に慣れているであろう、インプット主体の学習からの脱却も促される仕組みです。

普通のエンジニアが頑張って30万行のNuxt3移行した話

Vue2からのプロジェクトがみんな苦労したVue3移行のお話を、yappliのこんさんにしていただきました。

33万行、1400コンポーネントあるVueプロジェクトを移行するという想像したくもない過酷な偉業のお話です。

ググっても出ない、SentryとNuxtの組み合わせで生じていた謎バグを突き止めて解消する物語をわかりやすく丁寧にお話してくださいました。(8.32.0以降では解消済み) speakerdeck.com

課題克服のための忍耐力・精神力の話には勇気をもらいました。ありがとうございます。

Vue3の一歩踏み込んだパフォーマンスチューニング2024

SBI日本少額短期保険株式会社のHalさんによるパフォーマンスのお話。

Vue2でできること、Vue3でさらにできるようになったことも整理しつつ、コードレベルで具体的な解説もいただきました。

speakerdeck.com

パフォーマンスチューニングというと、バックエンドやDB(SQL)の改善の印象が強かったので、大変学びになりました。

初期表示に30秒かかっていたのが6秒に短縮した成果も含め、感動的です。

全体を通した感想

Vue Fes Japanでは、アフターパーティはもちろん、ブース、ボランティア同士の雑談などでVueにまつわる経験談が共有できて、新鮮な気持ちでした。v-modelのことが好きな人も嫌いな人も混在しています。

日々、技術的な課題に直面したり、心が折れそうになったときには、インターネットに相談しているのではないでしょうか。

Vue Fes Japanでは、具体的な技術的知見から、課題を乗り越えるための忍耐力までを見ることができ、勇気づけられましたので、こういったオフラインの場に触れるのはいいなあと感じました。

余談ですが、私が新人の頃に研修リーダーをしてくれた先輩とも奇跡の再会を果たしました。 縁がつながっていく場でもあります。

さいごに

ということで、恩返しどころか、また恩恵を授かって帰って参りました。また来年も参加したいです!もしこれをお読みになってVue Fes 2025に参加されることになれば、土屋を見かける可能性があります。

その時にはぜひお声がけください。

株式会社バトンズでは、デザインシステムの導入・整備など現在進行形ですので、美しいVueシステムの構築を通し、日本のM&Aプラットフォームを快適にしてくれる仲間を募集しております!