Vue Fes Japan 2024 体験記

はじめに

お久しぶりです。吉原です。以前初めて記事を書いてから半年ほど経ちましたが、仕事っていつまでたってもうまくできるようにならないんだな～と、ちょっとだけ自分に落ち込んだり、でもちょっとだけ明日の自分に期待したりしながら日々を過ごしています。

今回は縁あってお声がけいただき、Vue Fes Japan 2024 に参加してきました。
とても刺激的な一日でしたので、良ければ少し覗いていってみてください。

Vue Fes Japan 2024 とは

実は私自身、VueFesというイベントが開催されていることを、お誘いいただくまで全く知りませんでした。
簡潔に言うと、日本で最も規模の大きいVue.jsのカンファレンスです。

日本最大級の Vue.js カンファレンス、Vue Fes Japan を 2024 年も開催します！
2018 年に誕生したこのカンファレンスは、文字通り Fes ＝お祭りのように Vue.js を共に盛り上げ、共に学び、そしてなによりも共に楽しむために誕生しました。（中略）
そうした最新の動向を体感できる場こそ、今年の Vue Fes Japan 2024 です。ぜひ、一緒にカンファレンスに参加し、リアルだけが味わえる体験を楽しみましょう！

引用：「メッセージ」https://vuefes.jp/2024/#message

タイムテーブル

このタイムテーブル の中で個人的に特に印象に残った以下の3点をピックアップしてお話しようと思います。

AIとともに歩んだライブラリアップデートの道のり

単純には自動化できない修正を、大量かつ広範囲のソースコードに横展開しなければならないとき、みなさんはどのように修正しますか。

ひとつずつ見て手で修正しますか。
もしくは、正規表現をこねくりまわして、なんとか置換機能を利用して対応できないか模索しますか。

どちらにしても、なんだかテンションが上がらないですよね。そんな時にAiderを活用してライブラリアップデートを完遂したエピソードをお聞きしました。

Aiderのクイックスタートを見ながら、少し触ってみました。

python -m pip install -U aider-chat

# Change directory into a git repo
cd /to/your/git/repo

# Work with Claude 3.5 Sonnet on your repo
export ANTHROPIC_API_KEY=your-key-goes-here
aider

# Work with GPT-4o on your repo
export OPENAI_API_KEY=your-key-goes-here
aider 

上記コマンドでインストールして、各APIKeyを設定。
ANTHROPIC_API_KEYはClaude公式サイト、OPENAI_API_KEYはOpenAIプラットフォームから、それぞれ取得してきました。

$ aider

で起動できます。

$ /help

でヘルプページを見てみると、各操作が見れます。

例えば以下のような操作ができます。

/add       ファイルをチャットに追加して、GPTが編集したり、詳しくレビューできるようにする。
/ask       ファイルを編集せずにコードベースについて質問する
/commit    チャット外で行われたリポジトリへの編集をコミットする（コミットメッセージは任意）
/diff      最後の aider commit の diff を表示する
/quit      アプリケーションを終了する

Aiderの何がすごいかというと、gitをcloneしてくると、ソースコード読ませて「これにこういう機能を追加してください。」と言うと勝手に追加してgit commitまでしてくれるところです。また、Streamlitなどのチャットボットアプリを裏で起動することで、対話型でAIがコーディングしてくれるという最強アイテムです。

実際に業務で利用してみるとFBサイクルに料金がかさんだり、自動で作成されたPRをひとつずつレビューしたため結果としては時短にはならなかったり、と100点満点ではなかったそうですが、「単純にこうした技術が私たちの背中を一押ししてくれる、それだけで仕事が楽しくなるんではないでしょうか。」とお話しされていたのが印象的でした。

次世代フロントエンドクロストーク

登壇者は当社に在籍しているeslint-plugin-vue、eslint-plugin-svelteのメンテナーで、ESLint Communityのチームメンバーである太田さんを含む6人で、次世代フロントエンドツールについて議論する、大注目で大人気のタイムテーブルでした。

話題はもっぱら「エコシステム」です。
生物学で使われるエコシステムという用語の意味は、「同じ領域で生存する動物や植物などがお互いに関わり合い、お互いに干渉して依存しながら生きている様子」を表しています。

プログラミング言語においても使われるこの言葉は、具体的にJavascriptのエコシステムとして生まれてきたものの例を見ると分かりやすいかと思います。

カテゴリ	具体例
ビルドツール	webpack, gulp, Vite, esbuild
ライブラリ/フレームワーク	React, Vue.js, Angular
言語	TypeScript, Node.js
パッケージマネージャー	npm, yarn

これはほんの一部の例ですが、他にも多くのサービスが存在し、Javascriptの処理の自動化、アプリケーション開発の効率化、ソフトウェアの管理、再利用性の高いUI構造など、これらのサービスと組み合わせることで、選ばれ利用されるプログラミング言語と人気を博してゆくのです。

特に印象に残った話を2つピックアップして書きます。

JavascriptのエコシステムのRust化が進んでいる話

