配列でデータ化するネタ今回の記事は、デザイナーさんやフロントエンドエンジニアさんを対象に、javascriptの教科書本に書いてないと思われるようなネタを紹介してみます。大きい値であるかどうかを調べたい場合、どんなプログラムでも大抵、こんな風にif文で判定するかと思います。...}webサイトのプログラムで、ある値がどの範囲にあるかを調べるプログラムの事例としてすぐに思いつくのが、レスポンシブなWEBサイトを作る時のウインドウサイズを調べて、要素や画像のサイズやレイアウトを変更したり、メニューを別の形に変更する場合ではないかと思ったりします。ほとんどすべてのブラウザが対応してくれるようになったので、CSSのみでやる場合はメディアスクリーンを使うかもしれませんが、メディアスクリーンの主な使用目的はPCで見ている場合は1680以上や、yahooをお手本にしたメイン要素を960px+αにするサイズ、又は昔ながらの1024&800px、あとはノートパッドやスマホ用などで大きなくくりでCSSファイルを用意するためのものかと思います。サイトデザインによる細かな値での調節(1000以上は960px、900pxなら860pxなどの微調節)や、google画像検索のような雰囲気で商品画像を並べてレイアウトするようなサイトでは、画像の数や位置を細かく調節するためにcssファイルを増殖させるのは大変なので、javascriptで処理するのではないかと思います。想定するどの範囲にあるかを調べる、というような処理のことです。今回考察するネタ今回は、ページ内の要素の位置を変更したり、サイズを変更したりするjavascriptプログラムを作る時に、『取得したウインドウサイズの値がどの範囲にあるかを判定する方法を考えよう』というのがテーマになります。ついでに、範囲データの指定方法も考えます。メインは値の範囲を調べることなので、「ブラウザごとのウインドウサイズの取得方法」「要素のサイズ変更方法」などは、今回は省略し、文字で書くだけにしています。→メインの幅を300px、メニューを幅150px(文字12px)で&ヘッダーのアイコンクリックで表示(left:5,top:100)※値は違う値である点が重要なだけなので、適当です。if~elseを使って普通に作るとこんな感じかと思います。ifの部分を増やしたり減らしたりなどのプログラム修正が必要となります。作ると範囲データの変更が大変、という問題点があります。判定部分で指定している...すなわち範囲の判定値がデータではなく、逐次判定処理になっているからです。表組などのようにいろんな要素も変更しなくてはならなくなってくると、各要素をいちいちif~elseで処理していると、修正依頼が来たときに直す場所が大量に出てきたり、変更箇所が分かりづらい長い長いソースになってしまう可能性があるかと思います。980、860、720、650、450、を増やして500を削除、などのホントは対した処理ではないのに、javascriptソースが大規模改修レベルに見えるような、とても面倒な変更作業になってしまうかと思われます。する処理】}変数にすることで、変更する値をデータ化した印象のソースになりました。ウインドウサイズについてはまだデータになってない感じです。範囲指定の値を配列にして、簡単に変更できるようにしてみます範囲指定の変更が面倒、という問題点を解消するために、配列データで(例えば)降順の数値で指定してみます。例:x=[1024,800,500]この場合、980、860、720、650、450、を増やして500を削除などの場合、x=[1024,980,860,720,650,450]にするだけなので、範囲変更が簡単になります。まとめるために必要なアイデアが、『ある値がどの範囲にあるか調べる方法』ということになります。以下の【アルファベット】(例では【A】~【D】)のどれかの位置になります。数値に対応させれば、上記の各処理をswitch文で書くこともでき(今回はswitch文を使いません)、さらに先ほどの変数を配列にすることもできます。数値を作る部分をifelseで書き、変数を配列にするとこんな感じになります。上記のような感じで範囲の部分だけはifelseで書くという形でもよいかもしれませんが、汎用的には使えないので、カテゴリ違いで違う値を指定したい場合にいちいち同じ形で書かなければならないのが面倒になるかもしれません。今回のテーマである「ある値が【配列で指定した数値の】どの範囲にあるか調べる」という関数を考えてみます。範囲の値指定が配列なので、判定する単純な方法としては、for文で配列の値を順に比較するのが普通かと思われます。値を計算する形になり、fは範囲最小値未満の値を計算するためのものです。例の場合、wの値によって、cやfが以下の値になります。範囲指定データが配列になってますので、配列メソッドと組み合わせると、もう少し簡単にできるアイデアを思いついたのでご紹介します。array.indexOf(value)」です。indexOfは、配列に同じ値があれば、その位置(配列インデックス)を返し、なければ-1を返す処理です。値があるので、範囲を示すインデックス値として取得することができる、というアイデアになります。push)、配列の値を降順に並び替える方法(sort)の3つを組み合わせると、for文でcの値をカウントしたのと同じ結果を取得する関数が作れる、ということになります。b-a;});pushで配列の値を破壊的に変更するのが気になってしまう場合があるかと思いますので、concatでwを追加した新しい配列を作って処理する形にしています。重複したデータは設定しない、が必須条件となります。今回のプログラムのまとめついでに、記述を少しだけ減らしています。範囲指定配列の値が3つなので、範囲を示すインデックスは0~3の4つになるので、a~gの各データは4つずつの値になります。c;}例えば、980を追加する場合、x=[1024,980,800,500]a=[960,860,760,460,300]...b=[350,300,250,200,150]...c=[16,15,14,13,12]...d=[10,10,10,5,5]...e=[50,50,50,50,100]...f=[1,1,1,0,0]...g=[0,0,0,1,1]...のように各データ配列に値を追加する形になります。'土'](又は文字列'日月火水木金土')のインデックス番号として使う、というネタと同じ考え方になっています。...ということで、範囲指定データを配列で用意した時に、ある値がどの位置(変更する値配列のindex番号に利用)になるかを調べるための関数のアイデアについて紹介してみました。javascriptのメソッドをいろいろ眺めてみると、単体で使う以外に、組み合わせるとおもしろいアルゴリズムのアイデアが浮かぶかもしれませんので、視点を変えてみてみるのもおもしろいかと思ったりします。以上、長い記事を最後まで読まれたみなさん、お疲れさまでした。以下は自己満足的な蛇足の内容ですので、気にしないでください。