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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1925閲覧

第1引数を固定長、第2引数以降を可変長にする方法

flat

総合スコア617

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/08/04 10:36

次の関数を、第1引数は固定長のまま第2引数以降を可変長にしたいのですが、この様な場合はどうするのが良いのでしょうか?
なお、クラス追加の処理をループさせる方法は出来れば避けたいと考えています。

JavaScript

1function addClass( element, class_name ) { 2 if ( element.classList ) { 3 element.classList.add( class_name ); 4 } else { 5 element.className = class_name; 6 } 7}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

argumentsArray#slice すれば、第二引数以降の可変長引数を処理できると思います。
(2015/08/04 21:19 className 処理を簡略化できた為、修正しました。)

HTML

1<p class="hoge foo piyo"></p> 2 3<script> 4function addClassListByElement( element, className ) { 5 var classList = element.classList, 6 classTokenList = Array.prototype.slice.call(arguments, 1); 7 8 if (classList && typeof classList.add === 'function') { 9 classList.add.apply(classList, classTokenList); 10 } else { 11 element.className += ' ' + classTokenList.join(' '); 12 } 13} 14 15addClassListByElement(document.querySelector('p.hoge'), 'hoge', 'foo2'); 16</script>

投稿2015/08/04 12:11

編集2015/08/04 12:20
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flat

2015/08/04 13:24

回答して下さりありがとうございます。 callメソッドで引数を配列に変換してArray.prototype.sliceで第1引数以降を取得しているのですね。 applyメソッドの部分は既にあるクラスに追加したクラスを継承しているという理解で良いのでしょうか。
think49

2015/08/04 14:33 編集

`Function.prototype.apply` は継承しているわけではないのですが…。 `DOMTokenList.prototype.add` は可変引数をとるので、`Function.prototype.apply` で渡しています。 https://dom.spec.whatwg.org/#interface-domtokenlist ところで、親コメントの `addClassListByElement` は第一引数 element の例外処理が甘いので注意してください。 truthy な Object 型を渡すと例外も出さずに静かに処理を終了します。
flat

2015/08/05 01:55

applyメソッドで配列(可変長引数)を受け取ってまとめているのですね。 (まだ少し認識が甘い気がするのでMDNなどをもっと熟読しておきます…) 厳密な型の判別が必要という例外処理の注意もとても参考になりました。 ありがとうございました。
guest

0

回答済みのようですので、参考までに。

ECMAScript2015やCoffeeScriptは可変長引数に対応していますので、
どのようにトランスパイルされるか見るのも一つの手だと思います。
Bableを使ったECMAScript2015の例を見ていたければ、
どのようにすれば汎用的にできるかがわかると思います。

投稿2015/08/05 09:25

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flat

2015/08/05 13:02 編集

回答して下さりありがとうございます。 まだJavaScriptに触れて間もないのでCoffeeScript等には馴染みがないですが、今後参考にしようと思います。 ちなみにリンク先の右側にあるES5のコードを試したところ、クラス名がスペース区切りではなくカンマ区切りで追加されてしまいました。 var element = getElementById( 'element' ); addClass( element, 'class1', 'class2' ); // class="class1,class2" 追記 classList.add()がそのまま配列やオブジェクトを受け取れるはずもないですよね…。 あくまでも理解のための参考であってそれで動くというものではない事を理解しました…。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問