コンテンツにスキップ

JavaScriptの基礎

言語の特徴など

Wikipediaの解説@

  • 動的なウェブサイト構築などを目的として作られたスクリプト言語（もともとはNetscape社が開発．1995年に登場）
    • 大半のウェブブラウザに実行環境が実装されている.
    • 最近は標準化団体Ecma Internationalによって，ECMA Scriptという名称で共通仕様が定められつつある
    • 特に，2015年のES2015（ES6）の策定により，JavaScriptを取り巻く環境は激変した
  • 非常に多くのライブラリ（フレームワーク）があり，大規模開発にも使われる．
  • node.js等の登場（2009年）により，サーバサイドでJavaScriptを実行する環境も整いつつある．
  • Java言語とは異なるが，構文的には似た点も多い.（C言語にも似たところがある）

JavaScriptで書かれたプログラムの実行方法

ブラウザを使う

chromium-browserやFirefox（でなくても，大抵のブラウザならOK）を起動して，アドレス入力欄に

javascript: alert("Hello, world!");

などと入力すれば（1行スクリプトではあるが）実行できる．C言語ライクに書くなら

javascript: console.log("Hello, world!");

である．console.logを使った場合は何も表示されず，実行されていないように見えるが，Firefoxの場合ならF12キー（またはCtrl+Shift+Iでも良い），あるいは「ツール」メニューから「ウェブ開発」「開発ツールを表示」とすると開発者ツールウィンドウが現れるので，その中から「コンソール」タブを選択すればHello, world!がちゃんと出力されていることが確認できる．

さて，複数行に渡るプログラムを実行する場合，アドレス入力欄に（セミコロンで区切られた命令文を）すべて入力するのは大変なので，別途，HTMLを書いてその中に実行したいJavaScriptプログラムを埋め込み，そのHTMLをブラウザに読み込ませることが行われる．

HTMLの解説ページにも少しだけ記載しているが，次のようなひな型を基本として，これをブラウザで開けばよい．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
      <title>文書タイトル</title>
      <meta charset="utf-8" />
      <script type="text/javascript">
            ここにスクリプト（プログラム）を記述
      </script>
    </head>
    <body>
      <!-- scriptタグはbodyタグの内部にあってもOK -->
      <script type="text/javascript">・・・</script>
    </body>
</html>

なお，HTMLファイル中に直接，プログラムを記述しなくても，6行目（や12行目）の部分を

6
<script type="text/javascript" src="prog.js"></script>

と書き換えて，ファイルprog.jsの内部にJavaScriptプログラムを記述しても構わない．JavaScriptプログラムのファイル拡張子は通常，.jsである．

確認

<script>タグのsrc属性に記述するファイルの実際の存在位置に注意すること．この例の場合はHTMLファイルと同じディレクトリ内にあること．

ブラウザを使わない場合

いろいろ方法があるが，この講義では（サーバサイドのJavaScript実行環境である）node.jsを使った実行をお勧めする．特に，通信系のソフトウェア開発を行う班は今後もnode.jsを頻繁に使うことになるだろう．

最新版node.jsの環境を作成する手順については別ページで．

node.jsが利用できる環境であれば，

$ node sample.js

とすればJavaScriptで書かれたプログラムsample.jsを実行することができる．

基本文法

print

いわゆるC言語のprintf()，あるいはJava言語のprintln()に相当する関数は，JavaScriptには定義されていない！ので，通常はconsole.log()を使う．console.logでは，文字列に限らず，さまざまなオブジェクトを出力できる．

1
2
console.log("Hello!");
console.log([1, 2, 3]);
  • もちろん，alertを使う手もある．
  • HTMLとの連携を前提としてよいなら，HTML文書中に直接書き込むdocument.write()とかdocument.writeln()などもある．

コメント

C言語やJava言語と同様に書ける．

1
2
3
4
// 1行コメント
/* 複数行に
　　渡るコメント */
var i = 0;  // 行の途中からでも書ける

文

これもC言語やJava言語と同様で，文の最後にセミコロン（;）を付ける必要がある．

変数

varで宣言する（ES2015からはletやconstも追加された）．JavaScriptにおける基本型には boolean，number，stringの3種類がある（逆に言えばこれしかない）が，型による宣言の仕方に違いは無い．

