macOS で SolidJS 開発を始めたいけれど、TypeScript、ESLint、Prettier の設定で毎回戸惑っていませんか？どれも必須ツールですが、相性問題や設定の記述ミスで最初の一歩が遅れがちです。本記事では、Yarn を使って macOS 上で SolidJS プロジェクトを素早く立ち上げ、ESLint・Prettier・TSconfig の鉄板設定を一気に整える手順を解説します。最速でストレスフリーな開発環境を手に入れましょう。

背景

SolidJS は高速なリアクティビティとコンパクトなランタイムが魅力のフロントエンドフレームワークです。開発者は TypeScript を標準として型安全に開発し、ESLint でコード品質を維持し、Prettier でフォーマットを統一したいと考えます。

しかし、複数のツールを組み合わせると依存関係の不整合や設定衝突が発生しやすく、初期セットアップに思いのほか時間がかかることがあります。macOS 環境では Homebrew で Node.js をインストールし、Yarn でパッケージ管理するケースが多いため、この構成に最適化した手順が求められます。

下図は、macOS 上で Yarn を用いた SolidJS 開発環境全体の構成イメージです。

mermaidCopy codeflowchart TB
  subgraph macOS環境
    brew["Homebrew"]
    node["Node.js / Yarn"]
    brew -->|インストール| node
  end

  subgraph SolidJSプロジェクト
    vite["Vite"]
    solid["SolidJS"]
    ts["TypeScript"]
    eslint["ESLint"]
    prettier["Prettier"]

    node -->|プロジェクト作成| vite
    vite -->|テンプレート| solid
    solid -->|型定義| ts
    solid -->|コード品質| eslint
    solid -->|フォーマット| prettier
  end

  subgraph 設定ファイル群
    tsconfig["tsconfig.json"]
    eslintrc[".eslintrc.cjs"]
    prettierrc[".prettierrc"]

    ts -.適用.- tsconfig
    eslint -.適用.- eslintrc
    prettier -.適用.- prettierrc
  end

図で理解できる要点

• macOS 環境に Homebrew 経由で Node.js と Yarn を導入
• Vite テンプレートで SolidJS プロジェクトを作成
• TypeScript、ESLint、Prettier の設定ファイル群を管理

課題

macOS で SolidJS 開発環境を整えようとすると、以下のような課題に直面します。

ツール同士の設定衝突

ESLint と Prettier はどちらもコードの見た目やルールに関わるため、デフォルト設定のままでは両者が競合してしまいます。たとえば、ESLint が「セミコロンを必須」と指摘し、Prettier が「セミコロン不要」でフォーマットを実行すると、保存のたびにエラーと警告が交互に現れて開発効率が落ちます。

TypeScript 設定の煩雑さ

SolidJS は JSX を扱いますが、TypeScript で JSX をコンパイルするには tsconfig.json に "jsx": "preserve" や "jsxImportSource": "solid-js" といった SolidJS 固有の設定が必要です。これを忘れると型チェックエラーや実行時エラーが発生し、原因究明に時間を浪費します。

Yarn と npm の混在リスク

macOS では Homebrew で Node.js をインストールした後、npm と Yarn の両方が使える状態になりがちです。プロジェクト内で npm と Yarn を混在して使うと、ロックファイルの不整合やバージョン違いによるトラブルが起こりやすくなります。

下図は、設定衝突が起こる典型的なパターンです。

mermaidCopy codeflowchart LR
  code["コード保存"]
  eslintCheck["ESLint<br/>チェック"]
  prettierFormat["Prettier<br/>自動整形"]
  conflict["衝突発生<br/>エディタが警告"]

  code --> eslintCheck
  code --> prettierFormat
  eslintCheck --> conflict
  prettierFormat --> conflict

  style conflict fill:#f88,stroke:#d55,stroke-width:2px

図で理解できる要点

• コード保存時に ESLint と Prettier が同時に動作
• ルール設定が異なると相互に矛盾を指摘し合う
• 開発体験が悪化し、手動修正の手間が増える

解決策

上記の課題を解決するには、Yarn でパッケージを統一し、ESLint と Prettier の設定を適切に分離・連携させ、SolidJS に最適化した TypeScript 設定を用意することがポイントです。

パッケージ管理を Yarn に統一

macOS で Homebrew 経由で Node.js をインストール後、yarn コマンドを使ってプロジェクトを作成します。以降、npm install は使わず、すべて yarn add でパッケージを追加することでロックファイル（yarn.lock）を一元管理できます。

