thisって何?使い方を覚えて、JavaScriptをもっと楽しく使おう!

こんにちは、ライターのマサトです!

JavaScriptで、thisという記述をよく見かけませんか?

見かけるけれど、よく意味がわかっていなかったりなんとなーくで使っていたりする人もいるのではないでしょうか?

thisはちょっと考え方が難しいと言われているくらい難易度がちょい高なものなのですが、JavaScriptにおいてかなり重要なものです。

今回はそんなthisを、下記の流れで学習していきましょう!

【基礎】thisとは?
【基礎】thisの使い方
【基礎】thisの呼び出しパターン
【発展】formでthisの活用する方法
【発展】thisとthatの使い分け

thisがわかるようになると、スキルアップを実感できるだけでなくJavaScriptの面白さが数倍アップします!
この機会にぜひ挑戦してみてくださいね。

thisとは?

thisとは、JavaScriptに最初から用意されている特別な変数のことです。

何が特別かというと、呼び出した場所や方法によってその中身が変化するという点です。

これによって非常に便利な変数として機能するのですが、困ったことに理解を難しくさせる要因にもなっています。

この説明だけではthisがどんなものなのかちょっとよくわからないですよね…

そんな時は、まずは使ってみるのが一番!
thisを利用するシーンを想定して、実際にいくつかのパターンをご紹介していきます。

thisの使い方

ここからは、実際にthisを使ったプログラミング手法を勉強していきましょう!

簡単なthisの書き方から、その中身を出力してどのような情報が格納されているのか、具体的に見ていきます。

thisの書き方

thisは、プログラム内のどこでもいつでも単体で利用できる特別な存在です。
そのため、thisには通常のメソッドのような構文も無ければオプション設定などもありません。

例えば、以下のように単体で利用されることもあります。

console.log( this );

この例では、thisをそのまま実行してコンソールログに出力しています。

thisに格納されている値は、thisをどこから実行したのか、またはどのような方法で実行したのかで変化します。

thisの中身を出力する

それでは、thisに格納されている情報がどんなものなのか、その中身を確認してみましょう!

最も簡単な確認方法はコンソールログに出力する方法でしょう。

console.log( this );

実行結果

Window {stop: function, open: function, alert: function…}

実行結果に注目してください!
ごく普通のWindowオブジェクト(グローバルオブジェクト)が出力されていますよね?

つまり、デフォルト状態でthisはwindowオブジェクトとまったく同じという意味になります。

その証拠にthisへ新しいデータを追加すると、どうなるか確認してみましょう!

this.sample = 'こんにちは';

console.log( window.sample );

実行結果

こんにちは

「this.sample」へ文字列を追加しているのに、「window.sample」を表示すると「こんにちは」としっかり出力されています。

つまり、この状態のthisへ文字列を追加するということはwindowオブジェクトに追加するのと同じことなのです。

thisを呼び出すパターン

ここからは、thisを呼び出す場所によってどのように中身が変化するのかを確認していきます。

よく利用される場所としては、関数メソッドコンストラクタがあるので、それぞれ詳しく見ていきましょう。

関数で呼び出す

まずは、関数内で利用されるthisの挙動から確認していきます。

例えば、「sample()」という簡単な関数を以下のように作成&実行してみましょう!

function sample() {

    console.log( this );

}

sample();

実行結果

Window {stop: function, open: function, alert: function…}

冒頭でご紹介した例と同じく、Windowオブジェクトが出力されていますね。

つまり、関数の外でも中でもthisに格納されている情報はまったく同じということになります。

メソッドで呼び出す

今度はthisを書く場所を変えてみましょう。

まず、新しくオブジェクトを作成してその中にthisを記述してみます。

var myObj = {

    name: this,

}

console.log( myObj.name );

実行結果

Window {stop: function, open: function, alert: function…}

この例では、「myObj」という新しいオブジェクトを作成し、その中のプロパティ「name」へthisの中身を代入しています。

実行結果を見ると、thisの中身が先ほどと同じようにwindowオブジェクトになっていることがわかりますね。

それでは、次にメソッドを作成してその中にthisを記述してみましょう!

var myObj = {
    name: '太郎',
    myFunc: function() {

        //メソッドの中にthisを記述 
        console.log( this );
    
    }
}

myObj.myFunc();

実行結果

Object {name: "太郎", myFunc: function}

この例では、オブジェクト内に「myFunc」というメソッドを作成して、その中にthisを記述して出力しています。

実行結果を見ると、今度はwindowオブジェクトではなく自分で作成した「myObj」を参照しているのがわかりますね。

つまり、メソッドの中と外ではthisの中身が変化しているのです。

コンストラクタで呼び出す

もう1つ、thisがよく出てくるケースとしてコンストラクタがあります。

コンストラクタnew演算子を使ってインスタンスを生成できるわけですが、このインスタンスのプロパティをthisで作成することができます。

function Human( name, age ) {

    this.name = name;
    this.age = age;

}

var taro = new Human( '太郎', 30 );

console.log( taro );

実行結果

Human {name: "太郎", age: 30}

この例では、コンストラクタ「Human」を作成してその中にthisを使ってインスタンスのプロパティを設定しています。

そして、新しくインスタンス「taro」を作成していますが、実行結果を見ると最初にプロパティを作成していたHumanを参照しているのがわかりますね。

つまり、コンストラクタ内のthisは自身のHumanを指しているし、インスタンスのプロパティでもあるというちょっと複雑な意味合いになっている点に注意しましょう。

コンストラクタ、インスタンス、newというキーワードがまだよくわかっていない…
という方は、次の記事でゼロから詳しく解説しているので、ぜひ併せて読んでみてください。

>>new演算子の使い方と生成方法まとめ!

>>コンストラクタって何?使い方まで徹底解説!

apply / callで呼び出す

少し特殊なthisの呼び出しパターンとして、applyメソッドやcallメソッドを使う方法があります。

applycallは、thisの中身を任意のオブジェクトに変更できるメソッドです。

例えば、通常の関数内でthisを呼んでみます。

function show() {
    console.log( this );
}

show();

これを実行するとthisの中身はWindowオブジェクトになりますよね?
この時に、windowオブジェクトではなく任意のオブジェクトに変更できるのがapplyやcallです。

一般的な記述方法としては、下記のように引数へ変更したいオブジェクトを指定します。

関数.apply( 任意のオブジェクト )

次の例を見てください!

var sample = {
    name: 'taro',
    age: 32
}

function show() {
    console.log( this );
}

show.apply( sample );
show.call( sample );

実行結果

{name: "taro", age: 32}
{name: "taro", age: 32}

この例では、新しくsampleというオブジェクトを追加しています。

実行結果を見ると、先ほどはWindowオブジェクトだったのに今回は新しく追加したsampleオブジェクトになっていますね。

ちなみにapplyもcallも、どちらも同じ結果なのですが、関数に引数を設定している場合に違いが出てきます

function show(num1, num2) {

    console.log( num1 + num2 );

}

show.call( sample, 5, 10 );
show.apply( sample, [5, 10] );

この例では、先ほどの関数「show()」に2つの引数を設定しています。

この時に、callは第2引数以降に「,(カンマ)」で値を設定し、applyは第2引数に配列で値を設定するわけです。

applyやcallについてもっと詳しく知りたい方は、下記の記事もぜひ読んでみてください。

>>applyって何だ?callとの違いまで徹底解説

Formでthisを活用しよう

ここからは実用編!
Formを利用した例を詳しく見ていきましょう。

Form内でthisの使い方を学習すると、JavaScriptから効率よくFormの要素を取得できるようになり、非常に便利です。

さまざまな使い道がありますが、なかでも特に便利なコード例をいくつかピックアップしてご紹介します!

thisでIDを取得する

FormのHTML要素内でthisを使うと、その要素自身を参照してくれるのでJavaScriptから操作しやすくなるというメリットがあります。

具体的に言うと、例えばinput要素で作ったボタンの属性として、onclickthisを指定することでクリックした時にinput要素そのものを取得することができるのです。

次のコード例を見てください!

<body>
  <form>

      <!— onclick属性にthisを使ってinput要素そのものを参照する -->
      <input id="btn1" type="button" value="ボタン1" onclick="getFunc( this.id )" />
      <input id="btn2" type="button" value="ボタン2" onclick="getFunc( this.id )" />
  </form>

  <script>
      function getFunc( id ) {

          console.log( id );

      }
  </script>
</body>

実行結果

btn1

この例ではinput要素で汎用ボタンを作成し、onclick属性に「getFunc( this.id )」というJavaScriptの関数を指定しています。

この時に利用しているthisの中身はinput要素そのものであり、「this.id」と指定することでその要素のIDを取得することが出来るわけです。

そして「ボタン1」をクリックすると、実行結果のようにID名の「btn1」が出力されます。

もちろん、「this.value」とか「this.name」のように、他の属性を指定すればその要素を取得することが可能なので、Formの部品によって処理を変えるような複雑なプログラムを簡単に実現することができるわけです。

thisでForm要素を取得する

先ほどのID取得の例をさらに応用させると、Formの中でForm自身をすべて取得することができます。

これにより、HTML内だけである程度のJavaScriptプログラミングを実行できてしまうので、場合によっては非常に効率よくWebページを作成できるようになります。

例えば、次のコード例はクリックすると「入力フォーム」に記述した文字列が、そのままボタンの名前に変わるというサンプルです。

<body>
  <form>
      <input type="text" name="text" />
      <input type="button" name="btn" value="ボタン" onclick="this.form.btn.value = this.form.text.value" />
  </form>
