package.json、scripts、dependenciesとdevDependencies
package.jsonのフィールドを理解し、簡単なスクリプトを定義して、dependenciesとdevDependenciesの違いを学びます。
「package.json、scripts、dependenciesとdevDependencies」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。
package.jsonの理由
目標:package.jsonを読んで使えるようにします。
- 主なフィールド:name、version、type
- scripts:短いコマンドを実行します
- dependenciesとdevDependenciesの違い
- セマンティックバージョン(caret/tilde)の概要

フィールドの概要
package.jsonは、プロジェクト情報、スクリプト、依存関係の一覧を記述したマニフェストです。
// Emulate a minimal package.json as a JS object
const pkg = {
name: "hello-app",
version: "1.0.0",
type: "module",
scripts: {
start: "node index.js",
build: "echo building...",
test: "echo tests..."
},
dependencies: {
"chalk": "^5.3.0"
},
devDependencies: {
"eslint": "^9.0.0"
}
};
console.log("name:", pkg.name);
console.log("version:", pkg.version);
console.log("type:", pkg.type);
console.log("scripts:", Object.keys(pkg.scripts));

名前でスクリプトを実行
scriptsの下にコマンド(例:build、test)を追加し、パッケージマネージャーで実行します。
// Tiny emulator for "npm run <name>"
function runScript(name) {
const cmd = pkg.scripts[name];
if (!cmd) {
console.log("no such script:", name);
return;
}
console.log("running:", name, "->", cmd);
}
runScript("build");
runScript("test");
runScript("missing");

何をどこに置くか
dependenciesはアプリの実行時に必要なものです。devDependenciesは開発専用のツールです。
// List production deps vs development-time tools
function listDeps() {
console.log("deps:", Object.keys(pkg.dependencies));
console.log("devDeps:", Object.keys(pkg.devDependencies));
}
// Rule of thumb in comments:
// dependencies -> needed at runtime (your app uses them when running)
// devDependencies -> only for development (lint, test, build tools)
listDeps();

Semverの基本
Semverの範囲は、許可する更新を表します。caretはマイナーおよびパッチ、tildeはパッチ、exactは指定したバージョンのみを許可します。
// Semantic version ranges (intent only)
// ^1.2.3 -> allow minor/patch updates (1.x compatible)
// ~1.2.3 -> allow patch updates (1.2.x)
// 1.2.3 -> exact version
const ranges = ["^1.2.3", "~1.2.3", "1.2.3"];
for (const r of ranges) {
console.log("range:", r);
}

実践的なメモ
ヒント:
- スクリプトは短く分かりやすく保ちます(例:build、test)。
- 実行時ライブラリ → dependencies、ツール → devDependencies。
- まずは^の範囲から始め、必要に応じて後からバージョンを固定します。

scriptsフィールドのクイズ
クイックチェック:コマンドはどこに記述するでしょうか。

まとめ
まとめ:package.jsonにはプロジェクト情報、タスクを実行するscripts、そしてdependencies(実行時)とdevDependencies(開発ツール)を分けて記述します。シンプルなSemverの範囲を使って、最新の状態を保ちます。

よくある質問
「package.json、scripts、dependenciesとdevDependencies」レッスンは無料ですか?
はい。「package.json、scripts、dependenciesとdevDependencies」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。
「package.json、scripts、dependenciesとdevDependencies」で何を学びますか?
package.jsonのフィールドを理解し、簡単なスクリプトを定義して、dependenciesとdevDependenciesの違いを学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「package.json、scripts、dependenciesとdevDependencies」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- package.json、scripts、dependenciesとdevDependencies
- npxとセマンティックバージョニングの範囲指定
- ローカルとグローバルのツール、bin、チーム向けワークフロー