書籍転載:JavaScriptライブラリ実践活用[厳選111]
処理を短く記述する[CoffeeScript]
書籍転載の15本目(書籍内の番号は「64」)。CoffeeScriptの基本構文のうち、数値や文字列表現、配列、for~in、unless/untilの記述方法を説明する。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
JavaScriptは、初心者でも始めやすい言語ですが、深く理解しバグの少ないコードを書くには言語仕様上の「罠」が潜んでいます。そこで、CoffeeScriptに沿ってコードを記述することによって、その「罠」を回避し、安全で高性能なJavaScriptを生成、実行することが可能になります。ここでは、文字列や配列などの記述方法を解説します。
- 名称: CoffeeScript
- 分類: 小ネタ
- URL: http://coffeescript.org
- 関連ファイル: coffee-script.js
ここでは、CoffeeScriptの基本構文を1つずつ見ていきます。
数値、文字列表現
リスト064-01をご覧ください。
###
変数
###
# 1数値
i = 225
f = 5.23
sum = i + f + 3 * 6
# 文字列
name = "安西"
# 2変数の展開
hello = "こんにちは、" + name + "さん" #「こんにちは、安西さん」
hello = "こんにちは、#{name}さん" #「こんにちは、安西さん」
# 3複数行に渡るヒアドキュメント
html = '''
<ul>
<li>アプリを作ろう! Android入門~ゼロから学ぶアプリの作成から公開まで</li>
<li>TECHNICAL MASTER はじめてのJSP&サーブレット Eclipse 3.7 Indigo+Tomcat 7対応版</li><li>Windows Azure Platform開発入門</li>
</ul>
'''
|
1変数の格納や演算子はJavaScriptと同じです。
2「#{変数名}」と記述することにより、変数内に変数の展開をすることができます。JavaScriptと同じように「+」でつなげることもできます。
3複数に改行した値を変数に格納したい場合、「'''」または「"""」で囲むことによって変数に格納することができます。このような書き方をヒアドキュメントと言います。
配列
配列の表現力が格段に上がっています(リスト064-02)。1JavaScriptと同様に宣言も可能ですが、2Rangeで宣言も可能です。連想配列は、3JavaScriptと同様にハッシュで宣言できるほか、4YAML形式でも宣言が可能です。
###
配列
###
# 1配列の宣言
music = ["C", "D", "E", "G", "F", "A", "H"]
# 配列への格納
music[6] = "B"
# 改行して宣言
bitlist = [
1, 0, 1
0, 0, 1
1, 1, 0
]
# 2Rangeで配列宣言。ここでは、1~10の値の配列が作成できている
numAry = [1..10]
# 3連想配列の宣言
yamada = {name: "yoshihiro", age: 27}
# 個別に格納
yasunishi = []
yasunishi["name"] = "tsuyoshi"
yasunishi["age"] = 3
# 4YAML形式で宣言
members =
yamada:
name: "yoshihiro"
age: 28
yasunishi:
name: "tsuyoshi"
age: 3
|
for~in、unless/until
最後に、CoffeeScriptで特徴的な2つの命令を説明します。リスト064-03は、for~in命令とunless/until命令のサンプルです。
# 1for ~ in
eat food for food in ['sushi', 'tenpura', 'sukiyaki']
# 2unless
x = 2
unless x is 1
x
# 3until
until x is 5
x++
|
1配列やオブジェクトのループを行う際にfor~in命令を使えます。配列の内容をfoodに入れてループをし、eatメソッドの引数として実行しています。このように、JavaScriptではfor文で記述する必要がある構文を、for~inで1行で記述することができます。
JavaScriptでは、if/whileはありますが、否定形の命令は用意されておらず、演算子を使って否定する必要があります。CoffeeScriptでは、否定形であるunless/until命令を用意しています。2unless命令は「条件式がfalseの場合に」、3until命令は「条件式がtrueになるまで」、それぞれ配下のブロックを実行します。
※以下では、本稿の前後を合わせて5回分(第13回~第17回)のみ表示しています。
連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。
13. 短くかつ安全で高性能なコードを書く[CoffeeScript]
書籍転載の13本目(書籍内の番号は「62」)。短い記述で、安全かつ高性能なJavaScriptコードを生成できる「CoffeeScript」の基本的な使い方を説明する。
14. オブジェクト指向でコードを記述する[CoffeeScript]
書籍転載の14本目(書籍内の番号は「63」)。CoffeeScriptを使用すると、クラスベースのオブジェクト指向で記述できる。その内容を説明する。
15. 【現在、表示中】≫ 処理を短く記述する[CoffeeScript]
書籍転載の15本目(書籍内の番号は「64」)。CoffeeScriptの基本構文のうち、数値や文字列表現、配列、for~in、unless/untilの記述方法を説明する。
16. JavaScriptでクッキーを簡単に操作する[jquery.cookie]
書籍転載の16本目(書籍内の番号は「61」)。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。
17. HTML5+JavaScriptベースでゲームを作る[enchant.js]
書籍転載の17本目(書籍内の番号は「65」)。HTML5+JavaScriptで作られたゲーム・エンジン「enchant.js」の基礎と、基本的な使い方を解説する。