ワテの場合、2015年6月くらいからJavaScriptやjQueryを駆使してWEBサイト作成の勉強を始めた。CSSファイルやSCSSファイルの記述などもある程度は理解出来るようになった。
開発環境はマイクロソフトのVisual Studio 2015 Community(VS2015) だ。
現在は VS2017を使っている。
Visual Studioは高性能な統合開発環境なので、これさえあれば各種の言語を組み合わせて何でも開発出来る。
とっても便利だ。
さて、約一年数か月に渡りJavaScriptやTypeScriptを使って来たのだが、初心者の人が混乱するのがJavaScriptの
undefined null
の違いだ。
実は、ワテも最近ようやくこのundefinedとnullの違いが分かって来た。
以下、undefinedとnullの違いに関してワテの理解をまとめておく。
もし違っていたらご指摘下さい。
isNullOrUndefined(some_variable)、こんな関数で誤魔化していた
当初は、ワテは両者の違いが良く分からなかったので、変数の中身がundefinedやnullかどうかを判定する関数を作っていた。
function isNullOrUndefined(some_variable) {
if (typeof (some_variable) === 'undefined' || some_variable === null) {
return true;
} else {
return false;
}
}
コード1. ワテお気に入りの isNullOrUndefined()関数
この関数を使って、プログラムの途中で今から参照しようとしている何らかの変数の中にundefinedやnullなどの予想外の値が入っている場合には何もせずにスキップし、正しい値が入っている場合には予定した処理を行うようにしていた。
下のコードのような感じだ。
if (isNullOrUndefined(data)) {
// dataの値が予想外なので何もしない
} else {
// dataに何か値が入っているので、予定した処理を行う
// その処理
}
コード2. isNullOrUndefined()関数を使う例
その結果、ワテのJavaScriptやTypeScriptのコードの中にはこの判定関数が頻繁に登場する。
さて、最近ではようやくこのundefinedとnullの違いが分かって来た（と思っている）。
undefinedとnullの違いのワテの理解
undefinedとnullの違いのワテの理解では以下の通り。
| 項目 | ワテ流解釈 |
| undefined | 変数を宣言したが初期値を与えていない場合にundefinedとなる。 |
| null | 変数を宣言して初期値として何も無い空っぽの状態にセットしておく場合に自分でnullを代入する。それがnull。 |
表1. undefinedとnullの違い（ワテの理解）
なので、変数は宣言したら必ず初期化しておく習慣を付けておけば undefined になる事はない。
undefinedになる典型的な例
例えば、以下のようなコードでは、変数dataを宣言しているが初期値を与えていないのでundefinedとなる。
var data;// = 'われこ';
if (typeof data === 'undefined') {
alert("typeof data === 'undefined' が成り立つ。");
}
コード3. typeof でundefined判定を行う例
この場合 typeof でdata の型を調べているが初期化されていない変数の場合にはその判定結果は文字列で ‘undefined’ が帰って来るので上記のif判定は真になり alert()文が実行される。
もし var data =’われこ’ という初期値が与えてある場合にはalert()は実行されない。
あるいは、以下のように記述しても良い。
var data;// = 'われこ';
if (data === undefined) {
alert("data === undefined が成り立つ。");
}
コード4. 直接undefinedと比較する例
この場合もalert()が実行される。
つまり初期化されていない変数dataの中身はundefinedと言う値なのだ。
まあ、このあたりがワテが混乱した理由なのだが、typeofで調べた結果は ‘undefined’ と言う文字列。中身は undefined。
ああ、ややこしい。
さらに昔はこの undefined という値自身を他の値にセットする事も可能だったようだ。
つまり、こんな事をしても良いらしい。
undefined = 'なんでやねん！';
コード5. undefined自体を変更する事も出来たようだ（今は不可？）
そうすると、当然コード4の判定ではifが成立しないのでalert()は表示されない。
もう、訳分からん。
まあ、自分でプログラムを書く限りはそんなヘンテコな事をしなければよいが、もし他人のコードにそんなヘンテコなのが混じっていると、もう訳分からん。
JavaScriptを勉強し始めた当初は、この辺りの事実を知ってもう訳分からなくなったので、兎に角冒頭のisNullOrUndefined()関数を使って undefined でも null でもどっちが来ても排除していた。
でも、最近のJavaScriptでは、コード5のようにundefinedの値を設定してもエラーは出ないが、中身は変わらないようだ。
つまり undefined のまま。
Visual Studio 2015 Community のJavaScriptで実行したが、コード5を実行する前も後も undefined の中身は undefined だ。
その辺りの理解に関しては、以下の記事が参考になるだろう。
でも、たぶん、最近JavaScriptを勉強し始めた人には null や undefinedの違いは分かり辛いと思う。
丁度一年前のワテの状態だ。
ワテ流の変数宣言時の習慣
と言う事で、JavaScriptやTypeScriptに限らず変数を使う場合は、宣言と同時に初期化しておく習慣を付けておくと良い。
こんな感じ。
var data = 'われこ';
boolean型ならこんな感じ。
var f_data = true; // なぜ初期値を true にしたのか理由も書いておくと良い。
なお、ワテの場合変数宣言して同時に初期化する場合に、なぜその初期値を与えるのかをコメントで明記しておくようにしている。
特に boolean 型のフラグ変数を宣言する場合には、なぜ初期値が true あるいは false にセットしたのかなど理由を書いておくと後々でデバッグ時などに役立つ。
まとめ
以下、ワテ流のコーディング規則です。
JavaScript, TypeScriptその他のどんな言語を使う場合でも変数宣言した場合には同時に初期値を与えておく。
なぜその初期値を与えるのか理由も書いておく。
極力無駄なコードを書きたくないと言う人の場合、初期値を与える事自体を省略すると言う極端な人もいるが、初期値を与えたからと言っても何も悪い事は起こらない。
逆に初期値を与えないと百害あって一利なしだろう。
JavaScript, TypeScriptで変数宣言したが初期値が未定義の場合には undefined が入ってる。
その判定方法は、typeof を使うのが良いだろう。
if (typeof data === 'undefined') {
...
} else {
...
}
最近のJavaScriptでは undefined の意味を変更出来ないようなので、以下の判定がシンプルなのでお勧めだ。
if (data === undefined) {
...
} else {
...
}
でもワテは従来通りの typeof 判定を使うようにしている。
理由は、その古い方式に慣れているので。
ちなみに、ワテは最近ではJavaScriptよりもTypeScriptを使うようにしている。
Visual Studio 2015 Community のTypeScriptも最近バージョンが上がりTypeScript 2.0になった。2016/9/22かな。このブログによると。
Visual Studioの開発環境でTypeScriptを使うと、変数の型も厳密にチェックしてくれるのでデバッグが捗る。
なお、ワテの場合Windows10Proの環境でVS2015Communityを使っているのだが、プロジェクトのパス名に日本語が含まれているとTypeScript2.0はエラーして動かないようだ。
従来の TypeScript 1.8 ではそんなエラーは無く、日本語パス名でも正しく実行出来たのだが。
早く治して欲しいものだ。
TypeScriptの本をアマゾンで見る
アマゾンランキングが物凄く高いのだが、良い本なのかな？
TypeScript 2.0の本はまだ少ないが一つ発見した。
そんなワテが最近作ったのが、このサイトだ↓。
ワテ自作お勧め地図サイト ワレモバ
物凄く使い易い地図サイトを目指しています。
コメント