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

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

ただいまの
回答率

90.02%

html javascriptの型について

解決済

回答 7

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 618

azpino

score 12

かなり大雑把な質問なのですが
htmlのタグをjavascriptの変数として代入する場合
代入されるhtmlの型を知っていないと関数を用いることができないと思うのですが、
型をどうやって調べたらいいかがわかりません。

どなたかご教授いただけないでしょうか?
よろしくお願いいたいます。

具体例
liの要素数を取得して、その要素数に応じて任意の要素のwidth(CSS)を変更しようと思っているのですが
下記のようなコードで要素数を取得することができるということがわかりました。

$(function(){

  var $xxx = $('.class-name li');

  var tabsLiLen = $xxx.length;
});

ただ、length関数はarray型にしか使えないと書かれており、
var $xxx = $('.class-name li');
ここで代入されている$('.class-name li')がarray型かどうかを探しても見つけることができませんでした。

そもそもjavascriptをあまりいじったことがなく、検索するための言葉さえも知らない状況ですので
型に関する検索ワードだけでも教えていただけると幸いです。
お願いいたします。

補足
HTMLの業務経験3年程度
C言語の業務経験3年程度

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/02/12 13:21

    記述形式から「jQuery」もタグに追加されたほうが良いかと思います。

    キャンセル

  • azpino

    2019/02/12 13:51

    修正いたしました。
    ご指摘ありがとうございます。

    キャンセル

回答 7

+6

length関数はarray型にしか使えないと書かれており

いえ、lengthというプロパティがあれば、何にでも使えます。極端な話、var a = {length: 3}というオブジェクトがあった場合、a.lengthは3です。

ここで代入されている$('.class-name li')がarray型かどうか

これはjQueryオブジェクトだと思われます(参照)。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 14:15

    ご回答有り難うございます。
    lenghtがプロパティかどうかすら分かってなかったです。。。

    よくわからない質問で申し訳ありません。

    キャンセル

+5

ただ、length関数はarray型にしか使えないと書かれており、

出典は?とりあえず文字列でもlengthプロパティ(関数ではない)はありますよ。

【Array.length - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length

【String.length - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length


提示されているコードは jQuery というライブラリを使用したコードなので、lengthが使えます。

【.length | jQuery API Documentation】
https://api.jquery.com/length/


一応「型」の取得方法(jQuery オブジェクトはobjectになると思うが)。

【typeof - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 14:13

    array型ではなく配列型のことを言っていました。

    javascriptとjQueryを混同してしまって、
    var array = ['リンゴ', 'ブドウ', 'メロン', 'イチゴ'];
    こういったものでないとlengthは使えないと思っていました。

    皆さんのご回答から察するに、私はいろいろ勘違いしているみたいなので、みなさんのリンクやコメントを参考にしてもう少し理解を深めます。。。m(_ _)m
    ご回答ありがとうございました。

    キャンセル

  • 2019/02/12 14:19

    横からすみません。

    JavaScript における Array は配列なのかリストなのかについては仕様に含まれておらず、実装によります。
    おそらく、多くの場合、リスト(もしかすると参照の配列?)です。なので、JavaScript にはC言語的な意味での「配列」はないと考えていいと思います。

    キャンセル

  • 2019/02/12 14:29

    コメントありがとうございます。

    C言語的な解釈を頭の中でしないほうが良さそうですね・・・(・_・;)
    javascriptとC言語は全然違うものと思って勉強していったほうが良さそうですね!

    ありがとうございます。

    キャンセル

+5

いろいろ意見があるところかと思いますが、JavaScriptはかなり「ダック・タイピング」なので、型を気にするよりも、そのインターフェース(的なもの)が目的に合致するかどうかを気にしたほうがいいと思います。

といいますのも、JavaScriptではインスタンスのプロパティの型を気軽に破壊できるので、オブジェクトの型が目的に合致していても、プロパティが合目的なのかどうかについては担保されないからです。

つまり例で言うと、lengthプロパティが存在するかどうか、そしてそれが列挙可能なプロパティ数に合致するか、というところを(気にするとしたら)気にするべきかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 14:02

    そうなんですね・・・
    C言語を長くやっていたので、そういった感覚はなかったです(・_・;)

    勉強になります!
    ご回答ありがとうございました。

    キャンセル

checkベストアンサー

+4

対象のオブジェクトに対してconsole.log()でlengthが使えるかどうか見れることは見れます。
(ブラウザデベロッパーツールの「コンソール」に結果が表示されます)

 console.log($("div"));


イメージ説明

つまり「Array型かどうか」ではなく「lengthが使えるかどうか」が本来得るべき情報かと思いますので、安心して使ってください(この言い方が適切かわかりませんが)
.class-name liにおいてのlengthは要素があればその数が入ってきますしなければ0です。

