人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

｢脱jQuery｣ 生JSで$.inArray()のように配列の中に値があるか存在を確認し番目を返す

jQueryなしのネイティブJSで配列の中に特定の値が何番目にあるかを取得する関数を実装してみます。

jQuery


var nums = [1, 2, 3, 4, 5];
$.inArray(3, nums); // 2

生JS


function inArray(value, array) {
  return [].indexOf.call(array, value);
}

var nums = [1, 2, 3, 4, 5];
inArray(3, nums); // 2

Array.indexOf() という関数がネイティブで用意されているのでそれを使います。

配列に特定の値が含まれるか


var nums = [1, 2, 3, 4, 5];

if (inArray(3, nums) === -1) {
  // 配列に3が含まれない場合
}
if (inArray(3, nums) >= 0) {
  // 配列に3が含まれる場合
}

inArray 関数を利用することで 配列に特定の値が含まれるかどうか をチェックすることもできます。


if (inArray(3, nums)) {
  // 配列に3が含まれる場合を想定しているがこれはNG
}

ちなみに、このように書くのは間違いです。 -1 のときも実行されてしまいます。

CSS本執筆しました！！！