HTML5 – Canvas

2016-06-21 / tau / コメントする

基本手順

HTMLでのcanvas要素の設置、またはスクリプトでcanvas要素の動的な作成と埋め込み
canvasオブジェクトの取得と描画コンテキストの取得
描画コンテキストに対する描画

canvas要素の準備

HTMLに書く場合

id、幅と高さのほか、背景色や枠線など一般的なスタイルも設定可能。idを通して、スクリプトでcanvas要素のオブジェクトを取得する。

<canvas id="canvas1" width="300" height="200"></canvas>

<canvas id="canvas2" width="300" height="300" style="background-color: blue"></canvas>

<canvas id="canvas3" width="400" height="300" style="border:1px solid #000"></canvas>

canvasオブジェクトと描画コンテキストの取得

基本形

HTML要素でcanvasを配置し、JavaScriptで取得して操作する手順。

canvasオブジェクトに描画するために描画コンテキストを取得するが、その取得が可能かどうかの判定が必要。コンテキストは今のところ2Dのみ提供されている。

JavaScriptによる標準的な手順

※”2d”の引数を”2D”とすると読み込んでくれないので要注意。また、後述の注意点を参照。

<canvas id="canvas_test" width="400" height="300" style="border:1px solid #000"></canvas>


<script>
canvasTest();

function canvasTest() {
  var canvas = document.getElementById( "canvas_test" );
  if ( canvas.getContext ) {
    var ctx = canvas.getContext( "2d" );

    ctx.fillRect( 50, 50, 300, 200 );
  }
}
</script>

canvasTest();

