Ｋ２さんの雑記

■ そういうわけで、JavaScript

昨日の、Google Maps JavaScript API使用を業務で使おうと思うのだが、今まで全くJavaScriptにさわったことがなかったので、このGWを利用してJavaScriptを勉強してやろうと思った。

テキストは、改訂新版JAVASCRIPT本格入門。Kindle版を購入。

電子書籍を読みながらコーディングするのは、ディスプレイが２枚あると簡単なんだが、ノートPCのみの場合は、iPad miniの出番。iPad miniで書籍を読んで、ノートPCでコーディングする。

本日の勉強部屋はスタバ。

letとvarの違い

ES2015から追加された変数宣言のためのletは、varと以下の点で違う。

1. 変数の重複宣言を許可しない
2. ブロックスコープを認識する

すぐ忘れてしまうので、メモ。

JavaScriptでは、連想配列と「オブジェクト」が同じ？

「オブジェクト」は多くの言語では、最も基本になるクラスに与えられる名称であることが多いが、JavaScriptの場合は、連想配列を「オブジェクト」と呼ぶようだ。

教科書にはNoteとして同じであることが示されているが、理由までは書いてない。うまく「オブジェクト」と連想配列という言葉がつながらない。違和感しかない。

おまけに！、連想配列の個々のデータは、「プロパティ」、このプロパティが関数の場合（関数も格納することができる）、特別に「メソッド」と呼ぶらしい！

ということは、連想配列が「クラス」に近い言葉として定義されていると言うことなのだろうか。

もうちょっと学ぶと合点がいくかもしれないので、このまま進めます。

追記

アクセス方法で、通常

obj['x']

としてアクセスするのは自然だが、JavaScriptの場合は、同様に、

obj.x

でアクセスできるらしい。

ああ、これはオブジェクトだな。ちょっと合点した。

追記2

読み進めると、

var today = new Date();

のコードで、todayがオブジェクトである意味の記述が教科書本文に出てきた。

ここでまた混乱。

このコードは、他の言語ではクラス生成してインスタンスをtodayに入力するものだが、JavaScriptの場合は、オブジェクトは連想配列だと習った。とすると、new Date()という記述は、連想配列を作成するという意味なのだろうか……　

読み進めよう。

インクリメント・デクリメント演算子はあり

前置演算と後置演算の区別もあり。最近の言語では珍しい？（そもそも最近の言語ではないのか……）

等価判定は===

イコールを３つ重ねる演算子は始めて見た。

追記

==も等価演算子。しかしながら、両辺のデータ型が違う場合は、数値（文字列や論理型）や基本型（オブジェクトの場合）に変換して比較する。両辺とも参照型の場合は、参照先が等しいかどうかを判定する。

===は、データ型も同じ場合にtrueになるより厳密な等価演算子。

==は、無理矢理型変換をして比較をするので、バグを生みやすい。

教科書ではできるだけ===を使うように記述されている。

数値やundefinedなどの論理値

0やNaN、""、null、undefinedはfalse、それ以外はtrueと見なされる。最近の言語ではちょっと違和感がある実装？

and、orの際の短絡演算

false && Aや、true || Aの場合、Aを実行する前に結果が確定しているから、Aは実行されない。C言語等ではおなじみ。

時代背景からか、C言語に近い実装が多いね。

使用例として、

var msg = '';
msg = msg || 'Default String.';

という例が紹介されている。msgが空文字の時に、"Default String."を代入するというものだが、これはあまり感心できないな。テクニックとしてはわかるけど、もう少しわかりやすく書くべき。

switch文はC言語仕様とほぼ同じ

今や他の言語では見ることがなくなったbreak文が必要なcase句。使い方によっては便利だが、わかりにくくなるデメリットの方が大きいので、現在ではこのような仕様を持つsiwtch-case文は他の言語には見られない。

配列要素をfor文で列挙する場合

for ... inは、連想配列の場合だけに使う。配列では副作用があるので、推奨されていない。

また、通常のfor文で列挙する場合も、毎回配列のlengthプロパティ（メソッド？）にアクセスするとレガシーブラウザの場合は性能が劣化するため、以下のように初期化ブロックで変数に取り出しておくのが推奨されている。

var data = ['apple', 'orange', 'banana'];
for (var i = 0, len = data.length; i < len; i++) {
  console.log(data[i];
}

または、for ... of文で、値を列挙する。（ただしES2015以降）

for(var value of data) {
  console.log(value);
}

ラベル構文

必要悪なラベルジャンプ的なものもある。ただしgotoよりもさらにややこしい。

kuku:
for(var i = 1; i < 10; i++) {
    for (var j = 1; j < 10; j++) {
        var k = i * j;
        if (k > 30)
            break kuku;
        document.write(k + '&nbsp');
    }
    document.write('<br />');
}

break文で、２重forループの外に脱出する例だが、ラベルは先頭にあり、このラベルは外側のforループを装飾しているという解釈となる。

これはややこしく美しくない言語仕様だと感じる。使うことはほとんどないだろう。

■ html記述で間違えた場合、ブラウザはエラーを返してくれないの？

例をこなしていくときに、JavaScriptが動かない場合はあった。特にブラウザはエラーも吐かないし、よくわからなくて、htmlをよく見ると、

<script type="text/jacascript" src="scripts/foo.js"></script>
                    ^^^

とミスタイプしていた。

Chromeのデベロッパーツールでもエラーは吐いてくれないし、気づくのに時間がかかってしまった。エラーを吐いてもらう方法を見つけられていないだけなのかな？

■ Visual Studio Codeの上書きモード

JavaScriptのコーディングには、Visual Studio Codeを使用している。コードの自動補完などの機能が多彩。

コードを入力していて、繰り返しで文字を変更したいシチュエーションに出くわした。

console.log(x0);
console.log(x1);
console.log(x2);
console.log(x3);
console.log(x4);
console.log(x5);
console.log(x6);
console.log(x7);

これを入力する場合、最初の行を入力、コピーペーストで８行作って、上から0を1,2,3,4……と変換していくということをよくしますよね。その際には、上書きモードを使って上書きしていく方が、入力が早くできます。

で、Insertキーを押してみたが、上書きモードに切り替わらない。

え、上書きモードがないの？と、仕方がないのでBSを押しながら全部書き換えた。

ふと、キーバインドされてないだけであるのでは？とぐぐってみると、拡張機能で上書きモードがインストールできるようだ（拡張機能：overtype）。不用意に押してしまう人がいるので、デフォルトではインストールされていないらしい。

無事、上書きモードが使えるようになりました。

■ Visual Studio Codeにキーボードマクロはない

これは残念。誰か拡張機能で作ってくれないだろうか。

もう20年若ければ、拡張機能開発に挑戦したいけど、さすがにもうパワーがないです。

■ 疲れたので本日は終わり

改訂新版JAVASCRIPT本格入門という本ですが、非常に丁寧に説明されていて、不明な箇所がほとんど無く、よい本です。私にとっては全く難しくはなかったのですが、プログラミング言語初挑戦の人には難しいかもしれません（といってもK&Rが最初の本という人も多かったと思うので、それに比べれば1/10くらいとっつきやすいと思います）。

コードを打ち込みながら、約30%進みました。

Kindle版もレイアウトがよいので、非常に読みやすいです。