プログラミング初心者です。
https://teratail.com/questions/s0egx0j6oixanh
以前、他の質問者様が記載されていた内容について質問です。
省略記法が一部用いられており、このコードの部分の仕組みと内容が理解できずに困っています。
下記の「ここから～ここまで」の部分です。
82行目：追加ボタン（tuikaBtn）クリックで追加されたtableタグに、v1とv2の値を入れる
83行目：trの後に削除ボタンの追加
84行目：82、83行目をtbl（※77行目に定義）に入れる
という内容だと考えておりますが、82行目の記法がどんな構造なのかを理解できませんでした。
どんな内容を省略しているのかを教えていただきたいです。
よろしくお願いいたします。
以下、URL先のコード
HTML
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>アカウント登録</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7</head>
8 <body>
9 <div class="base container">
10 <div class="row">
11 <h1>アカウント登録</h1>
12 </div>
13 <div class="row">
14 <div class="card" id="card">
15 <div class="card-block">
16 <form id="form-area" class="form-inline" method="post">
17 <div class="form-group">
18 <div class="input-group">
19 <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
20 </div>
21 </div>
22 <div class="form-group">
23 <div class="input-group">
24 <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
25 </div>
26 </div>
27
28 <div class="form-group">
29 <input id="tuikaBtn" type="button" name="touroku" value="追加">
30 </div>
31
32 </form>
33 <div id="tuikaMoto">
34
35 </div>
36 <div id="result"></div>
37 </div>
38 </div>
39 </div>
40 </div>
41 </div>
42 <div id="overLay">
43 </div>
44
45------javascript------
46<script>
47 let tuikaTimes = 0;
48 let result = document.getElementById('result');
49 tuikaBtn.addEventListener('click', function () {
50 let namae = document.getElementById("namae");
51 let nickname = document.getElementById("nickname");
52
53 if( namae.value===""||nickname.value==="") {
54 return false;
55 }
56 if(!window.confirm(namae.value + 'さん' + nickname.value + 'を登録します。よろしいですか？')) {
57 return false;
58 }
59
60 alert(namae.value + 'さん' + nickname.value + 'にて登録しました。');
61
62 tuikaTimes++;
63
64 if(tuikaTimes >= 3) {
65 let hyoji = document.getElementById("tuikaBtn");
66 hyoji.style.visibility="hidden";
67 return false;
68 }
69 });
70
71 window.addEventListener('DOMContentLoaded', ()=>{
72 tuikaBtn.addEventListener('click',()=>{
73 let tbl=result.querySelector('table');
74 if(!tbl){
75 tbl=document.createElement('table');
76 result.appendChild(tbl);
77 }
78 const v1=namae.value;
79 const v2=nickname.value;
80//ここから～～～～～～～～
81 if(v1 && v2){
82 const tr=[v1,v2].reduce((x,y)=>(x.appendChild(Object.assign(document.createElement('td'),{textContent:y})),x),document.createElement('tr'));
83 tr.appendChild(Object.assign(document.createElement('input'),{type:'button',value:'削除',className:'del'}));
84 tbl.appendChild(tr);
85 namae.value='';
86 nickname.value='';
87 }
88//～～～～～～～～ここまで
89 });
90 });
91
92 document.addEventListener('click',e=>{
93 if(e.target.matches('.del')){
94 e.target.closest('tr').remove();
95 }
96 });
97
98 </script>
99 </body>
100</html>
Q&A
