【第1回】はじめてのJavaScript – 基礎編
プログラミングを始めたい方にとって、JavaScriptは最適な選択肢の一つです。この記事では、JavaScript初心者の方が安心して学習を始められるよう、基礎から丁寧に解説していきます。
・JavaScriptとは何かを理解できる
・基本的な文法（変数・関数・条件分岐）をマスターできる
・HTMLとJavaScriptの連携方法を学べる
・実際に動くサンプルコードを体験できる
JavaScriptって何？なぜ重要なの？
JavaScript（ジャバスクリプト）は、Webページに動きをつけるためのプログラミング言語です。世界で最も使われているプログラミング言語の一つで、初心者にもおすすめです。
JavaScriptの良いところは、すぐに結果が見えることです。ブラウザさえあれば今すぐ始められますよ！
JavaScriptができること
JavaScriptで実現できることは多岐にわたります：
開発環境を準備しよう
JavaScriptを始めるのに特別なソフトウェアはありません。以下があれば十分です：
[table]
| 必要なもの | 説明 | 推奨 | 入手方法 |
|---|---|---|---|
| Webブラウザ | Chrome。Firefox、Safari等 | Google Chrome | |
| テキストエディタ | コードを書くためのツール | Visual Studio Code |
[/table]
基本的な文法を覚えよう
変数（値を保存する箱）
変数は、データを保存するための「箱」のようなものです。JavaScriptでは以下のように書きます：
// 変数の宣言と代入
let name = “田中太郎”; // 文字列
let age = 25; // 数値
let isStudent = true; // 真偽値（Boolean）
// 変数の内容を表示
console.log(name); // “田中太郎”が表示される
console.log(age); // 25が表示される
関数（処理をまとめる仕組み）
関数は。繰り返し使う処理をまとめて名前を付けたものです。
// 関数の定義
function greet(name) {
return “こんにちは。” + name + “さん！”;
}
// 関数の実行
let message = greet(“田中”);
console.log(message); // “こんにちは、田中さん！”
条件分岐（もしも〜なら）
if文を使って、条件に応じて異なる処理を実行できます。
let score = 85;
if (score >= 90) {
console.log(“優秀です！”);
} else if (score >= 70) {
console.log(“良い成績ですね”);
} else {
console.log(“もう少し頑張りましょう”);
}
// 結果：「良い成績ですね」が表示される
HTMLとJavaScriptを連携させよう
JavaScriptの真価は、HTMLと組み合わせた時に発揮されます。実際に動くサンプルを作ってみましょう。
ステップ1: HTMLファイルを作成
まず、basic.htmlという名前でファイルを作成します。
ステップ2: HTMLにJavaScriptを埋め込む
<script>タグを使ってJavaScriptコードを記述します。
ステップ3: ブラウザで動作確認
ファイルをブラウザで開いて動作を確認します。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのJavaScript</title>
</head>
<body>
<h1>JavaScript体験</h1>
<button onclick=”showMessage()”>クリックしてね！</button>
<script>
function showMessage() {
alert(“JavaScriptが動きました！”);
}
</script>
</body>
</html>
よくある間違いと対策
初心者の方がよく遭遇するエラーと対策をご紹介します。
- ・セミコロン（;）の書き忘れ → 習慣として付ける
- ・大文字・小文字の間違い → JavaScriptは区別する
- ・括弧の閉じ忘れ → エディタの自動補完を活用
- ・変数名のスペルミス → 短くて覚えやすい名前にする
- ・console.logでの動作確認を忘れる → こまめにチェック
練習問題にチャレンジ
理解を深めるために、簡単な練習問題に挑戦してみましょう。
以下の機能を持つプログラムを作成してください：
1. ユーザーの名前を変数に保存
2. 年齢を変数に保存
3. 「〇〇さんは△△歳です」と表示する関数を作成
4. 20歳以上なら「成人です」。未満なら「未成年です」と追加表示
次回予告とまとめ
今回は、JavaScriptの基本的な文法とHTMLとの連携方法を学びました。まずはこれらの基礎をしっかりと理解することが重要です。
✓ JavaScriptの基本概念
✓ 変数・関数・条件分岐の書き方
✓ HTMLとJavaScriptの連携方法
✓ 実際に動くサンプルコードの作成
基礎はわかりました！
次はもっと実践的なことを学びたいです。
次回は「JavaScript実践編」として、DOM操作やイベント処理を使って、より動きのあるWebページを作成していきます。ボタンクリックで画像が変わったり、フォームの入力をチェックしたりする機能を実装予定です。
ぜひ今回の内容を実際に手を動かして試してみてください。
コメント