Pocket

javascriptを簡単に、少ないコード量で記述ができるCoffeeScriptの書き方を調べてみたので、メモとして残します。



公式サイト

公式サイトは、coffeescript.orgになります。

基本的な書き方などが載っているほか、「TRY COFFEESCRIPT」のタブでは、coffeescriptを入力するとjavascriptに変換してくれるライブプレビュー画面があるので、自分が入力したコードがどんなjavascriptにコンパイルされるか確認できます。

公式サイトにはいろいろと載っていますが、よく使うであろう基本的な書き方を次にまとめたいと思います。



CoffeeScriptの書き方

CoffeeScriptでは、基本的に行末の「;」や、if文などで使う「()」、「{}」などの記号を省略して記述します。
また、インデントでブロックを見るため、きちんとインデントに注意して記述する必要があります。


コメント

コメントは#を頭に付けます。このときのコメントはコンパイル後に表示されなくなります。
複数行のコメントや、ライセンス表記などコンパイル後にコメントとして残したい場合は、コメントの開始に###、終わりにも###を付けます。

↓ コンパイル後


宣言

CoffeeScriptでは変数の宣言は必要なく、varを付けずにいきなり変数を入力します。

↓ コンパイル後

コンパイル時にCoffeeScriptが変数を宣言してくれるので、コンパイル後のjavascriptはきちんとvarで宣言された変数になっています。


if

if文は次のように書きます。

↓ コンパイル後

インデントと括弧が無いことに気を付けて記述します。

また、CoffeeScriptでは条件等の比較演算子に===(イコール3つ)は使えず、==(イコール2つ)で===(イコール3つ)になってコンパイルされます。


for

配列を走査する場合は、for in を使い、オブジェクトを走査する場合は for of を使います。

↓ コンパイル後



また、単純に1から100まで繰り返すループを作るときは、

↓ コンパイル後

のように書きます。

このとき、ピリオドを3つ付けると100を除いてループし、[1..100]のように2つの場合は100を含めてループします。


関数

関数を書く場合は、-> を使って記述します。

↓ コンパイル後



また、jQueryを使う場合は、

↓ コンパイル後

このようになります。

最後の@マークはreturn thisと同様の意味を持ちます。
CoffeeScriptでは、その関数内の最後に評価された値を返す動きになっているため、関数内でreturnを指定しないと、予期していないコードが出力される場合があります。それを回避するために、関数の最後に@マーク、もしくはreturnを明示的に付けるようにします。
参考サイト→CoffeeScriptの関数は明示的にreturnするべき/CreativeStyle




まとめ

CoffeeScriptには上記以外にもクラスなど便利なものもまだまだありますが、長くなりそうなので、別の記事にまとめたいと思います。



今回は以上になります。



Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.