こんにちは、SodDogです。
今回は、これからWeb制作を学びたい、または始めたばかりの方へ向けて、「JavaScriptで何ができるのか」をわかりやすく解説します。この記事では、JavaScriptの基本的な役割から具体的な使い方までを順を追って説明していきますので、ぜひ最後までお付き合いくださいね!
目次 [非表示]
JavaScriptって何?
簡単に言うと…
JavaScriptは、Webサイトに「動き」や「インタラクション」を加えるためのプログラミング言語です。
例えば:
- ボタンをクリックしたらメッセージが表示される
- 画像が自動で切り替わるスライドショー
- 入力フォームにエラーがある場合に警告を表示する
など、HTMLやCSSだけでは作れない「動きのあるWebサイト」を実現します。
HTMLとCSSとの違い
JavaScriptの役割を理解するには、まずHTMLとCSSの役割を知っておくと便利です。以下の表で整理してみましょう。
種類 | 役割 | 例 |
---|---|---|
HTML | Webページの「骨組み」を作る | 見出し、文章、画像、リンクなどを配置する |
CSS | Webページの「見た目」をデザインする | 色を付ける、文字の大きさを変える、配置を調整する |
JavaScript | Webページに「動き」や「操作」を追加する | ボタンをクリックすると動作する機能、アニメーションなど |
JavaScriptで何ができるの?
初心者の方にもイメージしやすいように、いくつかの具体例を挙げていきます!
1. ボタンをクリックするとメッセージが表示される
まずは基本中の基本、ボタンをクリックしてメッセージを表示してみましょう。
実際のコード
以下をコピーして、HTMLファイルとして保存してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの基本</title>
</head>
<body>
<h1>JavaScriptの基本例</h1>
<button id="myButton">クリックしてね!</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('ボタンがクリックされました!');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの基本</title>
</head>
<body>
<h1>JavaScriptの基本例</h1>
<button id="myButton">クリックしてね!</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('ボタンがクリックされました!');
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScriptの基本</title> </head> <body> <h1>JavaScriptの基本例</h1> <button id="myButton">クリックしてね!</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('ボタンがクリックされました!'); }); </script> </body> </html>
仕組みを解説
- HTML部分
- ボタン(
<button>
)を用意し、id="myButton"
で識別できるようにします。
- ボタン(
- JavaScript部分
document.getElementById
でボタンを取得。addEventListener
でボタンがクリックされたときの動作を設定。alert
でメッセージを表示。
2. 入力フォームのエラーをチェックする
ユーザーがフォームに名前を入力しなかった場合に警告を表示する機能を作ってみましょう。
実際のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームチェック</title>
</head>
<body>
<h1>フォームの入力をチェックしよう</h1>
<form id="myForm">
<input type="text" id="name" placeholder="名前を入力してください">
<button type="submit">送信</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
if (!name) {
alert('名前を入力してください!');
event.preventDefault(); // フォームの送信をキャンセル
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームチェック</title>
</head>
<body>
<h1>フォームの入力をチェックしよう</h1>
<form id="myForm">
<input type="text" id="name" placeholder="名前を入力してください">
<button type="submit">送信</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
if (!name) {
alert('名前を入力してください!');
event.preventDefault(); // フォームの送信をキャンセル
}
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フォームチェック</title> </head> <body> <h1>フォームの入力をチェックしよう</h1> <form id="myForm"> <input type="text" id="name" placeholder="名前を入力してください"> <button type="submit">送信</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { const name = document.getElementById('name').value; if (!name) { alert('名前を入力してください!'); event.preventDefault(); // フォームの送信をキャンセル } }); </script> </body> </html>
仕組みを解説
- フォームを用意
id="myForm"
でフォーム全体を識別。
- JavaScriptでチェック
- フォームが送信される前に
submit
イベントを監視。 - 名前の入力欄(
<input>
)が空の場合に警告を表示し、送信をキャンセル。
- フォームが送信される前に
3. カウントアップボタンを作る
次に、ボタンをクリックするたびに数字が増える仕組みを作ってみます。
実際のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カウントアップ</title>
</head>
<body>
<h1>カウントアップを体験しよう</h1>
<button id="counter">0</button>
<script>
let count = 0;
document.getElementById('counter').addEventListener('click', function() {
count++;
this.textContent = count;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カウントアップ</title>
</head>
<body>
<h1>カウントアップを体験しよう</h1>
<button id="counter">0</button>
<script>
let count = 0;
document.getElementById('counter').addEventListener('click', function() {
count++;
this.textContent = count;
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>カウントアップ</title> </head> <body> <h1>カウントアップを体験しよう</h1> <button id="counter">0</button> <script> let count = 0; document.getElementById('counter').addEventListener('click', function() { count++; this.textContent = count; }); </script> </body> </html>
仕組みを解説
- JavaScriptで変数を用意
let count = 0;
で初期値を設定。
- クリックで数字を更新
- ボタンをクリックするたびに
count++
で数字を1つ増やし、textContent
で表示を更新。
- ボタンをクリックするたびに
まとめ
いかがだったでしょうか?
javascriptを使うことでWebサイトに動きを与えるきっかけとなり、よりユーザビリティに優れたWebサイトを作ることが出来ます。
今回はほんの一例を紹介しましたが、もっと深く勉強することでより高度な技術を習得することが出来ます。
これからもウェブガジェブログでは定期的にコード紹介していきたいと思います。
コメント