MENU
  1. ホーム
  2. Webテクノロジー
  3. 今更ながらcoffee scriptを使ってみて（前編）

今更ながらcoffee scriptを使ってみて（前編）

Webテクノロジー

こんにちは！
エンジニアの宇野です。

type scriptが主流と言われていますが、coffee scriptに手をつけたのでまとめてみました！

 

目次

CoffeeScriptとは？

JavaScriptにコンパイルできる言語
※coffee scriptだけではコンピューターに読み込んでもらえないため、javascriptにコンパイル（変換）します。
JavaScriptに比べ少ない記述ができる（約3分の1になるらしい。。。）
JavaScriptをRubyライクに記述できる言語
ブラウザ用の開発にもサーバサイドの開発にも使える

とにかく少ないタイピングでjavascriptを吐き出してくれる便利な言語！

 

JavaScriptとの違い

どれだけ記述を省略できるのか、JavaScriptと比べながら構文を見ていきましょう！

 
 

var宣言・セミコロンは不要

コンパイル時に自動で付与してくれます。

CoffeeScript
hoge = 'hoge'
JavaScript
var hoge;
hoge = 'hoge';

 
 

関数やメソッドでの（）は不要

ただし、括弧が二重になったり、複雑に重なる場合は付与しておいた方が安全です。

CoffeeScript
alert 'coffee script!'
JavaScript
alert('coffee script!');

 
 

{}（波括弧）はインデントによって表現

こちらもコンパイル時に自動で付与してくれます。※インデントがずれるとコンパイルしてくれないことがあるので注意

CoffeeScript
number = 100

if number == 100
 alert 'coffee'
JavaScript
number = 100;

if (number === 100) {
 alert('coffee');
  }

 
 

コメントアウト

1行の場合はコンパイル時に消えますが、複数行の時はコメントアウトとして残ります。

CoffeeScript
# alert 'coffee script!' -- 1行の場合

###                      -- 複数行の場合
if number == 100
 alert 'coffee'
 console.log 'script'
###
JavaScript
/*                      -- 複数行の場合
if number == 100
 alert 'coffee'
 console.log 'script'
 */

 
 

文字列について

JavaScriptシングルクォート、ダブルクォートで囲います。
ダブルクォートでは便利な使い方があります。
　→　#{変数名}をダブルクォート内に組み込むと文字列内で変数を使うことができます。

CoffeeScript
'シングルクォート' # シングルクォート

name = "Alice"　# ダブルクォート
message = "my name is #{name}!"
JavaScript
'シングルクォート';
var message, name;

name = "Alice";
message = "my name is " + name + "!";

 
 

真偽値について

true, falseの代わりにon, offやyes, noで表現可能。
コンパイル後、true, falseになります。
内容によって使い分けると読み返した時にわかりやすくなります。

CoffeeScript
t = true;
f = false;

t = yes;
f = no;

t = on;
f = off;
JavaScript
var f, t;

t = true;
f = false;

t = true;
f = false;

t = true;
f = false;

 
 

配列について

配列の生成と範囲記法

CoffeeScript
 ### 生成記法 ###
numbersA = [1, 2, 3, 4, 5]
numbersB = [
  1
  2
  3
  4
  5
  ]

wordsA = ['one', 'two', 'three', 'four', 'five']
wordsB = [
  'one'
  'two'
  'three'
  'four'
  'five'
]


### 範囲記法 ###
[0..10]
[0...10]

alert numbersC[1..5]
alert numbersD[2..]
JavaScript
### 生成記法 ###
var numbersA, numbersB, wordsA, wordsB;

numbersA = [1, 2, 3, 4, 5];

numbersB = [1, 2, 3, 4, 5];

wordsA = ['one', 'two', 'three', 'four', 'five'];

wordsB = ['one', 'two', 'three', 'four', 'five'];


/* 範囲記法 */

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

alert(numbersC.slice(1, 6));

