html javascriptの型について

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

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

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

javascript
1$(function(){
2 
3  var $xxx = $('.class-name li');
4 
5  var tabsLiLen = $xxx.length;
6});

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

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

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

m.ts10806

2019/02/12 04:21

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

azpino

2019/02/12 04:51

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

行動規範の内容に同意します

回答7件

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

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

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

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

投稿2019/02/12 04:22

maisumakun

総合スコア145183

azpino

2019/02/12 05:15

ご回答有り難うございます。 lenghtがプロパティかどうかすら分かってなかったです。。。よくわからない質問で申し訳ありません。

行動規範の内容に同意します

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

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

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

投稿2019/02/12 04:51

Lhankor_Mhy

総合スコア36104

azpino

2019/02/12 05:02

そうなんですね・・・ C言語を長くやっていたので、そういった感覚はなかったです(・_・;) 勉強になります！ご回答ありがとうございました。

行動規範の内容に同意します

ただ、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 04:23

編集2019/02/12 04:27

kei344

総合スコア69407

azpino

2019/02/12 05:13

array型ではなく配列型のことを言っていました。 javascriptとjQueryを混同してしまって、 var array = ['リンゴ', 'ブドウ', 'メロン', 'イチゴ']; こういったものでないとlengthは使えないと思っていました。皆さんのご回答から察するに、私はいろいろ勘違いしているみたいなので、みなさんのリンクやコメントを参考にしてもう少し理解を深めます。。。m(_ _)m ご回答ありがとうございました。

Lhankor_Mhy

2019/02/12 05:19

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

azpino

2019/02/12 05:29

コメントありがとうございます。 C言語的な解釈を頭の中でしないほうが良さそうですね・・・(・_・;) javascriptとC言語は全然違うものと思って勉強していったほうが良さそうですね！ありがとうございます。

行動規範の内容に同意します

ベストアンサー

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

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

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

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

投稿2019/02/12 04:47

m.ts10806

総合スコア80850

azpino

2019/02/12 05:01

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

m.ts10806

2019/02/12 05:02

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

m.ts10806

2019/02/12 05:03

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

azpino

2019/02/12 05:17

そうみたいですね(・_・;) ありがとうございます。まだすべてのご回答のリンクをちゃんと読めていないので、まずそのあたりを読んで理解を深めようと思います！教えていただきありがとうございます。

行動規範の内容に同意します

ただ、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プロパティを所持していますと書いてあります。

投稿2019/02/12 04:56

miyabi-sun

総合スコア21158

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

投稿2019/02/12 04:45

yambejp

総合スコア114829

azpino

2019/02/12 05:05

ご回答有り難うございます。まだイマイチjavascriptとjQeuryの違いを把握できてないです。。。(・_・;) ヒットするかどうかをlengthで見れるんですね！勉強になります。教えていただきありがとうございます。

行動規範の内容に同意します

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

投稿2019/02/12 04:27