ESLint と Prettier の共存設定

ESLint のルールと Prettier のフォーマットが競合しないよう、eslint-config-prettier プラグインを導入してフォーマット関連の ESLint ルールを無効化します。これにより、コード品質チェックは ESLint が担当し、見た目の整形は Prettier が担当する明確な役割分担が実現します。

SolidJS 専用の TypeScript 設定

tsconfig.json に SolidJS の JSX 用設定（"jsx": "preserve"、"jsxImportSource": "solid-js"）を記述し、型チェックとビルドが正しく動作するようにします。また、strict: true を有効化して型安全性を高めます。

下図は、解決策全体のフローです。

mermaidCopy codeflowchart TB
  yarn["Yarn で<br/>プロジェクト作成"]
  deps["依存関係<br/>インストール"]
  eslintSetup["ESLint 設定<br/>(.eslintrc.cjs)"]
  prettierSetup["Prettier 設定<br/>(.prettierrc)"]
  tsconfigSetup["TSconfig 設定<br/>(tsconfig.json)"]
  vscode["VSCode 設定<br/>(settings.json)"]
  done["開発環境<br/>準備完了"]

  yarn --> deps
  deps --> eslintSetup
  deps --> prettierSetup
  deps --> tsconfigSetup
  eslintSetup --> vscode
  prettierSetup --> vscode
  tsconfigSetup --> vscode
  vscode --> done

  style done fill:#9f9,stroke:#6c6,stroke-width:2px

図で理解できる要点

• Yarn で一貫したパッケージ管理
• ESLint、Prettier、TSconfig を順次設定
• エディタ（VSCode）の設定で自動化を完成

具体例

ここでは、macOS に Homebrew で Node.js と Yarn をインストール済みという前提で、SolidJS プロジェクトを作成し、ESLint・Prettier・TSconfig を設定する全手順を示します。

環境準備

まず、Homebrew で Node.js と Yarn をインストールします。すでにインストール済みの場合はスキップしてください。

bashCopy code# Homebrew で Node.js をインストール
brew install node

# Yarn をグローバルインストール
npm install -g yarn

インストール後、バージョンを確認します。

bashCopy code# Node.js のバージョン確認
node --version

# Yarn のバージョン確認
yarn --version

これで Yarn を使う準備が整いました。

SolidJS プロジェクト作成

Yarn を使って Vite + SolidJS のプロジェクトを作成します。以下のコマンドを実行してください。

bashCopy code# Yarn で Vite プロジェクトを作成
yarn create vite my-solid-app --template solid-ts

# プロジェクトディレクトリへ移動
cd my-solid-app

--template solid-ts を指定することで、TypeScript 対応の SolidJS テンプレートが展開されます。

依存関係のインストール

作成したプロジェクトディレクトリで、必要なパッケージをインストールします。

bashCopy code# 基本パッケージのインストール
yarn install

次に、ESLint と Prettier 関連のパッケージを追加します。

bashCopy code# ESLint と Prettier のインストール
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-solid

ここでインストールした各パッケージの役割を整理します。

#	パッケージ	役割
1	eslint	JavaScript/TypeScript のコード品質チェックツール
2	prettier	コードフォーマッター
3	eslint-config-prettier	ESLint と Prettier の競合ルールを無効化
4	eslint-plugin-solid	SolidJS 専用の ESLint ルール集

ESLint 設定ファイルの作成

プロジェクトルートに .eslintrc.cjs ファイルを作成します。以下の内容を記述してください。

javascriptCopy codemodule.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:solid/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // 必要に応じてカスタムルールを追加
  },
};

この設定により、ESLint は SolidJS のルールを適用しつつ、Prettier と競合するルールを無効化します。

Prettier 設定ファイルの作成

プロジェクトルートに .prettierrc ファイルを作成します。

