金子邦彦研究室プログラミングJavaScript と jQuery UI による Web プログラミングCoffeeScript の機能と文法

CoffeeScript の機能と文法

目次

前準備

CoffeeScript 処理系のインストールが済んでいること.

式と関数

対話型の CoffeeScript 処理系の起動と終了

coffee
CTRL キーと「d」の同時押し

[image]

式と評価結果

処理系に式を与えると,処理系は式の評価結果を出力する.

180 * 1.05

[image]

※ これ以降は、対話型の CoffeeScript 処理系の起動と終了の手順の説明をいちいち書くことはしない. 

四則演算, 括弧

式は, 数字と四則演算と括弧の組み合わせ などで書くことができる。

CoffeeScript では, 四則演算のための記号は半角文字の +, -, *, / である. 掛け算は全角の「×」ではなく、「*」であることに注意してほしい

100 + 200 + 300
10000 - 780
98 * 12 * 1.05
5 / 4
3 / 2

[image]

上の例で分かるように、割り算で割り切れないとき, 評価結果は小数になる, 次の例で,「5 / 7」 の評価結果が小数点以下 16 桁しか表示されていないことから分かるように,割り切れない時は、有限桁での近似計算になっている.

7 / 5

[image]

今度は,20桁と40桁の数の掛け算の例である. これも近似計算になっている. 「e+58」は「10 の 58 乗」という意味である

12345678901234567890 * 1000000000000000000010000000000000000000

[image]

今度は足し算の例である.0.0000000001 を足したのに、評価結果が 1000000000 のままになっている.これも近似計算になっている.

1000000000 + 0.0000000001

[image]

今度は これも近似計算になっている.

10 - 8 * 1.2

[image]

括弧は計算の優先順序を決める

10 - 8 * 2
(10 - 8) * 2

[image]

変数,代入

変数に値を結びつけることができる. 以下,変数に値を結びつけることを代入という. 何らかの値が代入されているような変数は、 式の中でつかうことができる。

a = 10
a * 1.05 

[image]

  同じ変数で代入を再度行うと,最新の値が使われる.古い値は消える.

b = 20
b * 1.05
b = 30 
b * 1.05

[image]

CoffeeScriptでは,変数に代入されるのは値であって、式や変数ではない. 以下のように x = a という代入では, x の値として 10 が代入される. その後 a = 20 という代入により,a の値が 20 に変化するが、このことによって x の値が変化するようなことはない.

a = 10
x = a
a = 20
x * x

[image]

関数,引数

まず、処理系ですでに定義済みのプロパティの例を挙げる.

[image]

プロパティとは、何らかの記号に値が結びついたもの. 処理系で定義済みのプロパティに、値を代入しようと思ってはいけない。

[image]

関数とは,何らかの値を与えると,評価結果が返ってくるもの. CoffeeScript には次のような関数がある(ここに挙げている「関数」は、正確には,Math オブジェクトのメソッドである.オブジェクト、メソッドの説明はここでは行わない).

◆ Math

[image]

[image]

このように,処理系で定義済みの関数には 名前がある. 関数に与える値のことを引数という. 例えば「Math.sqrt 9」では,引数は「9」である.

関数定義

自分で新しい関数を定義できる. このとき,仮引数(関数の引数が自動的に代入される変数のこと)の名前,関数の本体を書く.

長方形を求める関数の定義。仮引数は width と height。本体は「width * height」. 関数が生成され、area_rectangle という変数に代入される.(関数も値の一種だということです)。

area_rectangle = (width, height) -> width * height

[image]

いま定義した関数を使ってみる。

[image]

いろいろな関数を定義して使ってみる

既定値の例.次の関数定義では,qty の既定値を 1 にしている

f = (price, qty = 1) -> "price is #{price}, qty is #{qty}"
f 100
f 250 2 

[image]

評価結果と副作用

処理系が式を評価するとき,式の評価結果が得られるだけでなく, 画面が変化したり,変数の値が変化したりなどの副作用が起きることがある.

console.log "Hello" 

下の動作画面には,変数 a の値がないことに注意.つまり、「colsol.log "hoge"」の評価結果は何もないということです.

[image]

条件分岐、論理演算

条件分岐を1行で書く場合

条件分岐を1行で書く場合は, 「if <式> then <式>」や 「if <式> then <式> else <式>」のように書く. (他の書き方もありますが,説明は省略します)

p = if ( age < 13 ) then 800 else 1600
a = if ( age >= 20 ) then 0

[image]

プログラムファイル中で条件分岐を複数行で書く場合

CoffeeScript のプログラムをファイルに保存し, CoffeeScript の処理系を使ってコンパイル、実行する場合についてでです. ファイル中で条件分岐を複数行で書くときは then を使いません。

length = 50
if ( length < 100 )
  console.log "small"
else
  console.log "big"

[image]

[image]

「else if」のように書いて,多分岐ができる.

age = 12
if ( age < 6 )
  console.log "100 yen"
else if ( age < 13 )
  console.log "200 yen" 
else
  console.log "500 yen" 

[image]

[image]

論理式

論理式では,次に挙げたような演算子などを使う

種々のデータ型

繰り返し

繰り返しには while や for などを使う.

配列と繰り返し

オブジェクトと繰り返し

オブジェクトで for を使うと、ループ変数にはキー値がセットされる.

obj = {x:100, y:500, color:"red"}
X = ( "#{k} : #{obj[k]}" for k of obj )

[image]

関数や変数に関する追加説明

変数がすでに値に結び付けられているかを調べる

a = 100
foo = (x) -> x + 1
a?
foo?
b?
foo2?

[image]

関数とスコープ

関数の本体に複数の式が並んでいるとき、最後の式の評価結果が関数全体の評価結果になる 関数の内部で、何かの変数の代入が行われても、関数の外側には影響しない。 x

hoge = -> y = 2; x = 3
y = hoge()

[image]