Stockmark Tech Blog

自然言語処理テクノロジーで社会を進化させる ストックマークのテックブログです。

トップ > Vue Fes Japan 2024 はとてもフェスだった！イベント参加レポート #vuefes

Vue Fes Japan 2024 はとてもフェスだった！イベント参加レポート #vuefes

ストックマーク技術広報・エンジニアの安藤( @ampersand_xyz )です。

2024/10/19（土）に開催されたVue Fes Japan 2024（以下 VueFes2024）に、ストックマークはゴールドスポンサーおよびネームカードスポンサーをさせていただきました。

本時期ではVueFes2024の参加レポートをお伝えさせていただきます。

Vue Fes Japan 2024とは

公式サイトのメッセージから引用しますが、

2018 年に誕生したこのカンファレンスは、文字通り Fes ＝お祭りのように Vue.js を共に盛り上げ、共に学び、そしてなによりも共に楽しむために誕生しました。

と銘打たれている、Vue.jsと周辺のエコシステムなどに関しての技術カンファレンスです。

このメッセージの通りのとても良いFesでした。

”とてもフェスだった”とは

記事のタイトルとして”とてもフェスだった”と入れさせていただきましたが、どういうことかというと、超クールなオープニングムービーから始まるイベント、グッズの物販、タトゥーシールなどのフェスあるある感もさることながら、参加者、運営、登壇者、すべての方々からVueやコミュニティに対する愛というか「好きな人が気持ちを込めてやっている」という雰囲気を強く感じました。

www.youtube.com

会場にいる あまねく一人ひとりから愛を感じるイベントをFesと表現せずになんと言いましょう。このイベントにスポンサーできたことを改めてありがたく思います。

自分もタトゥーシールを手の甲に貼ってもらってVue愛をアピール

クリエイティブウォールのメッセージもアツい

いろんなメッセージが書かれていますが、楽しんでいることや、Vue、イベントへ対する感謝や愛のメッセージが沢山あってとても素敵でした。

ストックマークもロゴとメッセージを描かせていただきました🐿️ TypeScript + Vueはいいぞ！

チームリードの @tsukkee がLTに登壇！

ストックマーク的なVueFes2024の激アツトピックとしては、チームリードの築谷（ @tsukkee ）のLTが採択されて登壇機会をいただいたことになります。

登壇時の様子

日常業務のコードレビューでもTypeScript警察として型の使い方のチェックに余念がない@tsukkeeのLTセッションでは、そもそもSFCがどのようなTypeScriptに変換されているのかという話を皮切りとして、template上でExhaustive checkを行う型チェックの活用方法についてが話されました。詳しい内容は登壇資料をご覧ください！

登壇資料

https://x.com/tsukkee/status/1847890005454111052

speakerdeck.com

LT会場では公式からのサイリウム配布

LTが行われていたVueトラック会場では、観覧の際に全員にサイリウムが配布され、盛り上がりどころやオーディエンスへの質問ででワーッっと振りかざすというスタイルが案内されていました。とてもフェスですね。

そして実は7月に行われたVue.js日本ユーザーグループによって開催されたコミュニティイベント、Vue.js v-tokyo Meetup #21 にて、LTではサイリウムが配られる、という情報が事前に共有されていた事も合わせ、あるアイテムを用意することにしました。

やるしかない、推しうちわ…！

上長を推すために人生ではじめて推しうちわを作成しました。フェスなので。

なお、登壇時の応援については見ている人のジャマにならないように最後列のほうで高く振り上げないよう慎ましくやらせていただきました。フェス慣れしていない…。

スポンサーについて

ストックマークで行ったスポンサーとその内容について紹介させてください。

スポンサーブースでのコンテンツ

自社の製品であるAnewsの紹介と、Vueでフロントエンドを型安全に開発をしています、という内容でご来場いただいた方にお話をさせていただきました。

また、11月から週次で行う予定のchibivue勉強会のご案内もさせていただきました。 沢山の方に勉強会へのご参加登録をいただきました、ご来場くださった皆様ありがとうございます（そしてこれからよろしくお願いいたします）。

コンビニプリントで実寸サイズ印刷を行うのは非常に難しいということがわかったので、こういったスタンドに案内を入れる場合は横幅縦幅に余裕を持ったデザインにすることがおすすめです（失敗例）。

chibivue作者の ubugeeeiさんのzennスクラップでも本取り組みについても取り上げていただきましたことや、コンテンツを使用しての勉強会の開催への快い許可など、篤くお礼申し上げます。本当にありがとうございます。

zenn.dev

他の企業の方々のスポンサーブースも面白いコンテンツがとても多かったです。

StudistさんのVueのガチめのクイズ（半分しか正解できなかった…！）や、MedPeerさんの握力の計測ランキング（みんなキーボード叩いている業務を普段している割に強い）、転職ドラフトさんの転職者の希望年収分布という気になる情報や、弁護士ドットコムさんはVueでわかる（！？）性格診断、Storesさんのコードレビューコメントを行うようなパネルコンテンツや、OPTiMさんのお米の展示と合わせてVue周辺のOSSのコードの一部を見てguessするスゴイ手の込んだクイズなど…。

他にも盛りだくさんで、すべて書くとキリがないんですが、全力で楽しみすぎていてウッカリ写真を全然撮っていなかったことが悔やまれます…！

