今日もせかせかjQueryを学習していたんだけど、プログラミング言語は全てそうなのかわからないけど、PHP同様にjQueryにもfor文が登場した。
forの基本的な意味はわかってたつもりだったんだけど、今回出てきたのはforの中にinが入ってる謎の構文だったから今回はその意味をりかいしつつ、実際に出てきたプログラムを解読していこうと思う。
for文の意味
$(function() {
for (var i=0; i<4; i++) {
console.log(i);
}
});
for文の基本的な使い方はPHPと全く同じで条件式で指定した数まで処理を送り返すというものだ。
この場合、iが３になるまでforの中を繰り返してconsole.log(i)では 1,2,3 が出力される。
for...in文の意味
for...in文の使い方はまず実際のコードを見たほうが速い。
var x = {
"hoge": 0,
"hoge1": 1,
"hoge2": 2
};
for(var elem in x){
console.log(elem); // 『hoge』、『hoge1』、『hoge2』と出力される。
}
for...in文は繰り返し処理の仕方が違う
for...in文も繰り返し処理を行うてんでfor文と同じだが番うのは何を基準に繰り返しを行うかだ。for文の場合for()の中の基準を満たすまで繰り返しを行うが、for..in文の場合はオブジェクトのプロパティの数だけ処理が繰り返し実行される。
オブジェクトとはこのプログラムでいうとｘでプロパティはいわばxの詳細説明でこの場合 "hoge" : 0 とか "hoge" : 1 とかのことだ。
そこでもう一度このfor..in文をみると、繰り返しはプロパティの数つまり３回行われる事がわかる。
for...in文のカッコの中
次にfor...in文のカッコの中について考える。今回のfor...in文のカッコの中身は
for(var elem in x){}
こうなっている。ここで「elem」には指定したオブジェクト（今回はx）のプロパティのキーが代入される。
プロパティのキーは "hoge" : 0 の hoge のほうだ。
ここまでの解説を踏まえると、この処理では「hoge」「hpge1」「hoge2」が出力されることが分かる。
ちなみに値（数字）を出力したい場合には、
console.log (x[elem]);
と記述することで得ることができる。
今回出てきたfor...in構文
次に今回出てきたfor..inを使ったプログラムをここにそのままコピペする。
var myList = [];
function myFunction (message) {
myList.push(message);
var output = "";
for (var i in myList) {
console.log(myList[i]);
output += "<li>" +myList[i]+"</li>";
}
$('#list').html(output);
}
myFunction("eat apples");
$('#my-form').submit(function(event){
event.preventDefault();
var textInput = $('#my-input').val(); //VALU要素を読み取る
myFunction(textInput);
});
ややこしいから三段階に分けて解説してみる
①messageに代入
まずmyListにmyFunctionの引数のmessageの内容が.pushで付け加えられている。pushは配列に要素を追加するメソッドだ。
そのmessageに対して１１行目で「eat apples」が代入されており、結果myListに「eat apples」というプロパティが与えられる。
ここで処理の一周目が終わる。
②for...in文が機能する
次に一周目では機能しなかったfor...inぶんがmyListに「eat apples」というプロパティが与えられることで機能する。今回はプロパティの数がひとつなので、outputに <li> eat apples </li> が与えられて、それが #list にhtmlとして代入される。
結果出力されるのは下記
③追加分だけ吐き出し
ここまででこの処理は完了してるんだけど、１３行目移行のプログラムが動くことでまたfor..in文が動くことになる。
$('#my-form').submit(function(event){
event.preventDefault();
var textInput = $('#my-input').val(); //VALU要素を読み取る
myFunction(textInput);
});
この処理の詳細な説明は趣旨と違うから省くけど、ざっくりいうとフォームに書いたものがmyFunctionの引数に渡される処理だ。
myFunctionにあらたな引数が渡されるとmyLIstにプロパティとして追加されるから、例えばフォームに「ツイッターフォローしてね」とかくとmyListniha「eat apple」と「ツイッターフォローしてね」の２つのプロパティが入ることになる。
ここでfor...in文が②と同様に機能して、<li>eat appl</li>と<li>ツイッターフォローしてね</li>が#listに渡される。
つまり結果として、ツイッターフォローしてねとフォームで送信することでこの時点ではeat appleと表示されているlistが更新されて、
この様に表示されるようになる。
今回このコードをいきなり英語で説明しながら書き出したから混乱したんだけど一つ一つを分解していくと紐が解けるように理解できた。
今日の進捗
- JavaScript and jQuery basics 終了
- jQuery Tutorial for Beginners半分
今日はjQuery Tutorial for Beginnersを終わらせるつもりだったが意外と詰まる箇所が多くてあまり進まなかった。jQuery Tutorial for BeginnersではBootstrapとjQueryを併用してるんだけど、Bootstrapを使うときにコピペするコードの中にスリム版のjQueryを呼ぶコードも入ってて、これが干渉してjQueryが動かないことに気づくのに時間がかかった。
明日の目標
jQuery Tutorial for Beginnersを必ずおわらせてPHPをつかったサービスづくりを開始しようと思う。
コメント