JavaScript | 1 日 90 分 × 7 日アプリ学習：入力チェックアプリ（初級編）

1日目のゴールと今日のテーマ

1日目のテーマは「“入力された文字がOKかどうか”をプログラムに判断させる感覚をつかむこと」です。
ただ文字を受け取るだけじゃなくて、

未入力（空）のときに警告を出す。
文字が長すぎるときに「長すぎます」と教える。

こういう“入力チェック”をシンプルなアプリとして形にしていきます。

今日のゴールは次の3つです。

空チェック（何も入力されていないかどうか）を条件分岐で書ける。
最大文字数を決めて、オーバーしたらエラーを出せる。
エラー文言を画面に表示したり、消したりできる。

ここまで行けたら、初級入力チェックアプリの1日目としては十分すぎるスタートです。

入力チェックアプリの全体イメージをつかむ

どんな画面を作るのか

まずは、完成イメージを言葉で描いてみます。

１行のテキスト入力欄（名前や一言コメントを書くイメージ）。
「送信」ボタン。
エラーメッセージを出す場所。

ざっくりしたHTMLのイメージはこんな感じです。

<input id="input-text" type="text" placeholder="ここに入力してください" />
<button id="submit-button">送信</button>

<div id="error-message"></div>

やりたいことはこうです。

何も入力せずに「送信」を押す → 「未入力です」と表示。
文字数制限（例えば 20 文字）を超えて「送信」を押す → 「20文字以内で入力してください」と表示。
条件を満たしていれば → 「OKです！」のような成功メッセージ、もしくはエラーを消す。

今日は、ここまでの「入力チェックの基本の流れ」を作ります。

空チェック：まずは「何も書かれていない」ことを判定する

入力値をJavaScriptから取り出す

まず、JavaScriptで入力欄の値を取得する方法です。

const inputEl = document.getElementById("input-text");
const errorEl = document.getElementById("error-message");
const submitButton = document.getElementById("submit-button");

submitButton.addEventListener("click", handleSubmit);

function handleSubmit() {
  const value = inputEl.value;
  console.log("入力値:", value);
}

const inputEl = document.getElementById("input-text");
const errorEl = document.getElementById("error-message");
const submitButton = document.getElementById("submit-button");

submitButton.addEventListener("click", handleSubmit);

function handleSubmit() {
  const value = inputEl.value;
  console.log("入力値:", value);
}

ここまでで、「送信ボタンを押した瞬間の入力値」を value として受け取れるようになります。

空チェックの基本：何もないかどうか

「空かどうか」を調べる一番シンプルな方法は、文字列が ""（長さ 0）かどうかを見ることです。

if (value === "") {
  // 空のとき
}

if (value === "") {
  // 空のとき
}

ただ、現実には「スペースだけ」が入力されることもあります。

例： " "（空白3つだけ）

こういうのも「実質、何も書いていない」とみなしたいことが多いです。
そのために .trim() を使います。

const trimmed = value.trim();

const trimmed = value.trim();

trim() は、前後の空白（スペース・タブ・改行）を削ります。

" こんにちは " → "こんにちは"
" " → ""

こうすると、「スペースだけ」も空として扱えるようになります。

空チェックの実装例

function handleSubmit() {
  const value = inputEl.value;
  const trimmed = value.trim();

  if (trimmed === "") {
    errorEl.textContent = "未入力です。何か入力してください。";
    return;
  }

  // ここまで来たら「空ではない」
  errorEl.textContent = "";
  console.log("入力OK:", trimmed);
}

function handleSubmit() {
  const value = inputEl.value;
  const trimmed = value.trim();

  if (trimmed === "") {
    errorEl.textContent = "未入力です。何か入力してください。";
    return;
  }

  // ここまで来たら「空ではない」
  errorEl.textContent = "";
  console.log("入力OK:", trimmed);
}

ここでの重要ポイントは2つです。

最初に空チェックをする。
空だったらエラーを表示して return; で処理を終わらせる。

この「先にダメな条件を弾いて、ダメなら早めに return する」形は、入力チェックの定番パターンです。

文字数制限：書きすぎたら「長すぎます」と教える

文字数を数えるには length を使う

JavaScriptの文字列には、length プロパティがあります。

const text = "こんにちは";
console.log(text.length);  // 5

const text = "こんにちは";
console.log(text.length);  // 5

この length を使って、文字数制限をかけます。

例えば「20文字までOK」と決めたとします。

const maxLength = 20;

const maxLength = 20;

チェックはこう書けます。

if (trimmed.length > maxLength) {
  errorEl.textContent = maxLength + "文字以内で入力してください。";
  return;
}

if (trimmed.length > maxLength) {
  errorEl.textContent = maxLength + "文字以内で入力してください。";
  return;
}

空チェックとの組み合わせ方

空チェックと文字数チェックを組み合わせると、こうなります。

const maxLength = 20;

function handleSubmit() {
  const value = inputEl.value;
  const trimmed = value.trim();

  if (trimmed === "") {
    errorEl.textContent = "未入力です。何か入力してください。";
    return;
  }

  if (trimmed.length > maxLength) {
    errorEl.textContent = maxLength + "文字以内で入力してください。";
    return;
  }

  // ここまで来たら「空でもないし、文字数もOK」
  errorEl.textContent = "";
  console.log("入力OK:", trimmed);
}

const maxLength = 20;

