こんにちは、ストックマークで技術広報とエンジニアをさせていただいています安藤( @ampersand_xyz )です。
本記事では2024/10/2に開催された Vue Fes Japan × TSKaigi 合同イベント 「次世代フロントエンドツールチェイン」 のイベントの参加レポート・セッションの記録をお伝えさせていただきます。
Vue Fes Japan 2024 見どころ紹介 / Vue.js-jp 沖さん
登壇予定だったKazuponさんに変わって、Vueの日本コミュニティの沖さんがファシリテーション＆登壇され、今年のVue Fesの見どころについての紹介が行われました。
2024年のVue Fesは昨年よりも広い会場で開催され、Ask the speakerのゾーンが設けられるなど、エンジニア同士での交流に重きをおいている形になっているようです。
食事、リフレッシュメント、おやつ、タトゥーシール、ドリンクなどなどがチケットを買えば無料、つまり実質無料です。
Vue Fes JP 2024には弊社もスポンサードをさせていただいておりますが、単純に一個人としてもどんなイベントになるか楽しみです！
TSKaigi Kansai 2024 見どころ紹介 / yuta-ikeさん
2024年に発足したTypeScriptをテーマとした技術カンファレンスであるTSKaigiですが、11/16に関西・みやこメッセでの第2回目のイベントが開催決定！
チケットの販売も開始しています。 第1回のイベントは私はオンラインで視聴していましたが、大変に見応えのあるイベントでしたので現地に行ける方は是非現地で！
Environment API で広げる Vite の可能性 / Viteコアチームメンバー 翠さん
登壇資料
https://pre-vue-fes-2024-environment-api-slide.sapphi.red/1/
Viteがかつて抱えている課題と内部構成についてがわかりやすく簡略化されて述べられ、それに対してどう変更アプローチを行うか、新しい内部構成はどの様になるかが紹介されました。
上記登壇資料の20Pにも動画デモで実際の動きが紹介されていますが、オリジンサーバ、エッジサーバ、サービスワーカー、ブラウザにHonoを採用する形の 🔥大炎上アーキテクチャ🔥 が実現できるとして、会場は名称の面白さもさることながら「それが実現できるのか…」というところにも盛り上がっていました。
デモ動画に使用された実装のリポジトリも公開されているので具体的に知りたい方はこちらを参考にさせていただきましょう。
tsconfig.jsonの最近の新機能 ファイルパス編 / 株式会社カオナビ uhyoさん
多くの人がtsconfig.jsonを使いつつも、ガリガリ書いたりいじったりする機会は実のところあまりたくさんはないような気がするtsconfig.jsonについての最新の新機能についてのご紹介。
TypeScript5.5から追加された ${configDir} 機能について、ユースケースと実際の設定例を交えての解説が行われました。
また、必要な参照情報だけをtsconfig.jsonに定義し、それぞれの設定ファイルで参照を行う形にっする構成をSolution Styleという呼び方についてを知らなかったため、教養としての学びがありました。
実務でも趣味でも明日から使える開発知識！！非常にいいことを聞けた大満足セッションでした
TypeScript x Raycast x AIで変える開発者体験 / 株式会社All Ads Michitoshi Yanoさん
登壇資料
スピーカーのMchitoshiさんの推しツールであるRaycastの紹介から、その実用（有料版のみの機能を含む）の例をはじめ、TypeScriptでのコマンドの自作・拡張機能の作り方が紹介されました。 自作すれば全部の実質すべての機能や拡張が無料と言っていいですね。とはいえ一個人では作りきれないたくさんの拡張がRaycastにはあるようです。
私もこのセッションを見た次の日からRaycastを導入してみて、まだ正直なところランチャーとしてしか使えてはいないのですが、便利な使い方を覚えるとめちゃくちゃ開発や作業が捗りそうでした。あと使いこなしてる感あるとカッコイイですね。
Webpack to Rspack：ビルド環境移行とその効果 / LAPRAS株式会社 川俣 涼さん
登壇資料
Rspackが恥ずかしながら初耳だったのですが、概要としてはRustで実装されたJavaScriptのバンドルツールで、その見どころはかわいいキャラクター🦀⚡️のほか、圧倒的な実力、ビルド速度の速さ。そしてwebpackからの移行の容易さ。8/24にv1.0.0がリリースされた新進気鋭のバンドラーです。
セッションではスピーカーの川俣さんがビルド改善速度のためwebpackからRspackに移行を行った際のお話でした。前述の通り、webpackと比較してDevビルドではダブルスコア、Prodビルドではそれ以上の成績を叩き出す速度でのビルド（スライド14~15P目）という驚きの性能が紹介されました。
めちゃくちゃ良いじゃん！という感じもしますが、まだ出たてのツールであるが故か、Prodビルドで躓いた（ツール側のバグと思われる問題）が発生したという話もあり、実用投入についての知見・問題解決アプローチのナレッジ共有もあるセッションでした。
詳説記事 zenn.dev
スポンサーLT1 DenoでもViteしたい！インポートパスのエイリアスを統一してラクラクアプリ開発 / 弁護士ドットコム株式会社 かみくずさん
イベントのドリンクスポンサー、弁護士ドットコムさんのセッション。
登壇資料
このイベントの日の朝、弁護士ドットコム株式会社様のテックブログに公開されたブログ記事が面白すぎて良すぎる…と思っていたら作者の方が登壇されていたのでめちゃくちゃテンションが上がりました。すごく良い…。
発表内容についても非常に良さが有り、プランニングポーカーをするためのツールをDenoで作成した話でした。ここで前段セッションであったtsconfig.jsonの話もちょっと登場。なぜだかちょっとした規模だとしても開発をを行う・環境を設定するって微妙に一筋縄ではいかないことがあるので、実例を伴う知見は非常に参考になりました。
スポンサーLT2: UnJSで簡単に始めるCLIツール開発 / 株式会社ヤプリ Aose Yuuさん
イベントの会場スポンサー、ヤプリさんのスポンサーセッション。
登壇資料
UnJSとは、JavaScriptのためのツールやライブラリのエコシステムで、様々な環境で動作することが目指されていますが、今回はエコシステム群を組み合わせたCLIツールの開発の紹介でした
スライド13ページ目に説明付きで纏められていますが、citty, unbuild, consola, jitiを組み合わせてコンソール内で動くアプリケーションの開発を行う手順と実装方法に付いてが紹介されましたが、今回は実演もついていました。
実装されたアプリは、カフェに注文するという動きができるCLIツール、カフェ…どこのカフェに？と思いますが、なんと会場のYappliさんのオフィス内のカフェに注文が入り、その場でちゃんと支払いが発生していました。会場スポンサーだからできる高度な荒業に盛り上がっていました（注文が発生して届けられる絵面に見入ってしまい写真を取るのを忘れていました）
スポンサーLT3: 初めてのvite plugin！AIにSFCをコンパイルさせてみた話 / ストックマーク株式会社 Kohei Kawai
登壇資料
弊社ストックマークからKawaiさんがスポンサーLTに登壇しました！
ストックマーク社内で実施されたChibivueの勉強会にて、Book内でViteのプラグインに触れている部分があり、それをきっかけに独自のコンパイラを作ってみたという話です（この勉強会の取り組みについて、反応くださった方がたくさんいらしたので、レポートの公開や第二回の開催を計画しています）。
AIにVueのSFCをコンパイルさせるとは何か？というと、要するに通常は.vueファイルをコンパイラで構文解析を実装してヨイショヨイショとコンパイル処理を行っているのですが、それをAIに構文解析的なムーブをさせてしまおうということです。
ファイルのコンパイルに独自プラグインを入れる動きのサンプル。任意の文字列の挿入や背景色を指定しています。
では、上記で任意の文字を入れているような箇所をコンパイルの処理にし、かつその処理内容をAI（汎用LLMのAPIを使用）に行わせてみるという話です。このような形にして、ファイルの内容とともにプロンプトを渡すことで、そのレスポンスを出力します。
LLMへのプロンプトとしてよくあるフレーズで「あなたはSFCコンパイラです」という普通に生きていると一生使わない日本語が出てきて笑いが起こりました。
と、シュールな文字列に笑えるだけなら平和なのですが、変更があるたびにhot reloadされ、そのたびにAPIリクエストが行われるという動きとなってしまうことで、ファイルを保存する都度課金されてしまうという、マジの富豪プログラミングを行うことになるため実用は難しそうという結論になりました。
どのセッションも学びと見ごたえがある内容でした！
イベントの様子
イベント会場は六本木一丁目にある非常に素敵なヤプリさんのオフィスにて開催されました。
オフィス内に撮影スペースやカフェがあり、窓から見える景色も素敵…！🌃（なのですが、写真を取り忘れてしまったためお写真のあるポストを引用させていただいております）
本日のスポンサー紹介です！
— TSKaigi (@tskaigi) 2024年10月2日
[会場スポンサー]
株式会社ヤプリ @yappli_jp
ご支援ありがとうございます🙏#vuefes_tskaigi pic.twitter.com/QodvVTZbiV
ドリンクスポンサーは弁護士ドットコムさんのご提供でした。 飲み物のおかげで懇親会をワイワイ過ごさせていただくことができました、ありがとうございました🍺
ℹ️協賛のご案内🎉
— 弁護士ドットコム CREATOR'S (@bengo4_creators) 2024年10月2日
本日開催「Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」」におきまして、弁護士ドットコム株式会社はドリンクスポンサーとして協賛しております🍻#vuefes_tskaigi pic.twitter.com/4VFczfUXXL
ストックマークもフードスポンサーをさせていただきました🐿️
今回、ストックマークはこちらのイベントにフードスポンサーにて協賛させていただきました。 各所へのロゴ掲載・SNSでの共有ありがとうございました 🙏
本日のスポンサー紹介です！
— TSKaigi (@tskaigi) 2024年10月2日
[フードスポンサー]
ストックマーク株式会社 @Stockmark_japan
ご支援ありがとうございます🙏#vuefes_tskaigi pic.twitter.com/vmFxPEEpyl
今回はまい泉さんのサンドイッチデリバリーにてフード提供をさせていただきましたが、副菜が少なくなってしまうという点はあるものの、味のバリエーションが多い、個包装で一人ずつお手元で食べていただきやすい、個々人で食べる量を調整しやすい、個数ベースでお渡しできるので特定の方による独占を防ぎやすい、飛沫を防ぐことができる、持ち帰りやすい…あとは単純に美味しい！など色々と良かったケータリングです🥪
結びに
セッション紹介で記載したことと同じことを書いてしまいますが、1参加者として大変楽しい・学びになるイベントでした。このイベントに協賛させていただけたことについて非常に良かったと感じています。
Vue Fes Japan 2024の開催も近づいてきており、10月はVueへの熱量が高まりそうです。
TSKaigi Kansaiも開催を楽しみにしています！
また勉強会イベントを応援する機会がいただければ嬉しいです🐿️
ストックマークではイベントスポンサードや参加支援・毎月の自由に使える手当の支給など開発者を応援する取り組みを行っております。一緒にプロダクトと組織を成長させていただける方を広く募集しています！ カジュアル面談からお気軽にご連絡ください。
