0Pricing
JavaScript Academy · レッスン

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、scripts、dependenciesとdevDependencies — イラスト1

フィールドの概要

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));
package.json、scripts、dependenciesとdevDependencies — イラスト2

名前でスクリプトを実行

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");
package.json、scripts、dependenciesとdevDependencies — イラスト3

何をどこに置くか

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();
package.json、scripts、dependenciesとdevDependencies — イラスト4

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);
}
package.json、scripts、dependenciesとdevDependencies — イラスト5

実践的なメモ

ヒント:

  • スクリプトは短く分かりやすく保ちます(例:build、test)。
  • 実行時ライブラリ → dependencies、ツール → devDependencies。
  • まずは^の範囲から始め、必要に応じて後からバージョンを固定します。
package.json、scripts、dependenciesとdevDependencies — イラスト6

scriptsフィールドのクイズ

クイックチェック:コマンドはどこに記述するでしょうか。

package.json、scripts、dependenciesとdevDependencies — イラスト7

まとめ

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

package.json、scripts、dependenciesとdevDependencies — イラスト8

よくある質問

「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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. package.json、scripts、dependenciesとdevDependencies
  2. npxとセマンティックバージョニングの範囲指定
  3. ローカルとグローバルのツール、bin、チーム向けワークフロー
← JavaScript Academyに戻る