🚀

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

2021/11/26に公開

TypeScript

はじめに

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

前提

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

技術スタック

Vite
Preact
TypeScript
Tailwind CSS
Cloudflare Pages

技術選定理由

Vite

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

小規模な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、CSS Modulesなど）
Zero Runtime CSS in JS（linaria、stichesなど）

まずリソースが潤沢にある場合やマークアップ専任のエンジニアがいるようなケースでもない限り、生のCSSをゴリゴリ書いていくのはのは大変なので下2つは選定しませんでした。
この中だと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ディレクトリを切れば簡単に使用できるようになったようなのも大きいです。

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

セットアップ手順

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

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

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

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

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

この時点で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://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の設定です。ビルドの高速化など様々な恩恵があります。現状プレビュー機能のようですが、特に問題は起こりませんでした。

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

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

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Cloudflare Pagesにデプロイ

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

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

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

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

おわりに

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

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

はじめに

前提

技術スタック

技術選定理由

Vite

Preact

TypeScript

Tailwind CSS

Cloudflare Pages

セットアップ手順

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

Gitの設定、およびGitHubへpush

Tailwind CSSを導入

Cloudflare Pagesにデプロイ

おわりに

Discussion