はじめに
今回は JavaScript について超基本を勉強したので、それを記事にしました。
これまで HTML は少し触ったことがあっても、JavaScript は「名前は知っているけれど、実際にどう使うのかよく分からない」という状態でした。
ですが実際に触ってみると、HTMLの表示を書き換えたり、入力チェックをしたり、選択内容に応じて表示を変えたりと、Web画面を動かすための大事な役割を持っていることが分かりました。
今回は、まずは本当に基本的なところとして、
- HTMLの文字を書き換える
- HTML要素を取得する
- 入力値を使って画面を変える
- 日付チェックや必須チェックを行う
といった内容を、具体例を交えながらまとめてみます。
JavaScriptとは
JavaScript は、Webページに動きを付けるためのプログラミング言語です。
HTML は画面の部品を作る役割、CSS は見た目を整える役割がありますが、JavaScript はその上で、
- ボタンを押したときに処理をする
- 入力された値をチェックする
- 選択内容に応じて表示を切り替える
- 画面の内容を書き換える
といったことができます。
つまり、「表示するだけのページ」から「利用者の操作に反応するページ」にするための仕組みが JavaScript だと理解しました。
０．Hello World!!
まずは一番基本的な例です。
HTMLファイルの p タグを、script により 「Hello World!!」という文字列に置き換えて表示します。
サンプルソース
<body>
<p>ここを書き換える</p> <script>
document.querySelector('p').textContent = 'Hello World!!';
</script>
</body>
説明
この例では、最初は p タグの中に「ここを書き換える」と書いてありますが、JavaScript によって実行時に「Hello World!!」へ変更しています。
document.querySelector('p').textContent = 'Hello World!!';
この1行は、次のような意味です。
document.querySelector('p')
→ 最初のpタグを取得する.textContent = 'Hello World!!'
→ そのタグの文字列をHello World!!に変更する
JavaScript を使うと、このように HTMLの内容をあとから書き換えられる ことが分かりました。
１．HTML要素を取得する
JavaScript で画面を操作するには、まず どの部品を操作するのか を取得する必要があります。
これが「HTML要素を取得する」ということです。
よく使う書き方は次のようなものです。
document.getElementById('abc');
document.querySelector('#abc');
document.querySelector('p');
それぞれの意味
document.getElementById('abc')
→id="abc"が付いた要素を取得するdocument.querySelector('#abc')
→ CSSセレクタ形式でid="abc"の要素を取得するdocument.querySelector('p')
→ 最初のpタグを取得する
個人的には、id があるなら getElementById() が分かりやすい と感じました。
一方で querySelector() は、#id や .class、p など柔軟に書けるので便利そうです。
２．値を取得する・設定する
HTML要素を取得したら、その要素の値や文字列を取得したり設定したりできます。
例えば次のようなものがあります。
element.value;
element.textContent;
element.innerHTML;
主な使い分け
value
→ 入力欄やコンボボックスの値を取得するときに使うtextContent
→ 要素の文字列を書き換えるときに使うinnerHTML
→ HTMLごと書き換えるときに使う
例えば、テキスト入力欄の値を取りたい場合は value を使います。
const name = document.getElementById('userName').value;
画面上のメッセージを変更したい場合は textContent を使います。
document.getElementById('message').textContent = '入力してください。';
３．イベントで処理を動かす
JavaScript では、ボタンを押した時や選択が変わった時などに処理を実行できます。
これを イベント と呼びます。
例えば、値が変わった時に処理をしたい場合は次のように書きます。
element.addEventListener('change', function () {
// 値が変わった時の処理
});
よく使うイベントには次のようなものがあります。
click
→ ボタンを押した時change
→ 選択肢や入力値が変わった時input
→ 文字入力の途中でも反応したい時
たとえば、ボタンを押したらメッセージを表示する例はこのように書けます。
document.getElementById('checkButton').addEventListener('click', function () {
document.getElementById('message').textContent = 'ボタンが押されました。';
});
４．条件分岐
入力された値によって処理を変えたい場合は、if を使います。
if (条件) {
// 条件が正しい時
} else {
// 条件が違う時
}
例えば、入力欄が空かどうかを確認する場合は次のように書けます。
if (userName.value.trim() === '') {
message.textContent = '名前は必須です。';
} else {
message.textContent = '入力されています。';
}
trim() は、前後の空白を除去してくれるので、必須チェックではよく使いそうだと思いました。
５．繰り返し
同じような処理を何回も行う場合は、for を使って繰り返します。
for (let i = 0; i < 5; i++) {
// 5回繰り返す
}
たとえば、配列の中に入っているデータを順番に処理したい時に便利です。
const fruits = ['りんご', 'みかん', 'バナナ'];for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
今回のサンプルでも、コンボボックスの選択肢を追加する時に繰り返しを使っています。
配列の数だけ option を作る、というような処理は実務でもよくありそうだと感じました。
今回学んだことをまとめたサンプルHTML
ここでは、今回学んだ内容をまとめたサンプルHTMLを載せておきます。
このサンプルでは、以下のような動きをまとめて確認できます。
- ラジオボタンの選択でコンボボックスの内容が変わる
- コンボボックスの選択によってメッセージが変わる
- 日付入力のフォーマットチェック
- 期間入力の大小チェック
- ボタン押下時の必須入力チェック
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript基本サンプル</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
margin: 20px;
}
.error {
color: red;
font-weight: bold;
}
.info {
color: blue;
font-weight: bold;
}
.block {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
label {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>JavaScript 基本サンプル</h1>
<!-- JavaScriptで書き換える対象 -->
<p id="titleMessage">ここを書き換える</p>
<div class="block">
<h2>1. ラジオボタンでコンボ内容を変更</h2>
<!-- name が同じラジオボタンは1つだけ選択できる -->
<label>
<input type="radio" name="category" value="fruit" checked>
果物
</label>
<label>
<input type="radio" name="category" value="drink">
飲み物
</label>
<br><br>
<!-- コンボボックス -->
<select id="itemSelect">
<!-- JavaScriptで中身を入れる -->
</select>
<p id="itemMessage" class="info">選択内容に応じてここが変わります。</p>
</div>
<div class="block">
<h2>2. 日付入力チェック</h2>
<label for="dateInput">日付（YYYY-MM-DD）:</label>
<input type="text" id="dateInput" placeholder="例: 2026-03-01">
<button type="button" id="dateCheckButton">日付チェック</button>
<p id="dateError" class="error"></p>
</div>
<div class="block">
<h2>3. 期間の大小チェック</h2>
<label for="startDate">開始日:</label>
<input type="text" id="startDate" placeholder="例: 2026-03-01">
<label for="endDate">終了日:</label>
<input type="text" id="endDate" placeholder="例: 2026-03-31">
<button type="button" id="periodCheckButton">期間チェック</button>
<p id="periodError" class="error"></p>
</div>
<div class="block">
<h2>4. 必須入力チェック</h2>
<label for="userName">名前:</label>
<input type="text" id="userName">
<label for="mailAddress">メール:</label>
<input type="text" id="mailAddress">
<button type="button" id="submitButton">送信</button>
<p id="submitError" class="error"></p>
<p id="submitResult" class="info"></p>
</div>
<script>
// ============================
// 画面表示直後の初期処理
// ============================
// id="titleMessage" の pタグを取得して文字を書き換える
document.getElementById('titleMessage').textContent = 'JavaScriptで画面を書き換えました。';
// ラジオボタン、コンボボックス、メッセージ欄の要素を取得
const radioButtons = document.querySelectorAll('input[name="category"]');
const itemSelect = document.getElementById('itemSelect');
const itemMessage = document.getElementById('itemMessage');
// ラジオボタンごとのコンボボックス候補データ
const itemData = {
fruit: ['りんご', 'みかん', 'バナナ'],
drink: ['コーヒー', 'お茶', 'ジュース']
};
// コンボボックスの中身を作り直す関数
function updateSelectOptions(category) {
itemSelect.innerHTML = '';
const items = itemData[category];
for (let i = 0; i < items.length; i++) {
const option = document.createElement('option');
option.value = items[i];
option.textContent = items[i];
itemSelect.appendChild(option);
}
updateItemMessage();
}
// コンボボックスの選択値に応じてメッセージ変更
function updateItemMessage() {
const selectedItem = itemSelect.value;
if (selectedItem === 'りんご') {
itemMessage.textContent = 'りんごが選ばれました。赤くて人気の果物です。';
} else if (selectedItem === 'みかん') {
itemMessage.textContent = 'みかんが選ばれました。冬によく食べられます。';
} else if (selectedItem === 'バナナ') {
itemMessage.textContent = 'バナナが選ばれました。手軽に食べられます。';
} else if (selectedItem === 'コーヒー') {
itemMessage.textContent = 'コーヒーが選ばれました。眠気覚ましにもよく飲まれます。';
} else if (selectedItem === 'お茶') {
itemMessage.textContent = 'お茶が選ばれました。和食にも合います。';
} else if (selectedItem === 'ジュース') {
itemMessage.textContent = 'ジュースが選ばれました。甘い飲み物です。';
} else {
itemMessage.textContent = '選択内容に応じてここが変わります。';
}
}
// ラジオボタン変更時の処理
for (let i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', function () {
updateSelectOptions(this.value);
});
}
// コンボボックス変更時の処理
itemSelect.addEventListener('change', function () {
updateItemMessage();
});
// 初期表示
updateSelectOptions('fruit');
// 日付フォーマットチェック
const dateInput = document.getElementById('dateInput');
const dateCheckButton = document.getElementById('dateCheckButton');
const dateError = document.getElementById('dateError');
function isValidDateFormat(dateStr) {
const regex = /^\d{4}-\d{2}-\d{2}$/;
if (!regex.test(dateStr)) {
return false;
}
const date = new Date(dateStr);
if (isNaN(date.getTime())) {
return false;
}
return true;
}
dateCheckButton.addEventListener('click', function () {
const inputValue = dateInput.value.trim();
dateError.textContent = '';
dateError.className = 'error';
if (inputValue === '') {
dateError.textContent = '日付を入力してください。';
return;
}
if (!isValidDateFormat(inputValue)) {
dateError.textContent = '日付の形式が不正です。YYYY-MM-DD で入力してください。';
return;
}
dateError.textContent = '日付形式は正常です。';
dateError.className = 'info';
});
// 期間大小チェック
const startDate = document.getElementById('startDate');
const endDate = document.getElementById('endDate');
const periodCheckButton = document.getElementById('periodCheckButton');
const periodError = document.getElementById('periodError');
periodCheckButton.addEventListener('click', function () {
const startValue = startDate.value.trim();
const endValue = endDate.value.trim();
periodError.textContent = '';
periodError.className = 'error';
if (!isValidDateFormat(startValue)) {
periodError.textContent = '開始日の形式が不正です。YYYY-MM-DD で入力してください。';
return;
}
if (!isValidDateFormat(endValue)) {
periodError.textContent = '終了日の形式が不正です。YYYY-MM-DD で入力してください。';
return;
}
const start = new Date(startValue);
const end = new Date(endValue);
if (start > end) {
periodError.textContent = '期間エラーです。開始日は終了日以前にしてください。';
return;
}
periodError.textContent = '期間は正常です。';
periodError.className = 'info';
});
// 必須入力チェック
const userName = document.getElementById('userName');
const mailAddress = document.getElementById('mailAddress');
const submitButton = document.getElementById('submitButton');
const submitError = document.getElementById('submitError');
const submitResult = document.getElementById('submitResult');
submitButton.addEventListener('click', function () {
submitError.textContent = '';
submitResult.textContent = '';
const errors = [];
if (userName.value.trim() === '') {
errors.push('名前は必須です。');
}
if (mailAddress.value.trim() === '') {
errors.push('メールアドレスは必須です。');
}
if (errors.length > 0) {
submitError.innerHTML = errors.join('<br>');
return;
}
submitResult.textContent = '必須チェックOKです。送信可能です。';
});
</script>
</body>
</html>JavaScript 基本サンプル
ここを書き換える
1. ラジオボタンでコンボ内容を変更
選択内容に応じてここが変わります。
2. 日付入力チェック
3. 期間の大小チェック
4. 必須入力チェック
サンプルの説明
このサンプルでは、JavaScriptの基本的な使い方を一通り確認できます。
ラジオボタンでコンボボックスの内容を変える
ラジオボタンで「果物」か「飲み物」を選ぶと、その下のコンボボックスの候補が切り替わるようにしています。
ここでは、
- ラジオボタンの変更を
changeイベントで受け取る - 選択された値に応じて配列データを切り替える
for文でoptionを作り直す
という流れになっています。
この部分を見て、イベント・配列・繰り返し が組み合わさると画面の動きが作れるのだと分かりました。
コンボボックス選択でメッセージを変える
コンボボックスの選択内容に応じて、その下の説明文を変えています。
ここでは if ～ else if ～ else を使って条件分岐しています。
実際の業務画面でも、「選択された内容によって案内文や入力欄を変える」といった場面は多そうなので、基本として覚えておきたいと思いました。
日付のフォーマットチェック
YYYY-MM-DD の形式で入力されているかを正規表現で確認しています。
const regex = /^\d{4}-\d{2}-\d{2}$/;
このような書き方は最初少し難しく見えましたが、
「4桁-2桁-2桁になっているかを見る」と理解すると少し分かりやすかったです。
期間の大小チェック
開始日と終了日を入力し、開始日の方が後になっていないかをチェックしています。
業務画面でありがちな、
- 開始日 > 終了日 はエラー
- 終了日が未入力ならエラー
- 日付形式が違うならエラー
といった処理の基本形として参考になりそうです。
必須入力チェック
送信ボタンを押した時に、名前とメールアドレスが入力されているかを確認しています。
エラーメッセージを配列にためて最後にまとめて表示する形にしているので、項目が増えても対応しやすそうだと感じました。
次回やりたいこと
今回は JavaScript の本当に基本的な部分だけを勉強しましたが、触ってみると「画面を動かすためにかなり大事な技術だな」と感じました。
次回は、以下のようなことも勉強してみたいです。
- JavaScript を HTML ファイルから分離して書く方法
- 関数をもう少し整理して見やすく書く方法
- チェック処理を共通化する方法
- テーブルの行追加や削除
- 業務画面っぽい入力フォームの作成
まずは今回のサンプルを少しずつ書き換えながら、JavaScript の書き方に慣れていきたいと思います。
コメント