2018/3/14 更新
今年（2015年）の６月くらいからWEBプログラミングを勉強し始めたのだが、その当時はJavaScript も jQuery も全く知らなかった。
そもそもWEBプログラミングに使われる言語が一体何なのかも良く知らなかった。
WEBプログラミングと言うと、多分、
- JavaScript
- PHP
- Perl
- CGI
と言うような名前の言語や手法を使うのだろうと言う程度の知識であった。
その後、数か月勉強して、jQueryもある程度は使えるようになってきた。
さて、そんなワテがjQueryを勉強していて最近覚えた表題の手法、
「jQueryでオブジェクト配列から特定のkey, valueを持つ要素を見つけて部分配列を作る」
を紹介したい。
その過程で、WEBプログラミングの全くの素人の人の為に、物凄く初歩的な部分からWEBプログラミングを解説したい。
では、本題に入ろう。
jQueryとは何か？
jQueryとは、John Resig（ジョン・レッシグ）氏によって開発／公開されているJavaScript用のライブラリだ。
作者がQueryという名前を付けている事からも分かるように、文字通り様々な形で入力データを処理して、目的とするデータを取り出せるのだ。
データベースを操作する感覚に似ている。
jQueryで扱う入力データは、ブラウザーに表示されているhtmlファイルのDOMオクジェクトであったり、あるいは、JavaScriptのデータ（配列、オブジェクトなど）でも良い。
非常に良く出来ているライブラリだと思う。
また、jQuery UIと言う関連するライブラリーもある。
これを使えば、
- Dialogウインドウ表示
- 要素の移動（Draggable）
- 要素の拡大縮小（Resizable）
- 要素の並べ替え（Sortable）
- その他多数の機能
が簡単に利用出来るので、ワテは良く使う。
さて、今回は、JavaScriptのオクジェクトの配列が有るとして、その中から特定の key, value を持つオブジェクトのみを取り出して別の部分配列として取得する方法を調べてみた。
オブジェクト配列から key, value を指定し部分配列を取り出す
例えば、こんな状況だ。
var dataAry = [
{ num: 0, name: '郷ひろみ' , times: 8 , title: '「２億４千万の瞳 -エキゾチック・ジャパン-」' },
{ num: 1, name: '大原櫻子' , times: '初', title: '「瞳」' },
{ num: 2, name: '伍代夏子' , times: 22 , title: '「東京五輪音頭」' },
{ num: 3, name: '乃木坂４６', times: '初', title: '「君の名は希望」' },
{ num: 4, name: '三山ひろし', times: '初', title: '「お岩木山」' },
{ num: 5, name: '坂本冬美' , times: 27 , title: '「祝い酒」' },
{ num: 6, name: '德永英明' , times: 10 , title: '「時代」' },
];
dataAryという配列の中には、第６６回紅白歌合戦(2015年)の出場歌手の情報が入っている。
JavaScriptの配列は何でも入れられる
ここでは、一つのオブジェクトに
{ key1: value1, key2: value2, key3: value3, key4: value4 },
の形式でデータを保管している。
横に長いので見辛い場合には、改行しても良い。
{
key1: value1,
key2: value2,
key3: value3,
key4: value4
},
紅白歌合戦のデータの場合には、具体的には以下のオブジェクトを定義している。
{
num: 通し番号,
name: 歌手名文字列,
times: 出場回数,
title: 曲名文字列
},
だ。
ちなみに、key:value の keyの部分は、
{
'num': 通し番号,
'name': 歌手名文字列,
'times': 出場回数,
'title': 曲名文字列
},
と書いても良い。
つまり key の部分には文字列 ‘key’ の形式で書いても良いのだ。
あるいは文字列なので “key” でも良い。
まあ、どれを使うかは好き好きだ。
ワテの場合には、シングルクォーテーション ‘key’ を良く使う。
オブジェクトデータの配列
さて、兎に角、このオブジェクトデータが配列になったものが dataAry だ。
JavaScriptの場合、
[1, 2, 3, 4, 5]
と書けば数字の配列になる。
['str1', 'str2', 'str3', 'str4', 'str5' ]
と書けば文字列の配列になる。
[1, 2, 'str3', 4, 'str5' ]
などと数字と文字列を混ぜる事も可能だ。
さらに、配列の中に配列
[[1, 2] ,[3, 4, 5]]
も可能だし、さらに上記の紅白歌合戦データのようにオブジェクトを入れる事も出来る。
何でも入れられるのが JavaScript の配列だ。
それ以外に、関数定義を入れる事も可能だ。
key指定して特定のvalueを持つオブジェクトのみ取り出したい
さて、
この配列の中から、例えば
歌手名='坂本冬美'
のデータのみ取り出したい。
あるいは、
出場回数='初'
の人のデータのみ取り出したい。
そう言う場合には、JavaScript で forループで回せば出来るが、jQuery には grep() という便利な関数が用意されているのを知った。
jQueryのgrep()を使う
それを使うと、上記の処理は、こんなふうに出来る。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>オブジェクトの配列から、特定の値を持つオブジェクトの部分配列を作る grep関数</title>
<!--<script src="//code.jquery.com/jquery-3.1.1.js"></script>-->
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<script>
var dataAry = [
{ num: 0, name: '郷ひろみ' , times: 8 , title: '「２億４千万の瞳 -エキゾチック・ジャパン-」' },
{ num: 1, name: '大原櫻子' , times: '初', title: '「瞳」' },
{ num: 2, name: '伍代夏子' , times: 22 , title: '「東京五輪音頭」' },
{ num: 3, name: '乃木坂４６', times: '初', title: '「君の名は希望」' },
{ num: 4, name: '三山ひろし', times: '初', title: '「お岩木山」' },
{ num: 5, name: '坂本冬美' , times: 27 , title: '「祝い酒」' },
{ num: 6, name: '德永英明' , times: 10 , title: '「時代」' },
];
function get_obj_by_key_value(dataAry, key, value) {
var result = $.grep(dataAry, function (e) {
//x return e.key == value; // こういう書き方は出来ないようだ。
return e[key] == value;
});
return result;
}
var obj1 = get_obj_by_key_value(dataAry, 'name', '坂本冬美'); // name='坂本冬美' で検索
alert(JSON.stringify(obj1));
console.log(JSON.stringify(obj1));
var obj2 = get_obj_by_key_value(dataAry, 'times', '初'); // timesが '初' の人は複数いるので全員取得する。
alert(JSON.stringify(obj2));
console.log(JSON.stringify(obj2));
</script>
</body>
</html>
このHTMLファイルはVisual StudioのC#を使って作成したものだ。
Visual Studioを使うと、コンソールアプリケーションやFormアプリケーションを作る事が出来るが、この例のようにWEBプログラミングも可能だ。
HTMLファイルを編集したり、JavaScriptプログラミングも出来る。
ちなみにワテの場合には、最近では、TypeScriptのほうを良く使う。
TypeScriptはJavaScriptの上位互換性があり、JavaScriptの各種の欠点を補った言語だ。
大規模なアプリケーションを作成する場合には、TypeScriptがお勧めだ。
さて、本題に戻って、上のサンプルコードを実行してみる。
サンプルコードの実行方法
実際に、実行してみたい人は、上記の
<!DOCTYPE html> <html> ... ... ... </html>
の全体をコピーして、メモ帳にでも貼り付けて、それを適当なファイル名.html で保存する。
例えば、
jquery_grep_test.html
などとして、デスクトップにでも保存する。
その時文字コードをUTF-8に指定しておく。
他の文字コードで保存すると、日本語が化ける場合が有るので。
そのファイルをダブルクリックするか、あるいは、開いているブラウザーのウインドウにドラッグでもすれば、このhtmlファイルがブラウザーで開かれて、<script>…</script> で囲まれた部分に書いている JavaScript の命令が実行される（下記の注意事項参照下さい）。
もし上手く実行出来ない場合には、ここからダウンロード出来ます。
サンプルファイルのダウンロード
本ページで使用した
- jquery_grep_test.html
- jquery-3.1.1.js
のまとめたZIPファイルをダウンロードしたい人はここからどうぞ。
その結果、
[{"num":5,"name":"坂本冬美","times":27,"title":"「祝い酒」"}]
や、
[
{"num":1,"name":"大原櫻子","times":"初","title":"「瞳」"},
{"num":3,"name":"乃木坂４６","times":"初","title":"「君の名は希望」"},
{"num":4,"name":"三山ひろし","times":"初","title":"「お岩木山」"}
]
が alert()文で表示されると思う。
サンプルコード実行時の注意事項
追記（2017/4/24）
上記のhtmlファイルをブラウザーで開いて実験したい場合には、
http://code.jquery.com/jquery-3.1.1.js
このjQueryライブラリーも事前にダウンロードしておいて、htmlファイルと同じフォルダに保存しておく必要がある場合があります。
従来は上のhtmlファイルの冒頭で、ネットワーク経由でjQueryライブラリーを読み込む記述を以下のように一行追加しておくだけで良かった。
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
ところが、いつからか知らないのだが、2017/4/24の時点では、Windows10の上のIE, Edge, Chrome, Firefoxのどのブラウザーでもこのファイル読み込みがブロックされてしまう。
要するに開いたhtmlファイルとは別の場所にある jquery-3.1.1.js と言うファイルはセキュリティ的に怪しいと判断してブロックするようである。
これが「ブラウザのセキュリティ制約」と言う奴らしい。
なので、事前に jquery-3.1.1.js をダウンロードしてhtmlファイルと同じローカルファイルに保存しておけばその問題が回避できるのだ。
そしてそのローカルのjQueryファイルを読み込む記述を書いておけばよい。
<script src="jquery-3.1.1.js"></script>
なんだか面倒だなあ。
まあ仕方ない。
プログラムの説明
JavaScriptを知らなくても、C言語やVBなどのプログラミングの知識がある人であれば、上記の処理の意味はだいたい理解できると思う。
ここでは、WEBプログラミング未経験の人（数か月前のワテ）向けに説明をすると、
まず、以下の一行を追加しておくと、
<script src="jquery-3.1.1.js"></script>
これは、本 htmlファイルをブラウザーが表示する時に、このsrcで指定された jqueryライブラリを読み込むと言う設定。
次に、この部分であるが、
var result = $.grep(dataAry, function (e) {
return e[key] == value;
});
これは、
$.grep(配列データ, function(e){
return 真偽条件; // この条件が真の要素のみ result に追加される
});
と言う形式で書く。
$.grep()は jQueryの中の grep() と言う関数を実行するという意味だ。
$はjQueryのライブラリを指すと思えば良い。
jQuery.grep() と書いても良い。
JavaScriptやjQueryやWEBプログラミング初心者のワテは、この辺りの理解で混乱したが、使っているうちに慣れた。
function(e){
・・・
}
の部分では、配列の各要素が引数 e でこの無名の関数に渡されるのだ。
C言語などでは、関数は通常、
function fname(arg1, arg2){
・・・
}
のような形式を取るが、JavaScriptの場合には無名の関数
function(){
・・・
}
も可能なのだ。
上記の grep() では、それを使っている。
なお、引数 e は、e で有る必要は無くて、重要なのは引数の個数だ。
この場合は引数が一個を意味しているので、一個であれば別に e と言う名前で有る必要は無くて、好きな名前でも良い。
$.grep(配列データ, function(element){
何らかの処理
});
このようにして、順番にelementに配列データの要素が一個ずつ渡ってくるので、それをkey, value で比較して目的のオブジェクトを取出し、その結果が配列として result に帰るのだ。
まとめ
当記事では、JavaScriptのオブジェクト配列の中から、特定のkeyあるいはvalueを持つオブジェクトのみを取り出して部分配列を作成する手法を紹介した。
JavaScriptのforループで回す手法でも良いが、当記事ではjQueryのgrep()関数を使ってみた。
まあ、このようにして無事に目的とする部分オブジェクト配列を作成する事が出来た。
もし初めてWEBプログラミングに挑戦しようと言う人は、取り敢えず、上に書いたように、サンプルのhtmlをメモ帳にでも貼ってファイルに保存してブラウザーで表示させてみるのが良い。
その後に、ブラウザー（ChromeでもFirefoxでもIEでも良い）のF12キーを押すとデバッグモードに入れる。
そこでは、上記のJavaScriptの部分にブレークポイントを置いたり、あるいは、一行ずつステップ実行したり、変数の中身を確認したりという通常のデバッガーと同じ機能を使う事が出来るので、とても便利だ。
是非試して頂きたい。
ワテの場合も、WEBプログラミングを独学で開始した時には、右も左も分からない状態で、兎に角気になったウェブサイトでブラウザーのF12を押しまくって、そのウェブサイトの中身を必死で解析して、その動作の仕組みを勉強した。
何事もやる気だ。
以上、JavaScript, jQuery, WEBプログラミング入門講座 第一回目でした。
第二回に続く予定。
本を読む
新しい言語を習得するには、やっぱり本を読んで勉強するのが一番だな。
最高ってほんまかいな⁉ワテは疑い深い。
なか見！検索で買う前に少し中身を見られるので、ワテみたいに疑い深い人は見てから買っても良いだろう。
ワテの経験では、ネット情報だけだと断片的な知識しか得られないので身に付かない事が多い。
なので、JavaScriptやjQueryなどを勉強中の人は、兎に角、何か一冊本を買って最初から最後まで読み通すのが良い。
ワテ自作のASP.NET MVCサイトの紹介
2017年のゴールデンウイークを利用して便利なWEBサイトを作ってみた。
名付けて、
何が出来るかと言うと、
Amazon.co.jp
楽天市場
ヤフーショッピング
の三つのショッピングサイトを同時検索して、商品を価格の安い順に表示出来るお買い物支援サイトだ。
「最安価格サーチ」で、
「Androidプログラミング」をかなり安値で探したい人は こちらから ＞
「Xamarinプログラミング」をかなり安値で探したい人は こちらから ＞
「C#プログラミング」をかなり安値で探したい人は こちらから ＞
「Visual Studioプログラミング」をかなり安値で探したい人は こちらから ＞
もしお使い頂きまして何かご不明な点、改善案などありましたらお知らせ下さい。
それ以外にもワテ自作のASP.NET Web Form やASP.NET MVCのサイトに興味ある人は、
Wareko.NET 公式サイト
がお勧めです。
コメント