Quick Reference¶

i. 文法要素¶

i.1 命令¶

命令は ; (セミコロン)で終わる。1行に複数命令を書くこともできる。

var x;
var y,z;
x = 3;
x = x + 1; y = 2;

i.2 コメント¶

コメントは // または /* ... */ であらわす。

x = 1; // 行末までのコメント
y = 1; /* この場合は
複数行にわたり、コメント
として解釈される。
*/   z = 1;

i.3 文字と文字列¶

i.3.1 引用符¶

文字列は 'aaa' (シングルクオート)または "aaa" (ダブルクオート) であらわす。文字列中にシングルクオート、ダブルクオートを使う場合以下のいずれかの方法を用いる。

"文字列"         // " で囲う
'string'        // ' で囲う
'引用符号"'      // 'で"を
"引用符号'"      // "で'を
'引用符号"と\''  // \' は文字列の'となる

ii.3.2 文字列中の改行

文字列中の改行は \n (バックスラッシュ+n)で表す。文字列に改行を含めずプログラムを改行したい場合は文字列を区切り, + で結合する。

'line\\nline2'   // \\n 改行記号
"次の行と" +     // プログラムが改行しても
"結合される"

i.3.3 文字コード¶

改行などのコードは、以下のようにコードを指定するか、エスケープ記号であらわす。

記号	コード名	コード
\'	引用符	39
\"	二重引用符	34
\ \	バックスラッシュ	60
\n	改行	10
\r	キャリッジリターン	13
\v	垂直タブ	11
\t	水平タブ	9
\b	バックスペース	8
\f	フォームフィード	12

i.3.4 文字コード¶

以下は文字コードを指定する場合。

\uXXXX	unicode
\u{X}	unicode
\XXX	8進文字コード

i.3.5 バックスラッシュ¶

VS Code では\(バックスラッシュ)を使うことが多い。日本語キーボードを使っている場合、￥(円マーク)キーと\(バックスラッシュ)キーは、いずれも同じ\(バックスラッシュ)を入力するために使うことができる。

入力したプログラムをファイルに保存して Word やメモ帳で開いたり、一部をWord やメモ帳にコピペすると、 \(バックスラッシュ)は￥(円マーク)にかわる。

これらは歴史的な経緯で、まったく同じ文字であり、表示する状況によって表示が\(バックスラッシュ)や￥(円マーク)にかわる。日本語表示の環境では￥を表示するようにすることが多い。 VS Code ではプログラムを見やすくするため、 \(バックスラッシュ)の表示を採用している。

i.4 if¶

// もし x が　4 以下なら x++
if (x <= 4) {
  x++;
}

// もし x が 0 なら x=8, そうでなければ x--
if (x==0) {
  x=8;
}
else {
  x--;
}

// もし x が 0 なら x=8, 4以上なら x--
if (x==0) {
  x=8;
}
else if (x >= 4) {
  x--;
}

i.5 for¶

for(n=0; n++; n<5) {
  console.log('print this 5 tines');
}

i.6 function (関数)¶

function make_it_double(x) {
  return(x * 2);
}

i.7 無名関数(Anonymous Function)¶

関数定義で関数名が省かれた形をしていて、その形のとおり無名関数と呼ばれる。そのまま変数に代入すると、その変数を関数のように使うことができる。

z = function(x,y){return x % y};
q = z(9,5);  // 結果は 4 になる

この例では function 以下が無名関数で、この部分には関数名がない。変数 z に代入することにより変数 z をあたかも z という名前の関数のように使うことができ、 z(9,5) が実行されて 4 が得られる。

i.8 オブジェクト¶

プロパティを持つオブジェクトを定義し、作成して、それぞれ独立したオブジェクトとして利用できる。

以下のように this.プロパティ名によってプロパティを表す。

this.c1

オブジェクトを複数作成すると、それぞれのプロパティは独立した値になる。

以下の構文でメソッドを定義できる。prototypeは予約語。

関数名.prototype.メソッド名 = function(...) {
  ...
}

例を示す。以下では up_counter というオブジェクトと、 up というメソッドを定義している。

// up_counter を定義する
function up_counter(){
  this.c = 0;  // new で生成時は c を 0 リセット
}
// up メソッドを定義する
up_counter.prototype.up = function() {
  this.c ++; // c を +1 する
  console.log("count=",this.c);
}

