環境:Mac、Atom
ProgateのjQueryにて下記のコードでアコーディオンを作成しました。
(※これは、自分で1から作成したコードではなく、Progateで用意されていたものを使用)
※質問は下にあります。
HTML/CSS/jQueryのコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>jQuery練習</title> 6 <link rel="stylesheet" href="../css/style.css"> 7</head> 8<body> 9 10 <div class="faq-wrapper"> 11 <div class="heading"> 12 <h2>FAQ</h2> 13 </div> 14 <div class="faq"> 15 <ul id="faq-list"> 16 <li class="faq-list-item"> 17 <h3 class="question">質問質問質問質問質問質問</h3> 18 <span>+</span> 19 <div class="answer"> 20 <p>回答回答回答回答回答回答</p> 21 </div> 22 </li> 23 <li class="faq-list-item"> 24 <h3 class="question">質問質問質問質問質問質問</h3> 25 <span>+</span> 26 <div class="answer"> 27 <p>回答回答回答回答回答回答</p> 28 </div> 29 </li> 30 <li class="faq-list-item"> 31 <h3 class="question">質問質問質問質問質問質問</h3> 32 <span>+</span> 33 <div class="answer"> 34 <p>回答回答回答回答回答回答</p> 35 </div> 36 </li> 37 </ul> 38 </div> 39 </div> 40 41 <script src="../JavaScript/jquery-3.4.1.min.js"></script> 42 <script src="../JavaScript/script.js"></script> 43</body> 44</html> 45
css
1body { 2 margin: 0; 3} 4 5a { 6 text-decoration: none; 7} 8 9.faq-wrapper { 10 background-color: #e6ecf0; 11 text-align: center; 12 padding-bottom: 80px; 13 color: #5f5d60; 14} 15 16#faq-list { 17 width: 500px; 18 margin: 0 auto; 19 padding: 0; 20 list-style: none; 21} 22 23.faq-list-item { 24 margin:10px; 25 border-bottom:1px solid #ccc; 26 position:relative; 27 cursor:pointer; 28 text-align: left; 29} 30 31.faq-list-item h3 { 32 font-size: 14px; 33} 34 35.faq-list-item span { 36 position:absolute; 37 top:0; 38 right:5px; 39 color:#ccc; 40 font-size:13px; 41} 42 43.answer { 44 font-size: 12px; 45 padding: 5px 0px; 46 margin-bottom: 15px; 47 display: none; 48} 49/*↑displayはnoneに */ 50
jquery
1$(function() { 2 3 $('.faq-list-item').click(function() { 4 var $answer = $(this).find('.answer'); 5 if ($answer.hasClass('open')) { 6 $answer.removeClass('open'); 7 $answer.slideUp(); 8 $(this).find("span").text("+"); 9 10 } else { 11 $answer.addClass('open'); 12 $answer.slideDown(); 13 $(this).find("span").text("-"); 14 } 15 }); 16 17 18}); 19
質問 2つあります。
質問タイトルが的確ではないかも知れませんが、短文で記載する上で的確な文章が思い当たらなかった為。
①
このjQueryコードが表している意味を、文章で書くとしたら何と表現しますか?
このような意味であっていますか?(論理的に頭に入れた方が、理解しやすい為)
違う場合は訂正願います。↓
「.faq-list-itemセレクタをクリックした際の話。
まず、$answerには、クリックした際にそのクリックイベントが起こった要素で、その子要素の.answerを代入。
もし、$answerにopenと言うクラスが**入っていた場合、
$answerからopenクラスを取り除き**、$answerをslideUpして隠し、
クリックされた要素の中のspan要素のテキストを + に変更する。
もし、$answerにopenと言うクラスが**入っていない場合、
$answerには、openクラスを付与し**、$answerをslideDownで表示し、
クリックされた要素の中のspan要素のテキストを - に変更する。」
②
ここで出てくる、 **open **は一体何者なんですか?
removeClassやaddClassがある事からも、クラスと言う事はわかりますが、
cssにはそのopenセレクタは記載どこにもありません。
試しにopenを適当な文字に置き換えても出来たと言う事からも、jQueryで完結していると思うのですが。
この open は具体的に「何」でどう作用しているのでしょうか?
何故、open クラスがついた要素はもともとhtmlには存在しないのに、
jqueryの if文では、「もしopenが合った場合、もしopenがなかった場合」というコードなるのですか?
elseの「もしない場合」は、 open クラスを付与するとの命令ですが、
openクラスつけたところで、cssでopenセレクタで指定しているわけでもないので、
何がどう変わるか理解出来ない状況です。
上記2点、宜しくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

退会済みユーザー
2019/06/01 11:39
2019/06/01 11:52

退会済みユーザー
2019/06/01 12:08
2019/06/01 12:21

回答5件
0
直接的な回答をしない理由
まず、「$answer.addClass('open')
が何のためにあるのか」を一から十まで筋道立てて説明する事は可能です。
しかし、そうした場合、質問者さんは回答にある考えの流れをなぞって答えを出すことになり、「自分の頭で真に理解した」とはいえないだろうと考えています。
「自分の頭で真に理解した」というのは、回答にある文章を全て忘れて、一から自分の言葉で全てを説明できる状態の事です。
これが出来る人は、回答で構成されている中核となる要素を分解して自分の頭で考えを再構築し、自分の言葉で説明しなおすという作業をしています。
経験上、そういう方の質問は「このコードはこういう動きをしており、こうなるはずなのですが、なぜかこうなってしまいます」のように自分の考えを添えながら、「自分の考えから想定される結果」と「事実上の結果」に相違がある部分を質問します。
「わからない部分」がより明確で具体的です。
残念ながら、質問者さんはそうした質問ではない為、一から十まで説明するのはかえって理解から遠ざかると考えています。
ヒント
というわけで、考え方のヒントだけを出します。
- 1回目のクリック時の動きはどうなっているか
- 2回目のクリック時の動きはどうなっているか
- 1回目/2回目の動きが異なる場合、どうやってその違いを認識しているか
基本的にはコードの動きをなぞるだけではダメで、設計者の気持ちになって、「この機能をどうやって実装しようか」という観点に立つのが重要と思います。
車輪の再発明
「設計者の気持ちになってみる」という観点では、一から自分で作り直してみるのも有効です。
一般に車輪の再発明はプログラミングでは敬遠される行為ですが、再発明する事で原理をよく理解できるようになります。
※余談ですが、「もっと良い実装があるのに…」と思ってしまう問題なので、別の実装法を考えてみるのも面白いと思います。
おそらく、Progate出題者はjQuery APIを熟知していません(APIを知っていれば、jQueryを使用していながら、独自コードに頼らない部分があります)。
Re: muchitaro さん
投稿2019/06/01 13:30
編集2019/06/01 13:54総合スコア18194
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

退会済みユーザー
2019/06/01 14:01

退会済みユーザー
2019/06/01 15:00 編集
2019/06/02 00:42
2019/06/02 01:41 編集

退会済みユーザー
2019/06/02 02:22 編集
2019/06/02 03:11

退会済みユーザー
2019/06/02 03:31
2019/06/02 03:34
2019/06/02 03:44

退会済みユーザー
2019/06/02 03:53

退会済みユーザー
2019/06/02 04:22

退会済みユーザー
2019/06/02 04:33

0
おす、おら、goku。
おめぇは「なんでopenクラスを付けたり外したりしてるのか全くわかんねぇぞ」って言ってるみてぇだが、
それは、すげぇ簡単な事だぞ。
openクラスはプログラミングで昔から使われている「フラグ」の代わりだぞ。
例えば、アコーディオンが1つだけだったとするだろ?
その場合は、すっげぇ簡単に書くとこうなる。
jquery
1$(function() 2{ 3 var answer_opened = false; // ←アコーディオン開閉フラグ 4 5 $('.faq-list-item').click(function() 6 { 7 var $answer = $(this).find('.answer'); 8 9 if (answer_opened === true) // アコーディオンが開いていたら 10 { 11 $answer.slideUp(); // アコーディオンを閉じて 12 $(this).find("span").text("+"); 13 answer_opened = false; // 開閉フラグを下げる 14 } 15 else // 開いて無かったら 16 { 17 $answer.slideDown(); // アコーディオンを開いて 18 $(this).find("span").text("-"); 19 answer_opened = true; // フラグを立てる 20 } 21 }); 22});
だけんど、アコーディオンは沢山あんだろ? そしたらおめぇ、開閉フラグはその数だけ作んなくちゃ行けねぇ。
管理も大変になってくる。おら、そんなめんどくせぇ事はしたくねぇ。
だからな、フラグをDOM要素そのものに埋め込んじまおうってのが、その「open」だ。
openクラスが無いアコーディオンは閉じているアコーディオンだから、クリックされたら開く動作をさせる、
openクラスがあるアコーディオンは開いているアコーディオンだから、クリックされたら閉じる動作をさせるってぇわけだ。おもしれぇだろ? おら、わっくわくすっぞ。
質問のサンプルは結構めぇから使われてるやり方だが
最近はclassに埋め込むよりも、HTML5で実装されたカスタムデータ属性を使って
$(selector).attr("data-opened", true);
ってやった方がいいと思うぞ。
ただ、openってクラス名はダメだと思うぞ。既に開いている状態を示すフラグなんだから、過去形にしねぇとな。
Progate の奴らはまともな命名も出来ねぇらしいな。修行が足んねぇぞ。
おらの説明はこんな感じだ。chi-chiが晩飯のオカズ狩って来いってうるせぇからそろそろで行ってくっぞ。
おめぇももっと修行して天下一武道会でおらと握手だ。
投稿2019/06/01 21:22
編集2019/06/01 21:49
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/01 22:06

退会済みユーザー
2019/06/01 22:09
2019/06/01 22:13

退会済みユーザー
2019/06/01 22:17

退会済みユーザー
2019/06/01 22:28

退会済みユーザー
2019/06/01 23:26 編集

退会済みユーザー
2019/06/02 03:09

退会済みユーザー
2019/06/02 03:15

退会済みユーザー
2019/06/02 03:35

退会済みユーザー
2019/06/02 03:41

退会済みユーザー
2019/06/02 03:49

0
ここで出てくる、 open は一体何者なんですか?
openしてるかどうかの判断に使いたかっただけだから、$answer.attrで取得しても良いし、addClassじゃなくてattrやdataを使っても良い
hasClassって書いてあるのが読みやすい(と思ったから)使ってるんだろうけど、勉強する立場からしたらattrとかで書いてくれてる方が理解しやすいだろうと思う
投稿2019/06/01 15:41
総合スコア6426
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

退会済みユーザー
2019/06/02 03:43

退会済みユーザー
2019/06/02 07:24 編集

退会済みユーザー
2019/06/02 06:47

退会済みユーザー
2019/06/02 07:03
2019/06/02 07:07

退会済みユーザー
2019/06/02 07:22

退会済みユーザー
2019/06/02 07:29

退会済みユーザー
2019/06/02 08:29
2019/06/02 08:33
2019/06/02 08:34

退会済みユーザー
2019/06/02 08:36

退会済みユーザー
2019/06/02 08:38

退会済みユーザー
2019/06/02 08:41
2019/06/02 08:45
2019/06/02 08:45

退会済みユーザー
2019/06/02 09:14

退会済みユーザー
2019/06/02 09:14

0
①
論理的・・・で言うとコードをそのまま文章化しただけのものはあまり有用とは言えません。
大目的部分がどうなっているか→それを実現するための処理 と考えた方が良いでしょう。
同じ目的のことを実現するやり方は1つではないという観点から、「合ってるか」という質問であればここはお答えしかねます。
むしろ「同じ目的を別のやり方で実現するとしたらどうなるか」を考えた方がロジカルと言えるでしょう。
②
CSSにないからとそのクラス名をつけられないわけではないので「何者か」と言うと
「付け外しされているだけのクラス」としか表現しようがないと思います。
何のためか?というと今回提示された内容だけでは判断が不可能です。
オンライン学習使ったことはないですが章立てで進んでいるものなんでしょうし
今後何かで使う機会もあるかもしれませんね。
ほぼほぼ同じようなところをやっていそうな質問があるので参考にされてみてはと。
投稿2019/06/01 12:18
総合スコア80886
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

退会済みユーザー
2019/06/01 12:55 編集

退会済みユーザー
2019/06/01 13:07
2019/06/01 13:18

退会済みユーザー
2019/06/01 14:08
2019/06/01 14:15
2019/06/01 14:36 編集

退会済みユーザー
2019/06/01 14:58 編集

退会済みユーザー
2019/06/02 02:33
2019/06/02 02:39

0
ベストアンサー
他の質問サイトでの回答が一番わかりやすかった為、一応自己解決とします。
ちなみにその回答が下記です↓ (こう言う回答が欲しかった)
アコーディオンメニューのコーディングに関して、回答します。
①は、概ね合っています。
var $answer = $(this).find('.answer');
>$answerには、クリックした際にそのクリックイベントが起こった要素で、
その子要素の.answerを代入。
変数「 $answer」は、
「faq-list-item」クラス属性が付いた要素の配下における
「answer」クラス属性のHTMLコレクションです。
②の「 open は一体何者なんですか?」
また、
「この open は具体的に「何」でどう作用しているのでしょうか?」
について
テクニカルタームとしては、「フラグを立てる」という作業です。
具体的に言い換えると、
マラソンで折り返し地点に到達した時に、
「このランナーはここまで来たんだ」ということで、
マジックペンで手に色を付けられます。
何かの目印を付けないと、
折り返し地点に到達していないのに
引き返されても、まったくわかりませんからね。
それと同様のことをしている訳です。
HTMLのタグには、いろいろな属性が付けられます。
このアコーディオンメニューの場合は、
質問という「question」クラスの付いたH3タグをクリックしたら、
・その直下のSPANタグ内の記号を変える
・かつ、「answer」クラスの付いたDIVタグの表示属性を変える
そういう処理をしている訳ですね。
その際、H3タグのクリック時に、
回答のタグが開いているのか、閉じているのかわかりません。
そこで「open」というクラスを用意しています。
・そのクラス属性が在るなら、閉じる
その時は、「open」クラスを取ってしまう
・そのクラス属性が無いなら、開く。
開けた目印として、
「開けましたよ」という意味付けの「open」クラスを付けておく
そうした処理をしていることになります。
>試しにopenを適当な文字に置き換えても出来た
そうです。どんな文字でもいいんです。
ただ、モノを開けたら「オープン」と言うので、
便宜的に「open」という単語を使っているだけです。
投稿2019/06/02 06:24

退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

退会済みユーザー
2019/06/02 06:41

退会済みユーザー
2019/06/02 06:43 編集
2019/06/02 08:00
2019/06/02 08:11
2019/06/02 08:17 編集

退会済みユーザー
2019/06/02 08:30

退会済みユーザー
2019/06/02 08:31

退会済みユーザー
2019/06/02 08:36
2019/06/02 08:39

退会済みユーザー
2019/06/02 08:41
2019/06/02 08:42

退会済みユーザー
2019/06/02 08:44
2019/06/02 08:44
2019/06/02 08:45

退会済みユーザー
2019/06/02 08:57 編集

退会済みユーザー
2019/06/02 08:48

退会済みユーザー
2019/06/02 08:48
2019/06/02 08:48

退会済みユーザー
2019/06/02 08:49
2019/06/02 08:50

退会済みユーザー
2019/06/02 08:50
2019/06/02 08:52

退会済みユーザー
2019/06/02 08:52
2019/06/02 08:52

退会済みユーザー
2019/06/02 08:52

退会済みユーザー
2019/06/02 08:54 編集
2019/06/02 08:53
2019/06/02 08:59

退会済みユーザー
2019/06/02 09:34

退会済みユーザー
2019/06/02 09:35
2019/06/02 09:37

退会済みユーザー
2019/06/02 09:38
2019/06/02 09:39

退会済みユーザー
2019/06/02 09:40
2019/06/02 09:43 編集

退会済みユーザー
2019/06/02 09:43

退会済みユーザー
2019/06/02 09:45
2019/06/02 09:46

退会済みユーザー
2019/06/02 09:48
2019/06/02 09:49

退会済みユーザー
2019/06/02 09:49

退会済みユーザー
2019/06/02 09:51
2019/06/02 09:51

退会済みユーザー
2019/06/02 09:53
2019/06/02 09:53
2019/06/02 09:54
2019/06/02 09:54

退会済みユーザー
2019/06/02 09:55
2019/06/02 09:56
2019/06/02 09:57

退会済みユーザー
2019/06/02 09:59

退会済みユーザー
2019/06/02 10:00
2019/06/02 10:01
2019/06/02 10:02

退会済みユーザー
2019/06/02 10:02

退会済みユーザー
2019/06/02 10:03

退会済みユーザー
2019/06/02 10:04

退会済みユーザー
2019/06/02 10:06 編集
2019/06/02 10:07
2019/06/02 10:09

退会済みユーザー
2019/06/02 10:10

退会済みユーザー
2019/06/02 10:11

退会済みユーザー
2019/06/02 10:14

退会済みユーザー
2019/06/02 10:15
2019/06/02 10:19

退会済みユーザー
2019/06/02 10:20
2019/06/02 10:21

退会済みユーザー
2019/06/02 10:22
2019/06/02 10:23

退会済みユーザー
2019/06/02 10:24

退会済みユーザー
2019/06/02 10:25
2019/06/02 10:26

退会済みユーザー
2019/06/02 10:26

退会済みユーザー
2019/06/02 10:27
2019/06/02 10:29

退会済みユーザー
2019/06/02 10:31
2019/06/02 10:32

退会済みユーザー
2019/06/02 10:34

退会済みユーザー
2019/06/02 10:39
2019/06/02 10:43

退会済みユーザー
2019/06/02 10:46

退会済みユーザー
2019/06/02 11:27

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。