JS this キーワード

JPKODA 編集部 May 7, 2026

JavaScriptでオブジェクトを使い始めると、必ず避けて通れない特殊なキーワードに遭遇します。それが this です。

初心者にとって、このキーワードは最も基本的でありながら、最も混乱を招く概念の一つです。本質的に、this は実行中のコードの「所有者（オーナー）」への参照を指します。その値は固定されているわけではなく、関数が呼び出された コンテキスト (Context) によって完全に決まります。

this を理解することは、予測可能で効果的なオブジェクト指向JavaScriptを書くために不可欠です。なぜなら、this を使うことでメソッドが所属するオブジェクト自体のプロパティにアクセスし、操作できるようになるからです。this をマスターすれば、より動的でインタラクティブなオブジェクトを作成でき、複雑なアプリケーションを構築するための強固な基礎を築くことができます。

1. 異なるコンテキストにおけるthisの理解

JavaScriptにおける this の値は静的ではありません。関数がどのように呼び出されたかによって決定されます。この動的な特性は初心者が混乱する原因になりますが、基本ルールを把握してしまえば非常にクリアになります。最も一般的なシナリオを探索してみましょう。

1.1 グローバルコンテキスト (The Global Context)

this がどの関数の外側でも使用されている場合、つまりグローバルスコープ（Global Scope）では、グローバルオブジェクト を指します。

Webブラウザ環境では、グローバルオブジェクトは window オブジェクトです。
Node.js環境では、global オブジェクトです。

これは、グローバルに宣言された変数や関数はすべて window オブジェクト（ブラウザの場合）のプロパティになり、this はそれを指すことを意味します。

// ブラウザ環境において、どの関数の外側でも：
console.log(this === window); // 出力: true (ブラウザ内)

let globalMessage = "グローバルスコープからの挨拶！";
console.log(this.globalMessage); // 出力: "グローバルスコープからの挨拶！"

モダンなJavaScript、特にモジュール（Modules）を使用している場合（モジュールはデフォルトでストリクトモードが有効です）、モジュールのトップレベルでの this は undefined になることがあります。ここでは主に、一般的なブラウザスクリプトにおける window オブジェクトに焦点を当てます。

1.2 関数コンテキスト（普通関数）

通常の関数（オブジェクトのメソッドとしてではなく）が直接呼び出されるとき、this は通常 グローバルオブジェクト（ブラウザでは window オブジェクト）を指します。これは「デフォルトバインド」ルールと呼ばれます。

しかし、JavaScriptの ストリクトモード (Strict Mode) が有効な場合（スクリプト全体または関数内部）、普通関数内の this は undefined になります。ストリクトモードは、よくあるコーディングミスをキャッチし、特定の「安全でない」操作を禁止するための機能です。

function greet() {
  console.log(this); // 非ストリクトモードのブラウザ中: Window オブジェクト
                     // ストリクトモードまたはモジュール内: undefined
  console.log("こんにちは！");
}

greet(); // 普通関数として呼び出し

function describeContext() {
  'use strict'; // この関数にストリクトモードを適用
  console.log(this); // 出力: undefined
}

describeContext();

普通関数呼び出しにおいて this がグローバルオブジェクト（または undefined）を指す挙動は、特定のオブジェクトを指すことを期待している場合に、予期せぬ結果を招くことがあります。

1.3 メソッドコンテキスト

これは this の最も一般的で直感的な使い道の一つです。関数がオブジェクトの メソッド として呼び出されるとき（つまりオブジェクトのプロパティであり、object.method() のようにドット記法で呼び出されるとき）、this は そのメソッドを所有するオブジェクト を指します。

これにより、メソッドは親オブジェクトのプロパティに簡単にアクセスし、操作することができます。

const person = {
  name: "アリス",
  age: 30,
  // sayHello は person オブジェクトのメソッド
  sayHello: function() {
    // ここでの 'this' は 'person' オブジェクトを指す
    console.log(`こんにちは、私の名前は ${this.name} です。今年で ${this.age} 歳になります。`);
  },
  celebrateBirthday: function() {
    this.age++; // person オブジェクトの age プロパティをインクリメント
    console.log(`${this.name} は ${this.age} 歳になりました！`);
  }
};

person.sayHello();       // 出力: こんにちは、私の名前は アリス です。今年で 30 歳になります。
// sayHello が 'person' のメソッドとして呼ばれるとき、'this' は 'person' です。

person.celebrateBirthday(); // 出力: アリス は 31 歳になりました！
person.sayHello();          // 出力: こんにちは、私の名前は アリス です。今年で 31 歳になります。