1
2
3
4
var boolVal = true;
var intVal = 1;
var doubleVal = 1.0;
var strVal = "Hello";

変数の型はtypeof演算子で調べることができる．

5
6
7
8
console.log(typeof(boolVal)); // "boolean"
console.log(typeof(intVal)); // "number"
console.log(typeof(doubleVal)); // "number"
console.log(typeof(strVal)); // "string"

C言語などに比べて大きく違うのは，変数自体には型が無く，自由に代入できる，という点がある．つまり，

 9
10
strVal = intVal;
console.log(strVal);  // "1"と表示

が普通に書けてしまうので注意すること．（グループ開発時は特に気をつける必要があるかも！）

また，数値（number型）に関しても，すべてが実数として扱われ，"整数型"という型はないので注意しよう．

演算

演算結果は全て実数（number）型になる．

1
2
3
4
5
var a = 2 + 3;   // 5
a = 1 - 4;       // -3
a = 2 * 3;       // 6
a = 5 / 2;       // 2.5 （整数同士でも結果は実数）
a = 7 % 6;       // 1

代入演算子，インクリメント，デクリメント

C言語と全く同様に使える．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var a = 0;
a += 1;  // 1
a -= 2;  // -1
a *= 3;  // -3
a /= 3;  // -1
a = 0;
var b = a++;  // a:1, b:0
var c = ++a;  // a:2, c:2
var d = a--;  // a:1, d:2
var e = --a;  // a:0, e:0

文字列

  • シングルクォート（'）またはダブルクォート（"）で囲む
  • \t（タブ）や\n（改行）などの特殊文字も利用できる
1
2
var a = "abc\tdef"; // "abc[タブ]def"
var b = 'abc\ndef'; // "abc[改行]def"

配列

配列の生成

1
2
3
var ary1 = ["Sato","Suzuki"];  // ["Sato", "Suzuki"]
var ary2 = new Array(2);       // [undefined, undefined]
var ary3 = new Array(1, 2, 3); // [1, 2, 3]
  • JavaScriptには値が存在しないことを示す特別なundefined値がある

配列の参照と代入

1
2
3
4
var ary = [1, 2, 3];
ary[2];         // 3  （添字は0から，C言語と同じ）
ary[0] = 3;     // ary: [3, 2, 3]
ary[4] = 'abc'; // ary: [3, 2, 3, undefined, "abc"]
  • JavaScriptの場合，範囲外アクセスが普通に可能なので注意すること！

要素の個数

1
2
var ary = [1, 2, 3];
ary.length;  // 3

配列の操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var ary = ["sato", "suzuki", "tanaka"];

// 先頭を取り出す
var a = ary.shift(); // a:"sato", ary:["suzuki", "tanaka"]

// 先頭に追加
ary.unshift(10);     // ary:[10, "suzuki", "tanaka"]

// 末尾を取り出す
var b = ary.pop();   // b:"tanaka", ary:[10, "suzuki"]

// 末尾に追加
ary.push("kato");    // ary:[10, "suzuki", "kato"]
  • 他にも，ary.{slice(),splice(),concat(),sort(),reverse(),filter(),map()}などの便利なメソッドが存在するので，必要な場合は調べてみよう．

連想配列

JSON記法（JavaScript Object Notation）を使うと，オブジェクトを連想配列のように扱うことができる．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var persons = [
  {
    "age": 10,
    "name": "Taro",
  },
  {
    "age": 9,
    "name": "Hanako"
  },
];
persons[0].name;   // "Taro"　（プロパティ風アクセス）
persons[1]['age']; // 9　（連想配列風アクセス）
  • 要は，配列（Array）を[，]で，オブジェクト（Object）を{，}で記述する，というルール
  • オブジェクトについては，応用編のページで．

文字列操作

結合

1
2
var join1 = 'aaa' + 'bbb';              // "aaabbb"
var join2 = ['cc','dd','ee'].join('!'); // "cc!dd!ee"

分割

1
var separate = 'aa,bb,cc.dd,ee'.split(','); // ['aa','bb','cc.dd','ee']

文字数（文字列の長さ）

