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

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

ただいまの
回答率

88.19%

クラス名の指定に「.」コンマが必要な時と不要な時の違いについて

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 1,750

ZZ-TOP

score 36

JavaScriptの勉強をいています。
以下のコードはJavaScript/jQueryのサンプルのコードで正常に動作します。

ですが、クラス名の指定に「.」が付与されているところが
2か所あり、なぜ「.」が付与されるのか理解できません。

1番の「$(idName).find('.check').addClass('crowded'); //1_「.」
2番の「$('.check').on('click',function(){ //2_「.」

はどうして、どちらともクラス名の前に「.」が必要なのでしょうか?

どちらも「.」は必要ないと思うのですが、実際に「.」を削除すると動作しません。
※文法的にはシングルクォーテーションで囲うだけで問題なく指定出来ると思うのですが。

1番と2番のコードでクラス名を指定するために「.」が必要である理由を教えて下さい。

=クラス名を指定する時に「.」が必要になる場合と、
必要ない場合の違いを教えて下さい。


追記
クラス名の指定に「.」が必要、、、というだけでも理解出来ないのですが
もっとわからないのは「('.check')」の方です。

仮に「.」が必要だとしても、なぜ「'」シングルクォーテーションの中に
「.」が入るのでしょうか?

「(.'check')」とか「find.('check')」ならなんとか納得出来ます。
※メソッドとして扱うから、、、という理由ですから。

このことも含め、クラス名のを指定する時に「.」が必要な場合と
必要ない場合の違いが全く理解できません。

すいませんが、詳しい方、説明の上手な方、よろしくお願いします。

※ネットで調べようとしたのですが、検索するためのキーワードが思いつきません。
似たような事例について詳しく書かれているページへのリンクでもOKです。

よろしく、お願いします。

コードは以下の通りです。
※必要ないと思いますが、json、HTML/CSSも記載しておきます。


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
    $.ajax({
            url: 'data-A.json',
            dataType: 'json'
        })
        .done(function(data) {
            console.log('AA');
            $(data).each(function() { /*$(data).each*/
                    if (this.crowded === 'yes') {
                        var idName = '#' + this.id;
                        $(idName).find('.check').addClass('crowded'); //1_「.」
                    }
                }) //$(data).each
        }) //done
        .fail(function() {
            window.alert('読み込みエラー');
        })

    //click
    $('.check').on('click', function() { //2_「.」
        if ($(this).hasClass('crowded')) {
            $(this).text('crowdedはあるよ').addClass('red');
        } else {
            $(this).text('ないよ').addClass('green');
        }
    }); //click
}); //ready
</script>

↓ data-A.json

[
    {"id":"js","crowded":"yes"},
    {"id":"security","crowded":"no"},
    {"id":"uiux","crowded":"no"}
]
<ul class="list">
<li id="js">
    <h4>JavaScript勉強会</h4>
    <p class="check">空き状況を確認</p>        
</li>
<li id="security">
    <h4>セキュリティ対策講座</h4>
    <p class="check">空き状況を確認</p>
</li>
<li id="unix">
    <h4>UI/UXハッカソン</h4>
    <p class="check">空き状況を確認</p>
</li>
</ul>
.list li{
border: solid 1px;
width: 12.5%;
float: left;
margin: 10px;
list-style: none;
text-align: center;
}

.list h4{margin: 10px;}

.check{
background-color: cyan;
margin: 0px 3px 3px 3px;
cursor: pointer;
}