alert(numbersD.slice(2));

alert(numbersD.slice(2, -2));

生成記法
1行でまとめても、複数で書いても同じようにコンパイルされます。
複数で書くときは,（コンマ）を省略することができます。

範囲記法
数値の間のピリオド（範囲演算子「..」）の数によって範囲が変わります。

2個　→　[以上..以下]
3個　→　[以上…未満]

また、配列中の要素を指定することができます。
その時の数値は配列の順番（インデックス番号）を表し、コンパイルするとsliceメソッドを使用し表されているのがわかります。
内部ではsliceメソッドが使用されているので、「最後から○番目」というマイナス記号も使うことができます。

 
 

オブジェクトの生成について

配列の生成記法と同じような形で書くことができます。
この時{}（波括弧）は省略した形で書くことができます。

CoffeeScript
  ### 生成記法 ###
numbers = 'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5
hoge =
  one: 1
  two: 2
  three: 3
  name:
    men: 'Bob'
    women: 'Alice'
  message : 'Hello'
JavaScript
var hoge, numbers;

numbers = {
  'one': 1,
  'two': 2,
  'three': 3,
  'four': 4,
  'five': 5
};

hoge = {
  one: 1,
  two: 2,
  three: 3,
  name: {
    men: 'Bob',
    women: 'Alice'
  },
  message: 'Hello'
};

インデントによってネストしていけます。

 
 

条件分岐(if文)

『if ~~ then ~~ else』を用いて1行で記述することができます。
が、この書き方の時は、三項演算子を使用することはできません。
CoffeeScriptの省略規則に則って書く以外はJavaScriptと同じように書くこともできますので内容によって書き換えて使用すると良いと思います。

CoffeeScript
### 1行で書く場合 ###
nunber = 100
if number is 100 then alert 'coffee' else alert 'script'

### 1行で書く場合で条件を後に書くことも可能 ###
alert 'coffee' if number is 100

### JavaScriptと同じように書く場合 ###
if number == 100
  alert 'coffee'
else if number > 100
  alert 'script'
else
  alert 'JavaScript'
JavaScript
var nunber;

  nunber = 100;

  if (number === 100) {
    alert('coffee');
  } else {
    alert('script');
  }


  /* 1行で書く場合で条件を後に書くことも可能 */

  if (number === 100) {
    alert('coffee');
  }


  /* JavaScriptと同じように書く場合 */

  if (number === 100) {
    alert('coffee');
  } else if (number > 100) {
    alert('script');
  } else {
    alert('JavaScript');
  }

ここでifの後に「is」が出てきます。
これはCoffeeScriptならではの表現で、JavaScriptでいう「===」と同義です。
if文で多用される比較演算子について説明します。
 

比較演算子について

JavaScriptでは、「==」が使えていましたが、CoffeeScriptでコンパイルすると、全て「===」に変換されます。
また、「!=」コンパイルすると、全て「!==」に変換されます。

比較演算子変換表
  is        →  ===
  isnt      →  !==
  and       →  &&
  \         →  \
  not       →  !
  yes / on  →  true
  no / off  →  false
CoffeeScript
### 記号の場合 ###
alert "Coffee" if flag == true && hoge != false
### 文字列の場合 ###
alert "Coffee" if flag is yes and hoge isnt off
JavaScript
/* 記号の場合 */
if (flag === true && hoge !== false) {
    alert("Coffee");
  }

/* 文字列の場合 */

if (flag === true && hoge !== false) {
  alert("Coffee");
}
存在チェックの演算子

指定の値がtrueかfalseかを判定します。

CoffeeScript
if (typeof flag !== "undefined" && flag !== null) {
  alert("Coffee");
} else {
  alert("Script");
}

/*
これ以前にflagが定義されていた場合
=> "Coffee"

これ以前にflagが定義されていなかった場合
=> "Script"
*/
JavaScript
if (typeof flag !== "undefined" && flag !== null) {
  alert("Coffee");
} else {
  alert("Script");
}