そして以下では up_counter を使って x1 , x2 を定義し、それぞれ独立にカウントすることができる。

// x1, x2 を counter1 として定義する
x1 = new up_counter();
x2 = new up_counter();
// それぞれ独立にカウントできる
x2.up();  // 1
x2.up();  // 2
x1.up();  // 1
x2.up();  // 3

i.9 require¶

Node.js で以下構文で http モジュールをロードする。

http1 = require('http');

http はモジュール名、http1 はモジュールを使うための変数名。自分でモジュールを作ることも可能。

ii. データ型¶

ii.1 単純データ型¶

数値, 文字列, 論理値

型	例	説明
数値	123	数 123
	123e23	123 × 10^23
	0x1234	1234(16進)
	0b1101	1101(2進)
文字列	'abc'	文字列 abc
	"abc"	文字列 abc
	'ab"c'	文字列 ab"c
	"ab'c"	文字列 ab'c
	"a"'bc"	文字列 a"b'c
論理値	true	真
	false	偽

ii.2 複合データ型¶

ii.2.1 配列¶

配列の要素は数字で指定することができる。

var x = new Array();
x[1] = 111;
x[3] = 222;

Array(3) とすれば、x[0]～x[2]が確保される。

var x = new Array(3);
x[1] = 111;
x[2] = 222;

ii.2.2 オブジェクト¶

オブジェクトにプロパティを設定できる。

var x= new Object();
x.name = 'apple';
x.color = 'red';
x.shape = 'round';

ii.2.3 連想配列¶

配列の添え字に文字列を使うことができる。

var x = new Array();
x["name"] = "apple";
x["color"] = "red";
x["shape"] = "round";

連想配列はプロパティと同じである。以下はすべて同じ結果になる。

x.name
x["name"]
x["na"+"me"]

ただし、配列の添え字は式であるが、プロパティは式ではないから、以下は Syntax Error (文法エラー) となる。

x.("na" + "me")

ii.3 特別なデータ型¶

Null, Undefined

iii.演算子¶

iii.1 代入、副作用のある演算¶

(結果は実行前 x=5 に対する実行後の x の値)

演算	記号	例	結果
代入	=	x=3	3
インクリメント	++	++x	6
デクリメント	--	--x	4

iii.2 加減乗除とマイナス¶

数値に対する演算(結果はx=8, y=3 の場合)

演算	記号	例	結果
加算	+	x + y	11
減算	-	x - y	5
乗算	*	x * y	24
除算	/	x / y	2
剰余	%	x % y	2
マイナス	-	-x	-8

iii.3 比較演算¶

比較理演算子(結果はx=8, y=3 の場合)

演算	記号	例	結果
小さい	<	x < y	false
大きい	>	x > y	true
以下	<=	x <= y	false
以上	>=	x >= y	true
等しい	==	x == y	false
等しくない	!=	x != y	true
厳密等価	===	x === y	false
厳密非等価	!==	x !== y	true

iii.4 論理演算¶

論理演算子(結果は x = True, y = False の場合)

演算	記号	例	結果
Not	!	!x	False
論理And	&&	x && y	False
論理Or	\|\|	x \|\| y	True
条件	?	x ? 2 : 3	2

iv. 標準ビルトインオブジェクト¶

標準ビルトインオブジェクトの主なものをあげる。その他の標準ビルトインオブジェクトは以下を参照してほしい。 Mozilla 標準ビルトインオブジェクト

iv.1. 数値¶

toString(10) は数を文字列に変換する。

var x = 12;
console.log(x.toString(10));
console.log(x.toString(2));
console.log(x.toString(8));
console.log(x.toString(16));

結果

10は基数を指定している。例では10進、10進、8進、16進で出力している。

その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。以下キーワードで検索すると詳細な仕様を調べることができる。

javascript standard built-in number string

iv.2. Math¶

Math はビルトインオブジェクトで以下のメソッドがある。

関数	説明
Math.floor(x)	xを切り捨てる
Math.abs(x)	\|x\| 絶対値
Math.PI	円周率
Math.E	e
x=Math.random()	0<=x<1の乱数
Math.sin(x)	sin(x)
Math.cos(x)	cos(x)
Math.tan(x)	tan(x)
Math.exp(x)	e^x
Math.log(x)	log(x) 自然対数
Math.pow(x,y)	x^y (xのy乗)