function canvasTest() {

var canvas = document.getElementById( "canvas_test" );

if ( canvas.getContext ) {

var ctx = canvas.getContext( "2d" );

ctx.fillRect( 50, 50, 300, 200 );

}

</script>

実行結果

javascript-canvas-fillrect

CoffeeScriptとjQueryによる標準的な手順

jQuery ($) ->
  canvas = $("#canvas_test")[0]
  if canvas.getContext
    context = canvas.getContext("2d")
  context.fillRect(0, 0, 400, 300)

jQuery ($) ->

canvas = $("#canvas_test")[0]

if canvas.getContext

context = canvas.getContext("2d")

context.fillRect(0, 0, 400, 300)

注意点～オブジェクト取得のタイミング

先の基本手順のスクリプトファイルをheadセクションで読み込んで実行すると、canvasオブジェクトが適正に読み込まれず、コンテキストがnullになってしまう。これは、canvasオブジェクトが形成される前にheadセクションでcanvasオブジェクトの処理を行うことになるため。

解決策として、DOMがすべて読み込まれてから必要なオブジェクトを取得するようにする。

スクリプトの読み込み位置を最後にする

外部ファイルをscript要素で読み込む場所を、</body>タグの直前のように最後に持ってくる。

DOMの読み込みが終わってから取得する

たとえばjQueryのjQuery(document).ready()を実装して、DOMがすべて読み込まれてから実行することを保証する。

基本の描画方法

単一の矩形

矩形や円弧など、単一の図形を一つの命令で書く方法。矩形の外形を描くstrokeRect()などが準備されている。

パスを指定する方法

以下の手順をとる。

必要に応じて、線の色や太さ、塗りつぶしの色などのスタイルを設定～strokeStyleなど
前のパスをリセットし、新しいパスの描画を始める～beginPath()
パラメータを指定して、直線や円弧などのパスを辿っていく～lineTo()など
それまでのパスの輪郭描画、塗りつぶしなどを行う～stroke()など

<canvas id="cvs" width="400" height="150" style="background-color:silver">
</canvas>

<script type="text/coffeescript">
  jQuery ($) ->
    canvas = $("#cvs")[0]
    context = canvas.getContext("2d") if canvas.getContext

    <!-- 左に黒枠の正方形を描く／デフォルトの線の色は黒、太さ1 -->
    x = 20
    y = 20
    context.beginPath()
    context.moveTo(x, y)
    context.lineTo(x + 100, y)
    context.lineTo(x + 100, y + 100)
    context.lineTo(x, y + 100)
    context.stroke()

    <!-- 真ん中に赤枠の正方形を描く／線の色と幅を指定 -->
    x = 140
    y = 20
    context.strokeStyle = "#ff0000"
    context.lineWidth = 10
    context.beginPath()
    context.moveTo(x, y)
    context.lineTo(x + 100, y)
    context.lineTo(x + 100, y + 100)
    context.lineTo(x, y + 100)
    context.closePath()
    context.stroke()

    <!-- 右に緑枠で青塗りつぶしの正方形を描く／塗りつぶしは線の中央が基準 -->
    x = 260
    y = 20
    context.strokeStyle = "#00ff00"
    context.fillStyle = "#0000ff"
    context.beginPath()
    context.moveTo(x, y)
    context.lineTo(x + 100, y)
    context.lineTo(x + 100, y + 100)
    context.lineTo(x, y + 100)
    context.closePath()
    context.stroke()
    context.fill()
</script>

</canvas>

jQuery ($) ->

canvas = $("#cvs")[0]

context = canvas.getContext("2d") if canvas.getContext

x = 20

y = 20

context.beginPath()

context.moveTo(x, y)

context.lineTo(x + 100, y)

context.lineTo(x + 100, y + 100)

context.lineTo(x, y + 100)

context.stroke()

x = 140

y = 20

context.strokeStyle = "#ff0000"

context.lineWidth = 10

context.beginPath()

context.moveTo(x, y)

context.lineTo(x + 100, y)

context.lineTo(x + 100, y + 100)

context.lineTo(x, y + 100)

context.closePath()

context.stroke()

x = 260

y = 20

context.strokeStyle = "#00ff00"

context.fillStyle = "#0000ff"

context.beginPath()

context.moveTo(x, y)

context.lineTo(x + 100, y)

context.lineTo(x + 100, y + 100)

context.lineTo(x, y + 100)

context.closePath()

context.stroke()

context.fill()

</script>

実行結果

html-canvas-basic

スタイル設定

色と背景

strokeStyle [= value]: 線・輪郭の色やスタイルを指定。色指定の場合、red, blueなどの色名、”rgb(xx, xx, xx)”、”#dddddd”の3種類の指定方法。
fillStyle [= value]: 塗りつぶしの色やスタイルを指定。

線のスタイル

lineWidth [= value]: 線の幅を保持する。参照・設定可能。ゼロ以上有限の値のみ設定可能。初期値は1.0。
lineCap [= value]: ラインキャップ(“butt”, “round”, “square”)を保持する。参照・設定可能。
lineJoin [= value]: 線の接合方法(“bevel”, “round”, “miter”)を保持する。参照・設定可能。
miterLimit [= value]: miter接合の場合の限界値を保持する。参照・設定可能。ゼロ以上有限の値のみ設定可能。初期値は10.0。
setLineDash([segments]): 破線のパターンをセットする。パターンはリストで与え、[実線(, 間隔, 実線, 間隔...)]と記述。
getLineDash(): 破線のパターンを返す。
lineDashOffset [= value]: 破線パターンのオフセットを返す。

描画メソッド

矩形

strokeRect( x, y, w, h ): 矩形の外枠を描く。
fillRect( x, y, w, h ): 矩形の内側を塗りつぶす。塗りつぶしの基準となる外枠は、線の太さに関わらず線の中心線
clearRect( x, y, w, h ): 指定した矩形の内部を背景色でクリアする。

canvasの描画は、ほとんどの場合線分、曲線、図形が繋がったパスとして描かれるが、矩形に関しては、パスとは独立した図形として描くメソッドが準備されている。

引数は4つで、左上のx座標、y座標、長方形の幅、高さ。

ctx.strokeRect( 50, 50, 250, 150 );
ctx.fillRect( 100, 100, 250, 150 );

// clearRect()は背景色で矩形型に消去
ctx.clearRect( 25, 150, 200, 100 );

ctx.strokeRect( 50, 50, 250, 150 );

ctx.fillRect( 100, 100, 250, 150 );

// clearRect()は背景色で矩形型に消去

ctx.clearRect( 25, 150, 200, 100 );

実行結果

javascript-canvas-rect

パス

パスの構成方法

パスは線分、円弧などの要素を連続して繋いだもので、パスの軌跡を描画するだけでなく、パスに対して内部を塗りつぶしたり、ある点がパスの内部にあるか判定したりすることができる。

パス描画の手順は、抽象的な構造を保存するパスに対して要素を追加していく段階と、それらに対して描画や塗りつぶしなどの操作を行う段階からなる。

パスの実装方法として、以下のいくつかがありうる。

beginPath()による直接描画

beginPath()メソッドで開始し、一連のパス追加などの操作の後、stroke()メソッドで描画する。パスの再利用はできない。

【例】画面中央に白抜きの三角形が描画される。

ctx.beginPath();
ctx.moveTo(  50,  50 );
ctx.lineTo( 350, 100 );
ctx.lineTo( 200, 250 );
ctx.closePath();
ctx.stroke();

ctx.beginPath();

ctx.moveTo( 50, 50 );

ctx.lineTo( 350, 100 );

ctx.lineTo( 200, 250 );

ctx.closePath();

ctx.stroke();

※begtinPath()を書かないと、前の描画がリフレッシュされず全て残ってしまう。
※stroke()を書かないとパスが描画されない。

パス構築を関数とする方法

パスの構築までを関数化し、その関数呼び出し後に描画する。関数を呼び出すことで、直前のパスとして再利用可能

【例】上記と同じ三角形が一旦白抜きで描かれた後、すぐに同じ三角形が黒で塗りつぶされて描かれる。

drawPath();
ctx.stroke();

drawPath();
ctx.fill();

function drawPath() {
  ctx.beginPath();
  ctx.moveTo(  50,  50 );
  ctx.lineTo( 350, 100 );
  ctx.lineTo( 200, 250 );
  ctx.closePath();
}

drawPath();

ctx.stroke();

drawPath();

ctx.fill();

function drawPath() {

ctx.beginPath();

ctx.moveTo( 50, 50 );

ctx.lineTo( 350, 100 );

ctx.lineTo( 200, 250 );

ctx.closePath();

}

Path2Dオブジェクトを用いる方法

Path2Dオブジェクトのインスタンスにパスを追加し、これに対して描画する。パスオブジェクトが残るので、再利用可能。

【例】上記と同じく、白抜きの三角形の描画後に黒塗りの三角形が描画される。

var path = new Path2D();

path.moveTo(  50,  50 );
path.lineTo( 350, 100 );
path.lineTo( 200, 250 );
path.closePath();

ctx.stroke( path );

ctx.fill( path );

var path = new Path2D();

path.moveTo( 50, 50 );

path.lineTo( 350, 100 );

path.lineTo( 200, 250 );

path.closePath();

ctx.stroke( path );

ctx.fill( path );

クリッピング

＜略＞

パス内部の判定

context.isPointInPath( x, y )
- 現在の設定されているサブパスに対して、点(x, y)が内部にあればtrue、外ならばfalseを返す
context.isPointInPath( path, x, y )
- pathで指定されたPath2Dオブジェクトに対して、天(x, y)が内部にあるかどうかを判定する

直接描画に対する判定の問題

1番目の表現の場合、直前に構成されたパスが判定対象となる。以下の例では二つの矩形を描いているが、内部判定は最後に書かれた矩形に対してのみなされる。

javascript-canvas-inner

var x1 = 100, y1 = 100;
var x2 = 250, y2 = 180;

ctx.beginPath();
ctx.rect(  50,  50, 150, 100 );
ctx.stroke();

ctx.beginPath();
ctx.rect( 180, 120, 150, 100 );
ctx.stroke();


ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );
console.log( ctx.isPointInPath( x1, y1 ) );
// 結果はfalse
// 最後に描かれた右下の矩形から見れば外側になるため

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );
console.log( ctx.isPointInPath( x2, y2 ) );
// 結果はtrue
// 最後に書かれた右下の矩形の内部にあるため