この例では、sayHello と celebrateBirthday メソッド内部の this.name と this.age は、正しく person オブジェクトのプロパティを参照しています。

重要な落とし穴： オブジェクトからメソッドを抽出し、独立した関数として呼び出すと、this は元のオブジェクトではなく、グローバルコンテキスト（または undefined）に戻ってしまいます。

const car = {
  make: "Honda",
  model: "Civic",
  displayInfo: function() {
    console.log(`車: ${this.make} ${this.model}`);
  }
};

car.displayInfo(); // 出力: 車: Honda Civic (this は 'car' を指す)

const standaloneDisplay = car.displayInfo;
standaloneDisplay(); // 出力: 車: undefined undefined
                     // 'this' は現在 'window' (またはストリクトモードでは undefined)
                     // window には 'make' や 'model' プロパティは存在しません。

この落とし穴は this の動的な特性を際立たせており、値は「どこで定義されたか」ではなく 「どのように呼び出されたか」 によって決まることを強調しています。

1.4 アロー関数とレキシカルな this

ES6 (ECMAScript 2015) で導入された アロー関数 (Arrow Functions) は、普通関数とは異なる方法で this を処理します。

アロー関数は独自の this バインドを持ちません。代わりに、外側のスコープ（定義された場所のスコープ）から this をレキシカル（静的）に継承 します。つまり、アロー関数内の this は、そのアロー関数の外側にある this と同じです。

この挙動は、コールバック関数や入れ子になった関数において this のバインドが失われる問題を解決するのに非常に役立ちます。

const user = {
  firstName: "ボブ",
  lastName: "スミス",
  // 普通のメソッド
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  // 内部でアロー関数を使用するメソッド
  greetWithDelay: function() {
    console.log(`こんにちは、私は ${this.fullName()} です。`); // ここでの 'this' は 'user'
    
    // 下記のアロー関数は自身の 'this' コンテキストを作成しません。
    // 'greetWithDelay' メソッドのスコープから 'this' を継承します。
    setTimeout(() => {
      // ここでの 'this' は依然として 'user' (greetWithDelay のスコープを継承)
      console.log(`(遅延後) 私は ${this.fullName()} です。`);
    }, 1000);
  }
};

user.greetWithDelay();
// 出力:
// こんにちは、私は ボブ スミス です。
// (1秒後) (遅延後) 私は ボブ スミス です。

もし setTimeout 内で普通関数を使用した場合、this はグローバルオブジェクト（または undefined）にバインドされ、this.fullName() の呼び出しでエラーが発生します。アロー関数はこの問題をエレガントに解決します。

2. 実戦的な例とデモンストレーション

詳細な例を通じて、異なるシナリオにおける this の理解を深めましょう。

2.1 示例 1：入れ子になったオブジェクトとコールバックにおける this

プレゼンテーションのスライドを代表するオブジェクトを考えてみます。各スライドは内容を持ち、次のスライドへ進む機能を持っています。

const presentation = {
  title: "JavaScript オブジェクト入門",
  currentSlide: 1,
  slides: [
    "モジュール 7 へようこそ！",
    "オブジェクトとは何か？",
    "プロパティとメソッド",
    "'this' キーワード詳解",
    "次のステップ..."
  ],
  // 現在のスライド内容を表示するメソッド
  displayCurrentSlide: function() {
    // ここでの 'this' は 'presentation' オブジェクトを指す
    console.log(`--- ${this.title} ---`);
    console.log(`スライド ${this.currentSlide}: ${this.slides[this.currentSlide - 1]}`);
  },
  // 次のスライドへ進むメソッド
  advanceSlide: function() {
    if (this.currentSlide < this.slides.length) {
      this.currentSlide++;
      this.displayCurrentSlide();
    } else {
      console.log("プレゼンテーション終了。");
    }
  },
  // 普通関数のコールバックを使用して動作をスケジュールするメソッド
  // これは一般的な 'this' バインドの問題をデモします
  startAutoAdvanceProblem: function() {
    console.log("\n自動再生開始 ('this' の問題によりエラーが発生します)...");
    // ここでの 'this' は 'presentation' です。
    // しかし、setTimeout に渡される関数は普通関数です。
    setTimeout(function() {
      // この普通関数内では、'this' は現在 'window' (または undefined) です。
      // そのため this.advanceSlide() は失敗します（windowにそのメソッドはないため）。
      console.log("問題のあるコールバックからスライド切り替えを試行中...");
      try {
        this.advanceSlide(); 
      } catch (e) {
        console.error("エラー発生:", e.message);
        console.error("原因: setTimeout コールバック内の 'this' が 'presentation' ではありません。");
      }
    }, 2000);
  },
  // アロー関数のコールバックを使用して動作をスケジュールするメソッド
  // これは正しく 'this' コンテキストを保持します
  startAutoAdvanceCorrect: function() {
    console.log("\n自動再生開始 (アロー関数による修正済)...");
    // ここでの 'this' は 'presentation' です。
    // setTimeout に渡されるアロー関数はここから 'this' をレキシカルに継承します。
    setTimeout(() => {
      // このアロー関数内では、'this' は依然として 'presentation' です。
      console.log("正しいコールバックからスライド切り替えを試行中...");
      this.advanceSlide(); // 正常に動作します！
    }, 2000);
  }
};

