作成日時: 2025-11-14
はじめに
この記事では、Webフロントエンド開発において私が最近採用している開発環境のセットアップや設定について紹介します。バージョン管理、パッケージマネージャーの選定、タスクランナーの活用など、開発体験を向上させるための実践的なTipsをまとめています。
Node.jsとパッケージマネージャーのversion管理
チーム開発やCI/CD環境では、Node.jsとパッケージマネージャーのバージョンを統一することが重要です。バージョンの不一致により、ローカル環境では動作するがCI環境では失敗する、といった問題を防ぐことができます。
最近はパッケージマネージャーとしてpnpmを使用しているため、package.jsonとpnpm-workspace.yamlに以下の設定をしてバージョンを固定しています。これにより、チームメンバー全員が同じバージョンの環境で開発できます。
{
"engines": {
"node": "22.20.0"
},
"packageManager": "pnpm@10.13.1",
}
engineStrict: true
packageManagerStrictVersion: true
設定の詳細
- package.json
-
engines.node: Node.jsのバージョンを指定 -
packageManager: パッケージマネージャーとそのバージョンを指定（Corepackの形式）
-
- pnpm-workspace.yaml
-
engineStrict:enginesフィールドで指定したバージョンと異なる場合にエラーを出す -
packageManagerStrictVersion:packageManagerで指定したバージョンと異なる場合にエラーを出す
-
pnpmに関しては、v9.7以降がインストールされていれば、managePackageManagerVersions: true（デフォルト）により、package.jsonに指定したバージョンが自動的にインストールされるため、チームメンバーは個別にバージョンを管理する必要がありません。
GitHub Actionsでの活用
GitHub Actionsのactions/setup-nodeはpackage.jsonのenginesフィールドを参照する設定があるため、CI環境でも同じNode.jsバージョンを使用できます。
- uses: actions/setup-node@v4
with:
node-version-file: "package.json"
依存パッケージのバージョン指定
デフォルトでは、pnpm addなどでパッケージをインストールすると、バージョンがsemver形式（^1.0.0や~1.0.0など）でpackage.jsonに記録されます。実際にインストールされるバージョンはpnpm-lock.yamlで固定されるため、再現性は保証されています。
しかし、semver指定の場合、package.jsonを見ただけでは実際にインストールされているバージョンが分かりません。そのため、以下の設定でバージョンをプレフィックスなしで保存するようにしています。
savePrefix: ''
この設定により、pnpm add <package>を実行した際、package.jsonには"package": "1.0.0"のように、プレフィックスなしで正確なバージョンが記録されます。
メリット
-
可視性の向上:
package.jsonを見るだけで、現在インストールされているバージョンがすぐに確認できる - コミュニケーションの円滑化: PRレビューやドキュメントで、具体的なバージョン番号が明確になる
-
lockfileを開く手間が減る: バージョンを確認するために
pnpm-lock.yamlを開く必要がない
タスクランナー
多くのプロジェクトではpackage.jsonのscriptsフィールドにタスクを定義していますが、個人的にはタスクランナーを別で用意する方が好みです。
makeの活用
makeはmacOSやLinuxであればデフォルトでインストールされているため、追加のセットアップが不要という利点があります。
.PHONY: install dev build test
install:
pnpm install
dev:
pnpm run dev
build:
pnpm run build
test:
pnpm test
miseへの移行
最近はmiseが気になっています。miseは、ランタイムバージョン管理とタスクランナーの機能を兼ね備えたツールです。
[tasks.dev]
run = 'pnpm run dev'
[tasks.build]
run = 'pnpm run build'
[tasks.test]
run = 'pnpm test'
個人プロジェクトではmiseを積極的に採用しており、開発体験の向上を実感しています。
まとめ
この記事では、Webフロントエンド開発において私が採用している開発環境の設定について紹介しました。
-
バージョン管理:
package.jsonとpnpm-workspace.yamlで、Node.jsとpnpmのバージョンを厳密に管理 -
依存パッケージ:
savePrefix: ''で、package.jsonを見るだけでインストールされているバージョンを確認可能に -
タスクランナー:
makeやmiseを使って、package.jsonから分離してタスクを管理
これらの設定により、チーム開発でのバージョン不一致によるトラブルを防ぎ、開発環境のセットアップを簡素化できます。特に、CI/CD環境との一貫性を保つことで、「ローカルでは動くのにCIで失敗する」といった問題を減らすことができます。
あくまで個人的な好みと経験に基づいた設定ですが、皆さんのプロジェクトでも参考になれば幸いです。
Discussion