JavaScriptの基本は？

JavaScript の基礎知識

JavaScript の基礎知識

JavaScriptとは、Webブラウザ上で動作するスクリプト言語の一つで、動的なWebページを作成するために使用されるプログラミング言語のことです。 Webブラウザの機能を制御し、動的な操作やアニメーション、ユーザーとのインタラクション、データの検証や処理などを実現できます。

JavaScript でできること

  • HTML コンテンツの変更
  • CSS スタイルの変更
  • アニメーションの実行
  • ユーザーイベントの処理 (クリック、マウスオーバーなど)
  • フォームの入力検証
  • Web サーバーとの非同期通信 (Ajax)

基本的な文法

変数の宣言

JavaScript では、変数を宣言するために var, let, const を使用します。


  <script>
    var name = "太郎"; // varは古い書き方なので、letやconstを使う方が推奨されます。
    let age = 20;
    const isAdult = true;
  </script>

データ型

JavaScript には、以下のようなデータ型があります。

データ型 説明
Number 数値を表す (例: 10, 3.14)
String 文字列を表す (例: "Hello", 'World')
Boolean 真偽値を表す (true または false)
Object オブジェクトを表す (キーと値のペア)
Array 配列を表す
Null 値がないことを表す
Undefined 変数が初期化されていないことを表す

演算子

JavaScript には、以下のような演算子があります。

演算子 説明 例
+ 加算 1 + 2
- 減算 5 - 3
* 乗算 2 * 4
/ 除算 10 / 2
% 剰余 7 % 3
= 代入 x = 10
== 等価演算子 10 == 10
=== 厳密等価演算子 10 === "10"
!= 非等価演算子 10 != 5
!== 厳密非等価演算子 10 !== "10"
> より大きい 10 > 5
< より小さい 5 < 10
>= 以上 10 >= 10
<= 以下 5 <= 10

制御文

JavaScript には、以下のような制御文があります。

  • if 文
  • switch 文
  • for 文
  • while 文

関数


  <script>
    // 関数の定義
    function greet(name) {
      console.log("こんにちは、" + name + "さん！");
    }

    // 関数の呼び出し
    greet("太郎"); // 出力: こんにちは、太郎さん！
  </script>

DOM 操作

JavaScript を使用すると、HTML の要素を取得したり、変更したりすることができます。


  <h1 id="title">タイトル</h1>

  <script>
    // ID "title" を持つ要素を取得
    const titleElement = document.getElementById("title");

    // 要素の内容を変更
    titleElement.textContent = "新しいタイトル";
  </script>

イベント

JavaScript を使用すると、ユーザーの操作 (クリック、マウスオーバーなど) に応じて処理を実行することができます。


  <button id="myButton">クリック</button>

  <script>
    // ID "myButton" を持つボタン要素を取得
    const button = document.getElementById("myButton");

    // クリックイベントリスナーを追加
    button.addEventListener("click", function() {
      alert("ボタンがクリックされました！");
    });
  </script>

参考資料

よくある質問

Q1: JavaScript と Java は同じものですか？

A1: いいえ、JavaScript と Java は全く別のプログラミング言語です。名前が似ていますが、文法や用途が異なります。

Q2: JavaScript を学ぶには、どのような教材がおすすめですか？

A2: 上記の参考資料に加えて、オンライン学習サイト (Progate、ドットインストールなど) や書籍もおすすめです。自分に合った教材を選びましょう。

Q3: JavaScript でどのようなことができますか？

A3: JavaScript を使用すると、Web ページに動的な要素を追加したり、ユーザーとのインタラクションを実現したりすることができます。例えば、アニメーション、フォームの入力検証、非同期通信 (Ajax) などを行うことができます。

その他の参考記事:JavaScript の使用に関する誤解