jsonCopy code{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

ここでは一般的なフォーマットルールを設定しています。チームの規約に合わせて調整してください。

TSconfig の設定

プロジェクトに自動生成される tsconfig.json を確認し、SolidJS に最適化された設定に調整します。

jsonCopy code{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

各設定項目の意味を表で整理します。

#	設定項目	役割
1	target	ES の出力バージョン（最新の ESNext を指定）
2	module	モジュールシステム（ESNext で Vite に対応）
3	strict	厳格な型チェックを有効化
4	jsx	JSX のコンパイル方法（preserve で Vite に任せる）
5	jsxImportSource	SolidJS の JSX ランタイムを指定
6	noEmit	TypeScript 自体は JS を出力せず型チェックのみ

jsx: "preserve" と jsxImportSource: "solid-js" の組み合わせが SolidJS では重要です。この設定により、TypeScript は JSX を変換せず Vite に処理を任せ、型チェックだけを実行します。

VSCode 設定（任意）

VSCode を使っている場合、保存時に自動で Prettier を適用する設定を .vscode​/​settings.json に追加すると便利です。

jsonCopy code{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

この設定により、ファイル保存時に Prettier でフォーマットし、ESLint の自動修正も実行されます。

動作確認

すべての設定が完了したら、開発サーバーを起動して動作を確認しましょう。

bashCopy code# 開発サーバー起動
yarn dev

ブラウザで http:​/​​/​localhost:5173 にアクセスし、SolidJS のデフォルト画面が表示されれば成功です。

試しに src​/​App.tsx を編集して保存すると、Prettier が自動でフォーマットし、ESLint がコード品質をチェックしてくれます。

ビルド確認

本番用ビルドも確認しておきましょう。

bashCopy code# 本番ビルド実行
yarn build

dist ディレクトリにビルド成果物が生成されれば、TypeScript の型チェックと Vite のビルドプロセスが正常に動作しています。

エラーが出た場合の対処法

もしビルドや起動時にエラーが発生した場合は、以下を確認してください。

Error: Cannot find module 'eslint-plugin-solid'

ESLint のプラグインがインストールされていない可能性があります。以下のコマンドで再インストールしてください。

bashCopy codeyarn add -D eslint-plugin-solid

TSconfig エラー：'JSX element implicitly has type 'any'...'

tsconfig.json の jsxImportSource が正しく設定されていない可能性があります。以下を確認してください。

jsonCopy code{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

Prettier と ESLint が競合する

.eslintrc.cjs の extends に prettier が含まれているか確認してください。

javascriptCopy codeextends: [
  'eslint:recommended',
  'plugin:solid/recommended',
  'prettier', // これがないと競合する
],

eslint-config-prettier がインストールされていない場合は追加します。

bashCopy codeyarn add -D eslint-config-prettier

package.json にスクリプト追加

開発効率を上げるため、package.json に便利なスクリプトを追加しておきましょう。

jsonCopy code{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .ts,.tsx",
    "lint:fix": "eslint src --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx}\""
  }
}

各スクリプトの役割を整理します。

#	スクリプト	内容
1	dev	開発サーバー起動
2	build	本番ビルド実行
3	preview	ビルド結果のプレビュー
4	lint	ESLint でコードチェック
5	lint	ESLint で自動修正
6	format	Prettier でフォーマット

これで、yarn lint や yarn format で手軽にコード品質とフォーマットを確認できます。

実際の開発フロー

設定が完了した後の日常的な開発フローは以下のようになります。

mermaidCopy codeflowchart LR
  edit["コード編集"]
  save["保存"]
  prettier["Prettier<br/>自動整形"]
  eslint["ESLint<br/>自動修正"]
  typecheck["TypeScript<br/>型チェック"]
  dev["開発サーバー<br/>でプレビュー"]

  edit --> save
  save --> prettier
  prettier --> eslint
  eslint --> typecheck
  typecheck --> dev
  dev -->|修正が必要| edit

  style dev fill:#9cf,stroke:#69c,stroke-width:2px

図で理解できる要点

• コード保存時に Prettier と ESLint が自動で働く
• TypeScript が型チェックを行い、エラーを早期発見
• 開発サーバーでリアルタイムにプレビューできる

まとめ

本記事では、macOS 上で Yarn を使って SolidJS プロジェクトを作成し、ESLint・Prettier・TSconfig を最速で構築する手順を解説しました。

ポイントは以下の 3 点です。

1. Yarn で一貫したパッケージ管理：npm との混在を避け、ロックファイルを統一する
2. ESLint と Prettier の適切な連携：eslint-config-prettier で競合を回避し、役割を分離する
3. SolidJS 専用の TypeScript 設定：jsx: "preserve" と jsxImportSource: "solid-js" で型チェックを最適化する

これらの設定を最初に整えておけば、開発中のストレスが大幅に減り、コード品質を保ちながら高速に開発を進められます。ぜひ今回の鉄板レシピを活用して、快適な SolidJS 開発をお楽しみください。

関連リンク

• SolidJS 公式サイト
• Vite 公式ドキュメント
• ESLint 公式サイト
• Prettier 公式サイト
• TypeScript 公式ドキュメント
• Homebrew 公式サイト
• Yarn 公式サイト