JavaScript typeof演算子の使い方

  • JavaScript
  • 構文
最終更新日:

この記事のポイント

JavaScript開発において、データの型を正確に判定することは重要な技術の一つです。

  • 変数のデータ型を確実に判定する方法
  • プログラムの動作を安定させる型チェック技術
  • 実際の開発現場で使える実践的なコード記述

これらのポイントを押さえることで、より確実なプログラミングが可能になります。

目次

typeof演算子とは？

typeof演算子は、変数や値のデータ型を調べるための演算子です。

プログラムを書いているとき、ある変数が文字列なのか数値なのか、それとも他の型なのかを確認したい場面があります。そんなときにtypeof演算子を使うことで、データの型を文字列として取得できます。例えば、数値に対してtypeof演算子を適用すると"number"という文字列が返されます。この機能により、プログラムの動作をより安全なものにできます。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

typeof演算子の基本的な書き方は、typeof 変数名またはtypeof(変数名)の形式です。typeof演算子は括弧を付けても付けなくても動作します。変数animalには文字列が格納されているため"string"が、変数countには数値が格納されているため"number"が出力されます。

// 括弧をつけるケース let animal = "イヌ"; console.log(typeof(animal));







出力結果
string

  
// 括弧をつけないケース
let count = 5;
console.log(typeof count);

  


  







出力結果
number
実用例
実際の開発現場では、typeof演算子をさまざまな場面で活用します。ここでは具体的なサンプルコードを通じて、実践的な使い方を学んでいきましょう。
関数の引数チェック、配列の判定、オブジェクトの型確認など、日常的に使用される場面を想定したコード例を紹介します。これらの例を参考にすることで、実際のプロジェクトでtypeof演算子を効果的に活用できるようになります。
文字列型の判定
変数が文字列型かどうかを確認する基本的な例です。この判定により、文字列専用の処理を安全に実行できます。

  
function checkStringType(value) {
  if (typeof value === "string") {
    console.log(value + "は文字列です");
  } else {
    console.log("文字列ではありません");
  }
}
checkStringType("ウサギ");

  


  







出力結果
ウサギは文字列です
数値型の判定
数値型の判定を行い、計算処理を実行する前のチェック機能として活用できます。型の確認により、予期しないエラーを防げます。

  
function calculateDouble(num) {
  if (typeof num === "number") {
    return num * 2;
  }
  return "数値を入力してください";
}
console.log(calculateDouble(3));
console.log(calculateDouble("ネコ"));

  


  







出力結果
6
数値を入力してください
関数型の判定
変数に関数が格納されているかを判定し、安全に関数を実行するためのコード例です。この方法でランタイムエラーを回避できます。

  
function executeIfFunction(fn) {
  if (typeof fn === "function") {
    fn();
  } else {
    console.log("関数ではありません");
  }
}
executeIfFunction(() => console.log("トラが走っています"));
executeIfFunction("ライオン");

  


  







出力結果
トラが走っています
関数ではありません
undefinedの判定
変数が未定義かどうかを確認する例です。プログラムの初期化チェックや、オプショナルな値の存在確認に使用できます。

  
let animalName;
let animalType = "キリン";

if (typeof animalName === "undefined") {
  console.log("動物名が未定義です");
}
if (typeof animalType !== "undefined") {
  console.log(animalType + "が定義されています");
}

  


  







出力結果
動物名が未定義です
キリンが定義されています
オブジェクト型の判定
オブジェクト型の判定を行います。ただし、配列やnullもobjectとして判定されるため、より詳細な判定が必要な場合は追加のチェックが必要です。

  
let animal = { name: "ゾウ", size: "大型" };
let animalArray = ["イヌ", "ネコ"];

console.log(typeof animal);
console.log(typeof animalArray);
console.log(animal.name + "はオブジェクトです");

  


  







出力結果
object
object
ゾウはオブジェクトです
ブール型の判定
ブール型（真偽値）の判定を行う例です。条件分岐の前処理として、値が真偽値であることを確認できます。

  
let isWild = true;
let animalCount = 10;

if (typeof isWild === "boolean") {
  console.log("野生動物かどうか: " + isWild);
}
if (typeof animalCount === "boolean") {
  console.log("これはブール値です");
} else {
  console.log("ブール値ではありません");
}

  


  







出力結果
野生動物かどうか: true
ブール値ではありません
複数の型を判定する関数
複数の型を一度に判定し、型に応じて異なる処理を実行する例です。実際の開発でよく使用されるパターンです。

  
function processAnimalData(data) {
  const type = typeof data;
  switch(type) {
    case "string":
      return "動物名: " + data;
    case "number":
      return "動物数: " + data + "匹";
    default:
      return "不明な型: " + type;
  }
}
console.log(processAnimalData("パンダ"));
console.log(processAnimalData(7));

  


  







出力結果
動物名: パンダ
動物数: 7匹
型チェック付きの配列処理
配列の要素に対してtypeof演算子で判定を行い、特定の型の要素のみを処理する例です。データフィルタリングの基本的な手法として活用できます。

  
let mixedArray = ["サル", 5, "ヒツジ", true];
let stringAnimals = [];

for (let item of mixedArray) {
  if (typeof item === "string") {
    stringAnimals.push(item);
  }
}
console.log("文字列の動物:", stringAnimals);

  


  







出力結果
文字列の動物: [‘サル’, ‘ヒツジ’]
まとめ
typeof演算子は、プログラムの安全性と信頼性を向上させる重要な機能です。データ型の判定により、予期しないエラーを防ぎ、より堅牢なコードを作成できます。
typeof演算子の活躍する場面
    

  • 関数の引数チェックでエラーを未然に防止
    • 

  • APIからのデータ型確認で安全なデータ処理
    • 

  • 動的な値の型判定で柔軟なプログラム制御
    • 

重要なポイント
    

  • typeof演算子は文字列として型名を返却
    • 

  • nullはobjectとして判定される特殊な仕様
    • 

  • undefinedと未宣言変数の両方を判定可能
    • 

これらの知識を活用することで、JavaScript開発においてより安全で効率的なプログラミングが実現できるでしょう。typeof演算子はコードの品質を大幅に向上させることができる重要なツールです。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript typeof演算子の使い方