teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問ラジオボタンの選択状況（組み合わせ）によって特定の画像を表示させ、各画像にリンクを追加したいです。

編集履歴

回答編集履歴

6

誤字修正

2022/10/12 05:59

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -87,7 +87,7 @@
87
87
  ```javascript
88
88
  条件式 ? trueのときの処理 : falseの時の処理
89
89
 
90
- if (条件) {
90
+ if (条件式) {
91
91
  trueのときの処理
92
92
  } else {
93
93
  falseの時の処理
@@ -95,7 +95,7 @@
95
95
  ```
96
96
 
97
97
  ### テンプレートリテラル
98
- 文字列はシングルクォート`''`またはダブルクォート`""`で過去って記述します。
98
+ 文字列はシングルクォート`''`またはダブルクォート`""`でかこって記述します。
99
99
  しかしこの記述方法で変数を混ぜて書こうとすると、読みにくくなります。
100
100
  ```javascript
101
101
  let name = 'たけし';
@@ -114,12 +114,8 @@
114
114
  このテンプレートリテラルを利用して、画像のsrcのパスを生成しています。
115
115
 
116
116
  ```javascript
117
- ...
118
-
119
117
  const imgName = firstVal + secondVal;
120
118
  // 'A1' or 'A2' or 'B1' or 'B2' が生成される
121
-
122
- ...
123
119
 
124
120
  imgTag.src = `../images/${imgName}.png`;
125
121
  // '../images/A1.png' or '../images/A2.png' or '../images/B1.png' or '../images/B2.png' が生成される

5

三項演算子、テンプレートリテラルについて

2022/10/12 05:55

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -1,6 +1,6 @@
1
1
  HTMLのタグの中に直接`onClick=""`と書く方法は、現在のモダンなコーディングでは推奨されていませんので、JavaScriptコードのなかでそれぞれのラジオボタンにイベントをつけるようにしてみました。
2
2
 
3
- - 動作確認用サンプル：https://jsfiddle.net/9ptwnrh8/2/
3
+ - 動作確認用サンプル：https://jsfiddle.net/ez35dvcr/
4
4
 
5
5
  ```html
6
6
  <p>
@@ -49,7 +49,7 @@
49
49
  }
50
50
  ```
51
51
 
52
- ---
52
+ ### 連想配列から1つを選ぶ
53
53
 
54
54
  ```javascript
55
55
  const path = {
@@ -80,3 +80,51 @@
80
80
  break;
81
81
  }
82
82
  ```
83
+
84
+ ### 三項演算子
85
+ 「？」と「：」を使った記述は、三項演算子というif文を1行で書けてしまう優れものです。
86
+ 例）`const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value;`
87
+ ```javascript
88
+ 条件式 ? trueのときの処理 : falseの時の処理
89
+
90
+ if (条件) {
91
+ trueのときの処理
92
+ } else {
93
+ falseの時の処理
94
+ }
95
+ ```
96
+
97
+ ### テンプレートリテラル
98
+ 文字列はシングルクォート`''`またはダブルクォート`""`で過去って記述します。
99
+ しかしこの記述方法で変数を混ぜて書こうとすると、読みにくくなります。
100
+ ```javascript
101
+ let name = 'たけし';
102
+ let greet = 'こんにちは、' + name + 'さん！'; // 'こんにちは、たけしさん！'
103
+ ```
104
+
105
+ テンプレートリテラルという記法は、シングルやダブルクオートの代わりにバッククォート` `` `を使います。
106
+ この記法の利点の一つは、ドルマークと波括弧で囲うことで`${変数名}`、中に変数を混ぜて書くことができることです。
107
+ コードが読みやすいですね。
108
+
109
+ ```javascript
110
+ let name = 'たけし';
111
+ let greet = `こんにちは、${name}さん！`; // 'こんにちは、たけしさん！'
112
+ ```
113
+
114
+ このテンプレートリテラルを利用して、画像のsrcのパスを生成しています。
115
+
116
+ ```javascript
117
+ ...
118
+
119
+ const imgName = firstVal + secondVal;
120
+ // 'A1' or 'A2' or 'B1' or 'B2' が生成される
121
+
122
+ ...
123
+
124
+ imgTag.src = `../images/${imgName}.png`;
125
+ // '../images/A1.png' or '../images/A2.png' or '../images/B1.png' or '../images/B2.png' が生成される
126
+ ```
127
+
128
+ 定数`imgName`には、生成された文字列「A1」「A2」「B1」「B2」のいずれかが代入されています。
129
+ その定数を、テンプレートリテラルでsrcのパスとなる文字列の中に混ぜて書いています。
130
+ ですので結果的に、`'../images/A1.png'`または`'../images/A2.png'`または`'../images/B1.png'`または`'../images/B2.png'`のいずれかの文字列が生成されます。

4

indentation

2022/10/11 12:04

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -65,18 +65,18 @@
65
65
  let path;
