JavaScriptの基本：初心者向けガイド

keigo_fujiwara

2025年1月8日 20:58

JavaScriptとは？

JavaScriptは、Webページに動きを加え、インタラクティブな機能を提供するプログラミング言語です。HTMLとCSSとともに、Web開発の基本を構成する技術の1つです。

以下のような場面で利用されます：

ボタンをクリックしたときに動作を追加
フォームの入力内容を検証
アニメーションや動的なデータ表示

この記事では、JavaScriptの基本的な使い方と構文を初心者向けに解説します。

1. JavaScriptの基本的な使い方

JavaScriptはHTMLと組み合わせて使用されます。

HTMLにJavaScriptを組み込む方法

1.1 スクリプトタグを使う

HTML内に直接JavaScriptを記述する方法。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    alert('JavaScriptが動作しています！');
  </script>
</body>
</html>

1.2 外部ファイルとして分離する

外部ファイルにJavaScriptコードを記述し、HTMLから参照する方法。

example.js

alert('外部ファイルから読み込まれたJavaScriptです！');

HTMLファイル

<script src="example.js"></script>

2. JavaScriptの基本構文

2.1 変数の定義

JavaScriptでは、var、let、constを使用して変数を定義します。

let message = 'こんにちは！';
console.log(message);

2.2 条件分岐

if文を使って条件に応じた処理を記述します。

let number = 10;
if (number > 5) {
  console.log('5より大きい数値です');
} else {
  console.log('5以下の数値です');
}

2.3 ループ処理

繰り返し処理にはfor文を使用します。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

2.4 関数の定義

関数は、再利用可能なコードブロックを定義するために使用します。

function greet(name) {
  return `こんにちは、${name}さん！`;
}
console.log(greet('太郎'));

3. JavaScriptの実践例

簡単なインタラクション

以下のコードは、ボタンをクリックしたときにメッセージを表示します。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <title>インタラクション例</title>
</head>
<body>
  <button id="myButton">クリックしてください</button>
  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      alert('ボタンがクリックされました！');
    });
  </script>
</body>
</html>

まとめ

JavaScriptは、Webページに動きを加え、ユーザー体験を向上させるための強力なツールです。この記事で学んだ基本的な構文と使い方を参考に、自分のWebプロジェクトにJavaScriptを取り入れてみてください。

次回は、JavaScriptを使った動的なデータ操作とDOMの操作方法を解説します。お楽しみに！

筆者について

藤原圭吾

BeEngineer梅田校の責任者
プログラミング教室の運営および授業の実施
情報Ⅰの教材作成および映像授業に出演
アプリ「Let's Code Py」を運営
集客用LINEの運営および広報映像の編集