var x1 = 100, y1 = 100;

var x2 = 250, y2 = 180;

ctx.beginPath();

ctx.rect( 50, 50, 150, 100 );

ctx.stroke();

ctx.beginPath();

ctx.rect( 180, 120, 150, 100 );

ctx.stroke();

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );

console.log( ctx.isPointInPath( x1, y1 ) );

// 結果はfalse

// 最後に描かれた右下の矩形から見れば外側になるため

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

console.log( ctx.isPointInPath( x2, y2 ) );

// 結果はtrue

// 最後に書かれた右下の矩形の内部にあるため

パス構成の関数化

複数のパスに対して判定を繰り返す場合、stroke()/fill()の描画メソッドを実行する前でもパスが構成されることを利用して、パス構成のための関数を切り分ける方法が考えられる。

var x1 = 100, y1 = 100;
var x2 = 250, y2 = 180;

rect1( ctx ).stroke();
rect2( ctx ).stroke();
ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );
ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

rect1( ctx );// 左上の長方形
console.log( ctx.isPointInPath( x1, y1 ) );// true
console.log( ctx.isPointInPath( x2, y2 ) );// false

rect2( ctx );// 右下の長方形
console.log( ctx.isPointInPath( x1, y1 ) );// false
console.log( ctx.isPointInPath( x2, y2 ) );// true


function rect1( ctx ) {
  ctx.beginPath();
  ctx.rect(  50,  50, 150, 100 );
  return ctx;
}

function rect2( ctx ) {
  ctx.beginPath();
  ctx.rect( 180, 120, 150, 100 );
  return ctx;
}

　上記のコードにより期待した結果は得られるが、判定の度にパス構成

var x1 = 100, y1 = 100;

var x2 = 250, y2 = 180;

rect1( ctx ).stroke();

rect2( ctx ).stroke();

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

rect1( ctx );// 左上の長方形

console.log( ctx.isPointInPath( x1, y1 ) );// true

console.log( ctx.isPointInPath( x2, y2 ) );// false

rect2( ctx );// 右下の長方形

console.log( ctx.isPointInPath( x1, y1 ) );// false

console.log( ctx.isPointInPath( x2, y2 ) );// true

function rect1( ctx ) {

ctx.beginPath();

ctx.rect( 50, 50, 150, 100 );

return ctx;

}

function rect2( ctx ) {

ctx.beginPath();

ctx.rect( 180, 120, 150, 100 );

return ctx;

}

　上記のコードにより期待した結果は得られるが、判定の度にパス構成

Path2Dオブジェクトに対する判定

isPointInPath()メソッドの2番目の表現は、第1引数にpathを渡すことができる。各々のパスをPath2Dオブジェクトに保持することで、よりシンプルに内部判定を行うことができる。

var x1 = 100, y1 = 100;
var x2 = 250, y2 = 180;

var rect1 = new Path2D();
var rect2 = new Path2D();

// 左上の矩形のパス構成
rect1.rect( 50, 50, 150, 100 );

// 右下の矩形のパス構成
rect2.rect( 180, 120, 150, 100 );

ctx.stroke( rect1 );
ctx.stroke( rect2 );

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );
ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

console.log( ctx.isPointInPath( rect1, x1, y1 ) );// true
console.log( ctx.isPointInPath( rect1, x2, y2 ) );// false
console.log( ctx.isPointInPath( rect2, x1, y1 ) );// false
console.log( ctx.isPointInPath( rect2, x2, y2 ) );// true

var x1 = 100, y1 = 100;

var x2 = 250, y2 = 180;

var rect1 = new Path2D();

var rect2 = new Path2D();

// 左上の矩形のパス構成

rect1.rect( 50, 50, 150, 100 );

// 右下の矩形のパス構成

rect2.rect( 180, 120, 150, 100 );

ctx.stroke( rect1 );

ctx.stroke( rect2 );

ctx.fillRect( x1 - 5, y1 - 5, 10, 10 );

ctx.fillRect( x2 - 5, y2 - 5, 10, 10 );

console.log( ctx.isPointInPath( rect1, x1, y1 ) );// true

console.log( ctx.isPointInPath( rect1, x2, y2 ) );// false

console.log( ctx.isPointInPath( rect2, x1, y1 ) );// false

console.log( ctx.isPointInPath( rect2, x2, y2 ) );// true

パスの要素

線分

moveTo()　開始点に移動
lineTo()　次の点まで線を描く～以下、繰り返し
closePath()　パスの終了時、開始点まで繋いでパスを閉じる場合に指定

// 左上、閉じたパスの例
ctx.beginPath();
ctx.moveTo(  20,  30 );
ctx.lineTo( 190,  50 );
ctx.lineTo( 150, 140 );
ctx.closePath();
ctx.stroke();

// 右上、閉じたパスを塗りつぶした例
ctx.beginPath();
ctx.moveTo(  20, 170 );
ctx.lineTo( 190, 190 );
ctx.lineTo( 150, 280 );
ctx.stroke();

// 左下、開いたパスの例
ctx.beginPath();
ctx.moveTo( 220,  30 );
ctx.lineTo( 390,  50 );
ctx.lineTo( 350, 140 );
ctx.closePath();
ctx.fill();

// 右下、開いたパスを塗りつぶした例
ctx.beginPath();
ctx.moveTo( 220, 170 );
ctx.lineTo( 390, 190 );
ctx.lineTo( 350, 280 );
ctx.fill();

