JavaScript
PR

【JavaScript 4-2】入力内容を確かめる｜フォームの値を取得して表示するミニ制作（初心者向け）

JS4-2.webp
toshi
記事内に商品プロモーションを含む場合があります

※この記事は JavaScript 4-2「入力内容を確かめる」です。
ここでは、入力欄に書かれた文字をJavaScriptで取得し、空欄かどうかを確認する小さなページを作ります。
新しいことを一気に増やすより、「入力された値を受け取る」感覚を優先します。

前回は、ボタンを押すと表示内容が切り替わるミニ制作を行いました。

今回はその次として、
**入力欄に書かれた内容をJavaScriptで確認する**
ページを作ります。

たとえば、

– 名前が入力されているか確認する
– 入力された名前を使ってメッセージを表示する
– 空欄なら「入力してください」と出す

こういう処理は、フォームやお問い合わせ画面の入口にもつながります。

今回はまず、
**inputに入力された文字を取得する**
ところから始めます。

Q
「inputの中身は value で取得できます」

入力欄に書かれた文字は、
JavaScriptでは `value` を使って取得できます。

たとえば、

const userName = nameInput.value;

と書くと、
入力欄に書かれた文字を userName に入れられます。

そして、

if (userName === “”) {
空欄の時の処理
} else {
入力されている時の処理
}

のように書くと、
入力されているかどうかで表示を変えられます。

今回はこの流れをミニ制作として確認します。

目次
  1. 今回のゴール
  2. 今回作るもの
  3. まずは完成形を見る（コピペOK）
  4. index.html を作る
  5. style.css を作る
  6. script.js を作る
  7. どこを見ればいい？（変化のポイント）
  8. value で入力内容を取得する
  9. trim で前後の空白を取り除く
  10. if で空欄チェックをする
  11. addEventListener でボタンと関数をつなげる
  12. ボタンを押してから結果が出るまで
  13. よくあるつまずき（ここだけ確認）
  14. 今回のまとめ（ここだけ押さえればOK）
  15. 今日のゴール確認（できた判定）
  16. 次に読む（JavaScript 4-3へ）
  17. JavaScript 4-2 の一例zipについて
まずは完成ラインを確認する

今回のゴール

  • inputに入力された文字をJavaScriptで取得できる
  • value の役割が分かる
  • trim で前後の空白を整理できる
  • if で空欄かどうかを確認できる
  • 入力内容に応じて表示メッセージを変えられる
小さなフォームで動きを確認する

今回作るもの

今回は、名前入力欄を使った小さな確認ページを作ります。

流れはシンプルです。

1. 入力欄に名前を書く
2. ボタンを押す
3. JavaScriptが入力内容を確認する
4. 空欄なら注意を表示する
5. 入力されていれば挨拶メッセージを表示する

操作表示される内容
空欄のままボタンを押す名前を入力してください
名前を入力してボタンを押すこんにちは、〇〇さん！
空白だけ入力してボタンを押す名前を入力してください

今回の中心は、`input.value` です。

HTMLの入力欄に書かれた内容を、
JavaScript側で受け取って使います。

まずは動く形を用意する

まずは完成形を見る（コピペOK）

フォルダ構成は、これまでと同じように考えると分かりやすいです。

javascript-04-02-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/
 
   └─ script.js
TeX

入力欄と表示場所を用意する

index.html を作る

まずは `index.html` をこの形で作ります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>JavaScript 4-2</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <main class="page">
      <section class="form-card">
        <p class="label">JavaScript 4-2 の一例</p>

        <h1>入力内容を確かめる</h1>

        <p class="lead">入力欄に名前を書いて、ボタンを押してみましょう。</p>

        <div class="form-area">
          <label for="nameInput" class="form-label"> お名前 </label>

          <input id="nameInput" class="input" type="text" placeholder="例：toshi" />

          <button id="checkButton" class="button" type="button">入力内容を確認する</button>
        </div>

        <p id="resultText" class="result-text">ここに結果が表示されます。</p>
      </section>
    </main>

    <script src="js/script.js"></script>
  </body>
</html>
HTML

HTML側では、

– 入力欄
– ボタン
– 結果を表示する場所

を用意しています。

JavaScriptでは、
`id=”nameInput”` の入力欄から文字を取得して、
`id=”resultText”` の場所に結果を表示します。

フォームを見やすく整える

style.css を作る