その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。以下キーワードで検索すると詳細な仕様を調べることができる。

JavaScript standard built-in object math

iv.3. 文字列¶

文字列に対しては長さ(length)が property として得られる。また toUpperCase、toLowerCase など多くのメソッドがある。

s1='abcDEF';
console.log(s1);
console.log(s1.length);
console.log(s1.toUpperCase());
console.log(s1.toLowerCase());

結果

abcDEF
6
ABCDEF
abcdef

その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。以下キーワードで検索すると詳細な仕様を調べることができる。

javascript standard built-in object string

iv.4. 配列¶

concat (結合), length(長さ)などの多数のメソッドがある。

var a1 = [11,12,13], a2=[21,22,23];
var a3=a1.concat(a2);
console.log(a3);
console.log(a3.length);

結果

[11,12,13,21,22,23]
6

になる。

その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。以下キーワードで検索すると詳細な仕様を調べることができる。

javascript standard built-in object array

v.canvas¶

v.1 描画の手順¶

v.3.1 塗りつぶし¶

c1.beginPath();
c1.rect(100,100,100,20);
c1.fillStyle = 'rgb(255,0,0)';
c1.fill();

v.3.2 枠線¶

c1.beginPath();
c1.rect(100,100,100,20);
c1.strokeStyle = 'rgb(255,0,0)';
c1.lineWidth(5);
c1.stroke();

v.2 図形¶

図形は以下メソッドで指定する。

x: x座標
y: y座標、ただしcanvas最上部が0, 下に向けて増える。
w: 幅
h: 高さ
a1,a2: 角度を指定する場合、開始、修了の角度。単位はラジアン。

表記	意味
c1.rect(x,y,h,w)	長方形を描画する
c1.arc(x,y,r,a1,a2)	円弧を描画する
c1.moveTo(x,y)	描画せずに次の始点を指定
c1.lineTo(x,y)	描画しつつ次の始点を指定
c1.font("20px Gothic")	フォントを指定
c1.fillText("Hello",x,y)	Hello の文字内を塗りつぶする
c1.strokeText("Hello",x,y)	Hello の文字内を塗りつぶする

v.3 描画属性¶

v.3.1 fillStyle¶

塗りつぶし色はfillStyleに色名または、rgb を使って指定できる。

c1.fillStyle= "red";
c1.fillStyle= "rgb(255,0,0)";

v.3.2 strokeStyle¶

枠線色はstrokeStyleに色名または、rgb を使って指定できる。

c1.strokeStyle= "red";
c1.strokeStyle= "rgb(255,0,0)";

v.3.3 rgb,rgba指定¶

rgb は赤、緑、青の輝度を指定する。輝度は0～255で255が最大輝度である。 fillStyle, strokeStyle の指定は「文字列」なので注意。

rr = 255; // 赤色の輝度を 0～255 で指定。 255が100%
gg = 255; // 緑色の輝度を 0～255 で指定。 255が100%
bb = 255; // 青色の輝度を 0～255 で指定。 255が100%
c1.fillStyle= "rgb(rr,gg,bb)";

透明度(alpha plane)は rgba で指定する。

c1.fillStyle= "rgba(255,0,0,0.5)"; // 半透明
c1.fillStyle= "rgba(255,0,0,0.1)"; // 10%透過
c1.fillStyle= "rgba(255,0,0,0.9)"; // 90%透過

v.3.4 グラデーション¶

グラデーションは createLineraGradient で指定し、色は addColorStop で指定する。 createLineraGradientではグラデーションの開始座標、修了座標を図形の幅、高さに対する割合(パーセント)で指定する。 0,0,100,100 であれば左上から右下に変化することを意味する。 0,0,0,100 なら左上から左した、つまり上から下に色が変化する。 addColorStop はグラデーションの開始位置から終了位置までの分割位置とその位置の色を指定する。分割位置は 0が始点、1が終点, 0.5 は中間点である。色はfillStyle同様、rgb か色名で指定する。

var g1 = c1.createLinearGradient(0, 0, 0, 100);
g1.addColorStop(0, "rgb(255,0,0)");
g1.addColorStop(1, "rgb(255,255,255)");

v.3.5 影¶

以下の指定で、右に+2ピクセル、下に+2ピクセル、の位置に4ピクセルの半径でぼかした影を投影して描画する。

