これは株式会社 Shinonomeが提供している学生コミュニティ「Playground」の、ウェブサイトのトレース課題です。
このトレースサイトは、以下の OSS により実現しました。
このプログラムでは、次のバージョンを使用しています。
pNPM == 6.25.1Node.js == 16.13.0
pnpm installpnpm run devpnpm run buildこのレポジトリでは、GitHub Actionsによって、mainブランチにプッシュされたら自動でビルド&デプロイを行います。
次の理由により、フレームワークの選定を行いました。
- Typescript ネイティブでチーム開発に適している。
- 将来的に SSR/SSG をするときに、Next.jsの恩恵を受けることができる。
- 似たような OSS に、Styled Componentsがあるが、こちらの方がキャッシュ機能が優秀で、高いパフォーマンスが期待できる。
- 他に、CSS Modulesという選択肢があるが、次のような理由で採用しなかった。
- ファイル構成が冗長になる
stylesの型がanyになる。
- Vite は内部的にesbuildを使用していて、esbuild は Go 言語を使用しているため、非常にビルドが速い。ただし、esbuild はトランスコンパイルのみで TypeScript の型チェックを行わないため、ビルドには
tsc --noEmitが必要。 - pNPM は、独自のキャッシュ機能や最適化により、npm よりも高速に依存関係をインストールできる。