.red{background-color: #FF0000;}
.green{background-color: #00FF00;}

画像はブラウザ上の表示です。
動作はjsonの内容を参照しており、
水色の背景色のテキスト「空き状況を確認」をクリックすると

テキストコンテンツが「checkはあるよ」(背景色:ミドリ)
「ないよ」(背景色:赤)に変わります。


ブラウザ上の表示
イメージ説明

↓ クリック後
イメージ説明

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+8

一言で言うと仕様です。
CSSでclassは.、idは#をつけるルールですよね?何もつけないとタグ名です。
それがそのまま「セレクタ」としてjQueryで利用することになるわけです。

必要ないケースはhasClass()など引数がclassであることが明確なケース。

こういうのを全部洗い出してたらキリがないのでMDNのリファレンスをざっと読んでください。回答でおさまる話ではないです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/27 21:12

    回答して頂きありがとうございます。

    >必要ないケースはhasClass()など引数がclassであることが明確なケース。

    こういう覚え方で良いのですね。

    >一言で言うと仕様です。
    CSSでclassは.、idは#をつけるルールですよね?何もつけないとタグ名です。
    それがそのまま「セレクタ」としてjQueryで利用することになるわけです。

    わかりました。

    「CSSでclassは.、idは#をつけるルールですよね?何もつけないとタグ名です。」

    確かにそのとおりです。
    覚えやすい(わかりやすい)説明をして頂きありがとうございます。

    こういうのを全部洗い出してたらキリがないのでMDNのリファレンスをざっと読んでください。

    やっぱりそういうものなんですね。
    リファレンスを読むのは上級者だけだと思っていたのですが、
    これから、機会を見つけてちょくちょく読んでいきます。

    わかりやすいで回答で説明して頂きありがとうございます。
    機会がありましたら、またお願いします。

    ※しばらく質問は開けておきます。

    キャンセル

  • 2019/03/27 21:22

    マニュアルとかリファレンスを使えるようになってようやく初心者から卒業できると言っても過言ではないですよ。どの言語でもですが、敬遠している人は大抵初心者から抜けられてません。
    回答でマニュアルやリファレンスを参考資料や根拠資料とするケースがありますが、あれは回答だけのためではなく、確実な情報がマニュアルにあると伝えたいがためです。
    そこを点ではなく「他にも機能説明がないか」と興味を持てるかどうかが成長の鍵だったりします。

    キャンセル

  • 2019/03/28 12:38

    > こういうのを全部洗い出してたらキリがないのでMDNのリファレンスをざっと読んでください。
    補足しますと、jQueryリファレンスでセレクタが必要な事を確認して、MDNでセレクタ仕様を確認ですね。
    https://api.jquery.com/jQuery/#jQuery1
    ちなみに、基本的なセレクタ仕様はjQueryリファレンスにも載っています。
    https://api.jquery.com/class-selector/
    今回はセレクタが必要な事に気が付けなかったようなので、jQueryリファレンスで "Selector" のキーワードに辿り着くのが出発点ではないかと思います。

    キャンセル

  • 2019/03/28 12:46

    think49さん
    補足ありがとうございます。

    キャンセル

+3

「find('check')」や「$('check')」だとcheckというタグを探します

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/27 22:45

    回答して頂きありがとうございます。

    キャンセル

+3

もっとわからないのは「('.check')」の方です。 

CSS での指定が「.check」なのは理解できているなら、同じ「セレクタ」という概念を使っているもの、と理解すればよいのでは。jQueryは標準のDOMメソッドに(jQuery開発当時)無かった「CSSのセレクタを使って要素を取得できる」便利なツールでした。(今はquerySelectorが有りますが)

【jQueryが要素検索に使うSizzleについて。 | Ginpen.com】
https://ginpen.com/2012/09/14/sizzle/

【jQueryのセレクタメモ - Qiita】
https://qiita.com/Thought_Nibbler/items/5d4fc40a4d4325128b24

【CSS セレクター - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

【CSSのセレクタとは?覚えておきたい25種類と書き方】
https://saruwakakun.com/html-css/reference/selector

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/27 22:29

    回答して頂きありがとうございます。

    リンク先を確認しました。

    みなさんのアドバイスの通り、結局
    CSSのセレクタと同じととらえるのがわかりやすいですね。

    CSS関連のリンク先で見やすいページを教えて頂き
    ありがとうございます。

    【CSSのセレクタとは?覚えておきたい25種類と書き方】
    https://saruwakakun.com/html-css/reference/selector

    ↑このページ見やすいですね。

    私はいつも

    意外と知らない!?CSSセレクタ20個のおさらい
    http://weboook.blog22.fc2.com/blog-entry-268.html

    を参考にしていますが、JavaScriptのことばかり
    考えていたので、CSSのセレクタと同じに扱うと
    いうことに全く気が付きませんでした。

    ----

    【jQueryのセレクタメモ - Qiita】
    https://qiita.com/Thought_Nibbler/items/5d4fc40a4d4325128b24

    基本セレクタ
    タグ名 or クラス名 or ID による指定ができる。

    $("form"); // タグ名="form"
    $(".className"); // クラス名="className"
    $("#formId"); // ID="formId"

    が今回の事例に相当するのですね。

    今回は、いろいろ教えて頂きありがとうございます。
    機会がありましたら、またお願いします。

    キャンセル

+2

なぜ「.」が付与されるのか理解できません。

大雑把に言うと.check*[class="check"]のショートカットです。
なので、気に入らなければ後者を使うこともできます。
とりあえず、納得ができるまで後者を使ってみてはいかがでしょうか。

「(.'check')」とか「find.('check')」ならなんとか納得出来ます。
※メソッドとして扱うから、、、という理由ですから。 

同様の理屈で、0.1という数値表現にも「0はオブジェクトではないし1はプロパティでもメソッドでもないので'.'を使うのはおかしい」という疑問が可能かと思うのですが、質問者さんはこの疑問について答えることはできますか?

「小数点のドットと、オブジェクトのドット記法のドットは、記号が同じでも意味が違う」という回答になるかと思います。

セレクタも同様に考えてください。
クラスセレクタのドットと、オブジェクトのドット記法のドットは、記号が同じでも意味が違う」
ということです。

 仮に「.」が必要だとしても、なぜ「'」シングルクォーテーションの中に
「.」が入るのでしょうか?

jQueryのソースを見るといいかもしれません。文字列で与えられたセレクタを解釈しgetElementById()などのDOMメソッドを呼んでいます。
文字列が期待されていますから、シングルクォーテーションなどで囲み文字列リテラルとして表記する必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/27 22:16 編集

    詳しく回答して頂きありがとうございます。

    >同様の理屈で、

    セレクタも同様に考えてください。
    「クラスセレクタのドットと、オブジェクトのドット記法のドットは、記号が同じでも意味が違う」
    ということです。

    アドバイスありがとうございます。
    JavaScriptのことばかりに気を取られていたのですが、
    みなさんにご指摘して頂いているとおり、CSSのセレクタと同じ感覚なのですね。

    「mts10806」さんがご指摘の通り
    ※「『.』が必要ないケースはhasClass()など引数がclassであることが明確なケース。」

    があるので、これだけは独立して覚えておく必要があるのですが。

    ----

    > 仮に「.」が必要だとしても、なぜ「'」シングルクォーテーションの中に
    「.」が入るのでしょうか?

    >文字列が期待されていますから、シングルクォーテーションなどで囲み文字列リテラル(https://mzl.la/2CFrAg1)として表記する必要があります。

    リンク先確認しました。
    英語もあり今の私にはレベルが高くて全部理解できないです。

    ですが、「String.length プロパティを文字列リテラルで用いることもできます。」
    ↑これは普通に使うので、感覚としてはよく似ている、、、ということですね。

    ----

    大雑把に言うと.checkは*[class="check"]のショートカットです。
    なので、気に入らなければ後者を使うこともできます。
    とりあえず、納得ができるまで後者を使ってみてはいかがでしょうか。

    教えて頂き、ありがとうございます。
    1番の方は相手がjsonなので、これはイメージしやすいですね。

    2番の方はHTMLページ上の要素なので、イマイチ、、、と思ったのですが、
    HTMLも階層構造なので、よく見ると同じとらえ方ができる、、、ということですね。

    今回はいろいろ詳しく説明して頂きありがとうございます。
    機会がありましたら、またお願いします。

    キャンセル

  • 2019/03/28 09:07

    > 大雑把に言うと.checkは*[class="check"]のショートカットです。
    正確には、[class~="check"] のショートカットですね。
    https://triple-underscore.github.io/selectors4-ja.html#class-html
    https://triple-underscore.github.io/selectors4-ja.html#attribute-representation

    キャンセル

  • 2019/03/28 09:22

    ご指摘ありがとうございます。
    そういえば、~= がありましたね。存在をすっかり忘れていました。そして、全称セレクタは省略可能と。

    キャンセル

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

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る