2026年4月15日
JavaScriptとは何か？
ウェブページを作るには、主に3つの言語を使います。HTML（内容・構造）、CSS（見た目・デザイン）、そして JavaScript（ジャバスクリプト）（動き・機能）です。
JavaScriptは、ウェブページに「動き」を加えるためのプログラミング言語です。たとえば、ボタンをクリックしたときにメッセージが表示されたり、入力した文字をチェックしたり、画像がスライドしたりする動きは、すべてJavaScriptで作られています。
HTMLとCSSだけでは「静止画」のようなページしか作れませんが、JavaScriptを加えることで、ユーザーの操作に反応する「インタラクティブ」なページが作れるようになります。
💡 3つの言語の役割まとめ：
- HTML：ページの骨格（何を表示するか）
- CSS：ページの見た目（どう見せるか）
- JavaScript：ページの動き（どう動くか）
JavaScriptでできること
JavaScriptを使うと、次のようなことができます。
- ボタンクリックで何かを表示する：「クリックしてね」ボタンを押すとメッセージが出る
- 入力内容をチェックする：フォームに何も入力せずに送信しようとすると警告を出す
- タイマーを作る：カウントダウンや時計を表示する
- クイズアプリを作る：問題を出して正解・不正解を判定する
- ゲームを作る：ブラウザ上で動くシンプルなゲーム
YouTubeの動画再生ボタン、Googleの検索候補の表示、Twitterのいいねボタンなど、あらゆるウェブサービスでJavaScriptが使われています。
JavaScriptの基本的な書き方
JavaScriptはHTMLファイルの中に <script> タグを使って書きます。
書く場所
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習</title>
</head>
<body>
<p>ページの内容</p>
<!-- bodyの一番下にscriptタグを書く -->
<script>
// ここにJavaScriptを書く
</script>
</body>
</html><script> タグは </body> の直前に書くのが基本です。
コンソールに文字を表示する
まず最初に覚えるのが console.log() です。ブラウザの「開発者ツール」のコンソールに文字を表示できます。
console.log('こんにちは！');
console.log(1 + 2); // 3 と表示される変数（へんすう）
変数とは、値を入れておく「箱」のようなものです。let を使って作ります。
let name = '太郎';
let age = 14;
console.log(name); // 太郎
console.log(age); // 14条件分岐（if文）
「もし〇〇なら△△する」という処理を書けます。
let score = 80;
if (score >= 60) {
console.log('合格！');
} else {
console.log('不合格...');
}👉 関数入門も参考にしてください。
ハンズオン：ボタンクリックで動くページを作ろう
実際にJavaScriptを使って、ボタンをクリックするとメッセージが表示されるページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンの練習</title>
</head>
<body>
<h1>ボタンを押してみよう</h1>
<button id="myBtn">クリック！</button>
<p id="message"></p>
<script>
const btn = document.getElementById('myBtn');
const msg = document.getElementById('message');
btn.addEventListener('click', function() {
msg.textContent = 'こんにちは！JavaScriptが動いています！';
});
</script>
</body>
</html>💡 コードの解説：
document.getElementById('myBtn')：id がmyBtnの要素を取得するaddEventListener('click', ...)：クリックされたときに実行する処理を登録するtextContent：要素の中のテキストを変更する
応用：クリックするたびにカウントアップ
<button id="countBtn">押した回数：0</button>
<script>
let count = 0;
const btn = document.getElementById('countBtn');
btn.addEventListener('click', function() {
count = count + 1;
btn.textContent = '押した回数：' + count;
});
</script>ボタンを押すたびに数字が増えていきます。変数 count に現在の回数を記憶させているのがポイントです。
🔥 文字列操作入門で実践してみましょう。
よくある疑問
Q. JavaとJavaScriptは同じもの？
まったく別の言語です。名前が似ているだけで、関係はほとんどありません。Javaはアプリ開発などに使われる言語で、JavaScriptはウェブブラウザで動く言語です。
Q. 何か特別なソフトが必要？
いいえ。JavaScriptはブラウザ（Chrome・Safariなど）があれば動きます。特別なインストールは不要です。HTMLファイルに書いてブラウザで開くだけで試せます。
Q. HTMLとCSSを先に覚えるべき？
はい。JavaScriptはHTMLの要素を操作するので、HTMLとCSSの基本を先に学んでおくとスムーズです。まずHTML → CSS → JavaScriptの順で学ぶのがおすすめです。
💡 fetch入門で基礎を確認できます。
JavaScriptを学ぶときのコツ
JavaScriptは最初から完璧に理解しようとしなくて大丈夫です。まずはコードを写して動かしてみましょう。「動いた！」という体験が一番の学びになります。
エラーが出ても焦らないでください。エラーメッセージには原因が書いてあります。英語ですが、翻訳ツールを使えば意味がわかります。エラーを読んで直す経験を積むことで、少しずつ力がつきます。
わからないことがあったら、コードを1行ずつ減らして確認してみましょう。どの行が問題なのかを特定できれば、解決は近いです。
まとめ
- ✅ JavaScript はウェブページに「動き」を加えるプログラミング言語
- ✅ HTML・CSSと組み合わせて使う（HTML→CSS→JSの順で学ぼう）
- ✅
letで変数を作り、値を記憶できる - ✅
addEventListenerでボタンクリックなどの操作に反応できる - ✅ 特別なソフト不要。ブラウザだけで動かせる
JavaScriptの基本がわかったら、実際にレッスンで手を動かしながら学んでみましょう。クイズアプリや簡単なゲームを作りながら、楽しくプログラミングを身につけられます。
あわせて読みたい記事
- JavaScript練習問題 — 学んだJavaScriptの知識を問題で定着させよう
- 文化祭サイトにJavaScriptで動きをつけよう！ — 実践的なJavaScript活用例