40代からのJavaScript 入門４：オブジェクトと格闘 ドットインストールで学習 #15-#18

　４０歳代から始めるJavaScriptの学習記録の第４回です。小中学生の頃にMSXでBASICをかじった程度の中年初心者がプログラミング再入門しています。

（参考）40代からのJavaScript 入門３：関数に一喜一憂 ドットインストールで学習#11-#14 

　今回はドットインストール#15から#18です。配列やオブジェクトなど難しそうな感じですね。まずはザッと通しで視聴してみました。当然ながらついていけませんでしたが、おおまかな概要が先に掴めたので良かったです。



　ところで、私はMacで学習していますが、エディタのフォントをMacOS標準のLucida GrandeフォントからMenloフォントに変更しました。Menloも標準フォントなので簡単に変更できます。開発環境用のフォントらしくソースが読みやすくなりました。特に（）がすごく見やすくなりましたね。ちょっと大きめの14ポイントにしています。

左がLucida Grande、右がMenlo。カッコや字間が読みやすい。

　下記のサイトを参考にしました。Windows向けのフォントも案内されています。Rictyなど人気のあるフリーフォントをインストールするのも良いですが、標準フォントなら簡単に変更できますね。（ドットインストールの講座ではRicty系でしょうかね？）

プログラミング用フォントで開発環境を改善する - YOSBITS

結構難しい・・・甘く見ていたタイマー処理

#15 setInterval､setTimeoutを使おう


　一定間隔の時間で実行させる命令です。最初は簡単かなと思いましたが、いざ講座に入ると結構難しい・・・というか関数が入り組んできて理解しにくいや。

setInterval (関数,時間） 繰り返し 

setTimeout (関数,時間） 一回のみ

　講座では第一引数の関数を無名関数とする意味がよくわからなかったけど、とりあえず『関数を入れる決まりになってるから』という理解でいいのかな？

　継続したカウントにはsetIntervalが簡単だけど、 問題が生じた場合でも進行してしまいブラウザに負担がかかる可能性があるので、setTimeoutを応用した形で利用する事が多いとの事。

　setTimeoutは一回のみで繰り返さない命令ですが、前のカウントが終わるまで次のカウントに進まないという形にすることができるので安全だという事ですね。

　このsetTimeoutを応用した繰り返し処理。さらっと説明してたけど・・・かなり難儀しましたよ！２０分くらいソースを眺めてようやく理解できました。（夕飯後で眠かったせいかな？）

　忘れても大丈夫なように、解説までメモしておきます・・・。

var i = 0; // 変数iを0で設定function show () { // 関数show設定
console.log (i++); // i表示後1をプラス
setTimeout (function() { // 即時関数１度実行
show (); // 関数showの実行（=上記の繰り返し）
},  1000); // １秒ごと
}show(); // 関数showの実行（引き金）

　関数showの中に関数show自身を実行する命令を入れる事でループさせるという事なんですね。最後の関数showは単に引き金としての命令という意味でした。はじめは最後の関数showでループさせるのかと勘違いしていてよく理解できなかった・・・。

　このように自らを実行する関数にすることでMSX-BASICのgoto文と同じ繰り返しができるようになるんですね。goto文はシンプルでわかりやすいけど、関数の方がスマートで応用しやすいですね。この辺は感覚を切り替えないとな。

　タイマーを止めるにはclearTimeout()命令。setTimeoutに変数としてIDを付けて、clearTimeoutで変数を指定すれば止まる・・・と。止めるタイミングはif文で設定。

　お気軽命令かと思ったら結構複雑で難儀しました。関数を理解するという意味では良かったです。ふう・・・つかれた〜。

意外とカンタン？配列の考え方

#16 配列を使ってみよう

　配列という概念は難しそうだと思ったけど、単にデータ（値）をグループ化するという程度の意味だったのかぁ。これは便利そうだし実際によく使いそう。

変数scoreに複数のデータを入れる場合
var score = [ 100, 300, 500, "taguchi" ];

　データを指定する添字は0から始めるのがちょっと紛らわしいね、慣れが必要。
配列の中に配列を入れるのもパズルゲームみたいだなぁ。難しくは無いけど間違えそう・・・。

配列に配列を入れる。データ指定は0,1,2の順番
var m = [ [1, 2, 3] , [4, 5, 6] ];
console.log( m [1] [1] );  // ５が表示される

簡単そうで難しい・・・オブジェクト

#17 オブジェクトを使ってみよう

　オブジェクト指向なんて言うけど、やっぱり関係あるのかな？
それはいいとして、講座では『配列と同じくデータのグループ化の一種』との説明だったのでカンタンかな？と思ったのですが・・・これはなかなか難しい。

　配列は値（数値・文字）データのグループ化。それに対してオブジェクトは値に付けられた名前も一緒にグループ化するとの事。

var user = { email: "abc@gmail.com" };

　この例題ではuserという変数に"email"という名前の"abc@gmail.com"という値を代入するという事ですよね。う〜ん意味はわかるけど、どういう状況で使うのか？まだイメージが湧かないや。配列は直感的に便利だなぁと思ったんですけどね。

　 { }内の名前と値のペアをプロパティと呼ぶそうです。

　今気がついたけど、配列もオブジェクトも特別な命令がある訳じゃないんだね。使っているのは今までやった変数だけ。変数の使い方の一種という感じなのかな。

var a = 0 // 普通の代入 

var a = [0,1,2] // 配列 

var a = {p1: "ABC" ,  p2: 100} // オブジェクト

　こんな感じで並べてみるとようやく整理されてきました。

　オブジェクトを表示や代入する場合、指定するには２つの書き方があるそうです。
　（たとえばuser変数のemailプロパティを指定する場合）

user [ "email" ]  

user.email

　まあ当然カンタンな下の方で書きますよね。上の方は絶対間違えそう・・・。

メソッドはオブジェクトの一部だった

#18 メソッドを使ってみよう

　メソッドっていうのはオブジェクトと別の概念ではなくて、オブジェクトの使い方の一種なんですね。オブジェクトの値に関数を使う場合をメソッドと呼ぶそうです。

　オブジェクトが値の場合はプロパティで、関数の場合はメソッドという理解で良いのだろうか？それともメソッドという種類のプロパティがあるという事なのだろうか？その場合、名前はメソッド名でいいのかな？ 

　う〜ん、イマイチわからないけど・・・ま、いいか。

var a = { p: "ABC" } // 値のプロパティ 

var a = { m: function ( 引数 ) { 処理 } } // 関数のメソッド

　ところで、講座の通りにエディタに入力したのにエラーが・・・。『greet: function ( name ) { 』の行に問題があると出るのですが間違ってない・・・。よく見たら上の行に、『,』カンマを入ってませんでいた。行が違うので忘れがちですが、複数のプロパティを入れる場合はカンマで分けるのを忘れない・・・・と。

　最後にthisの説明。メソッドに this.プロパティ名 として、オブジェクト内の他のプロパティの値を参照する事ができるとの事。

var user = {
email: "abc@gmail.com" ,
greet: function ( name ) {
console.log( "hello, " + name + " from " + this.email );
}
};

今回はかなり難解で理解に時間がかかりました。とはいえ３／４は進んでゴールが見えてきましたね。次回は色んな種類のオブジェクトの説明みたいです。オブジェクトっていうのは重要なんだなぁ。最後まで挫折せずについて行けますように！

他の『JavaScript学習記録』の記事を読む
『アニメ』『スピーカー』『オーディオ・ビデオ』『備忘録・Mac・その他』『生活』