/*
これ以前にflagが定義されていた場合
   "Coffee"

これ以前にflagが定義されていなかった場合
  "Script"
*/

 
 

switch文

JavaScriptとの異なる点は、
・語句の書き換え
　case　→　when
　default　→　else
・条件から抜けるためのbreak文は記述不要

CoffeeScript
switch level
  when 3
    alert '上級者'
  when 2, 1
    alert '中級者'
  else
    alert '初級者'
JavaScript
switch (level) {
  case 3:
    alert('上級者');
    break;
  case 2:
  case 1:
    alert('中級者');
    break;
  default:
    alert('初級者');
}

複数の値を入れられるので同じ結果を求める際にわかりやすく書けます。
また、break文の記述を入れなくて良いので書き忘れによる不具合が出ません。

 
 

反復処理（for文）

指定回数を回したい場合や、配列から順に値を取り出す場合は「for…in」を使用します。

for…in

指定回数を回したい場合

CoffeeScript
for i in [0..10]
  alert 'coffee'
JavaScript
var i, j;

for (i = j = 0; j <= 10; i = ++j) {
  alert('coffee');
}

 
配列から順に値を取り出す場合

ary = [ 'One', 'Two', 'Three' ]
for number in ary
  alert number
JavaScript
var ary, i, len, number;

ary = ['One', 'Two', 'Three'];

for (i = 0, len = ary.length; i < len; i++) {
  number = ary[i];
  alert(number);
}

numberは仮変数です、これを配列要素にアクセスできます。

 

反復処理（while文 / until文）

条件式がtrueの間ずっと処理を繰り返すにはwhile文、条件式がtrueになるまで処理を繰り返すにはuntil文を利用します。
until命令は、CoffeeScript特有の文です。条件式に否定が含まれる場合は、until命令を使用することで、コードがよりわかりやすくなります。

CoffeeScript
### 変数iが10未満の間、処理を繰り返す ###
while i < 10
  alert i
  i++

### iが10より大きくなるまで、処理を繰り返す ###
until i > 10
  alert i
  i++
JavaScript
/* 変数iが10未満の間、処理を繰り返す */
while (i < 10) {
  alert(i);
  i++;
}

/* iが10より大きくなるまで、処理を繰り返す */

while (!(i > 10)) {
  alert(i);
  i++;
}

 
 

関数について

CoffeeScriptでは
・function宣言は「->」で表現
・引数がない場合は()の省略が可能
・return文は明示しなくても自動で最後に評価された値が返り値になる

CoffeeScript
### 引数がない場合 ###
greetingA = ->
  alert "hello"

greetingA()
do greetingA
greetingA

### 引数がある場合 ###
greetingB = (name) ->
  alert "hello, #{name}!"

greetingA name
JavaScript
var greetingA, greetingB;

greetingA = function() {
  return alert("hello");
};

greetingA();

greetingA();

greetingA;


/* 引数がある場合 */

greetingB = function(name) {
  return alert("hello, " + name + "!");
};

greetingA(name);

呼び出しの時に気をつけるのは、呼び出し時の記述です。
引数がある場合は()括弧がなくても認識してくれますが、引数ない場合は()括弧もしくは関数名の前に「do」をつけないと認識してくれません。
JavaScriptとは逆で、戻り値は必要ない場合に「return」を書きます。
 

匿名関数（無名関数）

変数名がないだけで、通常の関数と同じ様に記述できます。

CoffeeScript
  ->
    alert "hello"
    return

  do ->
    alert "hello"
    return
JavaScript
(function() {
  alert("hello");
});

(function() {
  alert("hello");
})();

ここでも無名関数の即時実行に「do」が使えます。

 
 

最後に

今回はCoffeeScriptでもごくごく基本的な事をまとめました！
次回はクラス定義など、もう少し深い部分をまとめたいと思います！

Webテクノロジー
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次