function handleSubmit() {
  const value = inputEl.value;
  const trimmed = value.trim();

  if (trimmed === "") {
    errorEl.textContent = "未入力です。何か入力してください。";
    return;
  }

  if (trimmed.length > maxLength) {
    errorEl.textContent = maxLength + "文字以内で入力してください。";
    return;
  }

  // ここまで来たら「空でもないし、文字数もOK」
  errorEl.textContent = "";
  console.log("入力OK:", trimmed);
}

ここでの深掘りポイントは、「チェックの順番」です。

先に「空チェック」をしている。
そのあとで「文字数チェック」をしている。

この順番にすることで、「何も書いてないのに“長すぎます”と言われる」というおかしな状態を防げます。
入力チェックでは、「どの順番で条件を見るか」が意外と重要です。

エラー表示の設計：1か所に集める

エラーメッセージを出す場所は1つに決める

今回のHTMLでは、エラー表示用に1つの要素を用意しました。

<div id="error-message"></div>

JavaScriptでは、ここに文字列を入れたり、空にしたりします。

errorEl.textContent = "エラー内容";

errorEl.textContent = "エラー内容";

エラーがないときは、空文字にします。

errorEl.textContent = "";

errorEl.textContent = "";

これにより、「今の状態で有効なエラーは1つ」という前提が持てます。
入力欄が1つだけのときは、このシンプルな設計で十分です。

成功時の動きも決めておく

エラーがない（＝入力OK）だった場合、どうするかも決めておきましょう。

例としては、

「OKです！」と表示する。
エラーを消して、console.log で“OK”だけ出す。
フォームをリセット（入力欄を空にする）。

などがあります。

シンプルな例として、「OKです！」を表示するパターンを見てみます。

const maxLength = 20;

function handleSubmit() {
  const value = inputEl.value;
  const trimmed = value.trim();

  if (trimmed === "") {
    errorEl.textContent = "未入力です。何か入力してください。";
    return;
  }

  if (trimmed.length > maxLength) {
    errorEl.textContent = maxLength + "文字以内で入力してください。";
    return;
  }

  // ここまで来たらOK
  errorEl.textContent = "";
  console.log("入力OK:", trimmed);

  // 成功メッセージを別の場所に出す、という設計もアリ
  // ここでは簡単にalertで済ませる例
  alert("入力ありがとうございます！");
}

const maxLength = 20;

function handleSubmit() {
  const value = inputEl.value;
  const trimmed = value.trim();

  if (trimmed === "") {
    errorEl.textContent = "未入力です。何か入力してください。";
    return;
  }

  if (trimmed.length > maxLength) {
    errorEl.textContent = maxLength + "文字以内で入力してください。";
    return;
  }

  // ここまで来たらOK
  errorEl.textContent = "";
  console.log("入力OK:", trimmed);

  // 成功メッセージを別の場所に出す、という設計もアリ
  // ここでは簡単にalertで済ませる例
  alert("入力ありがとうございます！");
}

ここでも、「エラー表示は errorEl に集約する」というルールを守っています。
成功系のメッセージは、別の仕組み（alertや別のdivなど）に任せると、
エラーと成功がごちゃごちゃになりません。

1日目のミニ整理：「条件分岐で入力をふるいにかける」

何をしているのかを日本語で言い直す

今日の handleSubmit の動きを、日本語だけで説明するとこうなります。

送信ボタンが押されたら、入力欄の値を受け取る。
前後の空白を削ったものを trimmed とする。
trimmed が空文字なら、「未入力です」とエラー表示して終わる。
trimmed の長さが maxLength より大きければ、「長すぎます」とエラー表示して終わる。
どちらにも当てはまらなければ、「OK」としてエラーを消し、成功として処理を進める。

つまり、「入力値が通るかどうか」を、
条件分岐で順番にふるいにかけているだけです。

条件分岐のパターンとして覚えておく

この「早めに return する」パターンは、入力チェック以外でも使えます。

function handleSomething(x) {
  if (x がダメ) {
    エラー処理;
    return;
  }

  if (別の条件がダメ) {
    エラー処理;
    return;
  }

  // ここまで来たらOK
  本来やりたかった処理;
}

function handleSomething(x) {
  if (x がダメ) {
    エラー処理;
    return;
  }

  if (別の条件がダメ) {
    エラー処理;
    return;
  }

  // ここまで来たらOK
  本来やりたかった処理;
}

こうしておくと、「OKの処理」は最後の1カ所にまとまります。
「ダメなパターン」は上から順に早めに返す。
この型を、今日のコードで体に慣らしておいてください。

1日目のまとめと、2日目へのつなぎ

今日やったことを、言葉で整理します。

入力欄の値を .value で取り出せるようになった。
trim() を使って、前後の空白を取り除いたうえで空チェックができるようになった。
length を使って文字数をチェックし、指定の最大文字数を超えたときにエラーを出せるようになった。
エラーメッセージの表示場所を1つに決めて、条件分岐に応じて文字列を切り替えられるようになった。
「先にダメな条件を弾いて return する」入力チェックの基本パターンを体験できた。

2日目以降は、この入力チェックに少しずつルールを足していきます。

ひらがな・カタカナだけOKにする。
数字だけOKにする。
記号が入っていたらエラーにする。

といった、「チェック内容のバリエーション」を増やしつつ、
今日学んだ「条件分岐の設計」を崩さないように組み立てていきます。

最後に一つだけ聞きたい。

今日の中で、「あ、ちょっと面白いな」と感じたのはどこでしたか？
空白だけの入力を trim で“なかったこと”にできたところか、
長すぎる文字列を length でビシッと弾けたところか。

その「面白い」と感じたポイントが、
あなたと“入力チェックのロジック”をつなぐ入口です。
そこを意識しながら、2日目のチェック強化に進んでいきましょう。