ネームカード

VueFesでは事前にネームカードのアイコン情報を登録しておくと、当日自分のアイコンが印刷されたネームカードが配布されます。 それだけでもイベントの思い出の品として非常にテンションが上がるのですが、ネームカードスポンサーはそのネームカードに企業名を掲載していただくことができるスポンサープランです。

ネームカードがずらりと並んでいる様子を事前設営の際にに撮影させていただきました。沢山の人の思い出にStockmarkのロゴを並べていただけるのは、とても嬉しいですね！🐿️

しかもSNSにシェアしたときのOGPのイメージにもロゴがつきます 🐿️

セッションの感想

いくつかのセッションを拝見したので、その感想と資料を添付させていただきます。

同期する都市のキャンバス：Vue.jsによる大規模メディアインスタレーションの舞台裏 / you tanakaさん

渋谷サクラステージなどをはじめとする都市のメディアインスタレーションのWebのインターフェイスにVueを採用し、どのように動作しているのかという話についてでした。

メディアインスタレーションの従来の技術スタックでは動作時のフットワークが重くなってしまう要素を、Webベースにすることで動作環境のOSの依存がなくなる等さまざまなメリットが得られるため移行とのことでした。

メディアインスタレーションのビジュアルのみならず、セッションの中で紹介されていたアーキテクチャ設計も非常に美しいことをはじめ 自分が本当に作りたいものを集中して作るために、二度手間を起こさなくて済むように作っていると仰っていたエディタがものすごいパワーというか技術の代物でした。

Vue.jsのセッションかというと王道からは少しズレているかとおもいますが「Vue.jsでここまで実現できるのか」という凄さがしめされたセッションだったと思います。

登壇資料

2024/10/22時点では未公開のようです。

LT: Trusted Types APIとVue.js / LINEヤフー株式会社 フロントエンドエンジニア 大橋一真 さん

ブラウザレベルでXSSを防ぐためのTrusted Types APIの紹介と、現在のVue.jsの対応状況についての紹介でした。Trusted Types APIのことを知らなかったため、大変学びになりました！

また、現時点では当該APIを完全サポートしているのはChromeとEdgeのみらしく、今後の展望に期待という感じです。

登壇資料

2024/10/22時点では未公開のようです。

LT: v-modelの歩みを振り返る / 弁護士ドットコム株式会社 クラウドサイン フロントエンドエンジニア ツノさん

タイトルの通り、v-modelの歩みを振り返る内容でした。 振り返ってみると確かに過去の記述方法は冗長な書き方をする必要があったことを思い出します。Vue3.4からdefineModelが使用できるようになり、スッキリとコードが書けるようになったことに改めて思いを馳せるとともに、Vueのこういった直感的に書ける部分が好きなんだよな〜という気持ちを新たにしました。

登壇資料

v-modelの歩みを振り返る - Speaker Deck

LT: 段階的なレンダリングを実装してUXを最大化するためのTips / 株式会社GROWTH VERSE ソフトウェアエンジニア Rachel さん

VueのAPIであるSuspenseの実装のTipsについてのLTでした。Suspenseは現時点では実験的機能であることから、以前導入を見送ったことがあったので、実際に使った話やその実装内容はとても学びになりました。

どこに何が作用するかの説明がとても分かりやすく解説され、スケルトンUIなどよく使うユーザの体験を高めるための実装や設計について参考になったセッションでした。

登壇資料

段階的なレンダリングを実装してUXを最大化するためのTips - Speaker Deck

Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト / 株式会社FeaSion エンジニア GANGAN さん

Nuxtのエコシステムを利用して作成されたコーポレートサイトの実例から、”Nuxtがどんなことができるのか”ということが示されたセッションでした。

Nuxtがモリモリのアーキテクチャというバックエンド部分のほか、Nuxt UIを利用したフロントエンドの実装例についても紹介されました。

また、NuxtHubというNuxt公式から提供されるCloudflareのインフラ連携モジュールや、StripeやAdsenseなどの3rdPerty Scriptsの利用を便利にする公式モジュールNuxt Scriptsについても言及があり「本当にNuxtだけで何でもできちゃうな」という感想になります。

また、セッション内のQAセクションで紹介されたモジュールについては「いずれも作者が会場にいる」と紹介されており、Vueコミュニティの距離の近さというか、アットホームさを実感しました。事実、メンバーが弊社スポンサーブースで製品の紹介していた相手の方が「今の人Piniaの作者さんだよ！」ということもあったのでVueFesは本当に凄いイベントです🍍

登壇資料

Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024 - Speaker Deck

結びに

VueFesでスポンサーとしてブース参加を行うのははじめてでしたが、参加メンバーみんな非常に充実した時間を過ごさせていただきました！！

しかし、スポンサーブースに立っているとセッションを全部は見に行けないという非常に臍を噛みまくるジレンマとの戦いにもなりました。これからいろいろな方の登壇資料をじっくり拝見したり、Xのハッシュタグを眺めてイベントの追体験をするつもりです。

Vue Fes Japan 2025でまたお会いしましょう

アフターパーティのクロージングでVue Fes Japan 2025 のイベント名が掲載されており、会場は非常に沸き立ちました！いまから非常に楽しみです