66
66
  switch (imgName) {
67
67
  case 'A1':
68
- path = 'https://ant.ac.jp/';
68
+ path = 'https://ant.ac.jp/';
69
69
  break;
70
70
  case 'A2':
71
- path = 'https://apple.com/services/';
71
+ path = 'https://apple.com/services/';
72
72
  break;
73
73
  case 'B1':
74
- path = 'https://example.com/bed/';
74
+ path = 'https://example.com/bed/';
75
75
  break;
76
76
  case 'B2':
77
- path = 'https://www.blue.co.jp';
77
+ path = 'https://www.blue.co.jp';
78
78
  break;
79
79
  default:
80
- return;
80
+ break;
81
81
  }
82
82
  ```

3

switch

2022/10/11 12:02

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -48,3 +48,35 @@
48
48
  imgTag.src = `../images/${imgName}.png`;
49
49
  }
50
50
  ```
51
+
52
+ ---
53
+
54
+ ```javascript
55
+ const path = {
56
+ A1: 'https://ant.ac.jp/',
57
+ A2: 'https://apple.com/services/',
58
+ B1: 'https://example.com/bed/',
59
+ B2: 'https://www.blue.co.jp'
60
+ }[imgName];
61
+ ```
62
+ ↑この部分ちょっと意味合い的にswitch文に似ていて、
63
+ switchで書くと↓こんな感じになるんですが、行数が多すぎるので、私は↑のようにオブジェクト（連想配列）でする方が好みです。
64
+ ```javascript
65
+ let path;
66
+ switch (imgName) {
67
+ case 'A1':
68
+ path = 'https://ant.ac.jp/';
69
+ break;
70
+ case 'A2':
71
+ path = 'https://apple.com/services/';
72
+ break;
73
+ case 'B1':
74
+ path = 'https://example.com/bed/';
75
+ break;
76
+ case 'B2':
77
+ path = 'https://www.blue.co.jp';
78
+ break;
79
+ default:
80
+ return;
81
+ }
82
+ ```

2

code and demo url

2022/10/11 11:47

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -1,6 +1,6 @@
1
1
  HTMLのタグの中に直接`onClick=""`と書く方法は、現在のモダンなコーディングでは推奨されていませんので、JavaScriptコードのなかでそれぞれのラジオボタンにイベントをつけるようにしてみました。
2
2
 
3
- - 動作確認用サンプル：https://jsfiddle.net/n9j4uzqy/1/
3
+ - 動作確認用サンプル：https://jsfiddle.net/9ptwnrh8/2/
4
4
 
5
5
  ```html
6
6
  <p>
@@ -20,25 +20,31 @@
20
20
  // ラジオボタンを全て取得
21
21
  const radioBtns = document.querySelectorAll('input[type=radio]');
22
22
 
23
- // それぞれのボタンにクリックイベントをつける
23
+ // それぞれのボタンにクリックイベントをつける
24
24
  radioBtns.forEach(btn => btn.addEventListener('click', changeImg));
25
25
  });
26
26
 
27
27
  // 画像とパスを変える関数（クリックイベントの内容）
28
28
  function changeImg(event) {
29
- // 要素を取得
29
+ // 要素を取得
30
30
  const firsts = document.querySelectorAll('input[name=First]');
31
31
  const seconds = document.querySelectorAll('input[name=Second]');
32
32
  const aTag = document.querySelector('#image-link');
33
33
  const imgTag = document.querySelector('#image-result');
34
34
 
35
- // Firstのうち、選択されている方のvalueを取得
36
- const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value;
35
+ const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value; // A or B
37
- // Secondのうち、選択されている方のvalueを取得
38
- const secondVal = seconds[0].checked ? seconds[0].value : seconds[1].value;
36
+ const secondVal = seconds[0].checked ? seconds[0].value : seconds[1].value; // 1 or 2
37
+ const imgName = firstVal + secondVal; // A1 or A2 or B1 or B2
38
+
39
+ const path = {
40
+ A1: 'https://ant.ac.jp/',
41
+ A2: 'https://apple.com/services/',
42
+ B1: 'https://example.com/bed/',
43
+ B2: 'https://www.blue.co.jp'
44
+ }[imgName]; // オブジェクトを作って、key（imgName）で指定
39
45
 
40
46
  // パスに反映
41
- aTag.href = `https://example.com/${firstVal}${secondVal}.png`;
47
+ aTag.href = path;
42
- imgTag.src = `${firstVal}${secondVal}.png`;
48
+ imgTag.src = `../images/${imgName}.png`;
43
49
  }
44
50
  ```

1

sample

2022/10/11 10:03

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -1,6 +1,6 @@
1
1
  HTMLのタグの中に直接`onClick=""`と書く方法は、現在のモダンなコーディングでは推奨されていませんので、JavaScriptコードのなかでそれぞれのラジオボタンにイベントをつけるようにしてみました。
2
2
 
3
- - 動作確認用サンプル：https://jsfiddle.net/n9j4uzqy/
3
+ - 動作確認用サンプル：https://jsfiddle.net/n9j4uzqy/1/
4
4
 
5
5
  ```html
6
6
  <p>