次に、`css` フォルダの中に `style.css` を作って、下のコードを書きます。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
}

.page {
  max-width: 760px;
  margin: 24px auto 0;
}

.form-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.label {
  color: #92400e;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 8px;
}

h1 {
  color: #111827;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead {
  margin-top: 0;
  margin-bottom: 24px;
}

.form-area {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

.input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  margin-bottom: 12px;
}

.button {
  background-color: #eab308;
  color: #111827;
  border: none;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ca8a04;
}

.result-text {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  margin: 0;
}
CSS

CSSでは、入力欄とボタンを見やすく整えています。

今回の中心はJavaScriptですが、
入力欄や結果表示が見やすいと、
「何を入力して、何が返ってきたか」
が確認しやすくなります。

入力欄の値を取得する

script.js を作る

最後に、`js` フォルダの中に `script.js` を作って、下のコードを書きます。

const nameInput = document.getElementById('nameInput')
const checkButton = document.getElementById('checkButton')
const resultText = document.getElementById('resultText')

function checkName() {
  const userName = nameInput.value.trim()

  if (userName === '') {
    resultText.textContent = '名前を入力してください。'
  } else {
    resultText.textContent = 'こんにちは、' + userName + 'さん！'
  }
}

checkButton.addEventListener('click', function () {
  checkName()
})
JavaScript
toshi
toshi

今回は “入力欄の value を受け取って、ifで空欄かどうかを見る” ところがポイントです。

コードの見る場所を整理する

どこを見ればいい？（変化のポイント）

見る場所起きていること
nameInput入力欄を取得している
nameInput.value入力された文字を取得している
trim()前後の空白を取り除いている
if (userName === “”)空欄かどうかを確認している
resultText.textContent結果のメッセージを表示している
addEventListenerボタンを押した時に checkName を呼び出している

今回のコードは、
入力欄の内容を受け取って、
条件によって表示を変える流れです。

これまで学んだ、

– getElementById
– function
– if
– textContent
– addEventListener

を組み合わせています。

入力欄の中身を受け取る

value で入力内容を取得する

入力欄に書かれた文字は、
`value` で取得できます。

const userName = nameInput.value;
JavaScript

今回のコードでは、
さらに `trim()` もつけています。

const userName = nameInput.value.trim();
JavaScript

これは、
入力欄に書かれた文字を取得して、
前後の空白を取り除いている形です。

value は、inputやtextareaなどの入力内容を受け取る時によく使います。まずは「入力欄の中身を見るもの」と覚えると進めやすいです。

空白だけの入力も空欄として見る

trim で前後の空白を取り除く

`trim()` は、
文字の前後にある空白を取り除くために使えます。

たとえば、
入力欄にスペースだけ入れてボタンを押した場合、
そのままだと「何か入力された」と見えてしまうことがあります。

そこで、

nameInput.value.trim()
JavaScript

としておくと、
前後の空白を取り除いた状態で確認できます。

入力内容trim後の見え方
toshitoshi
　toshi　 toshi
半角スペースだけ 空欄として扱いやすい
全角スペースだけ 空欄として扱いやすい

tl-box-common tl-box-explain】
最初は `trim()` を完璧に説明できなくても大丈夫です。

フォーム入力では、
余計な空白を取り除いてから確認すると、
扱いやすくなることが多いです。

入力されているかを判定する

if で空欄チェックをする

入力内容が空欄かどうかは、
if を使って確認できます。

if (userName === "") {
resultText.textContent = "名前を入力してください。";
} else {
resultText.textContent = "こんにちは、" + userName + "さん！";
}
JavaScript

これは、

– userName が空欄なら「名前を入力してください。」
– そうでなければ「こんにちは、〇〇さん！」

と表示を分けています。

`””` は、文字が何も入っていない状態を表します。
最初は「空の文字」と見ればOKです。

押した時だけ確認する

addEventListener でボタンと関数をつなげる

入力内容の確認は、
ボタンを押した時に行います。

そのため、ボタンのクリック処理の中で、
`checkName()` を呼び出しています。

checkButton.addEventListener("click", function () {
checkName();
});
JavaScript

これで、
ボタンを押した時だけ、
入力内容の確認が行われます。

入力から表示までを1本で見る

ボタンを押してから結果が出るまで