</body>

このコードを実行すると、次のようなフォーム画面が表示されます。
javascript-this-tutorial2

入力フォームに文字列を入れてボタンをクリックすると、「ボタン名」が入力フォームの文字列と同じに変わるのがわかります。

javascript-this-tutorial3

このコード例のポイントは、ボタンのonclick属性の記述です。

簡単に意味を解説しておきます。

「this.form.btn.value」は、このFormの中にあるボタン要素のvalue属性を表している
「this.form.text.value」は、このFormの中にある入力フォームの文字列を表している

このように、「this.form」に続けてForm要素の「name」属性名を記述することで、その要素を取得できるわけです。

使い方さえわかれば簡単で、しかも手軽に扱えるのでFormを作るときにはぜひ試してみてください!

thisでsubmitボタンを作る

先ほど利用した「this.form」の応用例として、普通のbutton要素でsubmitと同じ送信ボタンを作成することも可能です。

<form>
  <input type="text" />
  <button onclick="this.form.submit()" />送信</button>
</form>

この例では、Formの中に普通のbutton要素を配置しています。

そのbutton要素の属性としてonclickに「this.form.submit()」と記述しています。
この記述だけでsubmitと同じ効果を持ったことになるわけです。

input要素のtype属性をsubmitにするか、onclick属性に上記の記述をするかの違いで同じ効果を得られるので、どちらの方法でも使えると便利ですね。

thisと似ている?thatとの使い分け

さまざまなプログラムのソースコードを見ていると、this以外にもthatselfなどの変数を見かけることがあります。

これはthisの中身を見失わないための重要な考え方です。
具体的な意味を詳しく見ていきましょう!

thatは定義されているものではない

まず注意したいのが、thatselfthisと違い、もともと定義されているものではありません

この後説明するケースで、慣習的に使われている変数名である、というだけです。

ちゃんと宣言しないと使えないので、thisとごっちゃにならないように気をつけましょう。

変数thatが必要になるケースとは?

これまで、thisの中身がさまざまな呼び出しパターンによって変化することを学んできました。

このような特徴があることで、プログラムの途中でthisの中身がいつの間にか変化しているケースがよくあります。

例えば、次の例を見てください。

var myObj = {
    myname: "太郎",

    getName: function() {
        console.log("--①の場合--");
        console.log( this );
 
        function showName() {
            console.log("--②の場合--");
            console.log( this );
        }
        showName();
    }

};
 
myObj.getName();
--①の場合--
Object {myname: "太郎", getName: function}

--②の場合--
Window {stop: function, open: function, alert: function…}

この例では、オブジェクトを作成してその中に「getName()」メソッドを定義しています。
この「getName()」の中で、2種類のthisをコンソールログに出力しているのが実行結果からもわかりますね。

注目すべきは、2種類のthisの中身が異なっている点です!

①のthisはメソッド呼び出しなので自身のオブジェクトを出力しています。

しかし、②のthisはメソッド内にありますが通常の関数呼び出しなのでwindowオブジェクトになるのです。

このような違いを見逃してしまうと、想定していたthisの中身では無くなってしまうので不具合の原因になるわけです。

thatを使ってthisを見失わないようにする方法

さて、いつの間にかthisの中身が変わってしまうのを防ぐためにはどうすればよいでしょうか?

最も簡単な方法は、あらかじめthisの中身を変数に代入しておくことです

なぜなら、thisの中身は呼び出しパターンなどで自動的に変化しますが、変数の中身は自動的に変化しないからです。

一般的にこのようなケースで代入する変数名は、慣例的にthatもしくはselfと命名することが多いです。
これがthatやselfをよく見かける理由というわけですね。

具体的な例を見ていきましょう。

var myObj = {
    myname: "太郎",

    getName: function() {

        //thisの中身を一時的にthatへ代入しておく
        var that = this;

        console.log( that );

        function showName() {
            console.log( that );
        }
    }

};

この例では、オブジェクト内に定義した「getName()」メソッドの最初にthisの中身を変数thatに代入しています。
これにより、メソッド内のthis(that)と関数内のthis(that)はどちらも自身のオブジェクトを指すことになるわけです。

この方法は自動的に中身が変化するthisを意図的に制御したい場合に有効なので、ぜひ覚えておきましょう!

まとめ

今回は、JavaScriptのthisについて学習をしました!

最後に、もう1度ポイントだけをまとめておきますので、確認しておいてください。

・thisは、呼び出す「場所」や「方法」によって中身が変化する特殊な存在である
・関数、メソッド、コンストラクタ、applyやcallなど、記述する目的によって中身が変化する
・Form要素を取得したり実行する目的でもthisは便利に使える
・thisとselfを使い分けることで、中身の違うthisの混在を防止できる

これらの内容を踏まえて、ぜひ自分のプログラムにも積極的に活用していってくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説