コードのthisが指している部分について

質問事項

JavaScript30という海外のJS勉強サイトで勉強をしている初心者です。
ビデオを見ながら学習をしていますが、"this"というものが出てきて、自分で調べたもののよくわかりませんでした。
以下のコードのthisが何を指しているのか、またどうすればこのコードのthisがどこを指しているのかなど自分で見分けたいので方法などありましたら教えていただけますでしょうか。
また、初心者がthisに関して勉強する場合はどのようにしたらよいのでしょうか。おすすめのサイトや書籍やYoutubeのビデオなどありましたら教えていただけると幸いです。

thisについて参考にした記事などは以下になります。
[https://qiita.com/takkyun/items/c6e2f2cf25327299cf03]

該当のソースコード

javascript
1const panels = document.querySelectorAll(".panel");
2
3function panelOpen() {
4  this.classList.toggle("open");
5}
6//ここのthisがどこに当たるのか、またどのようにして見分けるのかなど知りたいです。
7
8panels.forEach(function(panel) {
9  panel.addEventListener("click", panelOpen);
10});
11
12

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Flex Panels ????</title>
6    <link
7      href="https://fonts.googleapis.com/css?family=Amatic+SC"
8      rel="stylesheet"
9      type="text/css"
10    />
11  </head>
12  <body>
13    <style>
14      html {
15        box-sizing: border-box;
16        background: #ffc600;
17        font-family: "helvetica neue";
18        font-size: 20px;
19        font-weight: 200;
20      }
21
22      body {
23        margin: 0;
24      }
25
26      *,
27      *:before,
28      *:after {
29        box-sizing: inherit;
30      }
31
32      .panels {
33        min-height: 100vh;
34        overflow: hidden;
35        display: flex;
36      }
37
38      .panel {
39        background: #6b0f9c;
40        box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
41        color: white;
42        text-align: center;
43        align-items: center;
44        /* Safari transitionend event.propertyName === flex */
45        /* Chrome + FF transitionend event.propertyName === flex-grow */
46        transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
47          flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
48        font-size: 20px;
49        background-size: cover;
50        background-position: center;
51        flex: 1;
52        justify-content: center;
53        align-items: center;
54        display: flex;
55        flex-direction: column;
56      }
57
58      .panel1 {
59        background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
60      }
61      .panel2 {
62        background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
63      }
64      .panel3 {
65        background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
66      }
67      .panel4 {
68        background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
69      }
70      .panel5 {
71        background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
72      }
73
74      /* Flex Children */
75      .panel > * {
76        margin: 0;
77        width: 100%;
78        transition: transform 0.5s;
79        border: solid 1px red;
80        flex: 1 auto;
81        display: flex;
82        justify-content: center;
83        align-items: center;
84      }
85
86      .panel > *:first-child {
87        transform: translateY(-100%);
88      }
89      .panel.open-active > *:first-child {
90        transform: translateY(0);
91      }
92      .panel > *:last-child {
93        transform: translateY(100%);
94      }
95      .panel.open-active > *:last-child {
96        transform: translateY(0);
97      }
98
99      .panel p {
100        text-transform: uppercase;
101        font-family: "Amatic SC", cursive;
102        text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
103        font-size: 2em;
104      }
105
106      .panel p:nth-child(2) {
107        font-size: 4em;
108      }
109
110      .panel.open {
111        font-size: 40px;
112        flex: 5;
113      }
114    </style>
115
116    <div class="panels">
117      <div class="panel panel1">
118        <p>Hey</p>
119        <p>Let's</p>
120        <p>Dance</p>
121      </div>
122      <div class="panel panel2">
123        <p>Give</p>
124        <p>Take</p>
125        <p>Receive</p>
126      </div>
127      <div class="panel panel3">
128        <p>Experience</p>
129        <p>It</p>
130        <p>Today</p>
131      </div>
132      <div class="panel panel4">
133        <p>Give</p>
134        <p>All</p>
135        <p>You can</p>
136      </div>
137      <div class="panel panel5">
138        <p>Life</p>
139        <p>In</p>
140        <p>Motion</p>
141      </div>
142    </div>
143
144    <script src="index.js"></script>
145  </body>
146</html>
147

行動規範の内容に同意します

回答4件

thisは、（bindやアロー関数などで固定された状況でないなら）呼び方によっても変わりうるものです。つまり、function panelOpen()の中のthisは、「呼ばれてみないと決まらない」というのが正解です。単にpanelOpenを呼び出した場合、thisはwindowもしくはundefinedです。

addEventListenerでセットされたイベントハンドラでは、thisはイベントをセットしているエレメント自身を指します（もっとも、thisに頼らず、event.currentTargetや別途変数を参照する形で対象のエレメントを取得したほうがいいかもしれません）。

投稿2020/04/06 02:43

maisumakun

総合スコア145183

初心者がthisに関して勉強する場合はどのようにしたらよいのでしょうか。

確認事項は２つあります。

実装を確かめる。
仕様（理屈）を確認する。

実装を確かめる手段
console.log(this) をコードに埋め込んで、テスト実行してみるのが手っ取り早いと思います。

javascript
1function panelOpen() {
2  console.log( this ); // 開発者コンソールに表示させて実装を確認
3  this.classList.toggle("open");
4}
5//ここのthisがどこに当たるのか、またどのようにして見分けるのかなど知りたいです。
6
7console.log( this ); // グローバルスコープだと、Window

JavaScript の this は、実行箇所によって指し示すオブジェクトが異なる特徴があります。
呼ばれてみなければ分からないのなら、積極的に確認するのが早い。という考え方になります。

this についてのまとめをqiitaで公開される方が多数いらっしゃいますので、検索してそれらの記事を参考にしてみるのも良いかと思います。（qiita this）

仕様を確認する
例えばMDN にはJavaScript 技術概説で、ECMAScript 国際化 API 仕様への案内も掲載されていますが、初学のうちは、「仕様に基づいて実装されている」ものとして、実装の確認に注力すればいいと思います。

投稿2020/04/06 16:18

AkitoshiManabe

総合スコア5432

Ryo_was_taken

2020/04/07 01:31

回答ありがとうございます。次からは積極的にconsoleで出力して確認してみたいと思います。

行動規範の内容に同意します

ベストアンサー

JavaScriptのリファレンスサイト的存在なMDNの
EventTarget.addEventListenerの「ハンドラー内での this の値」というセクションにまとまっています。

addEventListener() を使って要素にハンドラー関数を設定したとき、ハンドラーの中の this の値は要素への参照となります。これはハンドラーに渡された event 引数の currentTarget プロパティの値と同じです。

panel.addEventListener("click", panelOpen);

このようにやって実行しているので、
panelエレメント自身になります。

【おまけ】 thisは今後使われる事がほとんど無くなる話

JavaScriptの仕様部分を司っているEcmaScriptという仕様があります。
その2015年度版のES2015以降の流れで、
thisはモダンなプログラミングに於いて使うべき場面はかなり減りました。

過渡期の今は文脈関係ないthisの登場で苦労するかも知れません
しかしいずれ無用の心配になります。

従って、今後は下記のように記述するべきです。
関数宣言はアロー関数にしています。

1個の式で終わる場合は{}を省略可能で、
また引数が1個の場合は()を省略可能なので、
かなりコードがぺたんこになっています。

js
1const panels = document.querySelectorAll(".panel");
2
3panels.forEach(panel =>
4  panel.addEventListener("click", event =>
5    event.currentTarget.classList.toggle("open")
6  )
7);

アロー関数はthisを束縛しない仕様なので、
文脈に関係のないthisは使用できません。
thisはevent.currentTargetと同値なのでこちらに揃えてます。

投稿2020/04/06 02:54

miyabi-sun

総合スコア21158

maisumakun

2020/04/06 02:54

> thisは今後使われる事がほとんど無くなる話クラスの中でのthisは別ですよね？

miyabi-sun

2020/04/06 02:58

補足ありがとうございます。例外としてクラス構文のメソッドのthisを想定しています。クラス構文の中ではthisはインスタンスを指していると決めつけて問題ないレベルですから、文脈関係ないthisに苦しめられる事は殆どないですからね。

maisumakun

2020/04/06 03:01

> 文脈関係ないthisに苦しめられる事は殆どないですからね。コールバックで渡してthisが途切れてしまう事故が時々ある程度ですね（そうやって使う前提のメソッドはArrow functionで定義してしまう手段もありますが）。

行動規範の内容に同意します

panelOpenが呼び出されるもとになったpanelです。

JavaScript
1panel.addEventListener("click", panelOpen);
2~~~~~
3↑
4これ

thisが何を指すかは呼び出され方によります。イベントで呼び出された場合はそのイベント発生元の要素です。

投稿2020/04/06 02:48

otn

総合スコア84538

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！