c1.shadowColor = 'rgba(0, 0, 0)'; // 影の色
c1.shadowBlur = 4;     // 影のサイズ
c1.shadowOffsetX = 2;  // 右方向ずらし幅
c1.shadowOffsetY = 2;  // 下方向ずらし幅

v.4 画像¶

<! 以下の html タグ＋スクリプトで、image_file.jpg を表示する />
<img id="image_id" src="image_file.jpg">
<canvas id="canvas_id" width="400" height="300"></canvs>
<script>
  var canv1=document.getElementById("canvas_id");
  var c1=canv1.getContext("2d");
  var image1 = document.getElementById("image_id");
  c1.drawImage(image1, 100, 50);
</script>

vi. Node.js http パッケージ¶

Node.js には豊富な機能がある。ここでは本講義で参照した http パッケージの機能を示す。

vi.1. http パッケージのインポート¶

http モジュールをロード(インポート)し変数 http1 に代入。

http1=require('http'); // 例

vi.2. 簡易サーバ¶

server05_01.js¶

// server05_01.js
// 簡易 Web サーバー サンプル
// なにがあっても、Hello! World! しか返さない!

// 開始メッセージ
console.log('server05_01 開始')

// http サーバー
var http1 = require('http'); // 受信プログラムを設定
http1.createServer(          // 受信したら動作する
  // メッセージを処理する無名関数
  function (req, msg1) {
    msg1.writeHead(200, {'Content-Type': 'text/plain'});
    msg1.end('Hello! Good bye!\n');
  }
).listen(8080, '127.0.0.1');  // IP とポートを設定する
// url を表示しておく(動作とは無関係)
console.log('http://127.0.0.1:8080/index.html')

vi.3 簡易サーバで使うクラスとメソッド¶

簡易サーバでは以下のクラスとメソッドが使われている。これらを含めて、 Node.js には膨大な API が定義されているが、それらの詳細は Node.js Documentation から得ることができる。

簡易サーバ中の例	class.method	説明
http1.createServer	http.creatServer	http メッセージの応答を指定する
msg1.writeHead	response.writeHead	http ヘッダを送信
msg1.write	response.write	http 本文を送信
msg1.end	response.end	http メッセージの終了
server1.listen	server.listen	受信する IP アドレスとポートを指定

vii. 参考リンク¶

Quick Reference¶

i. 文法要素¶

i.1 命令¶

i.2 コメント¶

i.3 文字と文字列¶

i.3.1 引用符¶

i.3.3 文字コード¶

i.3.4 文字コード¶

i.3.5 バックスラッシュ¶

i.4 if¶

i.5 for¶

i.6 function (関数)¶

i.7 無名関数(Anonymous Function)¶

i.8 オブジェクト¶

i.9 require¶

ii. データ型¶

ii.1 単純データ型¶

ii.2 複合データ型¶

ii.2.1 配列¶

ii.2.2 オブジェクト¶

ii.2.3 連想配列¶

ii.3 特別なデータ型¶

iii.演算子¶

iii.1 代入、副作用のある演算¶

iii.2 加減乗除とマイナス¶

iii.3 比較演算¶

iii.4 論理演算¶

iv. 標準ビルトインオブジェクト¶

iv.1. 数値¶

iv.2. Math¶

iv.3. 文字列¶

iv.4. 配列¶

v.canvas¶

v.1 描画の手順¶

v.3.1 塗りつぶし¶

v.3.2 枠線¶

v.2 図形¶

v.3 描画属性¶

v.3.1 fillStyle¶

v.3.2 strokeStyle¶

v.3.3 rgb,rgba指定¶

v.3.4 グラデーション¶

v.3.5 影¶

v.4 画像¶

vi. Node.js http パッケージ¶

vi.1. http パッケージのインポート¶

vi.2. 簡易サーバ¶

vi.3 簡易サーバで使うクラスとメソッド¶

vii. 参考リンク¶

MDN web docs - JavaScript の基本¶

JavaScript Reference¶

ECMAScript® 2018 Language Specification¶

HTML 5.2 -- W3C Recommendation, 14 December 2017¶

HTML Canvas 2D Context -- W3C Recommendation 19 November 2015¶

jQuery.com¶

W3C All CSS Specifications¶

Mozilla 標準ビルトインオブジェクト¶

Node.js Documentation¶

Node.js http パッケージ¶