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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1013閲覧

thisが何を指しているか

toll_tree

総合スコア199

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/06/06 09:02

編集2019/06/06 09:16

「this」に関して教えて頂きたい部分がございます。

php

1@extends('layouts.default') 2 3@section('title', 'Blog Posts') 4 5@section('content') 6<h1> 7 <a href="{{ url('/posts/create') }}" class="header-menu">New Post</a> 8 Blog Posts 9</h1> 10<ul> 11 @forelse ($posts as $post) 12 <li> 13 <a href="{{ action('PostsController@show', $post) }}">{{ $post->title }}</a> 14 <a href="{{ action('PostsController@edit', $post) }}" class="edit">[Edit]</a> 15 <a href="#"class="del" data-id="{{ $post->id }}">[x]</a> 16 <form method="post" action="{{ url('/posts',$post->id)}}" id="form_{{ 17 $post->id}}"> 18 {{ csrf_field() }} 19 {{ method_field('delete') }} 20 </form> 21 </li> 22 @empty 23 <li>No posts yet</li> 24 @endforelse 25</ul> 26<script src="/js/main.js"></script> 27@endsection

js

1(function(){ 2 'use strict'; 3 var cmds = document.getElementsByClassName('del'); 4 var i; 5 console.log(cmds); 6 for(i = 0; i < cmds.length; i++){ 7 cmds[i].addEventListener('click',function(e){ 8 9 e.preventDefault(); 10 11 if(confirm('are you sure?')){ 12 document.getElementById('form_' + this.dataset.id).submit(); 13 } 14 }); 15 } 16})();

上記コードJavaScript内のコードの以下のthisの部分なのですが、

document.getElementById('form_' + this.dataset.id).submit();

この部分の「this」は何を指しているのでしょうか?
「this」というのはオブジェクトを指す際に用いられるものと認識しているのですが、datasetのMDNではdatasetの前にelementを指定するよう記載されています。
ここの部分で少し引っかかってしまったのですが、何故datasetの前に「this」を置くことができるのでしょうか?
ご助言頂けましたら幸いです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/06 09:13

タグはJavaScriptだけにしてください。 HTMLとJavaScriptだけの問題なのでPHPもLaravelも一切関係ありません。
guest

回答3

0

ベストアンサー

当該コードはaddEventListenerのコールバック内にあるfunctionの中ですので、イベントハンドラとしてthisが「イベントの起きたエレメント」を指すようになっています。

もっとも、e.currentTargetにも同じエレメントが来ますので、そっちから取ったほうがいいかもしれません。

投稿2019/06/06 09:14

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/06 09:32

>e.currentTarget 悩みますが、処理内容によりますね。 event.currentTargetとevent.targetの違いも把握したうえで使わないと迷子になりそうです。
toll_tree

2019/06/06 09:32

ご回答ありがとうございます。 >コールバック内にあるfunctionの中ですので、イベントハンドラとしてthisが「イベントの起きたエレメント」を指すようになっています。 こちらの部分なのですが、自分は「this」=「オブジェクト」と認識があったのですが、コールバック内の「this」というのはイベントリスナが発生したエレメントを返すものだという、決まった仕様のようなものだといった解釈で合っていますでしょうか?
m.ts10806

2019/06/06 10:06 編集

横から再度失礼しますが、概念としてはstringですらオブジェクトの一種に過ぎないので大間違いではないにしてもその理解をしていると確実にこけますね。(今まさにこけてますね)
maisumakun

2019/06/06 11:04

実は、JavaScriptのfunction内で何がthisになるかは、.callや.applyというメソッドを使うことで、「自分で決める」ことすらできてしまう、程度のものです。
guest

0

addEventListenerのコールバックから参照するthisは
HTMLElementです

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 [].forEach.call(document.querySelectorAll('.del'),function(x){ 4 x.addEventListener('click',function(e){ 5 console.log([this.dataset["id"],x.dataset["id"],e.target.dataset["id"]]); 6 }); 7 }); 8}); 9</script> 10<button class="del" type="button" data-id="1">削除</button> 11<button class="del" type="button" data-id="2">削除</button> 12<button class="del" type="button" data-id="3">削除</button> 13<button class="del" type="button" data-id="4">削除</button> 14<button class="del" type="button" data-id="5">削除</button>

しかしこうかくとthisはwindowを指すことになります

javascript

1<script> 2window.addEventListener('DOMContentLoaded', e=>{ 3 [].forEach.call(document.querySelectorAll('.del'),x=>{ 4 x.addEventListener('click',e=>{ 5 console.log([this,x.dataset["id"],e.target.dataset["id"]]); 6 }); 7 }); 8}); 9</script> 10<button class="del" type="button" data-id="1">削除</button> 11<button class="del" type="button" data-id="2">削除</button> 12<button class="del" type="button" data-id="3">削除</button> 13<button class="del" type="button" data-id="4">削除</button> 14<button class="del" type="button" data-id="5">削除</button>

投稿2019/06/06 09:35

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toll_tree

2019/06/06 09:45

ご回答ありがとうございます。 今の自分としては、取り敢えず深くは考えずコールバックからかくとHTMLエレメントになるといった点で、覚えておいた方が良いかもしれませんね...
guest

0

どのような言語もほぼ同じですが、自身です。
この場合はイベントが発生した自身のエレメントを指します。

JavaScriptでもconsole.log()などでデバッグすれば良いです。

html

1<button class="del" type="button" data-id="1">削除</button> 2<button class="del" type="button" data-id="2">削除</button> 3<button class="del" type="button" data-id="3">削除</button> 4<button class="del" type="button" data-id="4">削除</button> 5<button class="del" type="button" data-id="5">削除</button>

js

1 var cmds = document.getElementsByClassName('del'); 2 for(i = 0; i < cmds.length; i++){ 3 cmds[i].addEventListener('click',function(e){ 4 console.log(this); 5 }); 6 } 7// 最初のボタンを押すと:<button class="del" type="button" data-id="1">削除</button>

投稿2019/06/06 09:20

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問