Javascriptはこれまで、クライアントサイド専門として利用されてきましたが、Node.jsが導入されてから、サーバーサイドでもJavascriptが利用される機会が増えてきました。

そのため、ブラウザだけで動くはずだったJavascriptがCIで動かないような状態になっていたり、さらにAIが出てきたことでJavascriptのコードを高速で生成してくれるが、Javascriptのコンパイル自体は早くなっていなかったりと、コードの実行時間の遅さが課題として挙げられる状況です。だからこそ、Rust化が大事なんだそうです。

Rustはコンパイル言語であり、メモリ管理が効率的で、高速な実行性能を持っています。そのため、特に計算量の多い処理や処理や、リクエストからレスポンスまでの速さが求められる場面では、パフォーマンスの向上が期待できるそうです。

（ちなみに、Rustを利用する人をRustacean（ラスタシアン）というらしい。かっこいいですね。）

これまでとこれからのJavascriptのエコシステム

Vue.jsの生みの親である、EvanYou氏が最後におっしゃっていましたこの言葉が印象的でした。

「エコシステムの本来の目的はJavascriptをよくするためである。そしてアプリケーションを作るエンジニアにとって何よりも大事なのは、エンドユーザーにより良いシステムを届けることである。」

これまではそれぞれのものをそれぞれで作っていたため、例えばESLintをTypeScript対応させるのに苦労したそうです。一元化して統一されたものであることが理想的ではあるけれども、それはとても難しいことでもあると。
そして、最近は次世代フロントエンドツールとしてViteが登場し、これまでは同じwebpackを使っても、それぞれのconfigを持っているため複雑であったが、近年では大体のシングルアプリケーションはViteを利用し、configを気にせずとも良くなったため、とても魅力的な方向に進んできているのだそうです。

最後に未来へのエコシステムに向けて、「複雑で大規模なシステムを作るときにも使えるように、そしてより速いフロントエンドツールに期待しています。」と締めくくっていました。

Vue.jsコミュニティにようこそ！

最後に「Vue.jsコミュニティ」について書こうと思います。

あなたはVue.jsコミュニティの一員ですか？

広辞苑で「コミュニティ」を引くと、「一定の地域に居住し、共属感情を持つ人々の集団。地域社会。共同体」と定義されています。
ということは、Vue.jsコミュニティは業務であれプライベートであれ、Vue.jsに触れている人はみんな属する共同体ということになるのでしょうか。

皆さんはもし私が、あなたはVue.jsコミュニティの一員ですか？と尋ねたら、元気に「はい！」と答えますか。
かくいう私も同じですが、答えに詰まる人が多いのではないでしょうか。

「Vue.jsコミュニティとは、グラデーションである。そこに明確な境界線はない。」

引用：「コミュニティとはなんだろうか？」https://zenn.dev/comm_vue_nuxt/articles/vue-community

私たちに「おめでとうございます！今日からあなたはVue.jsコミュニティの一員です！」と証明書が届くわけでも、会員バッチが届くわけでもないのです。だから、自分はVue.jsコミュニティの一員だ、と自覚する必要もないのです。

はてさて、ここまで一体何の話をしているんだ、と思ったかと思います。
つまり、私がこの話を聞いて感じこの記事で伝えたいことは「自分はVue.jsコミュニティの一員だから、立派なコードを書こう。一員として、雑なコードは書いてはいけない。気をつけなきゃ。」と自覚して初めて考えるのは違うということです。

自分がコミュニティの一員だと自覚してない人のほうが大半だと思っています。そんな私たちがいて、みんなでより良いコードを書くために学んで、考えて、話し合って、そうやって使う人がいて初めてVue.jsは成り立っているのです。逆にいえば、Vue.jsを使う人が雑なコードを書けば、これだからVue.jsは分かりずらいんだよなぁ、と思う人がいるかもしれないということです。

つまり、私たちはみんな自分の考えと、自分の意思をもって、そして自分が生み出すものすべてにプライドを持っていこうねということが言いたいのです。

今回のタイムテーブルでお話しされていた内容は、【初学者にこそ伝えたい】Vue.js コミュニティ入門に沿ったお話です。より詳しく、より熱量高く語ってくださっているので、合わせて読んでみてください。

さいごに

ということで、ここまで文字ばかりで読みずらかったかと思いますが、長々と読んでくださってありがとうございました。飛ばし読みももちろん大歓迎です！

ここまで触れてきませんでしたが、FAの代表として永井さんがプラチナスポンサーセッションで「IT 未経験者をVue.js で開発できる IT コンサルタントに育てあげる秘訣」と題して、新人研修での取り組みについてお話しされていましたので、ぜひこちら もあわせて読んでみてください。

改めて、私にとってはとても刺激的な一日となりました。
特に次世代フロントエンドクロストークでは、EvanYou氏がいらっしゃったので、翻訳もありつつ英語での議論を繰り広げていました。日本語に翻訳される前にEvanYou氏の冗談を聞いて笑っている人がとてもカッコよく見えました。

この機に英語の勉強してみようかしら。笑