undefined
アンディファインド（データ型）
意味 値を持っていない
undefinedとは？
変数が値を持っていないことを示す値。
undefinedの具体的な使い方
未初期化の変数がundefinedを持つ例
let noValue;
console.log('noValue:', noValue);
console.log('typeof noValue:', typeof noValue);👇出力結果
noValue: undefined
typeof noValue: undefined変数を宣言だけして初期化せず、その値と型を確認します。
初期化された変数とundefinedの比較
let definedValue = 10;
console.log('definedValue:', definedValue);
console.log('typeof definedValue:', typeof definedValue);👇出力結果
definedValue: 10
typeof definedValue: number変数に値を代入し、その値と型を確認します。
undefinedとの比較例
let noValue;
let definedValue = 10;
console.log('noValue === undefined:', noValue === undefined);
console.log('definedValue === undefined:', definedValue === undefined);👇出力結果
noValue === undefined: true
definedValue === undefined: false初期化されていない変数と初期化された変数をundefinedと比較します。
関数の引数がundefinedかチェックする例
function greet(name) {
if (name === undefined) {
console.log('こんにちは、名無しさん！');
} else {
console.log('こんにちは、' + name + 'さん！');
}
}
greet();
greet('太郎');
greet(undefined);👇出力結果
こんにちは、名無しさん！
こんにちは、太郎さん！
こんにちは、名無しさん！関数の引数がundefinedかどうかをチェックし、適切な挨拶を表示します。
デフォルト引数を使用した例
function greetWithDefault(name = '名無し') {
console.log('こんにちは、' + name + 'さん！');
}
greetWithDefault();
greetWithDefault('花子');👇出力結果
こんにちは、名無しさん！
こんにちは、花子さん！デフォルト引数を使用して、引数が渡されなかった場合のデフォルト値を設定します。
undefinedを使った入力フォームの検証例
<!DOCTYPE html>
<html>
<body>
<form id="userForm">
<input type="text" id="nameInput" placeholder="名前を入力">
<input type="number" id="ageInput" placeholder="年齢を入力">
<button type="submit">送信</button>
</form>
<p id="result"></p>
<script>
const form = document.getElementById('userForm');
const nameInput = document.getElementById('nameInput');
const ageInput = document.getElementById('ageInput');
const result = document.getElementById('result');
form.addEventListener('submit', function(event) {
event.preventDefault();
const name = nameInput.value || undefined;
const age = ageInput.value ? parseInt(ageInput.value) : undefined;
if (name === undefined || age === undefined) {
result.textContent = '名前と年齢を入力してください。';
} else {
result.textContent = `名前: ${name}, 年齢: ${age}`;
}
});
</script>
</body>
</html>フォームの入力値がない場合にundefinedを使用し、入力の有無をチェックします。未入力の場合はエラーメッセージを表示し、入力がある場合は値を表示します。
undefinedに関するよくある質問
undefinedが学べる書籍の紹介
「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのundefinedやObject、Array、Error、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。
よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。
HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。
JavaScriptを学べる「プログラミング単語帳」アプリ
プログラミング単語帳がアプリになりました！JavaScriptはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。
収録単語は2,000単語以上！
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。
いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。
2024年7月アップデート情報：「Laravel」カテゴリーが追加されましました！
2024年8月アップデート情報：「MySQL」「Linux」カテゴリーが追加されましました！
