tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:CoffeeScriptの使い方を勉強しました

Railsの開発ではCoffeeScriptが使えるということなので、ドットインストールで使い方を勉強してみました。CoffeeScriptを使うとJavaScriptよりコード量を減らしたり便利な機能が使えたりするみたいです。


公式サイトはこちら

CoffeeScript


TRY COFFEE SCRIPTタブで簡単に動作チェックできます。
f:id:tyoshikawa1106:20150817144514p:plain


Railsの場合は「app > assets > javascripts > coffee.js.coffee」というように「.js.coffee」ファイルに実装することで利用できます。
f:id:tyoshikawa1106:20150817145319p:plain

f:id:tyoshikawa1106:20150817145505p:plain

基本的な使い方

コメントは#を先頭につける。複数コメントは###で開始して###で終了する。
f:id:tyoshikawa1106:20150817150111p:plain

  • 変数でvarの宣言は不要
  • 文末の『;』も不要
  • {} ではなくインデントで認識できる
  • () も省略可能

使用例です。
f:id:tyoshikawa1106:20150817150537p:plain


` (バッククォート)で囲うことでJavaScriptを埋め込むことも可能です。
f:id:tyoshikawa1106:20150817150743p:plain

文字列

ダブルクォーテーションで囲っている場合は式展開できます。

score = 80
alert "score = #{score}"

f:id:tyoshikawa1106:20150817151046p:plain


複数行に分けて処理を書くこともできます。
f:id:tyoshikawa1106:20150817151238p:plain


"""で囲うことでHTMLタグを埋め込むこともできます。
f:id:tyoshikawa1106:20150817151459p:plain

配列と範囲記法

配列は複数行に分けることでカンマが不要になります。また、Rubyと同じように『..』で範囲指定できます。『...』と3つある場合は最後の値は含まれません。
f:id:tyoshikawa1106:20150817152151p:plain

オブジェクト

オブジェクトは{}を省略したり、字下げすることで宣言が可能です。
f:id:tyoshikawa1106:20150817152908p:plain


複雑な入れ子も宣言可能です。
f:id:tyoshikawa1106:20150817153104p:plain


if文で条件分岐
こんな感じの書き方ができます。
f:id:tyoshikawa1106:20150817154032p:plain

比較演算子

JavaScriptでは『==』や『!=』は『===』や『!==』に変換されます。
f:id:tyoshikawa1106:20150817154313p:plain


他にも『&& → and』,『|| → or』, 『! → not』 というように宣言ができます。
f:id:tyoshikawa1106:20150817155026p:plain


また、『is』と『isnt』で宣言することも可能です。
f:id:tyoshikawa1106:20150817154415p:plain


こんな感じで連結することも可能です。
f:id:tyoshikawa1106:20150817154546p:plain


coffee scriptでは『true』は『yes』または『on』で宣言できます。『false』は『no』または『off』となります。
f:id:tyoshikawa1106:20150817154805p:plain


配列の中に値があるかは『in』を使います。
f:id:tyoshikawa1106:20150817155236p:plain


オブジェクトのキーの存在判定をする場合は『of』を使います。
f:id:tyoshikawa1106:20150817155819p:plain

Switch文

CoffeeScriptはSwitch文を次のように書けます。
f:id:tyoshikawa1106:20150817161951p:plain

Loop

forループでは『in』を使うことができます。
f:id:tyoshikawa1106:20150817162430p:plain


シンプルな処理なら前に書く方法もあります。
f:id:tyoshikawa1106:20150817162630p:plain


『by』をつかって指定した値でスキップすることもできます。
f:id:tyoshikawa1106:20150817162816p:plain


次の書き方をすると配列内包ということでループ毎の結果を配列にセットできます。
f:id:tyoshikawa1106:20150817163311p:plain


whileループは次のように書けます。
f:id:tyoshikawa1106:20150817163604p:plain


whileループでも配列内包は利用できます。
f:id:tyoshikawa1106:20150817163725p:plain

配列とオブジェクトの要素の扱い

配列の全ての要素分の処理を行いたい場合は次のように書きます。
f:id:tyoshikawa1106:20150817165334p:plain


こういう書き方もできます。
f:id:tyoshikawa1106:20150817165428p:plain


『when』を使うことでループ内の条件判定ができます。
f:id:tyoshikawa1106:20150817165622p:plain


ループ中の配列番号も取得できます。
f:id:tyoshikawa1106:20150817165854p:plain


オブジェクト件数ループしたい場合は『of』を使います。
f:id:tyoshikawa1106:20150817170635p:plain


こういう書き方もできます。
f:id:tyoshikawa1106:20150817170717p:plain

関数の書き方

funcionは『->』をつかって宣言することができます。
f:id:tyoshikawa1106:20150817171042p:plain


引数は『->』の前に宣言します。
f:id:tyoshikawa1106:20150817171308p:plain


引数には初期値をセットすることもできます。
f:id:tyoshikawa1106:20150817171430p:plain


戻り値はこのように扱えます。
f:id:tyoshikawa1106:20150817171655p:plain


即時関数は『do』をつかって宣言します。
f:id:tyoshikawa1106:20150817171831p:plain

分割代入

分割代入とは複数の値を一括代入できる機能です。例えば2つの変数の値を簡単に交換できます。
f:id:tyoshikawa1106:20150817172654p:plain


複数の戻り値を返すこともできます。
f:id:tyoshikawa1106:20150817172958p:plain


オブジェクトから複数の値を取得することもできます。
f:id:tyoshikawa1106:20150817173353p:plain

classの使い方

Userクラスを用意する場合は次のような感じです。クラス名は大文字で、constructorは最初に実行されます。
f:id:tyoshikawa1106:20150817174707p:plain


this.nameは@nameと書くことができます。constructorの引数に@をつけるとスッキリした書き方になります。
f:id:tyoshikawa1106:20150817174934p:plain


クラス内にメソッドを用意する場合は次のようになります。
f:id:tyoshikawa1106:20150817175208p:plain

classの継承

継承はextendsを使って行います。
f:id:tyoshikawa1106:20150817175458p:plain


メソッドの上書きも可能です。また親クラスの同名のメソッドはsuper()で呼び出すことが出来ます。
f:id:tyoshikawa1106:20150817175807p:plain

存在演算子の使い方

値の存在判定には『?』を使います。
f:id:tyoshikawa1106:20150817180056p:plain


値の存在判定には二項演算子というのも用意されています。例えばyの値の有無で戻り値を切り替えることが可能です。
f:id:tyoshikawa1106:20150817180325p:plain


オブジェクトで宣言していない変数にアクセスしようとすると『TypeError: Cannot read property 'first' of undefined』というようなエラーが発生する可能性がありますが、『?』をつかうことで『undefined』を返すようにできます。
f:id:tyoshikawa1106:20150817180707p:plain


※『?』はメソッドの存在判定にも利用できます。