JavaScriptで、プログラムを作成している際に「undefined」という値を見かけることがあります。これは「未定義」を意味し、値が設定されていない場合に自動的に付与される特殊な値です。
一方で、JavaScriptには、undefinedと似た「null」も存在しており、混乱することがあるかもしれません。本記事では、JavaScriptにおけるundefinedとはなにか、そしてnullとの違いについて解説します。また、undefinedが発生するケースやその判定方法についても見ていきましょう。
JavaScriptのundefinedとは
「undefined」とは、その名の通り、未定義の状態を表す値です。これは、変数が宣言されているものの、値がまだ設定されていない場合などに付与されます。
例えば、単に「let A;」という形で変数を宣言しても、何も値を代入していない場合、この変数には「undefined」という値が自動的に設定されます。
JavaScriptにおけるundefinedは、「まだ値が存在していない」ことを示しているという点を理解しておくことが大切です。
本記事で、JavaScriptの特徴や実際の使い方について
こちらの記事ではJavaScriptの特徴や、実際の使い方について詳しく紹介しております。JavaScriptは、Webページに動的な機能を追加できるプログラミング言語でHTML・CSSと組み合わせることで、モダンなWebサイトの構築ができます。JavaScriptがどのような言語なのかよく知りたい方は、ぜひ参考にしてみてください。
JavaScriptのundefinedとnullの違い
undefinedとnullはどちらも「何もない」状態を表現しますが、その意味は異なります。
undefinedは、変数が宣言されているが、値が未定義であることを示します。
これは自然に発生する値です。一方、nullは「値が空である」ということを明示的に示すため、開発者が手動で設定します。
つまり、nullは「値が存在しないこと」を意図的に表現する手段であり、undefinedとは異なり自然発生はしません。
このように、undefinedは「未定義」、nullは「空」という明確な違いがあります。
JavaScriptでundefinedになるケース
JavaScriptのundefinedは、以下のような状況下で自然に発生します。
- 変数に値が入っていないとき
- 配列に値が入っていないとき
- 関数の引数が足りないとき
これらの代表的なケースについて見ていきましょう。
ケース①変数に値が入っていないとき
JavaScriptでは、変数を宣言しても、その変数に何も値が設定されていない場合、その変数にはundefinedが自動的に設定されます。
console.log(A);
この例では、Aという変数宣言をしていますが、変数Aは未定義のため、console.logで出力すると、値はundefinedになります。
ケース②配列に値が入っていないとき
配列の要素にもundefinedが割り当てられる場合があります。
例えば、空の配列を宣言したり、配列内の特定のインデックスに値が設定されていない場合、そのインデックスはundefinedとなります。
console.log(arr[1]);
この例では、定義されていない2番目の要素がundefinedです。このように、配列でも未定義の要素が存在することがあります。
ケース③関数の引数が足りないとき
関数を呼び出す際に、引数を省略すると、対応するパラメータはundefinedになります。例えば、引数が2つ必要な関数を1つの引数で呼び出した場合、2つ目の引数にはundefinedが割り当てられます。
console.log(firstName + lastName);
}
name(“John”);
この例では、name関数には firstName と lastName という2つの引数が定義されていますが、呼び出し時にfirstNameだけが渡されているため、lastNameはundefinedとなります。
この場合、2つ目の引数が省略されていることに気づかないと、意図しない結果が出力されます。
JavaScriptでundefinedを判定する方法
JavaScriptでは、undefinedを判定するための方法がいくつかあります。最も簡単なのは、厳密等価演算子（===）を使う方法です。
厳密等価演算を使えば、型と値が同じ場合にtrueを返します。変数が undefined かどうかを確認する際、以下のように if 文を使って判定できます。
if (X === undefined) {
console.log(“Xはundefinedです”);
} else {
console.log(“Xはundefinedではありません”);
}
この例では、X が未定義なので、「Xはundefinedです」と表示されます。
関数の場合
関数の引数が足りない場合も、undefined が返されます。次の例を見てみましょう。
if (price === undefined) {
console.log(“priceはundefinedです”);
} else {
console.log(“りんごは ” + price “円です”);
}
}
Apple();
Apple(100);
この例では、Apple関数を引数なしで呼び出した場合、priceはundefinedとなり、指定された場合にはその値が表示されます。
JavaScriptを学ぶ方法
JavaScriptを学習できる方法は、主に以下の3つです。
- 参考書で学ぶ
- オンラインツールで学ぶ
- スクールで学ぶ
これらの学習方法について見ていきましょう。
学ぶ方法①参考書で学ぶ
JavaScriptを体系的に学ぶには、参考書を利用するのがおすすめです。
JavaScriptの参考書は、初心者向けから上級者向けまで、多様なレベルの本が出版されており、基礎的な文法から最新の技術トレンドまでを学べます。
サンプルコードを見ながら実際に手を動かすことで、スキルも身につきやすいでしょう。
参考書は基礎からしっかり学びたい方や、自分のペースで理解を深めたい方に特におすすめです。
また、JavaScriptをWebデザインに使いたいと考えている方は、デザインソフトのスキルも身につけておくのがおすすめです。
Webデザインをする際は、コーディングとプログラムだけでなく、自らデザインを担当する場合もあります。
以下の記事では、Webデザイナーにおすすめのソフトである「Illustrator」の独学方法について解説しています。
ぜひこちらもあわせてご覧ください。
学ぶ方法②オンラインツールで学ぶ
有料のオンラインツールを使って、JavaScriptを学ぶのも一つの方法です。
Progateやドットインストールなどのプログラミングを学習できるツールでは、基本から応用までの内容を実際にコードを書きながら学べるため、実践的なスキルが身に付きやすいでしょう。
基礎的な導入部分は無料で利用でき、応用的な部分は有料となるのが一般的です。
しかし、スクールなどに比べると費用は安いため、コストパフォーマンスよく学習ができます。
特に、隙間時間に学習を進めたい場合や、ゲーム感覚で楽しんでスキルを身につけたい場合に効果的な方法です。
学ぶ方法③スクールで学ぶ
プログラミングスクールでJavaScriptを学ぶことも一つの選択肢です。スクールなら講師の指導の下で体系的に学習できます。
対面やオンラインで授業を受けられるスクールが多く、独学が難しいと感じる方におすすめです。
加えて、疑問点をその場で解決できることや、一緒に切磋琢磨できる仲間を見つけられることもメリットの一つです。
さらに、卒業後の就職をサポートしてくれるスクールも多いため、本格的にエンジニアを目指している方は、スクールで学ぶメリットは大きいでしょう。
また、就職を目指すならプログラミングスキルも重要ですが、一般的なエクセルに知識もある方がよいでしょう。
以下の記事では、エクセル学習の目標としたいおすすめのエクセル資格を紹介しています。
エクセルの勉強を始めたいと考えている方は、ぜひこちらもあわせてご覧ください。
取得を目指したいJavaScriptのおすすめ資格3選
JavaScriptのスキルを証明できる資格があれば、就職や転職に有利に働きます。JavaScriptのおすすめ資格は以下の3つです。
- Webクリエイター能力認定試験
- CIW JavaScript スペシャリスト
- HTML5プロフェッショナル認定試験レベル2
これらの資格の概要について見ていきましょう。
資格①Webクリエイター能力認定試験
Webクリエイター能力認定試験は、Webサイト制作におけるコーディングやデザインのスキルを証明できる資格です。
スタンダードとエキスパートがあり、自分のレベルに合わせて選択できます。
Webデザイナーやコーダーとして活躍したい方におすすめの資格です。
| 受験料 |
|
| 会場 |
|
| 難易度 | 初級・中級者向け |
資格②CIW JavaScript スペシャリスト
CIW JavaScript スペシャリストは、国際的に有名なJavaScriptの資格試験です。
試験はすべて英語で行われるため、JavaScriptの知識だけでなく、英語のスキルも必要になります。
国際的な試験であるため、海外で仕事をしたい方におすすめの資格です。
| 受験料 | 150$ |
| 会場 | 全国のピアソンVUEテストセンター |
| 難易度 | 上級者向け |
資格③HTML5プロフェッショナル認定試験レベル2
HTML5プロフェッショナル認定試験は、HTML5、CSS3、JavaScriptなどのマークアップに関する知識とスキルを証明できる資格です。
試験にはレベル1とレベル2が用意されており、レベル2になるとHTMLとCSSのほかにJavaScriptの知識も必要となります。
レベル2の資格があれば、Webデザイナーだけでなく、エンジニアとしての就職にも有利に働きます。
| 受験料 | 16,500円（税込み） |
| 会場 | 全国各地の試験センターもしくは、自宅や職場からのオンライン受験 |
| 難易度 | 中級者向け |
JavaScriptのundefinedについてのまとめ
今回は、JavaScriptのundefinedについて紹介しました。JavaScriptのundefinedは、未定義の状態を表す概念です。
nullとの違いを理解し、適切に判定することで、プログラムの動作を正しく制御できるようになります。
JavaScriptの概念は理解が難しいので、参考書やオンラインツール、スクールを活用して効率的にスキルを身に付けましょう。
