先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字列や配列の長さを使って条件を判定する方法を教えてください！」

先生

「もちろんです。文字列や配列の長さを調べるのはよく使うテクニックで、条件式でよく判定します。まずは『長さ』が何かから説明しますね。」

生徒

「長さって、文字数のことですか？配列の場合はどうなるんですか？」

先生

「はい、文字列の場合は文字数のことです。配列の場合は、配列に入っている要素の数を指します。どちらもlengthというプロパティで調べられます。」

生徒

「プロパティって何ですか？難しい言葉ですが…？」

先生

「プロパティは『データの特徴や性質』のようなものです。プログラムの中で、その文字列や配列が持っている情報を取り出すためのものです。」

生徒

「なるほど。じゃあ、具体的にどうやって長さを使って条件を判定するんですか？」

先生

「それでは、実際の使い方をコードで見ていきましょう！」

1. 文字列の長さを条件式で判定する方法

文字列の長さを調べるには、lengthプロパティを使います。これは、その文字列が何文字あるかを教えてくれます。


let message = "こんにちは";

if (message.length > 0) {
  console.log("メッセージがあります。");
} else {
  console.log("メッセージは空です。");
}

この例では、message.lengthが0より大きければ文字があると判定しています。0の場合は空の文字列です。

2. 配列の長さを条件式で判定する方法

配列も文字列と同じく、lengthで要素の数を調べられます。例えば、配列にアイテムがあるかどうかを判定できます。


let fruits = ["りんご", "バナナ", "みかん"];

if (fruits.length > 0) {
  console.log("果物が" + fruits.length + "個あります。");
} else {
  console.log("果物はありません。");
}

このように配列の中身が空かどうかを判定できます。

3. 長さが0かどうかの判定でよくある使い方

よくある条件は「長さが0なら空」「0より大きければ中身がある」と判定することです。これを使うと、入力チェックやデータの有無を確認できます。


// 空文字の判定
let inputText = "";

if (inputText.length === 0) {
  console.log("入力がありません。");
}

// 空配列の判定
let list = [];

if (list.length === 0) {
  console.log("リストは空です。");
}

文字列も配列も空の場合はlengthが0です。覚えておくと便利です。

4. 文字列や配列の長さがあるかどうかを簡単に判定する方法

JavaScriptではlengthが0の場合は「false」、1以上の場合は「true」として扱われるため、条件式で直接判定することもできます。


let text = "Hello";
if (text.length) {
  console.log("文字列があります。");
} else {
  console.log("文字列は空です。");
}

let array = [];
if (array.length) {
  console.log("配列に要素があります。");
} else {
  console.log("配列は空です。");
}

このようにif (length)で判定できますが、初心者の方はわかりやすくlength > 0と書くのも良いでしょう。

5. 文字列や配列の長さを使うときの注意点

lengthは必ず文字列や配列に対して使いましょう。もしnullやundefinedに対して使うとエラーになります。


// これはエラーになる例
let value = null;
console.log(value.length); // エラー: valueがnullなのでlengthは使えない

エラーを防ぐために、条件の前に変数が存在するかチェックすることが大切です。


let value = null;
if (value && value.length > 0) {
  console.log("長さがあります。");
} else {
  console.log("値がありませんか、長さが0です。");
}

6. 実際の条件式で文字列や配列の長さを使った例

例えば、フォームに文字が入力されているか、配列に商品が入っているかを判定するときに役立ちます。


// フォーム入力のチェック
let userInput = "こんにちは";

if (userInput.length > 0) {
  console.log("入力されています。");
} else {
  console.log("入力がありません。");
}

// 配列のチェック
let cart = ["パン", "牛乳"];

if (cart.length > 0) {
  console.log("カートに商品があります。");
} else {
  console.log("カートは空です。");
}