順番起きていること
1入力欄に名前を書く
2ボタンを押す
3checkName が呼び出される
4nameInput.value で入力内容を取得する
5trim で空白を整理する
6 if で空欄かどうかを確認する
7textContent で結果を表示する

この流れが見えると、
フォーム入力の入口がかなり分かりやすくなります。

いきなり本格的なフォームを作る必要はありません。

まずは、
入力欄の値を取得して、
画面に表示するところからで大丈夫です。

小さく変えて理解を深める（練習）
  • placeholder の文字を変えてみる
  • 「こんにちは、〇〇さん！」の文章を変えてみる
  • 空欄時のメッセージを変えてみる
  • input の id 名を変えて、JavaScript側もそろえてみる
  • trim を外すと、空白だけの入力がどうなるか確認してみる

最初は、表示される文章を変えるだけでも十分です。

慣れてきたら、
入力欄を増やす練習へ進めます。

ただし、入力欄を増やす時は、

– HTMLにinputを追加する
– JavaScriptでそのinputを取得する
– valueで中身を受け取る
– 表示する場所を用意する

という流れが必要です。


止まった時の見直し方

よくあるつまずき（ここだけ確認）

Q
「つまずき①：ボタンを押しても反応しない」

まずは、ボタンの id 名を確認します。

HTML側が、

<button id="checkButton" class="button" type="button">入力内容を確認する</button>
HTML

なら、JavaScript側も、

const checkButton = document.getElementById("checkButton");
JavaScript

のように同じ名前にします。

Q
「つまずき②：入力した文字が取得できない」

入力欄の id 名を確認します。

HTML側が、

<input id="nameInput" class="input" type="text" />
HTML

なら、JavaScript側も、

const nameInput = document.getElementById("nameInput");
JavaScript

のように同じ名前にします。

id 名がずれていると、入力欄を見つけられません。

Q
「つまずき③：value を書き忘れる」

入力欄そのものではなく、
入力欄の中身を見たい時は `value` を使います。

const userName = nameInput.value;
JavaScript

`nameInput` だけだと、入力欄そのものを指しています。

入力された文字を使いたい時は、
`nameInput.value` を確認しましょう。

Q
「つまずき④：空白だけでも入力扱いになる」

スペースだけ入力された時も、
そのままだと文字があるように見えることがあります。

そのため、今回のコードでは、

const userName = nameInput.value.trim();
JavaScript

として、前後の空白を取り除いています。

空欄チェックをする時は、trim を使うと確認しやすくなります。

制作で使った内容を振り返る

今回のまとめ（ここだけ押さえればOK）

  • input の入力内容は value で取得できる
  • trim で前後の空白を取り除ける
  • if で空欄かどうかを確認できる
  • textContent で結果を画面に表示できる
  • addEventListener でボタンを押した時に確認できる
できたことを確認する

今日のゴール確認（できた判定）

ここまでできたらOKです。

  • 入力欄の値をJavaScriptで取得できた
  • 空欄かどうかを if で確認できた
  • 入力内容に応じて表示を変えられた
  • value と textContent の違いが少し見えた
  • 次の JavaScript 4-3 に進む準備ができた
JavaScript基礎のまとめへ進む

次に読む（JavaScript 4-3へ）

今回は、入力欄の内容をJavaScriptで取得して、
空欄かどうかを確認するミニ制作を行いました。

次は、
ここまでのJavaScript基礎をまとめます。

ボタン、入力欄、条件分岐、関数、配列、オブジェクト、DOM操作を振り返り、
次に何を作れるかを整理していきます。

次へ：JavaScript 4-3 まとめへ進む
コード一式で動きを確認する

JavaScript 4-2 の一例zipについて

この記事の内容は、JavaScript 4-2 の一例として zip ファイルを用意しました

最初はそのまま開いて動きを確認し、
そのあとで入力欄や表示されるメッセージを少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-04-02-example.zip
└─ javascript-04-02-example/
├─ index.html
├─ css/
│ └─ style.css
└─ js/
└─ script.js

javascript-04-02-exampleダウンロード
PR：最初の1冊（必要な方だけ）

PR：JavaScriptを進めるための参考（必要な方だけ）
JavaScriptは、DOM操作・イベント処理・オブジェクトの組み合わせあたりで少しつまずきやすいので、必要な方だけ参考を置いておきます。
まずは記事内のコードだけでも十分進めます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ABOUT ME
toshi
toshi
フルスタックエンジニア
InstagramContact
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました