みなさんこんにちは。
前回はAI（画像認識）に挑戦して、Pythonで猫と犬を分類するアプリを作ってみました。
今回は新たな言語としてJavaScriptを学んでいこうと思います！
JavaScriptはWebサイトの画面に動きをつける言語です。
Pythonとはまた違った楽しさがあるので、ぜひ一緒に学んでいきましょう。
1. はじめに：Pythonの次はなぜJavaScript？Webの動きの秘密を解き明かそう！
PythonはAIやデータ分析、それにWebサービスの「裏側」（サーバーサイド）で大活躍する言語でしたね。でも、皆さんが普段見ているWebサイトのボタンが動いたり、画像がぐるぐる表示されたりする「見た目」の部分、あれを動かしているのはほとんどがJavaScriptなんです！
Webサイトは、主に3つの要素でできています。
- HTML: Webページの骨組み（見出し、段落、ボタンなど）
- CSS: Webページのデザインや見た目（色、形、配置など）
- JavaScript: Webページに動きやインタラクティブな要素（ボタンをクリックしたら何か起きる、画像が切り替わるなど）を加える
この記事では、このJavaScriptを使って、Webページに動きを加える方法を学んでいきます。
記事のゴール
- JavaScriptの基本的な文法を理解できる。
- Webブラウザの「開発者ツール」でJavaScriptコードを動かせるようになる。
- HTMLのボタンをクリックすると、画像が変わる簡単なWebアプリを作成できる。
記事の対象読者
- 過去の記事でPythonを学び、JavaScriptをこれから学ぶ方。
- Webサイトの「動き」がどう作られているか興味がある方。
- ブラウザだけで手軽にプログラミングを体験したい方。
2. 環境構築：特別な準備は不要！ブラウザでJSを動かそう
Pythonでは、コードを書くために「Visual Studio Code（VS Code）」といったエディタや、Python本体のインストールが必要でした。でも、JavaScriptはもっとお手軽です。
実は、皆さんがいつも使っているWebブラウザで、JavaScriptを実行することができます！
特別なインストールは一切不要。ブラウザの「開発者ツール」を使えば、すぐにJavaScriptコードを書き始めることができます。
Google Chrome（推奨）での開発者ツールの開き方
- Google Chromeを開きます。
- キーボードのF12キーを押すか、Webページ上で右クリックし、「検証」を選びます。
- 開発者ツールが開いたら、「Console（コンソール）」タブをクリックします。
これで準備完了です！早速、最初のJavaScriptコードを書いてみましょう。
コンソールに以下のコードを直接入力してEnterキーを押してみてください。
console.log("Hello, JavaScript!");
実行結果:
Hello, JavaScript!
「Hello, JavaScript!」と表示されましたね！
console.log()はPythonのprint()と同じように、画面に文字を表示する命令です。
3. 基礎編：Pythonとココが違う！JSの基本文法をマスターしよう
Pythonを触ったことがある皆さんなら、プログラミングの基本的な考え方はすでに理解できているはずです。変数、関数、条件分岐、繰り返し…これらの概念はJavaScriptでも同じですが、書き方（文法）が少し異なります。その違いに注目しながら見ていきましょう。
3.1. 変数：データの箱 let と const
Pythonでは= で変数に値を入れましたが、JavaScriptではletやconstというキーワードを使って変数を宣言します。
// let は後で中身を変えられる箱（Pythonの変数に近い）
let message = "こんにちは、世界！";
console.log(message); // 結果: こんにちは、世界！
message = "JavaScript楽しい！"; // 中身を変更できる
console.log(message); // 結果: JavaScript楽しい！
// const は一度入れたら中身を変えられない箱（定数）
const PI = 3.14;
console.log(PI); // 結果: 3.14
// PI = 3.14159; // エラーになります！一度決めたら変えられない
【ポイント】
-
letとconstの使い分け？:letを使えばよくない？と考えてしまいますが、JavaScriptでは基本的にconstを使うのが主流です。中身を変える必要がないならconstを使うことで、意図しない変更を防ぎ、コードを安全に保てます。
3.2. データ型：Pythonと似ているけど…
JavaScriptもPythonと同じように、文字列、数値、真偽値（True/False）、配列、オブジェクトといったデータ型を扱います。
// 文字列（string）: シングルクォーテーション('')またはダブルクォーテーション("")で囲む
let name = "太郎";
let greeting = 'こんにちは';
console.log(name, greeting);
// 数値（number）: そのまま書く
let age = 25;
let price = 100.50;
console.log(age, price);
// 真偽値（boolean）: true または false
let isStudent = true;
let hasPassed = false;
console.log(isStudent, hasPassed);
// 配列（array）: 複数の値をまとめて保存（Pythonのリストと同じ）
let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits[0]); // 結果: りんご
// オブジェクト（object）: キーと値のペアでデータを保存（Pythonの辞書と同じ）
let person = {
name: "花子",
age: 30,
city: "東京"
};
console.log(person.name); // 結果: 花子
console.log(person["age"]); // 結果: 30
3.3. 関数：処理をまとめるブロック
Pythonのdefで関数を定義したように、JavaScriptではfunctionキーワードやアロー関数を使って関数を定義します。
アロー関数は、最近のJavaScriptでよく使われる、より短く書ける便利な書き方です。
// functionというキーワードで関数を定義します
function multiplyByTwo(number) {
return number * 2;
}
console.log(multiplyByTwo(5)); // 結果: 10
// アロー関数（より短く、シンプルに書ける）
// constで定義し、引数の後に => を書くのが特徴です
const multiplyByTwoArrow = (number) => {
return number * 2;
};
console.log(multiplyByTwoArrow(5)); // 結果: 10
【アロー関数】
「あれ？アロー関数全然短くなってないじゃん。」って思いましたが、
アロー関数は、処理が1行で終わる場合にさらにシンプルに書くことができるんです。
以下の例を見てみましょう。
// 処理が1行だけの場合、return と 波括弧 {} を省略できます
const multiplyByTwoShort = (number) => number * 2;
console.log(multiplyByTwoShort(5)); // 結果: 10
どうですか？コードがぐっと短くなりましたよね。このシンプルな書き方ができるから、アロー関数はとても人気なんです。
3.4. 条件分岐（if/else）と繰り返し（forループ）
基本的な考え方はPythonと同じですが、構文が少し異なります。JavaScriptでは、条件や処理を()や{}で囲むことが多いです。
// 条件分岐（if/else）
let score = 85;
if (score >= 80) {
console.log("合格です！");
} else if (score >= 60) {
console.log("もう少し頑張りましょう。");
} else {
console.log("不合格です。");
}
// 繰り返し（forループ）
// i が 0 から始まり、4になるまで繰り返す（0, 1, 2, 3）
for (let i = 0; i < 4; i++) {
console.log(i + "回目の繰り返し");
}
// 配列の中身を一つずつ取り出す forEach
const colors = ["赤", "青", "黄"];
colors.forEach(function(color) {
console.log(color);
});
【ポイント】
-
セミコロン（
;）は必要？: JavaScriptの命令の最後にはセミコロンをつけるのが一般的ですが、つけなくても動く場合が多いです。ただし、つけておいた方がトラブルが少ないので、最初はつける癖をつけておくといいでしょう。 -
波括弧（
{}）と丸括弧（()）: 条件や関数の処理ブロックは{}で囲み、条件式や引数は()で囲む、というルールは慣れるまで少し時間がかかりました。Pythonのインデントとは違うので注意が必要です。
4. 実践編：WebページをJSで動かす！ボタンで画像を変えるアプリを作ろう
いよいよ実践です！Webページの要素（ボタンや画像）をJavaScriptで操作してみましょう。
今回は、ボタンをクリックすると画像が切り替わるシンプルなアプリを作ります。
4.1. HTMLの準備：Webページの骨組み
まずは、Webページの骨組みとなるHTMLファイルを作成します。VS Codeなどのテキストエディタで、index.htmlという名前でファイルを保存し、以下のコードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS入門アプリ</title>
<!-- 後でCSSファイルを読み込みます -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>画像切り替えアプリ</h1>
<button id="changeImageBtn">画像を変える</button>
<br>
<img id="myImage" src="https://placehold.co/300x200/FF0000/FFFFFF?text=画像1" alt="現在の画像" width="300" height="200">
<!-- 後でJavaScriptファイルを読み込みます -->
<script src="script.js"></script>
</body>
</html>
id="changeImageBtn"とid="myImage"という部分に注目してください。
JavaScriptでこれらの要素を操作するために、目印としてidをつけています。
4.2. CSSの準備：見た目を整える（オプション）
次に、Webページの見た目を少しだけ整えます。index.htmlと同じフォルダにstyle.cssという名前でファイルを作成し、以下のコードを貼り付けてください。
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin-bottom: 20px;
cursor: pointer;
}
img {
border: 2px solid #333;
border-radius: 8px;
}
4.3. JavaScriptで動かす！
最後に、JavaScriptのコードを書いて、HTML要素を操作します。
index.htmlやstyle.cssと同じフォルダにscript.jsという名前でファイルを作成し、以下のコードを書いてみてください。
// 操作したいHTML要素をJavaScriptで取得します
// document.getElementById()は、HTMLのIDを使って要素を見つけ出してくれます
const changeImageBtn = document.getElementById('changeImageBtn'); // 画像を変えるボタン
const myImage = document.getElementById('myImage'); // 表示する画像
// 画像のURLを配列にまとめておきます
const imageUrls = [
"https://placehold.co/300x200/FF0000/FFFFFF?text=画像1", // 赤い画像
"https://placehold.co/300x200/00FF00/FFFFFF?text=画像2", // 緑の画像
"https://placehold.co/300x200/0000FF/FFFFFF?text=画像3" // 青い画像
];
let currentIndex = 0; // 現在表示されている画像のインデックス（番号）
// ボタンがクリックされた時の処理を設定します
// addEventListener()は、「〇〇が起きたら、この処理を実行してね」という設定です
changeImageBtn.addEventListener('click', () => {
// 現在の画像のインデックスを1つ進めます
currentIndex++;
// もしインデックスが画像の枚数を超えたら、0に戻します（最初に戻る）
if (currentIndex >= imageUrls.length) {
currentIndex = 0;
}
// 画像のsrc属性（画像のURL）を新しいURLに変更します
myImage.src = imageUrls[currentIndex];
});
console.log("JavaScriptコードが読み込まれました！");
【ポイント】
-
DOM操作:
document.getElementById()や.srcのように、HTMLの要素をJavaScriptから直接いじれるのが「DOM操作」です。WebページはJavaScriptを通して操作できる「オブジェクト」の集まりとして扱われます。この概念がWebアプリの動きの根幹なので、慣れるまで練習あるのみです！ -
イベントリスナー:
addEventListener('click', ...)のように、「〇〇が起きたら（イベント）、この処理を実行する（リスナー）」という考え方です。ユーザーの操作にWebページが反応するための仕組みですね。
4.4. 完成！ブラウザで動かしてみよう！
作成したindex.htmlファイルを、Webブラウザ（Chromeなど）で直接開いてみてください。
「画像を変える」ボタンをクリックすると、画像の色やテキストが切り替わるはずです。
できるようになっていくと「プログラミングたのしー！」ってなりますよね！
この気持ちでどんどん新たなものを一緒に学んでいきましょう。
5. まとめ：JSの第一歩を踏み出せたあなたへ！
皆さん、お疲れ様でした！
この記事を通じて、あなたは以下のJavaScriptの基本をマスターしました。
- WebブラウザがJavaScriptを実行する環境であること
- 変数、データ型、関数、条件分岐、繰り返しといった基本文法
- Webページの要素をJavaScriptで操作するDOM操作
- ボタンクリックなどのイベントを検知して処理を実行する方法
Pythonとは少し違った書き方に戸惑ったかもしれませんが、基本的な考え方は同じなのでやっていくと自然と慣れていくと思います。
今回の知識は、Web開発における最も基本的な「見た目を動かす」部分です。
次はFacebook（現Meta）が開発した人気のライブラリ、Reactを使って、より効率的でモダンなWebページの作り方を学んでいきましょう！