JavaScript | 論理演算子のミニ練習アプリ

JavaScript

2025.10.24

では、ブラウザ上で動かせる論理演算子のミニ練習アプリを作ります。
ポイントは以下です：

入力欄に値を入力
「チェック」ボタンで条件判定
結果を画面に表示
&&, ||, ! の挙動を体験できる

以下は HTML + JavaScript のサンプルです。コピーしてブラウザで開けばそのまま動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>論理演算子ミニ練習アプリ</title>
  <style>
    body { font-family: sans-serif; padding: 20px; max-width: 500px; }
    input { margin: 5px 0; width: 100%; padding: 5px; }
    button { margin: 10px 0; padding: 5px 10px; }
    .result { margin-top: 15px; padding: 10px; border-radius: 5px; }
    .ok { background-color: #d4edda; color: #155724; }
    .error { background-color: #f8d7da; color: #721c24; }
  </style>
</head>
<body>

<h2>論理演算子ミニ練習アプリ</h2>

<label>名前：</label>
<input type="text" id="name" placeholder="名前を入力">

<label>メールアドレス：</label>
<input type="text" id="email" placeholder="メールアドレスを入力">

<label>年齢：</label>
<input type="number" id="age" placeholder="年齢を入力">

<label>保護者同伴：</label>
<select id="withParent">
  <option value="false">いいえ</option>
  <option value="true">はい</option>
</select>

<label>ログイン済み：</label>
<select id="loggedIn">
  <option value="false">いいえ</option>
  <option value="true">はい</option>
</select>

<label>管理者：</label>
<select id="isAdmin">
  <option value="false">いいえ</option>
  <option value="true">はい</option>
</select>

<button onclick="checkConditions()">条件チェック</button>

<div id="result" class="result"></div>

<script>
function checkConditions() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const age = parseInt(document.getElementById('age').value);
  const withParent = document.getElementById('withParent').value === 'true';
  const loggedIn = document.getElementById('loggedIn').value === 'true';
  const isAdmin = document.getElementById('isAdmin').value === 'true';

  const resultDiv = document.getElementById('result');

  // 1. 名前とメールチェック（&&, includes）
  const nameEmailOk = name && email && email.includes('@');

  // 2. 年齢チェック（18歳以上 or 保護者同伴）
  const ageCheck = (age >= 18) || withParent;

  // 3. ログイン or 管理者チェック
  const accessCheck = (age >= 18 && loggedIn) || isAdmin;

  // 結果メッセージを作成
  let messages = [];
  messages.push(nameEmailOk ? "名前とメールOK ✅" : "名前またはメールに問題 ❌");
  messages.push(ageCheck ? "入場条件OK ✅" : "入場条件NG ❌");
  messages.push(accessCheck ? "アクセス許可 ✅" : "アクセス禁止 ❌");

  // 色分け表示
  resultDiv.innerHTML = messages.join("<br>");
  resultDiv.className = 'result';
  if (nameEmailOk && ageCheck && accessCheck) {
    resultDiv.classList.add('ok');
  } else {
    resultDiv.classList.add('error');
  }
}
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>論理演算子ミニ練習アプリ</title>
  <style>
    body { font-family: sans-serif; padding: 20px; max-width: 500px; }
    input { margin: 5px 0; width: 100%; padding: 5px; }
    button { margin: 10px 0; padding: 5px 10px; }
    .result { margin-top: 15px; padding: 10px; border-radius: 5px; }
    .ok { background-color: #d4edda; color: #155724; }
    .error { background-color: #f8d7da; color: #721c24; }
  </style>
</head>
<body>

<h2>論理演算子ミニ練習アプリ</h2>

<label>名前：</label>
<input type="text" id="name" placeholder="名前を入力">

<label>メールアドレス：</label>
<input type="text" id="email" placeholder="メールアドレスを入力">

<label>年齢：</label>
<input type="number" id="age" placeholder="年齢を入力">

<label>保護者同伴：</label>
<select id="withParent">
  <option value="false">いいえ</option>
  <option value="true">はい</option>
</select>

<label>ログイン済み：</label>
<select id="loggedIn">
  <option value="false">いいえ</option>
  <option value="true">はい</option>
</select>

<label>管理者：</label>
<select id="isAdmin">
  <option value="false">いいえ</option>
  <option value="true">はい</option>
</select>

<button onclick="checkConditions()">条件チェック</button>

<div id="result" class="result"></div>

<script>
function checkConditions() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const age = parseInt(document.getElementById('age').value);
  const withParent = document.getElementById('withParent').value === 'true';
  const loggedIn = document.getElementById('loggedIn').value === 'true';
  const isAdmin = document.getElementById('isAdmin').value === 'true';

  const resultDiv = document.getElementById('result');

  // 1. 名前とメールチェック（&&, includes）
  const nameEmailOk = name && email && email.includes('@');

  // 2. 年齢チェック（18歳以上 or 保護者同伴）
  const ageCheck = (age >= 18) || withParent;

  // 3. ログイン or 管理者チェック
  const accessCheck = (age >= 18 && loggedIn) || isAdmin;

  // 結果メッセージを作成
  let messages = [];
  messages.push(nameEmailOk ? "名前とメールOK ✅" : "名前またはメールに問題 ❌");
  messages.push(ageCheck ? "入場条件OK ✅" : "入場条件NG ❌");
  messages.push(accessCheck ? "アクセス許可 ✅" : "アクセス禁止 ❌");

  // 色分け表示
  resultDiv.innerHTML = messages.join("<br>");
  resultDiv.className = 'result';
  if (nameEmailOk && ageCheck && accessCheck) {
    resultDiv.classList.add('ok');
  } else {
    resultDiv.classList.add('error');
  }
}
</script>

</body>
</html>

HTML

特徴

複数の論理演算子を同時にチェックできる
- && / || / ! も組み合わせて条件判定
短絡評価や falsy 値の挙動を体験できる
- 空文字・未入力・未ログインなど
色分けでわかりやすく結果表示
- 全条件OKなら緑、どれかNGなら赤

See the Pen Logical Operator Mini Practice App by MONO365 -Color your days- (@monoqlo365) on CodePen.

See the Pen Logical Operator Mini Practice App #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

追加ポイント

リアルタイム更新
- input / select の変更で即座に条件判定
条件式表示＋解説
- 判定式と実際の評価値を同時に表示
短絡評価の可視化
- → と吹き出しで、どの値が評価されたかをわかりやすく表示
OK/NG の色分け
- 全条件OKなら緑、どれかNGなら赤

See the Pen Logical Operator Mini Practice App #3 by MONO365 -Color your days- (@monoqlo365) on CodePen.

ポイント

モダンなカードデザイン
- シャドウ、丸角、Google Fonts（Inter）で見やすいUI
リアルタイム更新
- 入力変更で即座に評価、結果色分け
短絡評価のステップアニメ
- highlight クラスでステップごとに背景色変化
- 矢印で評価順を視覚化
演算子ごとにハイライト
- && や || の評価順がわかりやすい

See the Pen Logical Operator Mini Practice App #4 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良点まとめ

スライド矢印アニメ
- ステップごとに animate クラスで左右にスライド
ツールチップ解説
- 各条件にマウスオーバーで「短絡評価の理由」を表示
レスポンシブ対応
- スマホ・タブレットでも文字サイズ・カード幅を自動調整
モダンUI
- カードデザイン＋シャドウ＋Google Fontsで見やすく

See the Pen Logical Operator Mini Practice App #5 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良点まとめ

演算子ごとに色分け
- && → 紫、|| → 緑、通常 → 灰色
演算途中の値を吹き出しで表示
- 短絡評価の流れが視覚的にわかる
ステップごとに delay を変える
- 順番にアニメーションし、リアルな評価フローを体感
レスポンシブ対応
- スマホ・タブレットでも文字サイズ・カード幅自動調整
モダンデザイン
- カード＋シャドウ＋丸角＋Google Fonts

See the Pen Logical Operator Mini Practice App #6 by MONO365 -Color your days- (@monoqlo365) on CodePen.

特徴

演算途中の値を吹き出し表示：どの値が評価されているか視覚化
演算子ごとに色分けハイライト：&& 紫、|| 緑
ステップごとの delay：順番にアニメーション
短絡評価の停止箇所を直感的に確認可能
HTML/CSS/JS 分離で管理しやすい構造
レスポンシブ対応でスマホでも操作可能

See the Pen Logical Operator Mini Practice App #7 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良点まとめ

短絡評価で止まったステップに赤枠＋「評価終了」矢印表示
吹き出しで演算途中の値も表示
ステップごとの delay によりリアルなアニメーション
既存の演算子色分け＆吹き出し表示はそのまま
HTML/CSS/JS 分離済み、レスポンシブ対応

See the Pen Logical Operator Mini Practice App #8 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良点まとめ

矢印が スライドアニメ で評価順を表示
短絡評価で止まったステップに 赤矢印＋枠
吹き出しで演算途中の値を確認
ステップごとに delay を調整してリアルに評価フローを体感
HTML/CSS/JS 分離済み、レスポンシブ対応

See the Pen Logical Operator Mini Practice App #9 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改善ポイント

各ステップで 演算結果を文字列・数値で表示
矢印アニメで評価順を視覚化
短絡評価で止まったステップは赤枠＋「評価終了」矢印
吹き出しで詳細説明を確認可能
HTML/CSS/JS 分離、レスポンシブ対応

これで、論理演算子の短絡評価と演算結果をすべてリアルタイムで体験できる完成版アプリになりました。

See the Pen Logical Operator Mini Practice App #10 by MONO365 -Color your days- (@monoqlo365) on CodePen.

ポイント

各演算値が矢印方向に 流れるアニメ で視覚化
短絡評価で止まったステップを 赤枠＋停止矢印
真偽値だけでなく 文字列・数値もリアルタイム表示
吹き出しで詳細解説も確認可能
HTML/CSS/JS 分離済み、レスポンシブ対応

これで、論理演算子の短絡評価フローが完全に「動き」で理解できるリアルタイム可視化アプリの完成です。

See the Pen Logical Operator Mini Practice App #11 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改善ポイント

演算値が矢印上を滑らかに移動して、どの値が評価に使われたか直感的に表示
短絡評価で止まったステップは 赤枠＋停止矢印
真偽値・文字列・数値を 全てリアルタイム表示
吹き出しで詳細解説を確認可能
HTML/CSS/JS 分離済み、レスポンシブ対応

これで、論理演算子の短絡評価が 完全に「値の流れ」で理解できる動的教材」 になりました。

See the Pen Logical Operator Mini Practice App #12 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改善ポイント

複数値が矢印上を順番に流れるアニメーション
短絡評価で止まったステップは赤枠＋停止矢印
演算結果は文字列・数値・真偽値すべてリアルタイム表示
吹き出しで詳細解説を確認可能
HTML/CSS/JS 分離済み、レスポンシブ対応

このバージョンで、論理演算子の短絡評価フローが 完全に「値の流れ」と「評価順」で理解できる教材」 になりました。

See the Pen Logical Operator Mini Practice App #13 by MONO365 -Color your days- (@monoqlo365) on CodePen.

ポイント

入力を変えるとリアルタイムで結果が更新
各ステップが矢印上を滑らかに流れるアニメ
短絡評価で止まったステップは赤枠＋停止矢印
ツールチップで短絡評価の理由を表示
文字列・数値・真偽値をすべて可視化

See the Pen Logical Operator Mini Practice App #14 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良ポイント

各ステップの値が複数バブルとして連鎖的に流れる
短絡評価で止まったステップは 赤枠＋停止矢印
ツールチップ で評価理由を表示
文字列・数値・真偽値すべて可視化
ステップ間 delay により評価順を直感的に体感

このバージョンで、論理演算子の短絡評価が 値の流れと評価順を同時に理解できる完全動的教材 になりました。

See the Pen Logical Operator Mini Practice App #15 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良ポイント

バブルが矢印上を滑らかにスライド
ステップが ハイライト＋短絡評価停止矢印
ツールチップが追従 → マウスオーバーで理由表示
文字列・数値・真偽値を全て可視化
ステップごとの delay と transition でリアルな評価フロー

ブラウザ上で名前や年齢などを入力すると、短絡評価の流れがバブルの動きとハイライトで直感的に理解できる完全教材 になっています。

See the Pen Logical Operator Mini Practice App #16 by MONO365 -Color your days- (@monoqlo365) on CodePen.

改良ポイント（スマホ対応版）

タップや入力変更に即反応 (input + change イベント)
バブルが矢印上を 滑らかに左右にスライド
短絡評価で止まったステップを 赤枠＋停止矢印
ツールチップが 追従表示 → タップでも理由確認可能
レスポンシブ対応でスマホでも操作・閲覧しやすい

これで、PCでもスマホでも完全にリアルタイムに短絡評価の流れを体感できる教材 が完成しました。

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31