題目「Vite でお手軽 Vue.js の環境構築」でフロントエンドLT会 - vol.7に登壇してきました
こんにちは。最近、 10km マラソン大会 に挑戦してみようと考えている k-so16 です。 10km 完走を目標に、徐々に走る距離を延ばしています (笑)
6/15 に開催された フロントエンドLT会 - vol.7 で「Vite でお手軽 Vue.js の環境構築」という題目で登壇しました。 今回のイベントでは、 Vite を使って Vue.js のプロジェクトを作成する方法について発表しました。
しばらく Web 開発に携わっておらず、個人的にも学習が進んでいなかったので、 Web 技術の学習のきっかけにしようと思い、今回のイベントへ登壇することにしました。
本記事では、イベントの概要や様子について紹介します。
発表内容
今回の発表では、 Vite の概要や使い方を 5 分で簡単に紹介しました。 発表資料は こちら から閲覧できます。
発表概要は以下の通りです。
- Vite の概要紹介
- Vite の特徴を説明
- ビルドが速くローカルサーバーの起動も高速
- 複数のフレームワークの scaffold の生成に対応
- Vite の特徴を説明
- Vite の使い方の説明
npmやyarnコマンド経由で利用可能- Vite を利用した Vue.js の scaffold の作成方法を紹介
- ローカルサーバーの起動方法の説明
- Vuex と Vue Router の追加方法の説明
Vite というフロントエンド用のツールを使うと、 ビルドが非常に速い という情報を聞いたことがあり、今回の登壇をきっかけに触ってみることにしました。 実際に使ってみると、体感的に Vue CLI よりも速くローカルサーバーが立ち上がったように感じました。 また、 Vue.js だけでなく、 React や Svelte などの 複数のフレームワークにも対応している 点も魅力の 1 つと感じました。
Vite で Vue.js のプロジェクトを作成すると、 Vue 3 から導入された Composition API で記述されている scaffold が作成されます。 Composition API についても勉強して発表内容に組込みたいと考えていましたが、残念ながらイベントまでに使い方や特徴を習得できなかったので断念しました。 興味は依然としてあるので、時間を作って少しずつ勉強していこうと思います。
イベント全体の発表概要
今回のイベントでは、筆者の発表を含めて 11 件の発表がありました。 全体の発表は以下の通りです。
- Nuxt 3 の公式ドキュメントを翻訳して気付いたこと
- JavaScript の新しい記法を学んだ話
- Next.js でサービスをフルリニューアルした話
- コードを書く手をとめないための VSCode のプラグインを作った話
- Vuetify に contribute した話
- suppress-ts-errors の紹介
- SolidJS の紹介
- Ruby on Rails のプロジェクトに Vue 3 を導入した話
- 仮想 DOM について学習した話
- SolidJS で ToDo アプリを作成した話
非常に興味深い内容の発表が多いイベントでした。 今回の発表では、特に suppress-ts-errors の紹介についての発表がおもしろいと感じました。
suppress-ts-errors は、 TypeScript の型エラーが発生している箇所に @ts-expect-error というコメントを挿入することで 型エラーを無効化するツール です。
既存のプロジェクトを TypeScript 化する際に、少しずつ型エラーを解消するためにこのツールを開発したそうです。
既存の JavaScript のプロジェクトを TypeScript 化する際に厳格な型検査をすると、既存のコードで型エラーが発生してしまう ことがあります。 大規模なプロジェクトの場合、既存コードによる型エラーの数が膨大になり、全部の型エラーを修正するのも一苦労です。
既存のコードが型エラーとして検出されないために、型検査の厳密さを緩くすることも考えられますが、そうすると新規コードに対して厳格な型検査ができなくなります。 既存のコードの型エラーはいったん無視して、新しく追加されたコードに対しては厳格な型検査ができれば TypeScript 化がしやすくなります。 suppress-ts-errors を利用することで、 既存コードの型エラーは無視しつつ、新規コードには厳格な型検査を実現できます。
他にも、今回のイベントでは SolidJS についての発表が 2 件あり、両方の発表を聞いてぜひとも触ってみたいと思いました。 React に近いらしいので、 React と比較しながら試してみるのもおもしろそうです。
所感
久々の登壇で少し緊張しましたが、割とスムーズに発表を進められたと思います。 ブランクがあっても、これまでの登壇経験のおかげで詰まることなく発表できたように感じました。
今回は 5 分の発表枠で申し込んだので、 Vite の概要についての紹介でちょうど良い時間配分ではあったと思います。 一方で、本当は Vue 3 の Composition API についても触れたかったという思いもあります。 Composition API については、別途ゆっくり勉強して、別の機会に有用なアウトプットへと昇華させたいと思います。
何はともあれ、今回の発表内容が誰かにとって Vite というツールを初めて知る機会となっていれば幸いです。
