本イベントの概要

話題の次世代フロントエンドツール「Vite」に入門する会です。

• https://vitejs.dev/
• https://ja.vitejs.dev/

参加方法は当日Connpassに掲示されるZoomに入るだけです。 主催者が画面共有しながら、セットアップから基本的な機能の操作まで進めていきます。

話しながら作業できる枠と、音声OFFで参加できる聞き専枠を用意しましたので、ご自身の都合に合わせてご選択ください。

Viteについて

https://vitejs.dev/guide/why.html

Viteが解決する一番大きな課題は開発者の生産性向上です。 SPA全盛期の今、Webpackベースでアプリケーションを開発していると、 開発サーバーを起動するのに数十秒〜数分掛かることもしばしば起こるようになりました。 HMRを使っていても、ファイル更新時から画面への反映が遅いことも多いですよね。

ViteはES Moduleがモダンブラウザに対応した最近の進歩を活用することでこれらの問題に対処します。 現時点では、Go言語で開発された高速なバンドラーであるesbuildを開発時に利用しています。

参考URL

• https://vitejs.dev/guide/why.html
• https://esbuild.github.io/faq/#why-is-esbuild-fast

Nuxt3でも採用！

先日発表されたNuxt3でもViteが活用されています！

https://v3.nuxtjs.org/

イベントの段取り

ある程度は当日の参加者の皆さんの空気に合わせて進めようと思っているので、 暫定的ではありますが、以下のように進めようと考えています。

• 10：00　部屋を公開
• 10：05　話しながら作業枠の方々から軽く自己紹介
• 10：15　Vite入門開始！

  - create vite app (Vue or React or Svelte or Lit)
  - Dev Serverの立ち上げ速度、HMRの反映速度を体感
  - yarn addしたモジュールのPre Bundleされる様子を観察
  - プラグインの仕様
  - CSS Modules
  - 本番向けビルド作成
  - 環境変数の使い方

• 11:30頃 終了、感想のシェアなど
• 12:00 解散

すでに立ち上げた経験のある方は、Storybook入れたり、Vercelにデプロイしてみたり、任意のプラスアルファの活動を行ってZoomのチャットなどで報告・共有いただく感じで考えてます。

主催者について

オンライン家庭教師マナリンクというサービスを開発するスタートアップでCTOをしています。

https://manalink.jp

https://twitter.com/Meijin_garden

主催者自身は特にViteのコントリビューターなどというわけではないのですが、 とても便利なツールだと思っているので、以下のようにGitHub上にある程度セットアップされたテンプレートリポジトリを作成して公開したりしています

https://github.com/TeXmeijin/vite-react-ts-tailwind-firebase-starter Starter using Vite + React + TypeScript + Tailwind CSS. And already set up Firebase(v9), Prettier and ESLint.

本イベントを通して、フロントエンド開発者の方とViteの話をすることで、自分自身の理解がより深まったらいいなと思っています。

協賛

協賛っていうほど大層なものではないのですが、会社で購入しているZoomのProアカウントを使う予定なのでロゴを掲載させていただきます。

オンライン家庭教師マナリンク (https://manalink.jp)

オンライン家庭教師のマッチングサービスと指導専用ツールを開発・提供しています。もし興味を持っていただいたら主催者までカジュアル面談を申し込んでいただけるとめっちゃ嬉しいです。