// 初期表示
presentation.displayCurrentSlide(); // スライド 1

// 手動切り替え
presentation.advanceSlide();        // スライド 2

// 普通関数コールバックによる 'this' 問題のデモ
presentation.startAutoAdvanceProblem();

// しばらく待ってからアロー関数の正しい方法をデモ
setTimeout(() => {
  presentation.startAutoAdvanceCorrect();
}, 4000);

この例は、関数の呼び出しコンテキストによって this がいかに変化するか、そしてアロー関数がいかに非同期操作やコールバックにおいて期待通りの this バインドを維持するための強力な解決策になるかを明確に示しています。

2.2 示例 2：シンプルなゲームキャラクターの構築

小さなゲームの player（プレイヤー）オブジェクトを作成し、this がオブジェクトの状態管理にどのように役立つかを見てみましょう。

const player = {
  name: "ヒーロー",
  health: 100,
  score: 0,
  inventory: [],
  // ダメージを受けるメソッド
  takeDamage: function(amount) {
    this.health -= amount; // 'this' は 'player' オブジェクトを指す
    console.log(`${this.name} は ${amount} ポイントのダメージを受けた。残り体力: ${this.health}`);
    if (this.health <= 0) {
      this.die();
    }
  },
  // 回復するメソッド
  heal: function(amount) {
    this.health += amount;
    // 体力が最大値（仮に100）を超えないようにする
    if (this.health > 100) {
      this.health = 100;
    }
    console.log(`${this.name} は ${amount} ポイント回復した。現在体力: ${this.health}`);
  },
  // アイテムを追加するメソッド
  addItem: function(item) {
    this.inventory.push(item);
    console.log(`${this.name} は ${item} を拾った。所持品: ${this.inventory.join(', ')}`);
  },
  // プレイヤーが死亡した時のメソッド
  die: function() {
    console.log(`${this.name} は倒れた！ゲームオーバー。`);
  },
  // 遅延してプレイヤーの状態を説明するメソッド
  // アロー関数を使用して 'this' コンテキストを維持
  describePlayerDelayed: function() {
    console.log("プレイヤー情報を準備中...");
    setTimeout(() => {
      // アロー関数内の 'this' は依然として 'player'
      console.log(`\n${this.name} ステータス:`);
      console.log(`  体力: ${this.health}`);
      console.log(`  スコア: ${this.score}`);
      console.log(`  所持品: ${this.inventory.join(', ')}`);
    }, 1500);
  }
};

player.takeDamage(20);
player.heal(15);
player.addItem("ポーション");
player.addItem("剣");
player.takeDamage(80);
player.takeDamage(20);

// デモ用にプレイヤーをリセット
player.health = 100;
player.inventory = [];
player.name = "ウォリアー";
player.describePlayerDelayed();

これらの例は、自己完結型のオブジェクトを作成する上で this がいかに基礎的な役割を果たすかを強調しています。メソッドが自身のプロパティと相互作用することで、オブジェクトはコード内において真の「現実世界のエンティティ」となります。

3. まとめ

this キーワードは JavaScript オブジェクトモデルの礎石であり、メソッドが親オブジェクトに含まれるデータと動的に対話することを可能にします。これまで見てきたように、その値は 呼び出しコンテキスト に基づいて変化します：

グローバルスコープ では、this は window オブジェクト（ブラウザ）を指します。
普通関数呼び出し では、this はデフォルトで window（またはストリクトモードでは undefined）になります。これはバグの温床になりやすい点です。
メソッド呼び出し では、this はそのメソッドを所有するオブジェクトを指します。これが最も直感的で強力なユースケースです。
アロー関数 は特殊です。独自の this を持たず、外側のスコープから継承します。これにより、コールバックやネストされた関数内でも this コンテキストを保持できます。

this をマスターすることは、堅牢なオブジェクト指向JavaScriptを書くための基本です。自分自身の状態と振る舞いを管理できる、動的でインタラクティブなオブジェクトの作成を可能にします。