ちなみに既に回答にあるとおり結局のところ「オブジェクト」として取得されるので、「同HTML内に1つのみ」が原則とされる「id」属性を直に指定しても「length」は使えます。入る値は0か1かですけど。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 14:01

    ご回答有り難うございます。
    あまりjavascriptやJqueryの事がわかっておらず、プロパティの情報を見れる方法を教えていただいたことで、今後習得していく上でもかなり参考になりそうです!

    キャンセル

  • 2019/02/12 14:02

    既に回答があるとおり「プロパティ」なので、そこは既に提示されている回答にあるドキュメントを熟読してください。

    キャンセル

  • 2019/02/12 14:03

    ドキュメントで仕様を理解すれば解決することも結構多いです。

    キャンセル

  • 2019/02/12 14:17

    そうみたいですね(・_・;)

    ありがとうございます。
    まだすべてのご回答のリンクをちゃんと読めていないので、まずそのあたりを読んで理解を深めようと思います!

    教えていただきありがとうございます。

    キャンセル

+3

基本的にjavascriptの質問というよりはjQueryの質問ですよね?
jQueryでdom的なデータの掴み方をする場合は一つしかヒットしなくても
複数ヒットしても、一つもヒットしなくても常にlengthはもちます
気にせずにlengthは参照ください。
またヒットしない場合$(セレクタ).length==0で判断する場合もありますし
.is()で判断する場合もあります

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 14:05

    ご回答有り難うございます。
    まだイマイチjavascriptとjQeuryの違いを把握できてないです。。。(・_・;)

    ヒットするかどうかをlengthで見れるんですね!
    勉強になります。

    教えていただきありがとうございます。

    キャンセル

+3

ただ、length関数はarray型にしか使えないと書かれており

length...関数?
いいえ、これはプロパティです。

C言語でいう構造体と似たようなもんで、
A.length自体は構造体Aに属するメンバー的な存在です。
まぁ、JavaScriptはオブジェクト指向プログラミング言語なんで、単なる構造体ではなくメンバー的存在のプロパティ以外にも、メソッドという関数をもたせる事も可能ですが……

もしかしてC言語ではBという構造体を宣言する時に、
既にAでlengthというメンバーを使ってたら同じメンバー名であるlengthはBでは定義出来ないんですか?
そうではありませんよね。それと同じです。

Aのプロパティとしてlengthを定義した後、
Bのプロパティとしてlengthを定義することも可能です。

そしてArrayにおいてのlengthは要素数、Stringにおいてのlengthは文字列長
ポリモーフィズムみたいな感じで様々な値がこのlengthプロパティを所持しています。
要するに何がlengthプロパティを持っていても不思議ではありません。

$('.class-name li')がarray型かどうかを探しても見つけることができませんでした

$は単なるJavaScriptに於ける変数名として使って良いだけの変数名候補でしかありません。
つまり、$ is 何?ってのが問題の99%です。

これに関してはJavaScriptで仕事した経験が長い人にしかピンと来ないかもしれませんね。
2006年に登場し、大流行したjQueryというライブラリがあります。
このライブラリを読み込むとグローバル変数領域にjQueryと$という変数名を確保する作りになっており、慣習的に$(xxx)はjQueryとみなされます。

なので公式ドキュメントを見れば一撃です。
https://api.jquery.com/jQuery/

jQuery( selector [, context ] ) | Returns: jQuery

セレクター文字列を入れて検索した場合、
jQueryという型のインスタンスを返すと書いてありますね。

このReturns: jQueryにリンクが張ってあるのでクリックして遷移してみましょう。

The jQuery object itself behaves much like an array; it has a length property

jQuery型のインスタンスはArrayに似た振る舞いをします。
lengrhプロパティを所持していますと書いてあります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

結局何がしたいんでしょう。
型を調べるのが目的じゃないですよね?
$.isArray(知りたい奴)で、配列かどうかの判定は出来ますが、これがしたいわけじゃないですよね。
いくつ要素が含まれているかわからず、複数あるならループして処理させたいけど単体だったらループしないし・・・とかで困っているなら、.each()とか使えば、取り出した要素リストが単体でも複数でも同じように処理できますが、こういうことではなく?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 13:48

    >結局何がしたいんでしょう。
    私も流し読みで気づかなかったところはありますが、「具体例」として書かれているようです。

    キャンセル

  • 2019/02/12 14:06

    説明が下手で申し訳ありません。。(・_・;)

    どういったプロパティをもつかどうか知る方法を教えてもらうのが目的でした。

    キャンセル

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

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