TL;DR
- 技術の最先端を知りたくて参加した
- 学生支援制度によって、交通費と宿泊費3万円+チケット代を負担せず行けた
- 個人開発・インターンでは出てこない、技術の奥深さと情熱を感じた
せし (@NitCelcius) といいます。いつもはゆるくゲーム制作/個人開発/データサイエンスで遊んでいる人です。
－ テックカンファレンスに行きたい！
個人開発をしたりハッカソンに出たりして、ひとつ物足りないな、と思ったのが Vue Fes にお邪魔した1つのきっかけです。個人開発・インターンシップで開発したり…そういった開発において様々な技術に触れてきましたが、これらで触ってきたものは、ほとんどがドキュメントのしっかりした、あるいは様々な方によって土台の作られた技術がほとんどです。
しかし、「技術の最先端ってなんだ？」の問いに答える、ワクワクする技術だったり、技術の先端で活躍する/苦しむ人たちの経験だったり。そういった、生の声が聞きたいという欲望がありました。以下で説明する「学生支援制度」も相まって、行こうと決めました。
もう一つのきっかけ
Vue Fes 2025 には “学生支援制度”があります。秋田在住のわたしは会場である東京に行くためには交通費と宿泊費で3万円強かかってしまいますが、この制度にお世話になりました。
- 宿泊費と交通費合わせて、3万円まで補助
- 超えた分は自腹。Vue Fes に参加しない人と折半などの支払い手法もOK
- セッションのチケット代 & アフターパーティのチケット代も全額補助
- 「学生限定セッション」に参加できる (制度を使う人限定全員参加)
私のケースでは交通費の大半を支援制度により補助いただけたことに感謝しています。(ぜひ、この記事を読んでいる学生の皆さんも、来年以降の制度に期待して待ちましょう！)
おもいで
かっこいい Motion Graphics のカウントダウン・オープニングとともに開会し、最初のキーノートが始まります。ネームプレートもゲットして(わたしは不具合でいただけずでしたが)開会です！
ここからは、とくに伝えたいセッションについて書いていきます。
Keynote: Evan You さん
Vue.js / Vite の開発者である Evan You さんの講演です。
現状 700万DL/週(npm)を抱える Vue.js が、次に向けてどう進むか？というトピックです。alien-signals や Vapor Mode (任意) の導入を通して高速化を図っていることや、なぜ Vite のようなビルドツールが必要なのか、についての講演でした。
いくつか学びを抜粋すると...
- なぜ Vite? → プロジェクトが大きくなると js ファイル自体が肥大化し管理が大変になる
- linter や test, bundler などWeb開発に必要なパッケージを1つにまとめてしまう「toolchain」がある
- js で書かれたものは遅い
- typescript-go なるコンパイラなど実行速度向上を図る動きはあるものの、ネイティブで実装したものとは差がある
- では Rewrite it in Rust するか？といえば、既存のプラグインたちが js で書かれていること、そのエコシステムは守るべきであることから、新たな最適化の手法を採っている
- (わたしの解釈です！): Oxc なるコンパイラを使って js の特定オブジェクトに必要な属性だけを動的にデシリアライズする (lazy deserialization) ことで、なるべく js 側の仕事を減らして Rust に計算は任せよう！という計画で進めている
Storybook 駆動開発で実現する持続可能な Vue コンポーネント設計: 矢光 隆太郎 さん
わたしの Storybook の使いどころとして、デザインから実装した後にその見た目を確認したり、UIの自動テストをしたり...が思いつきます。ただ、個人開発でもインターンでも、今まで私が経験してきた方式は
- 型や設計など下準備
- コンポーネントを作る (ここで実装が完了する)
- story を書く
- テストする
の一辺倒でした。これを、
- 型や設計など下準備
- story を書く
- コンポーネントを実装する (ここで実装が完了する)
- テストする
という流れに変えることで何が起こったか？というトピックです。
前者の手法は実装すべきもの自体、コンポーネントそのものに重きを置いて進めるものですが、
- 実装が完了して、「これ抜けてない？」の指摘が入る
- 気づいたら実装の品質が不十分であった
- 最初の設計が不十分ゆえに、コードの設計が悪くなる
といった問題点があるのでは、と指摘されています。これを後者の手法にすると、story を先に書くため、props (表示に使うべき情報)に制約された状態で実装することになります。
主張されていたよさ・つらみは、
- 😄 複数のコンポーネントを先に作るので、コンポーネントどうしの依存関係が先に見える
- props とその表示ロジックで関心を分離できる
- 👍 曖昧になってしまう props の存在が先に見えるので、手戻りが少ない
- ☹️ story の定義時点で実装すべきケースの漏れがあると修正が大変になる (story と component 両方が影響される)
- ☹️ UI がリッチになってくると、自動テストを行う際にインタラクションを模倣する のに手間がかかり、story を書く時間が延びる
など様々ありました。
この手法で「デザインが先、コードは後」なのは変わりませんが、「表示すべきデータを先に、具体の実装は後に」という流れができます。
私自身がこれを取り入れるとしたら強い違和感を覚えるな...とも思いました。しかし、本来コンポーネント自身が行うべき「データを表示する」ことに、コンポーネント自身の設計によって制約が加えられるべきではないのもまた事実だな、と思います。データを表示して、入力を受け付けることが目的であって、実装することが目的ではないと考えれば、提案された開発フローは理にかなっているなと感じました。
Playing with Vue in 3D: Thorsten Seyschab さん
わたしの名刺は Vue.js + Three.js + A-Frame で表示するページを突貫で仕上げた覚えがあります。作るときはしっかりと Vue らしさ、ts だから型安全性を...なんて考えず、とにかく動くものを！と考えて作っていましたが、やはり未練がましさは残っています。そんな中「Vue で 3D を楽しむ」というタイトルに惹かれました。
Vue 向けの3Dを扱うライブラリ TresJS を用いて、宣言的に scene を定義しつつ3Dモデルを表示するアプリを実装する流れが解説されていました。まるで Unity みたいだなぁと思いつつ、ここで3Dモデルの形式 glTF のつらみが現れます。
glTFファイルの中身は JSON です。またモデルが glTF だけで成り立つとは限らず、他のファイルやテクスチャへの参照も可能です。
このため、「このテクスチャがない！」とか「node の関係が正しくない！」という例外は、glTF そのものでは保証しきれませんし、レンダラーである Three.js がこれをビルド時に保証してくれることもありません。そこで、型安全性を確保することで完全性を保証しつつコード補完も効かせよう！ということで gltf-type-toolkit を作って(!) type-safe に glTF を扱えるようにされていました。
観客への質問 (Live Poll という機能を使い) を時折はさみつつ、観客からのリアクションの絵文字が降ってくる...など、スライドだけでなく観客を巻き込む工夫がなされていて面白かったです。
スライドや質問のシステムについてはソースコードが公開されています。そこまでするか...！と驚かされました。
学生限定セッション
学生限定セッションは、学生支援制度のスポンサー企業さんや、Vue.js を支える重役さんたちによるパネルディスカッションなど盛りだくさんでした。このタイミングでお昼ご飯もいただけたのですが、お昼ご飯を食べるヒマが無いくらいの情報密度に、ままならなさを感じていました。
パネルディスカッションにおいては「OSSコントリビューターは、楽しむから続けられる」という言葉が印象に残っています。給料が出るものでもなく、大きなプロジェクトはメンテナの負荷が高い...などなどありますが、(自分のため、他のためなど理由があっても)楽しむための情熱があってこそ、続けていけるというメッセージでした。
私自身も pnpm の翻訳をちょっぴりかじったくらいの駆け出しですが、なんだか一歩踏み出すための勇気をもらえた気がしました。
まとめて
移動に1日、カンファレンスに1日、それと帰宅後に風邪を引いて一週間 を投じ、個人で開発を続けていたらまず出会えない、ワクワクする話題に触れることができました。技術は触るものであれど、楽しむためのものとして捉えると、こんなにも奥深いんだな...と気づかされました。
学生支援制度も含めて、初めてのテックカンファレンス参加という形で一歩踏み出すことができました。Vue Fes の運営さん+スポンサーさん、また会場で仲良くしてくれた皆さんに感謝です。ありがとうございました！