// 左上、閉じたパスの例

ctx.beginPath();

ctx.moveTo( 20, 30 );

ctx.lineTo( 190, 50 );

ctx.lineTo( 150, 140 );

ctx.closePath();

ctx.stroke();

// 右上、閉じたパスを塗りつぶした例

ctx.beginPath();

ctx.moveTo( 20, 170 );

ctx.lineTo( 190, 190 );

ctx.lineTo( 150, 280 );

ctx.stroke();

// 左下、開いたパスの例

ctx.beginPath();

ctx.moveTo( 220, 30 );

ctx.lineTo( 390, 50 );

ctx.lineTo( 350, 140 );

ctx.closePath();

ctx.fill();

// 右下、開いたパスを塗りつぶした例

ctx.beginPath();

ctx.moveTo( 220, 170 );

ctx.lineTo( 390, 190 );

ctx.lineTo( 350, 280 );

ctx.fill();

実行結果

javascript-canvas-line

曲線

quadraticCurveTo(…)
bezierCurveTo(…)

＜略＞

円弧

arc( x, y, r, startAngle, endAngle, anticlockwise )
arcTo( x1, y1, x2, y2, r )

arcメソッドはパスの一部として円弧を描く。直前の座標軸からarcの開始点までと、arcの終了点から次の開始点なまでは線分が挿入される。

座標軸の正の方向が、x軸は右、y軸は下となっていることに注意。このため、一般的な数学表現と上限反転した体系になっていて、一般的な正の回転方向も時計回りとなる。

arcTo()メソッドの挙動は以下の通り。

