おはこんにちばんわ👋

エンジニア3年目のけそデス。

今回はフロントエンド向けの便利なツール君である Vite をご紹介します😎

Viteってなに？

次世代の Web アプリケーションを支える、超高速フロントエンドビルドツールです。

読み方はバイトではなくヴィート。うーんややこい。。🤨

フランス語で『速く』という意味だそうで、その名の通り高速なビルドツールとして超優秀な子です。

何ができるの？

フロントエンドで大人気のReactやTypeScript、Vueなどの環境構築を高速かつ簡単に行える

つよつよツールなのです🤩

扱い方は主に２パターンあります。

1. Web上だけで開発環境が完結するWeb構築型。
2. 自身のパソコン(ローカル環境)にインストールして開発環境構築するローカル構築型。

特にWeb構築型はWeb上だけで開発環境を構築できてしまうところが手軽でとっても魅力的ですよね！

インストールを行うローカル構築型も簡単な手順だけで開発環境を構築できるので、

まさに高速。つよつよすぎる🤯

どうやって使うの？

公式HPに分かりやすく解説されているので、参照して頂くことを推奨します！

個人的に分かりやすいと思う箇所へのリンクを記載しておきます🥳

Web構築型 → URL

ローカル構築型 → URL

また、YouTubeなどの動画媒体でもViteについての解説動画があるので安心して取り組めます！

オススメの使い方

■Web構築型 → 初学用、検証用にオススメ！

　→ オンライン上で実行できる手軽さが魅力的なものの、

　　バックエンドと連携したWebアプリの構築が難しいデメリットがある為🥸

　　　活用例(1)：ReactやTypeScriptの勉強用環境 → YouTubeなどの勉強動画のお供に！

　　　活用例(2)：コードの検証用環境 → 生成AIで出力したコードの検証場に！

■ローカル構築型 → 開発用にオススメ！

　→ Web構築型のデメリットがないので、本格的なWebアプリを作成できる為😏

　　　活用例(1)：Webアプリ開発環境 → ポートフォリオの作成などに！

いかがでしたでしょうか？

これまでReactやTypeScriptなど開発環境を構築しないと動かせないライブラリ類に手が出しにくかったり、

最初でつまづいてしまいがちなイメージでしたが、今回ご紹介したViteを活用すればお手軽に学べますよね！

テクノデジタルでは同期や先輩後輩間で、しばしばViteなどの面白い技術について情報交換しあったり、

こういった技術的なネタを投稿する社内チャットチャンネルもあったりしますので、

色んな情報をキャッチアップできる場があります！

よろしけば皆さんもViteに触れて活用してみてください😎

今回はここまでですん。次回もお楽しみに〜👋