🚀

Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた

5 min read

はじめに

React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。
フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです(そう思いたい…)。

前提

  • 趣味で小規模なSPAを作る場合を想定
  • ルーティングなしの単機能アプリ
  • SSRが必要ない
  • モーダルなどの動きのあるUIが必要ない

技術スタック

  • Vite
  • Preact
  • TypeScript
  • Tailwind CSS
  • Cloudflare Pages

技術選定理由

Vite

少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き換わりつつあると思っているので選定しました。

https://twitter.com/oukayuka/status/1460079431460929536?s=20

小規模なSPAなのでゴリゴリカスタマイズする必要はなく、初期設定のままいけるだろうという判断です。

Preact

最初はVite + React + TypeScriptでやろうと思っていたのですが、Viteのテンプレートにpreact-tsというものがあり、簡単に環境構築できそうだったので選定しました。
実際小規模なSPAであればPreactで十分だと思うので、パッケージサイズが小さいのは正義という判断です。

TypeScript

人権。

Tailwind CSS

UI構築に関しては以下の候補を比較検討しました。

  • UIライブラリ(Chakra UI、MUIなど)
  • CSSフレームワーク(Tailwind CSSなど)
  • CSS in JS(styled-components、emotionなど)
  • Zero Runtime CSS in JS(linaria、stichesなど)
  • CSS Modules

まずリソースが潤沢にある場合やマークアップ専任のエンジニアがいるようなケースでもない限り、生のCSSをゴリゴリ書いていくのはのは大変なので下3つは選定しませんでした。
この中だとCSS Modulesはファイルが別で分業しやすそうだなと思っているので、そういったケースでは候補に上がってきそうだなと思っています(開発自体は止まっているようなのでどうなんだというのはありそうですが)。

UIライブラリに関しては本業や個人開発でもChakra UIを使っており個人的に気に入っているのですが、モーダルなどの動きのあるUIが必要なく、UIライブラリを入れるほどではないと思ったので、今回はCSSフレームワークであるTailwind CSSを選定しました。
ランタイムではJSが動かないのと、未使用クラスをpurgeできるのがパフォーマンス的に嬉しいです。
もし後でモーダルなどの動きのあるUIが必要になってもHeadless UIを入れることで対応できそうです。

Cloudflare Pages

デプロイ先に関しては以下の候補を比較検討しました。

  • Vercel
  • Netlify
  • Firebase Hosting
  • Cloudflare Pages

まずVercelはNext.jsを使わないのであればそれ以外を使いたかったので選定しませんでした(おい)。
Netlifyは日本にエッジサーバがなく、Firebase HostingはCI/CD周りの設定が面倒(GitHub Actionsの雛形を作ってくれるようになったとはいえ、もはやそれすら管理したくなく、ブランチ連携したら全てやってくれるのがいい)なので、今回はCloudflare Pagesを選定しました。
パフォーマンスに問題がない、無料枠が半端ないなどの理由もありましたが、Cloudflare Pagesについては使ってみたいベースというのはあります。
Cloudflare Workersとの連携が強化されて、functionsディレクトリを切れば簡単に使用できるようになったようなのも大きいです。

また、デプロイ先の比較検討では以下の記事が非常に参考になりました。

https://zenn.dev/catnose99/scraps/6780379210136f

セットアップ手順

  1. Vite + Preact + TypeScriptのプロジェクトを作成
  2. Gitの設定、およびGitHubへpush
  3. Tailwind CSSを導入
  4. Cloudflare Pagesにデプロイ

Vite + Preact + TypeScriptのプロジェクトを作成

ViteのScaffoldingコマンドを使用します。

yarn create vite <your-app-name> --template preact-ts

これだけでVite + Preact + TypeScriptのプロジェクトの作成が完了します。
他にもReact、Vue、Svelteなどのテンプレートがあるようです。

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

この時点でyarn devすると開発サーバが立ち上がります。

cd <your-app-name>
yarn install
yarn dev
=> Open http://localhost:3000 with your browser to see the result.

vite.config.tsを見てみると以下のようになっています。

vite.config.ts
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()]
})

開発サーバと本番ビルドがこの設定の量で可能なのは驚きですね。

以前最小構成でwebpack + React + TypeScriptを使ってみた時は、開発サーバと本番ビルドでそこそこの設定の量があったので、この点だけで言えばViteはシンプルでよいですね。

https://zenn.dev/a_da_chi/articles/bd350f4bbebe9b

https://vitejs.dev/guide/

Gitの設定、およびGitHubへpush

一般的なやり方なので省略します。

Tailwind CSSを導入

まずはライブラリをインストールします。

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

次にtailwindcssのinitコマンドを使用します。

npx tailwindcss init

以下の2つのファイルが追加されます。

tailwind.confing.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.jsに設定を追加します。

tailwind.confing.js
module.exports = {
+  mode: "jit", 
-  purge: [],
+  purge: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

mode: "jit"はJust-in-Time Modeの設定です。ビルドの高速化など様々な恩恵があります。現状プレビュー機能のようですが、特に問題は起こりませんでした。

https://tailwindcss.com/docs/just-in-time-mode

purgeはその名の通りパージの設定です。Tailwind CSSを使用しているファイルの全てのpathを指定します。

https://tailwindcss.com/docs/optimizing-for-production

最後にsrc/index.cssでTailwind CSSをimportすればTailwind CSSのclassを使用できるようになります。

index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

https://tailwindcss.com/docs/installation

Cloudflare Pagesにデプロイ

まずはCloudflareにログイン、またはサインアップし、サイドバーのPagesを開いてプロジェクトを作成してください。

次にGitHubと連携し、リポジトリを選択します。

プロジェクト名と本番環境のブランチを設定し、以下のようにビルド関連の設定をすると完了です。

ビルドコマンド: yarn build
ビルド出力ディレクトリ: /dist
ルートディレクトリ: /

https://developers.cloudflare.com/pages/get-started

おわりに

趣味で小規模なSPAを作る場合を想定しているのでプロダクションレベルではないかもしれませんが、ルーティングや状態管理などのライブラリを適宜追加してカスタマイズしていけばある程度のSPAまでは対応できるかもしれません。
もちろん今回選定しなかった技術を一部選定するというのもありだと思います。

とりあえず小規模なSPAを作りたいんだけどどうすればいいのか迷った時にでもぜひ参考にしてみてください。

Discussion

ログインするとコメントできます