ViteのTemplateリポジトリを作り込んだらawesome-viteに掲載してもらった！
awesome-viteという、Vite関連のリポジトリをまとめたリポジトリに、自作のTemplateを掲載していただきました。
掲載してもらったのは以下のTemplateリポジトリです。
Vite、React、TailwindCSSをセットアップしたリポジトリに、Firebase(v9)やESLint、Prettierも設定した、プロトタイピングにうってつけのTemplateリポジトリです。
このリポジトリの内容や、作成した背景、そしてawesome-viteに掲載してもらった方法を順に書き記しておこうと思います。
リポジトリの内容
リポジトリの内容はREADMEに詳しく書いてありますので、ここではかいつまんで説明します。
- Vite
- React
- React Router
- TypeScript
- Tailwind CSS
- daisyUI
- Firebase(v9, modular)
- ESLint
- Prettier
React Router
React Routerは事実上ViteとReactを使ってアプリケーション開発をするときのデファクトスタンダードなので、セットアップしてあります。Roconなど型安全ルーティングのライブラリもあるので、もしかしたらそのうち変更するかもしれませんが。
const IndexScreen = lazy(() => import('~/components/screens/Index'))
const Page404Screen = lazy(() => import('~/components/screens/404'))
export const Router = () => {
return (
<BrowserRouter>
<Suspense fallback={<Loading />}>
<Switch>
<Route exact path="/">
<IndexScreen />
</Route>
<Route path="*">
<Page404Screen />
</Route>
</Switch>
</Suspense>
</BrowserRouter>
)
};
React.lazyとSuspenseを使い、バンドルサイズが無駄に大きくなりすぎないように工夫しています。
Tailwind CSS
本リポジトリでは、daisyUIをTailwind CSSのプラグインとして追加でインストールしてあります。
軽く触ってみたところ、従来のUIライブラリはReact Componentの形式でコンポーネントを提供しているのに対して、daisyUIはbtnなどのクラスをHTML要素に当てることでボタンの見た目のコンポーネントが一瞬で作れます。
もちろんアクセシビリティなども含めるとReact Componentとして提供されるライブラリのほうが固いかもしれませんが、TailwindCSSのプラグインとして提供するアプローチが面白いと感じたので、せっかくなのでセットアップしてみました。
割と細かいところですが、ボタンは押すと一瞬凹むエフェクト（transform: scale）が掛かるところなどそれなりに芸が細かくて好きです。
Firebase(v9)
FirebaseはJS SDKがVersion 9になるバンドルサイズに大幅な最適化が入りました。正確に言うと機能ごとにImportできるようになったので、必要最低限のバンドルサイズに抑えられるようになりました。
Emulator対応済みの専用フックを作ってあります。まだ公式のドキュメントが若干追いついていない感じもあるので、実装例を世に放つのもいいことなのかなと。
Templateリポジトリとして作成する
リポジトリの設定画面にて、Template Repositoryにチェックを入れると、
リポジトリをCloneするアクションの隣に、Use this templateという動線が表示されます。これはFork等をしなくても、ワンタッチで自分のリポジトリとして同様のファイル内容でリポジトリが作成できる機能です。
Templateとして作成するならこれをONにするのが妥当です。
作成した背景
割と以前からViteが気になっていたので、いろいろとTemplateを作って楽しんでいました。とにかく開発が爆速になるので、個人で技術検証したり、なにかサービス開発したくなったときのプロトタイピング用として、自分のためにいくつか作っていたのです。
あるとき以下のdev.to記事で紹介してみたらリアクションやコメントが集まりました。
意外と、速攻で使えるTemplateがあるだけで、その要素技術の普及に貢献できるのではと思ってちょっと嬉しくなりました。
実際に使ったよ！っていうコメントを貰った
うれしみ〜
ブログ用途もあると思うので、READMEではFirebaseの剥がし方も補足しています。
issueも貰った
せっかくなので、VSCodeのCode Tourで日本語でソースコードの解説も入れていたのですが、英語版も用意してほしい！というIssueをもらいました。ニーズが有るとわかってありがたい話です。
余談ですが、Code Tourっていうほどメジャーじゃない気がするのですがめっちゃ有用だと思うので普及させたいです。リポジトリを読むのが楽しくなる、理解しやすくなるツールってどうにかして開発できないかなと思案していたところこれを見つけて、MSさんがやるなら参りましたわって思いましたｗ
awesome-viteへの掲載
その後はバージョンアップ程度しかメンテナンスしてなかったのですが、最近個人開発でViteを使おうと思ったとき、なんだかんだバックエンドの統合も無いとプロトタイピングに使えなくない？と思い、Firebaseのv9を書き足してみたところ、awesome-viteで紹介されているTemplateにFirebaseとの統合がまだなかったので、プルリクエストを出してみようと思い立ちました。
1日ほど待ったらマージされました。速い！
Firebaseのv9も出たばかりなので、これでぜひ世の中のプロトタイピングで、爆速かつ軽量な開発の一助となれば嬉しいです。
自分もいま作りたい個人開発の案があるので、このリポジトリをもとにVercelのServerless Functionsを統合してバックエンドAPI付きのサービスをサクサク開発しています。
まとめ
- 推しの技術があったらTemplateを作ることで普及に貢献するのも面白いかも！
- 一通りリポジトリを作ると関連技術の知見も広がるのでよき
最後まで読んでいただきありがとうございました！記事が参考になったらバッジお願いします！
Discussion