AjaxとaタグのDownload属性を用いてMySQLのテーブルのデータをCSV形式で落とす際に、href属性の値であるJSの変数をなぜ+で囲むのかがわからない。

Youtubeの動画にあるMySQLのテーブルからデータをaタグのDownload属性でCSV形式としてダウンロードするというチュートリアルを見ていたのですが、

jquery
1$("#response").html('<a href="'+data+'" download="users.csv">Download here!</a>');

そのコード中の上記の部分においてなぜ+data+という書き方をするのかわかりません。
自分がJavaScript及びjQueryにあまり明るくないためか、コードの処理やdataがjQueryにおいて定義した変数とPHPからレスポンスされてきたデータが接続されたものであるというところはわかるのですが、そこでなぜ「href = "'data'"」ではなく上記のような書き方になるのかが検索しても引っかからずここで質問させていただきました。

以下はコード全文とチュートリアル元の動画リンクです。
PHP部分とHTML及びjQuery部分は分けて書いてありますが、実際は一緒に書いています。

チュートリアル元の動画

php
1
2<?php
3	$conn = new mysqli("localhost","root","","register");
4
5if (isset($_POST['start'])) {
6	$start = $conn->real_escape_string($_POST['start']);
7	$allData = "";
8	$sql =  $conn->query("SELECT * FROM users LIMIT $start,50");
9	while($data = $sql->fetch_assoc())
10		$allData .= $data['id'] . ',' . $data['name'] . ',' . $data['email'] .','. $data['password'] 
11					. ',' . $data['isEmailConfirmed'] . ',' . $data['token'] .','. $data['tokenExpire'] . "\n";
12
13	exit (json_encode(array("data" => $allData)));
14
15}
16
17$sql =  $conn->query("SELECT id FROM users");
18$numRows = $sql->num_rows;
19
20 ?>

HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 	<title>Export MySQL Data To CSV</title>
5 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
7    </script>
8    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript">
9    </script>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
11    </script>
12    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
13    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
14    </script>
15 </head>
16 <body>
17<p id="response">Please Wait......</p>
18 <script type="text/javascript">
19 	let data =  "data:text/csv;charset=utf-8,ID,NAME,EMAIL,PASSWORD,isEmailConfirmed,TOKEN,TOKEN EXPIRE\n";
20 
21 	$(document).ready(function() {
22 		exportToCSV(0,<?php echo $numRows  ?>)
23 		
24 	});
25
26 	function exportToCSV(start,max) {
27 		if (start > max) {
28 			$("#response").html('<a href="'+data+'" download="users.csv">Download here!</a>');
29 			return;
30 		}
31
32
33 		$.ajax({
34 			url:"index.php",
35 			method:"POST",
36 			dataType:"json",
37 			data: {
38 				start:start
39 			}})
40
41 			.then(
42 				function (response) {
43 				data += response.data;
44 				exportToCSV((start+50), max);
45 			},
46 				function(){
47 					alert("ERROR");
48		});
49 	}
50
51 </script>
52 </body>
53 </html>
54

Y.H.

2019/09/12 23:21

ブラウザの開発者ツール等で実際にどんなリクエストを送信してるか見てみるといいですよ

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

回答3件

文字列の結合です。

投稿2019/09/12 20:22

編集2019/09/12 20:22

m.ts10806

総合スコア80875

今風にかくとこんな感じのこと

javascript
1$("#response").html(`<a href="${data}" download="users.csv">Download here!</a>`)

投稿2019/09/13 00:11

yambejp

総合スコア116661

kamille-mio

2019/09/13 03:49

回答ありがとうございます。この書き方なら問題なく理解できます。

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

ベストアンサー

既に回答がありますが、結合演算子の + を使って記述しているかと思います。

結合演算子

PHP の場合、. で文字列などを結合しますが、JavaScript は + で結合します。

<a href=" と data と " download="users.csv">Download here!</a> を結合しています。

data は変数なので、実際にはその箇所には変数の値が表示されます。

<a href=" と " download="users.csv">Download here!</a> は HTML の記述ですが、JavaScript上ではただの文字列です。

ですので、' で囲っています。

$("#response").html('<a href="'+data+'" download="users.csv">Download here!</a>')

上記の記述は、言い換えれば $("#response").html( '文字列' + 変数 + '文字列' ) のように結合しています。

投稿2019/09/12 20:30

編集2019/09/12 20:46

7968

総合スコア253

kamille-mio

2019/09/13 03:52

結合演算子以外ありえないとは思っていたのですが、どこを結合しているんだと悩んでいたら何のことはない、JSの領域ではマークアップ言語でもただの文字列という初歩的なことでした……灯台もと暗し。他の方に書いていただいた$("#response").html(`<a href="${data}" download="users.csv">Download here!</a>`)という書き方ならそれも見落とすこともなかったとはいえ、学がまだまだ浅いということですね。詳しく解説して頂いてありがとうございました。

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

あなたの回答