1
2
var len  = 'abcdefg'.length;  // 7
var jlen = "あいうえお".length; // 5

検索

1
2
3
// 見つかった場合はその位置の添数，見つからなかった場合は-1
var pos1 = 'abcdefg'.indexOf('def'); // 3
var pos2 = 'abcdefg'.indexOf('gh');  // -1

切り出し

1
var substr = 'abcdefg'.substr(2,4); // 開始添数，切り出し文字数 -> "cdef"

条件式

これもC言語とほぼ同様だが，真の場合にはtrue，偽の場合にはfalseが返される． （戻り値がboolean型，ということ）

代表的な条件式は以下．

条件式 説明
a == b aとbの値が等しい
a != b aとbの値が違う
a < b aよりbが大きい
a > b aの方がbより大きい
a <= b aはb以下
a >= b aはb以上
a && b aかつbが成り立つ
a || b aまたはbが成り立つ

JavaScriptでは===（厳密等価演算子）という演算子があるので覚えておこう． 等価演算子==と厳密等価演算子===の違いを表す例を以下に示す．

console.log(1 == 1); // true
console.log(1 === 1); // true

console.log('abc' == 'abc'); // true
console.log('abc' === 'abc'); // true

console.log('1' ==  1);  // true
console.log('1' ===  1);  // false

console.log(0 == false); // true
console.log(0 === false); // false

制御文

if文やif-else文はC言語とほぼ同様に書ける．

if (条件式) {
  文1;
  文2;
}

if (条件式) {
  文1;
} else {
  文2;
}

if (条件式1) {
  文1;
} else if (条件式2) {
  文2;
} else if (条件式3) {
  文3;
} else {
  文4;
}

while文もC言語と同様．

while (var i < 5) {
  ...
  i++;
}

for文もC言語と同様．

for (var i = 0; i < 5; i++) {
  ...
}
  • for〜inなどの構文もあるので調べてみよう．

switch〜case文もC言語とほぼ同様だが，caseの後に評価値を書ける点が異なる．

var a = 10
switch (a) {
  case 5 + 3:
    console.log('Case 5+3');
    break;
  case 5 + 5:
    console.log('Case 5+5');
    break;
  default:
    console.log('Other');
    break;
}

関数

JavaScriptにおける関数定義は以下のように記述する．

function add(a, b) {
  return a + b;
}

JavaScriptの関数は，変数に代入することもできる．（関数式）

var sum = function(a, b) {
  return a + b;
};

ちなみに，変数や関数のスコープはC言語と同様に考えてOK．

簡単なJavaScriptプログラム例

現在時刻の表示

（言語にあらかじめ用意されている）組み込みオブジェクトDateを使う．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>現在時刻をアラート表示</title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            dt = new Date();
            h  = dt.getHours();
            m  = dt.getMinutes();
            s  = dt.getSeconds();
            alert('今は' + h + '時' + m + '分' + s + '秒' + 'です');
        </script>
    </head>
    <body></body>
</html>

指定日までの残り日数表示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>残り日数の表示</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function howManyDays(year, month, day) {
        today = new Date();
        targetday = new Date(year, month-1, day);
        oneday_ms = 24 * 60 * 60 * 1000; //1日は何[ms]?
        remaindays = Math.floor((targetday.getTime() - today.getTime())/oneday_ms) + 1;
        document.write(remaindays);
      };
    </script>
  </head>
  <body>
  ソフ演最終発表(2023年7月28日)まで あと<font color="#ff0000" size="6">
  <script type="text/javascript">howManyDays(2023, 7, 28);</script>
  </font>日 です！
  </body>
</html>

スクロール

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>スクロールサンプル</title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            var interval = 5;
            var y        = 0;
            function scrollPage() {
                window.scrollTo(0, y++); // スクロールを (x座標,y座標) = (0,y++) の位置へ動かす
                if (y > 0) {
                    setTimeout("scrollPage()", interval); // interval[ms]後に1度呼ぶ
                }
            }
        </script>
    </head>
    <body>
    <input type="button" value="スクロール開始！" onClick="scrollPage()"><br>
    ...
    （省略）ここに改行をたくさん入れると，ボタンを押したあとに自動でスクロールする様子が見れます．
    ...
    </body>
</html>