直前の描画点(x0, y0)と(x1, y1)を結ぶ線分l1を想定する
(x1, y1)と(x2, y2)を結ぶ線分l2を想定する
半径rでこの二つの線分に接する円弧を想定する(二つの直線の角をとるイメージ
l1、l2と円弧の接点を算出する
(x0, y0)～l1と円弧の接点を直線で結ぶ
l1とl2を円弧で結ぶ
l2の接点と次の描画開始点を直線で結ぶ

すなわち、(x2, y2)を次の描画開始点と一致させておけば、折れ線(x0, y0)～(x1, y1)～(x2, y2)の角が半径rの円弧で丸くなる。

// 左上、真円の例
ctx.beginPath();
ctx.arc( 100, 80, 60, 0, Math.PI * 2, true );
ctx.stroke();

// 右上、0度～225度まで時計回りに描いた円弧
ctx.beginPath();
ctx.arc( 300, 80, 60, 0, 225 / 180 * Math.PI, false );
ctx.stroke();

// 左下、円弧を塗りつぶした例
ctx.beginPath();
ctx.arc( 100, 220, 60, 0, 270 / 180 * Math.PI, false );
ctx.fill();

// 右下、arcはパスの一部として扱われる
ctx.beginPath();
ctx.arc( 300, 220, 60, 0, Math.PI, true );
ctx.arc( 300, 220, 40, Math.PI, 0, false );
ctx.arc( 300, 220, 20, 0, Math.PI, true );
ctx.stroke();

// arcToの例、直線の角が丸くなる
ctx.beginPath();
ctx.moveTo( 250, 280 );
ctx.arcTo( 300, 280, 300, 200, 20 );
ctx.lineTo( 300, 230 );
ctx.stroke();

// 左上、真円の例

ctx.beginPath();

ctx.arc( 100, 80, 60, 0, Math.PI * 2, true );

ctx.stroke();

// 右上、0度～225度まで時計回りに描いた円弧

ctx.beginPath();

ctx.arc( 300, 80, 60, 0, 225 / 180 * Math.PI, false );

ctx.stroke();

// 左下、円弧を塗りつぶした例

ctx.beginPath();

ctx.arc( 100, 220, 60, 0, 270 / 180 * Math.PI, false );

ctx.fill();

// 右下、arcはパスの一部として扱われる

ctx.beginPath();

ctx.arc( 300, 220, 60, 0, Math.PI, true );

ctx.arc( 300, 220, 40, Math.PI, 0, false );

ctx.arc( 300, 220, 20, 0, Math.PI, true );

ctx.stroke();

// arcToの例、直線の角が丸くなる

ctx.beginPath();

ctx.moveTo( 250, 280 );

ctx.arcTo( 300, 280, 300, 200, 20 );

ctx.lineTo( 300, 230 );

ctx.stroke();

実行結果

javascript-canvas-arc

矩形

rect( x, y, w, h )

rect()はサブパスを持つ矩形を描く。

先行するパスとは接続しない
後続のパスがある場合、(x, y)から次の描画開始点まで線分で結ばれる

ctx.beginPath();
ctx.moveTo( 50, 50 );
ctx.lineTo( 150, 50 );
// この間は接続されず、新たに矩形が開始図形となる
ctx.rect( 150, 150, 100, 50 );
ctx.lineTo( 300, 50 );
ctx.stroke();

ctx.beginPath();

ctx.moveTo( 50, 50 );

ctx.lineTo( 150, 50 );

// この間は接続されず、新たに矩形が開始図形となる

ctx.rect( 150, 150, 100, 50 );

ctx.lineTo( 300, 50 );

ctx.stroke();

実行結果

javascript-canvas-rectpath

JavaScript – クラス

2016-06-21 / tau / コメントする

クラスの構築

コンストラクタ

JavaScriptではクラス定義はなく、コンストラクタを関数で定義する。

thisはこの関数が含まれるオブジェクト(のインスタンス)を指す
newによって新しいオブジェクトの無名インスタンスが生成される
代入演算子(=)によって、変数が上記のインスタンスを参照する
その結果、thisは定義されたインスタンスを指す

コンストラクタで定義されていないプロパティでも、インスタンスごとに後から追加可能だが、これは可読性やクラスとしての一貫性を損なう。

function MyClass( name ) {
this.name = name;
}

var john = new MyClass( "John" );
var louis = new MyClass( "Louis" );

// インスタンスごとにプロパティが保持される
console.log( john.name );
console.log( louis.name );

// 未定義のプロパティはundefined
console.log( john.age );
console.log( louis.age );

// 後からinstanceごとにプロパティを追加可能
instance1.age = 30;
console.log( john.age );// 30
console.log( louis.age );// undefined

function MyClass( name ) {

this.name = name;

}

var john = new MyClass( "John" );

var louis = new MyClass( "Louis" );

// インスタンスごとにプロパティが保持される

console.log( john.name );

console.log( louis.name );

// 未定義のプロパティはundefined

console.log( john.age );

console.log( louis.age );

// 後からinstanceごとにプロパティを追加可能

instance1.age = 30;

console.log( john.age );// 30

console.log( louis.age );// undefined

インスタンスの識別

同じクラスのインスタンスへの参照が同一か異なるかを比較することができる。

function MyClass() {
}

me = new MyClass();
copy = me;
other = new MyClass();

console.log( ( me == me ) ); // true
console.log( ( me == copy ) ); // true
console.log( ( me == other ) ); // false
console.log( ( copy == other ) ); // false

console.log( ( me != me ) ); // false
console.log( ( me != copy ) ); // false
console.log( ( me != other ) ); // true
console.log( ( copy != other ) ); // true

function MyClass() {

}

me = new MyClass();

copy = me;

other = new MyClass();

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

console.log( ( me == copy ) ); // true

console.log( ( me == other ) ); // false

console.log( ( copy == other ) ); // false

console.log( ( me != me ) ); // false

console.log( ( me != copy ) ); // false

console.log( ( me != other ) ); // true

console.log( ( copy != other ) ); // true

この比較はthisを用いても可能。

function MyClass() {
}

MyClass.prototype.isSameAs = function( other ) {
return ( this == other ) ? true : false;
}

me = new MyClass();
copy = me;
another = new MyClass();

console.log( me.isSameAs( me ) ); // true
console.log( me.isSameAs( copy ) ); // true
console.log( me.isSameAs( another ) ); // false

function MyClass() {

}

MyClass.prototype.isSameAs = function( other ) {

return ( this == other ) ? true : false;

}

me = new MyClass();

copy = me;

another = new MyClass();

console.log( me.isSameAs( me ) ); // true

console.log( me.isSameAs( copy ) ); // true

console.log( me.isSameAs( another ) ); // false

メソッド

非効率的な方法

コンストラクタの中で、プロパティと同じようにthis.[関数名]と無名関数定義によってプロパティを定義可能。

function MyClass( name ) {
this.name = name;
this.age;

this.setAge = function( age ) {
this.age = age;
}
}

var john = new MyClass( "John" );
john.setAge( 30 );

console.log( john.age );

function MyClass( name ) {

this.name = name;

this.age;

this.setAge = function( age ) {

this.age = age;

}

var john = new MyClass( "John" );

john.setAge( 30 );

console.log( john.age );

ただし、thisで指定された対象はインスタンスごとに生成・保持されるため、上記コードではインスタンスの数分のメソッドが生成されてしまう。

prototypeによる方法

JavaScriptにおける全てのオブジェクトはObjectに由来する。すべてのオブジェクトはObject.prototypeからメソッドとプロパティを継承しているが、それらは上書きすることが可能。

インスタンスでメソッドを実行しようとした時にそのメソッドが存在しない場合、そのクラスのprototypeにメソッドを探しに行く。新たに定義したクラスのprototypeプロパティに関数を定義しておくことで、全てのインスタンスが共通のprototype下のメソッドを利用することになる。

prototypeにメソッドを定義する方法の一つは、メソッド単位でクラスのprototypeに登録する方法と、オブジェクトリテラルでまとめて定義する方法がある。

メソッド単位で定義する方法

メソッドごとにクラスのprotottypeに一つずつ記述していく方法。

function MyClass() {
this.name = "";
}

MyClass.prototype.setName = function( name ) {
this.name = name;
}

MyClass.prototype.getName = function() {
return( this.name );
}

function MyClass() {

this.name = "";

}

MyClass.prototype.setName = function( name ) {

this.name = name;

}

MyClass.prototype.getName = function() {

return( this.name );

}

オブジェクトリテラルでまとめて定義する方法

クラスの初期設定時に連想配列で定義する。

この方法は、新規にメソッドを定義する場合に一回のみ使用するもので、後から同じ方法でメソッドを追加しようとしした場合、最初の定義内容がすべてオーバーライドされる。

ただ、メソッド定義を敢えてダイナミックに変更するのでなければ、この方法はメソッドの定義のあり方として明快ともいえる。

function MyClass() {
this.name = "";
}

MyClass.prototype = {
setName: function( name ) {
this.name = name;
}, // ここのカンマに注意

getName: function() {
return( this.name );
}
}

function MyClass() {

this.name = "";

}

MyClass.prototype = {

setName: function( name ) {

this.name = name;

}, // ここのカンマに注意

getName: function() {

return( this.name );

}

メソッド定義の注意点

クラスの生成はコンクトラクタの前後を問わないが、メソッドを実行する段階では、prototypeへのメソッドの登録が実行済みでなければならない(記述位置の前後関係ではなく、関数呼び出しも含めた実体上の実行順序)。

C++やJavaなどコンパイラが全体の宣言・定義をパースする場合は問題ないが、インタプリタ系のJavaScriptは、定義=宣言と実行の順序については厳しい。

継承

子クラスのprototypeに親クラスを登録することで継承でき、親クラスのプロパティ、メソッドも利用可能となる。

ChildClass.prototype = new ParentClass();

1	ChildClass.prototype = new ParentClass();

これは厳密な意味でのクラスの継承というよりは、そのような挙動をするためのprototypeチェーンに組み込んだというところ。

注意点

子クラスのメソッドの定義は必ず親クラスの継承の後で行うこと。継承の際にprototypeの内容が上書きされてしまうため、継承の前にメソッド定義すると子クラスのメソッドが参照されなくなってしまう(下記の例では、”instance.setAge is not a function”とエラーになる)。

子クラスのメソッド定義でオブジェクトリテラルを使ってはいけない。継承の後にこれを行うと、親クラスのメソッドがすべて上書きされてしまう。

// 親クラスとメソッドの定義
function ParentClass() {
this.name = "";
}

ParentClass.prototype = {
setName: function( name ) {
this.name = name;
}
}

// 子クラスの定義
function ChildClass() {
this.age = 0;
}

// クラスの継承
ChildClass.prototype = new ParentClass();


// 【重要】子クラスのメソッド定義は必ず継承の後で
// 【重要】子クラスのメソッド定義は必ずprototypeへの追加で
ChildClass.prototype.setAge = function( age ) {
this.age = age;
}

/*
// 【重要】子クラスのメソッド定義でオブジェクトリテラルは使えない
ChildClass.prototype = {
setAge: function( age ) {
this.age = age;
}
}
*/

// テスト
var instance = new ChildClass();
instance.setName( "John" );
instance.setAge( 30 );

console.log( instance.name );
console.log( instance.age );

// 親クラスとメソッドの定義

function ParentClass() {

this.name = "";

}

ParentClass.prototype = {

setName: function( name ) {

this.name = name;

}

// 子クラスの定義

function ChildClass() {

this.age = 0;

}

// クラスの継承

ChildClass.prototype = new ParentClass();

// 【重要】子クラスのメソッド定義は必ず継承の後で

// 【重要】子クラスのメソッド定義は必ずprototypeへの追加で

ChildClass.prototype.setAge = function( age ) {

this.age = age;

}

// 【重要】子クラスのメソッド定義でオブジェクトリテラルは使えない

ChildClass.prototype = {

setAge: function( age ) {

this.age = age;

}

// テスト

var instance = new ChildClass();

instance.setName( "John" );

instance.setAge( 30 );

console.log( instance.name );

console.log( instance.age );

JavaScript – 変数・スコープ

2016-06-21 / tau / コメントする

変数のスコープ

グローバルスコープ／ローカルスコープ

var宣言で定義された変数は、その関数内のローカルスコープ
var宣言なしで定義された変数は、どこで定義されてもグローバルスコープ

/*
　グローバル領域での定義
*/
v1 = "global1";
var v2 = "global2";

console.log( "start" );
console.log( "v1=" + v1 );// ->"global1"
console.log( "v2=" + v2 );// ->"global2"


/*
　グローバル変数の関数内での参照
*/
f1();

function f1() {
  console.log( "in f1()" );
  console.log( "v1=" + v1 );// ->"global1"
  console.log( "v2=" + v2 );// ->"global2"
}


/*
　ローカル変数とグローバル変数
　・まずf2()内で同名の変数をローカル定義(var宣言)
　・その実行結果は、同名のグローバル変数に影響を与えない
　・ローカルで定義された変数はグローバル参照できない
*/
f2();
console.log( "after f2()" );
console.log( "v1=" + v1 );// ->"global1"
console.log( "v2=" + v2 );// ->"global2"
//console.log( "v3=" + v3 ); -> error "not defined"

function f2() {
  var v1 = "local1";
  var v2 = "local2";
  var v3 = "local3";
  console.log( "in f2()" );
  console.log( "v1=" + v1 );// ->"local1"
  console.log( "v2=" + v2 );// ->"local2"
  console.log( "v3=" + v3 );// ->"local3"
}


/*
　関数内でのグローバル変数の影響
　・f3()内でvarなしで定義された変数はグローバル
　・既に存在すれば上書きされる(v1, v2)
　・存在していなければ新たにグローバル定義される(v3)
　以下ではf3()が実行され、その結果でグローバル変数が影響を受ける
*/
f3();
console.log( "after f3()" );
console.log( "v1=" + v1 );// ->"local1"
console.log( "v2=" + v2 );// ->"local2"
console.log( "v3=" + v3 );// ->"local3"

function f3() {
  v1 = "local1";
  v2 = "local2";
  v3 = "local3";
  console.log( "in f3()" );
  console.log( "v1=" + v1 );// ->"local1"
  console.log( "v2=" + v2 );// ->"local2"
  console.log( "v3=" + v3 );// ->"local3"
}<br>

　グローバル領域での定義

v1 = "global1";

var v2 = "global2";

console.log( "start" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

　グローバル変数の関数内での参照

f1();

function f1() {

console.log( "in f1()" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

}

　ローカル変数とグローバル変数

　・まずf2()内で同名の変数をローカル定義(var宣言)

　・その実行結果は、同名のグローバル変数に影響を与えない

　・ローカルで定義された変数はグローバル参照できない

f2();

console.log( "after f2()" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

//console.log( "v3=" + v3 ); -> error "not defined"

function f2() {

var v1 = "local1";

var v2 = "local2";

var v3 = "local3";

console.log( "in f2()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

}

　関数内でのグローバル変数の影響

　・f3()内でvarなしで定義された変数はグローバル

　・既に存在すれば上書きされる(v1, v2)

　・存在していなければ新たにグローバル定義される(v3)

　以下ではf3()が実行され、その結果でグローバル変数が影響を受ける

f3();

console.log( "after f3()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

function f3() {

v1 = "local1";

v2 = "local2";

v3 = "local3";

console.log( "in f3()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

}<br>

ブロックスコープ

JavaScriptにはブロックスコープの概念はない。

関数の中のif{}やfor{}など複数のブロックで同じ変数名を用いると、関数内で共通の変数になる。

特に、for文のループカウンタなどの一時的な変数は、不用意にvar宣言なしで用いると、予期しないところでグローバルに影響を与えてしまう可能性がある。

/*
　関数f()を呼び出し、その後の変数をチェック
*/
f();
console.log( "after f()" );
console.log( "v1=" + v1 );// 関数内のvarなしはグローバル
//console.log( "v1=" + v2 ); -> error "not defined"
//console.log( "v1=" + v3 ); -> error "not defined"
console.log( "v4=" + v4 );// for文でもvarなしはグローバル


function f() {
  console.log( "in f()" );
  {
    v1 = "v1 in block";
    var v2 = "v2 in block";
  }
  console.log( "v1=" + v1 );
  console.log( "v2=" + v2 );

  // for文でvar宣言すれば、関数内ローカルにはなる
  for ( var v3 = 0; v3 < 2; v3++ ) {
    console.log( "v3 in for block:" + v3 );
  }
  // ただしブロック内のみのローカルとはならない
  console.log( "v3 out of for block:" + v3 );

  // for文でvarなしで宣言するとグローバル変数になる
  for ( v4 = 0; v4 < 2; v4++ ) {
    console.log( "v4 in for block:" + v4 );
  }
  console.log( "v4 out of for block:" + v4 );
}

　関数f()を呼び出し、その後の変数をチェック

f();

console.log( "after f()" );

console.log( "v1=" + v1 );// 関数内のvarなしはグローバル

//console.log( "v1=" + v2 ); -> error "not defined"

//console.log( "v1=" + v3 ); -> error "not defined"

console.log( "v4=" + v4 );// for文でもvarなしはグローバル

function f() {

console.log( "in f()" );

{

v1 = "v1 in block";

var v2 = "v2 in block";

}

console.log( "v1=" + v1 );

console.log( "v2=" + v2 );

// for文でvar宣言すれば、関数内ローカルにはなる

for ( var v3 = 0; v3 < 2; v3++ ) {

console.log( "v3 in for block:" + v3 );

}

// ただしブロック内のみのローカルとはならない

console.log( "v3 out of for block:" + v3 );

// for文でvarなしで宣言するとグローバル変数になる

for ( v4 = 0; v4 < 2; v4++ ) {

console.log( "v4 in for block:" + v4 );

}

console.log( "v4 out of for block:" + v4 );

}

関数の引数のスコープ

関数の引数はvarなしで宣言するが、スコープは関数内ローカルとなる。

var n = 1;

console.log( f( n ) );
console.log( n );

function f( n ) {
  console.log( n );

  n++;
  console.log( n );

  return n;
}

var n = 1;

console.log( f( n ) );

console.log( n );

function f( n ) {

console.log( n );

n++;

console.log( n );

return n;

}

グローバル領域でn = 1を定義
f( n )で引数を引き取った後、関数内ではn == 1
関数内でnをインクリメントし、n = 2
関数の結果はf( n ) = 2
その後、グローバル領域でn == 1で変化していない

変数操作のタイミング

グローバル変数への操作は、スクリプトがの実行の際に行われる。htmlファイル内であれば、そのファイルが読み込まれた時。別のjsファイルの場合はそれが読み込まれた時。

ローカル変数への操作は、その関数が実行された時。

以下の例では、htmlファイル読み込み時にグローバル変数が定義・参照され、その後ボタンを押すたびにmain()関数が実行され、ローカル変数が定義・参照される。

<input type="button" value="Test" onclick="main()">

<script>
var global = "global";

console.log( global );


function main() {
  var local = "local";

  console.log( global );
  console.log( local );
}
</script>

// 実行結果
// global
// 以下、ボタンを押すごとに
// global
// local

var global = "global";

console.log( global );

function main() {

var local = "local";

console.log( global );

console.log( local );

}

</script>

// 実行結果

// global

// 以下、ボタンを押すごとに

// global

// local

JavaScript – データ型・演算

2016-06-21 / tau / コメントする

データ型

文字型

リテラル

文字列のリテラルを表すには、対になったダブルクォート(“)かシングルクォート(‘)で囲む。

x = "abcd";
y = 'efgh';

1 2	x = "abcd"; y = 'efgh';

エスケープ文字

\n	NewLine(改行文字)
\f	フォームフィード
\b	バックスペース
\r	キャリッジリターン
\t	タブ
\’/\”	シングルクォート／ダブルクォート
\\	バックスラッシュ
\0nn/\0onn	8進数
\xnn	16進数nnによる文字コード指定(ex. ‘A’=’\x41’)
\unnnn	Unicode文字(ex. ‘あ’=’\u3042’)

数値型

JavaScriptでは、内部的にすべての数値が浮動小数点として扱われる。

整数値の表現

10進数	数字の列で指定。先頭の数字は0(ゼロ)以外。
8進数	先頭が0(ゼロ)である数字の列で指定。
16進数	先頭”0x”に続く0～9, a～fの列で指定、

8進数、16進数では、負の値を表すことはできるが、小数部分はなく、浮動小数点表記は使用できない。

以下の例は、10進、8進、16進の各数値の演算結果をconsole.logに出力する。

function test_var1() {
  var num_dec = 100;
  var num_oct = 0100;
  var num_hex = 0x100;

  console.log( "Numeric Test" );
  console.log( num_dec );
  console.log( num_oct );
  console.log( num_hex );

  console.log( num_dec + num_oct + num_hex);
}

function test_var1() {

var num_dec = 100;

var num_oct = 0100;

var num_hex = 0x100;

console.log( "Numeric Test" );

console.log( num_dec );

console.log( num_oct );

console.log( num_hex );

console.log( num_dec + num_oct + num_hex);

}

浮動小数点数の表現

以下の4つの表現は全て同じ値を表す。

0.0001
.0001
1e-4
1.0e-4

論理型(Boolean)

trueとfalseの二値。なお、比較式において以下の評価はすべてfalseとして解釈される。

0
null
undefined
空の文字列

特殊な値

Null	Null型にはnullという値が1つだけある。typeof演算子ではnull値はnull型ではなくObject型として扱われる。
undefined	未定義の変数を参照した場合に返される。
NaN	不適切な値で、以下の場合に返される。未定義の変数を含む数値演算文字列を含む数値演算ゼロをゼロで除算した場合
Infinity	正の無限大。計算結果が正の数値でオーバーフローした場合や、通常の正の数値をゼロで割った場合に返される。
-Infinity	負の無限大。計算結果が負の数値でオーバーフローした場合や、通常の負の数値をゼロで割った場合に返される。

演算

代入演算子

代入演算子は、文字列／数値のリテラル／変数を変数に割り当てる。

str = "abc";
val = 123;
newStr = str;
newVal = val;

str = "abc";

val = 123;

newStr = str;

newVal = val;

文字列演算子

結合演算子

“+”演算子は2つの文字列を結合。

a = "abc" + 'def';

1	a = "abc" + 'def';

数値演算子

算術演算子

Javaと同じ算術演算子+、-、*、/、%(剰余)、インクリメント／デクリメント演算子++、–がある。

比較演算子

Javaと同じ演算子==、!=、<、>、<=、>=がある。

論理演算子

Javaと同じ演算子、&&、||、!(否定)がある。

複合代入

演算結果を代入する場合、複合代入演算子の短縮表記も可能。

x += y
x <<= y

1 2	x += y x <<= y

条件演算子

==、!=	等しい／等しくない
===、!==	同一である／同一でない

たとえば文字列と数値を比較するとき、==を用いると文字列がNumber型に変換され比較される。

一方===では型変換は行われない状態で、厳密にその内容が等しいかどうかが比較される。

typeof演算子

typeof <em>引数</em>

1	typeof <em>引数</em>

引数の型に応じて、以下の文字列が返される。

数値	number
文字列	string
オブジェクト	object
配列	object
関数	function
論理型	boolean
null	number
NaN	number
undefined	undefined

文字列と数値が混在した演算

以下のルールに従う。

数値同士の演算の結果は数値
二項のうち少なくとも一つが文字列の場合、数値であっても文字列と評価し、結果は文字列
先頭から演算を進め、数値が続く限りは数値演算を続け、一旦文字列演算になると以降は全て文字列演算として評価。

1 + 2	3
“1” + 2	“12”
1 + “2”	“12”
1 + 2 + “3”	“33”
1 + “2” + 3	“123”
“1” + 2 + 3	“123”

JavaScript – 記述位置

2016-06-21 / tau / コメントする

記述位置と記述方法

HTMLソース内に直接記述
HTMLソース内に関数を直接記述
HTMLからJavaScriptの外部ファイルを読み込み

HTML内への直接記述

HTMLソースに以下のように記述。

<script>
document.write("<p>Javascriptテスト<br>");
document.write("body内直接記述の例</p>");
</script>

document.write("<p>Javascriptテスト<br>");

document.write("body内直接記述の例</p>");

</script>

正確には<script type=”text/javascript”>だが、HTML5ではscript要素のtype属性はデフォルトでJavaScriptなので省略可能。

関数の直接記述

head要素内に以下を記述し、

<script>
<!--
  function test0() {
    document.write("head要素内でのJavaScript実行例");
  }
//-->
</script>

<!--

function test0() {

document.write("head要素内でのJavaScript実行例");

}

//-->

</script>

body要素で以下のように記述することもできる。

<script>
<!--
  test0();
//-->
</script>

<!--

test0();

//-->

</script>

外部ファイルの読み込み

例えば以下の内容のファイルを”test1.js”として準備。

保存する場所は、HTMLファイルと同じディレクトリにある”js”ディレクトリの下とする。

function test1() {
  alert("JavaScriptの外部ファイルテスト");
}

function test1() {

alert("JavaScriptの外部ファイルテスト");

}

headセクションで以下のようにスクリプトファイルを読み込む。

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

1	<script src="./js/test1.js"></script>

そして、たとえば以下のように関数を呼び出して実行。

<input type="button" value="JavaScript外部ファイル実行" onclick="test1()">

1	<input type="button" value="JavaScript外部ファイル実行" onclick="test1()">

覚え書き

VistaとSugarSyncでの問題

Windows Vista上のSugerSyncと同期したフォルダ内でこれを実行したところ、alert内の文字が文字化けしてしまった。HTMLソースがUTF-8で、scriptタグの属性に明示的に”charset=UTF-8″を記述しても解消されない。また、スクリプトソースの<!–などのコメントを除き、出力文字を全て半角としても現象は変わらない（そもそもalertダイアログの冒頭に表示される日本語が文字化けしている可能性もある）。

これに対して、デスクトップ上に新たなフォルダをつくり、関係するHTMLファイルとCSSファイルを移動させて実行したところ、以下のような挙動。本現象が発生したVista＋SugarSyncの不安定性に関しては、今しばらく調査が必要。

デスクトップ上に”dev”フォルダを作成し、SugarSyncの動機フォルダから必要なファイルとフォルダを移動
devフォルダ内のhtmlファイルを直接エディタで編集可能
しばらく編集、保存、ブラウザ表示を繰り返していると、htmlファイルにロックがかかる
devフォルダの名前を変更しようとしたところ、ロックがかかる
表示中のブラウザを閉じるとロックがかからんくなったので、フォルダ名をdev→dvに変更
その後ロックがかからなくなる

2015-12-21.

Hello world!

2016-06-16 / tau / コメントする

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !