初心者でも安心！Next.js・Storybook・Prettierで作るモダン開発環境

開発環境の構成

• 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を導入しコードのテスト環境の準備する方法か下記の記事を参考にしてください。

Next.jsとJestの設定と実践テストの手順

はる Next.jsプロジェクトにJestを導入し、Reactコンポーネントをテストする方法を説明します。Jestを設定し、簡単なテストを実行できるところまでやってみましょう。 以前、Next.jsの環境を作り自動整形機能とSotryboo...

push.tokyo

2024.08.16