今回は最新のNext.jsとStorybookを活用した開発環境の構築方法を紹介します。
この環境では、モダンなフロントエンド開発を効率的に進めるためのツールと構成を整えます。
開発環境の構成
- Next.js: バージョン14を使用し、サーバーサイドレンダリングと静的サイト生成の利点を活かします。
- Storybook: バージョン8を導入し、UIコンポーネントの独立した開発とテストを可能にします。
- TypeScript: 型安全なコードを記述し、開発中のエラーを減少させます。
- Tailwind CSS: 高速でモダンなCSSフレームワークを利用し、スタイルの一貫性を向上させます。
- Prettier: コード整形や順序整列の自動化で、スタイルの一貫性を向上します。
この構成により、堅牢で拡張性のあるWebアプリケーションを構築するための基盤を提供します。
1. Next.js をインストール
まず、Next.jsアプリケーションを作成します。最新のテンプレートを使用し、TypeScriptとTailwind CSSを導入しつつ、App Routerを使用します。
npx create-next-app@latest
オプションの選択
- TypeScript: Yes
- Tailwind CSS: Yes
- App Router: Yes
これにより、最新のベストプラクティスに基づいたNext.jsのセットアップが可能になります。
公式ドキュメント:https://nextjs.org/docs/getting-started/installation
2. Storybook のインストール
次に、Storybookをプロジェクトに追加して、コンポーネントの開発をしやすくします。
npx storybook@latest init
このコマンドにより、Storybookの必要な設定ファイルと依存関係が自動的に追加されます。
公式ドキュメント:https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react
3. Storybook の設定調整
デフォルトでは、Storybookは特定のディレクトリを監視するように設定されています。今回は、app/_components/
ディレクトリを監視するように変更します。
.storybook/main.ts の修正
以下のようにファイルを変更します。
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
stories: [
"../app/_components/**/*.mdx", // 修正
"../app/_components/**/*.stories.@(js|jsx|mjs|ts|tsx)", // 修正
],
// その他の設定
};
これで、Storybookの監視対象を変更し、コンポーネント開発に集中できます。インストール時に追加されるstories
フォルダは参考にしつつ、必要に応じて削除してください。
4. Prettier の追加
コードフォーマットを自動化するためにPrettierを追加し、ESLintと連携させます。
インストール
npm install --save-dev eslint-config-prettier prettier @typescript-eslint/parser
.eslintrc.json の修正
ESLintの設定をPrettierと統合します。
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"project": "./tsconfig.json",
"sourceType": "module"
},
"extends": [
"next/core-web-vitals",
"prettier"
]
}
次の部分は既に存在するはずですが、確認して追記してください。
"extends": [
"next/core-web-vitals"
]
.prettierrc の作成
Prettierの設定ファイルを作成し、コードスタイルを統一します。
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"proseWrap": "always"
}
.eslintignore の作成
ESLintによるチェックを避けたいディレクトリを指定します。
node_modules/
build/
public/
5. Prettierの拡張機能でインポートのソートを追加
インポートを整理するためのPrettierプラグインを導入します。
インストール
npm install --save-dev @trivago/prettier-plugin-sort-imports
公式ドキュメント:https://github.com/trivago/prettier-plugin-sort-imports
.prettierrc の修正
インポートの順序を整理する設定を追加します。
{
// 省略 (ここのコメントアウトは入れないでください)
"plugins": ["@trivago/prettier-plugin-sort-imports"],
"importOrder": [
"^react(/.*)?$",
"^next(/.*)?$",
"<THIRD_PARTY_MODULES>",
"^types$",
"^@/app/_config/(.*)$",
"^@/app/_lib/(.*)$",
"^@/app/_components/(.*)$",
"^[./]",
"^import\\s+type"
],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true,
"importOrderCombineTypeAndValueImports": false
}
- importOrderSeparation: 各インポートグループ間に空行を追加
- importOrderSortSpecifiers: 各インポート内の指定子をアルファベット順にソート
- importOrderCombineTypeAndValueImports: importとimport typeを分けて整理
以上で、Next.jsとStorybookのセットアップ、そしてPrettierを使ったコードフォーマットの自動化が完了しました。これにより、開発効率が向上し、統一されたコードスタイルを維持できます。
6. Prettierの拡張機能で Tailwind CSS のクラス名を自動ソート
Tailwind CSSのクラス名を自動でソートするためのプラグインを導入します。これにより、クラス名が整理され、スタイルの一貫性が向上します。
インストール
まず、プラグインをインストールします。
npm install --save-dev prettier-plugin-tailwindcss
.prettierrc の修正
次に、Prettierの設定ファイルにプラグインを追加します。
{
"plugins": [
"@trivago/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss"
]
}
.prettierrc
ファイル内の "plugins"
に "prettier-plugin-tailwindcss"
この設定により、コード整形時にTailwind CSSのクラス名が自動でソートされるようになります。
さらにカスタマイズ
ここからさらにJestを導入しコードのテスト環境の準備する方法か下記の記事を参考にしてください。