JavaScriptとは？基礎編 - IT / Web / デザイン系お役立ちメディア

JavaScriptは、Webページに動的な機能を追加することができるプログラミング言語です。HTMLやCSSとともに、Web開発の三本柱の一つとして広く使われています。

JavaScriptでできることは非常に多岐にわたり、以下にいくつかの例を挙げます。

ユーザーの入力に応じた動的なWebページの生成
Webページ上でのアニメーションや動きの付加
Webページ上でのデータの取得や送信
ブラウザのストレージにデータを保存して、次回アクセス時に再利用する
外部APIとのデータの受け渡し

JavaScriptを学ぶには、まずは基礎から学ぶことが大切です。以下に、基本的な文法の例を示します。

// 変数の宣言
let name = "John";

// 関数の宣言
function sayHello() {
  alert("Hello, " + name + "!");
}

// 関数の呼び出し
sayHello();

この例では、変数nameに”John”という文字列を代入し、関数sayHello()を宣言しています。関数の中では、console.log()を使って、”Hello, John!”という文字列を出力しています。最後に、sayHello()関数を呼び出すことで、”Hello, John!”という文字列がポップアップボックスがWebページ上に表示されます。

Chromeを使い実際に実行してみます。

右クリックで「検証」を選びます。
次にコンソールというタブがあるので、
>
この記号の隣に先ほどの基本的な文法をコピペしてエンターキーを押します。
そうすると”Hello, John!”というポップアップが表示されます。
※表示されたポップアップはOKを押しても閉じましょう。

変数の宣言と代入

変数は、データを保存するための領域です。以下のように、var、let、constキーワードを使って宣言し、値を代入することができます。

var name = "John"; // 文字列
let age = 30; // 数値
const PI = 3.14; // 定数

varキーワードは、古いバージョンのJavaScriptで使われていた変数宣言の方法です。letはES6で導入された、ブロックスコープを持つ変数宣言方法です。constは、定数を宣言するためのキーワードで、一度値を代入したら変更することができません。

データ型

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

文字列（String）
数値（Number）
真偽値（Boolean）
配列（Array）
オブジェクト（Object）
null
undefined

それぞれのデータ型に対して、異なる演算や操作を行うことができます。たとえば、文字列型に対しては文字列の連結や分割、数値型に対しては四則演算や比較演算、配列に対しては要素の追加や削除などができます。

演算子

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

算術演算子：+、-、*、/、%（剰余）
比較演算子：==、!=、===、!==、>、>=、<、<=
論理演算子：&&（論理積）、||（論理和）、!（論理否定）
代入演算子：=+=-=“*=など

条件分岐

条件分岐は、if文を用いて記述します。以下は、変数ageの値に応じて、メッセージを表示する例です。

let age = 20;
if (age >= 20) {
  console.log("成年です");
} else {
  console.log("未成年です");
}

また、else ifを用いて、複数の条件分岐を行うこともできます。

let score = 80;
if (score >= 90) {
  console.log("優秀です");
} else if (score >= 70) {
  console.log("良いです");
} else if (score >= 50) {
  console.log("普通です");
} else {
  console.log("がんばりましょう");
}

この場合、変数scoreの値が、90以上であれば”優秀です”、70以上90未満であれば”良いです”、50以上70未満であれば”普通です”、50未満であれば”がんばりましょう”が表示されます。

繰り返し処理

JavaScriptにおける繰り返し処理は、for文やwhile文を用いて行います。以下は、for文を使って、1から10までの数字を表示する例です。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

for文では、let i = 1で初期化し、i <= 10で条件を指定し、i++でカウントアップしています。console.log(i)で、変数iの値を表示しています。

また、while文を使って同じことを行うこともできます。

let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

while文では、初期化とカウントアップを手動で行う必要があります。

以上が、JavaScriptの基礎編でした。もちろん、JavaScriptには他にもたくさんの機能や文法がありますが、これらをマスターすることで、より高度なプログラミングが可能になります。

最後に変数の宣言と代入・条件分岐・繰り返し処理を全てまとめた実行してみます。以下のコードを全てコピーして、メモ帳などのエディタで保存します。
ファイル名はindex、ファイルの拡張子（html）として下さい。
このようになればOKです。index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Sample</title>
  </head>
  <body>
    <h1>JavaScript Sample</h1>
    <p id="message"></p>
    <script>
      // 変数の宣言と代入
      let message = "Hello, World!";
      console.log(message);

      // 条件分岐
      let score = 80;
      if (score >= 90) {
        console.log("優秀です");
      } else if (score >= 70) {
        console.log("良いです");
      } else if (score >= 50) {
        console.log("普通です");
      } else {
        console.log("がんばりましょう");
      }

      // 繰り返し処理
      for (let i = 1; i <= 10; i++) {
        console.log(i);
      }

    </script>
  </body>
</html>

保存をしたら、ブラウザで開きます。
真っ白い画面に「JavaScript Sample」と書かれています。

次にChromeであれば、右クリックで「検証」を選びコンソールを見て下さい。

Hello, World!
良いです
1
2
3
4
5
6
7
8
9
10

このような内容が表示されていますね。
これは先ほど書いたJavaScriptの実行結果になります。

いかがだったでしょうか。この記事では「JavaScriptとは？基礎編」と題しJavaScriptの基礎をご紹介しました。