Javascriptのプロ、ユゲタです。
HTMLデザイナーの人は、だいたいが「Javascript苦手なんですよね」って言います。
こんなにカンタンで、便利で、webをやる上では唯一無二のJavascript、使えるようになったほうがいいのに、何故深く習得しないのか、不思議でしかたありません。
webに限らず、言語にとって配列データを便利に扱えるようになると、システム構築などでの役立ち率は高くなるんですが、
for文をブン回して、処理をするという原始的な方法でも良いんですが、Javascriptには、便利なArray関数がたくさんあるので、それを覚えておくと、プログラムコードもかなりキレイになります。
先日、また新たな配列操作機能を使ったので、サンプルを踏まえて紹介したいと思います。
case study
とある一覧リストが入っているデータがあり、そこに新たにデータを挿入して、そのデータのindex番号を取得したいという場合です。
分かりにくいので、サンプルデータで説明すると、以下のようなスーパーで売っている果物の値段jsonデータが事前にある状態だと考えてください。
[
{
"name" : "apple",
"price" : 150
},
{
"name" : "orange",
"price" : 100
},
{
"name" : "banana",
"price" : 200
}
]
これに、次の新たな果物をリスト追加します。
{
"name" : "strawberry",
"price" : 170
}
1粒170円のイチゴです。高価ですね〜。
元のリストデータをlistsという配列変数に入れておいて、イチゴはstrawberryというオブジェクト変数に入れておきます。
そして、次のように追加します。
lists.push(strawberry)
単純に配列の後ろに追加しました。
これを一旦priceの低い順に並び直します。
lists.sort((a,b)=>{
if(a.price < b.price) return -1
if(a.price > b.price) return +1
return 0
})
これで、イチゴが何番目に入ったか検索します。
const strawberry_index = lists.findIndex(e => e.name === 'strawberry')
無事にstrawberry_index変数に2という値が返ってくれば、3番目（0スタート）に追加されたことがわかります。
ソース一括表示
const lists = [
{
"name" : "apple",
"price" : 150
},
{
"name" : "orange",
"price" : 100
},
{
"name" : "banana",
"price" : 200
}
]
const strawberry = {
"name" : "strawberry",
"price" : 170
}
lists.push(strawberry)
lists.sort((a,b)=>{
if(a.price < b.price) return -1
if(a.price > b.price) return +1
return 0
})
const strawberry_index = lists.findIndex(e => e.name === 'strawberry')
console.log(strawberry_index)
上記の一括プログラムをブラウザのデバッグコンソールにコピペして実行してみてください。
結果がちゃんと返っているのがわかると思います。
データの値を変えたり、他にも情報を追加して、試してみると良いですよ。
どんな時に使うの？
ココ一番のポイントです。
こういうプログラミングのコードを理解できたとしても、それをどういう場面で使えば良いのか？
というのが、プログラミングスキルに依存します。
配列に追加した値が、何番目に登録されたかというindex値を求めるって、どういう場合なのかというと、
今回は、値段が低い順に並べてあるので、安い順番という風に考えると、果物全体の値段で何番目に安い商品なのかを求めるプログラムという風に考えてもいいです。
ソートする値を値段じゃなくて、大きさや重さにしたり、お店で売れた個数などでソートをすると、色々な管理できる値が取得できるイメージができると思いません？
SQL文で登録をした後で検索をするのと同じ意味で、メモリ内でサクっとデータを扱うことができるようになれば、かなり高速で効率的なプログラムが書けるようになるハズです。
仕事でめちゃくちゃ使える技を教えてしまいました。
投げ銭お待ちしておりますwww
