LearnThe Absolute Beginner’s Guide to CoffeeScript

CoffeeScriptは、この数年でノードによる採用によりますます人気が高まっています。jsとRailsのコミュニティ。 人々が自分のアプリでJavaScriptを書きたいと思っているときに、それがgo-to言語になった理由を見てみましょう。

CoffeeScriptとは何ですか？

CoffeeScriptはJavaScriptにコンパイルされる言語です。 コードイン。coffeeファイルは、JavaScriptのように実行時には解釈されませんが、コンパイルされます。jsファイル。

ノードのJavaScript用に記述しているかどうか。jsまたは任意のブラウザの実装では、CoffeeScriptはJavaScriptの任意およびすべての味のために書くことができます。

なぜCoffeeScriptなのか？

過去には、JavaScriptは90年代と2000年代初頭のコピー＆ペーストの考え方のために最も恒星の評判を持っていませんでしたが、何が起こっているのかを知っていたのはほんの数人しかいなかったようです。 それはそれほど「深刻な」言語ではないと見下されました。 しかし、言語としてのJavaScriptには多くの機能があり、いくつかの優れた機能があります。

CoffeeScriptは、JavaScriptに”構文糖”を追加することによって、JavaScriptのあまり知られていない機能を学ぶことなく、JavaScriptの強力な機能を利用します。 CoffeeScriptにはセミコロンと中括弧がなく、PythonやRubyのような構文に似ています。

これは、より少ないコードを記述し、より速く物事を行うことができることを意味します。 それはまたそれを読み、維持することもっと簡単にします。

CoffeeScriptが使用する最適化のために、コンパイルされたときに結果のJavaScriptは同じように実行されるか、場合によっては手書きのコードよりもさらに実行されCoffeeScriptがコンパイルするJavaScriptを見ることで、JavaScriptについて多くのことを学ぶことができます。 そこに新しいものがある場合は、それを研究し、CoffeScriptがあなたが見慣れているものではなく、そのようにコンパイルする理由を確認してください。

Coffeescriptのインストール

CoffeeScriptをインストールして、フォローできるようにしましょう。 CoffeeScriptはノードです。jsパッケージ。 したがって、ノードに依存します。jsとパッケージマネージャー（npm）。OS X

ノード上の

。jsはOs X用のオープンソースパッケージマネージャであるHomebrewを使用してインストールできます。端末にbrew updateと入力して、Homebrewが最新であることを確認してください。

ノードのHomebrewの式。jsはnodebrew install nodePATHsまたはそのようなもの。次に、グローバルにインストールするには、npm install -g coffee-scriptと入力します。

Windowsで

ノードを訪問します。jsのウェブサイトと”インストール”ボタンを押してください。 それはあなたが使用しているWindowsのあなたの味を自動検出する必要があり、インストーラがダウンロードを開始します。

インストールプロセスを実行します。

インストールしたら、コマンドプロンプトを開き、npm install -g coffee-scriptと入力してグローバルにインストールします。最後に

コマンドラインにcoffee -vと入力して、正しくインストールされていることを確認します。

コマンドラインの使用法

coffeecoffeescripts.coffee.jsjavascriptsフォルダ内の並列ツリー構造にコンパイルします。

coffee -o javascripts/ -c coffeescripts/

警告

オプション-c-oは出力フォルダを意味します。 注順序は出力され、コンパイルされます。 これは、注文を切り替えると動作しないためです！CoffeeScriptファイルをコンパイルするたびに上記のコマンドを実行するので、別の便利なオプション-w。

coffee -w -o javascripts/ -c coffeescripts/

ウォッチャーはcoffeescriptsフォルダ内のファイルへの変更をリッスンし、その場でコンパイルします。

新しいファイルをcoffeescriptsフォルダーに追加するとコンパイルされますが、新しいフォルダーとCoffeeScriptファイルをその中に追加 これはそれ以降のバージョンで変更される可能性があります。また、すべての.coffeeファイルを単一のJavaScriptファイルにコンパイルすることもできます。 これにより、ブラウザが行う必要があるHTTP要求の数が減り、パフォーマンスが向上します。 これを行うには、次のように-jオプションを使用します。

coffee -j javascripts/app.js -c coffeescripts/*.coffee

*coffeeと入力すると、対話型シェルが開きます。 これはRubyのirbに似ています。 これは、コンソールで物事をアウトし、迅速な実験を実行するための素晴らしいツールです。CoffeeScriptでコードを作成する場合は、構文の強調表示を行うのが最善の方法です。

TextMate

Coffeescriptの発明者であるJeremy Ashkenasは、便利なTextMateバンドルを作成しました。 インストール手順については、こちらをご覧ください。Sublime Text2には、GitHubユーザー Xavuraによって作成されたプラグインがあります。 これを既に持っている場合は、Sublime Package Controlを使用してインストールできます。CoffeeScriptの構文

変数

変数は、キーワードvarを必要としません。 変数に名前を付け、等号を付けてから値を指定します。p>

year = 1985speed = 88

文字列

文字列は、他のほとんどの言語と同様に引用符で宣言されています。

first_name = "Marty"

文字列を結合または連結するには、次のように、間にプラス記号を付けて次々にリストすることができます。

full_name = first_name + " McFly"

ハッシュシンボル（#Marty McFly#{first_name} McFlyの文字列になります。 これは動作を反映しています。

関数

関数は、関数、等号、および特殊な関数シンボル（->）に名前を付けることによって宣言されます。CoffeeScriptのすべての関数がコードの最後の行の結果を返すため、キーワードreturnを使用していません。

複数行の関数は、宣言の後の各行の前に空白があり、複数行に書き込まれます。これにより、年が毎回1885speedyear1885。

 initialize_time_circuits(88)

括弧を使用せずにメソッドを呼び出すこともできます。 上記は次のように書くこともできます。

 initialize_time_circuits 88

Arrays

CoffeeScriptで配列を初期化して宣言するには、いくつかの異なる方法があります。 おそらく、角括弧とカンマで区切られた値で宣言された配列を見るのに慣れています。また、次のように複数行にわたって配列を宣言することもできます。

 mcflys = 

各行に空白が必要です。

オプションで、各行から末尾のコンマを削除できます。p>

 mcflys = 

これら二つの宣言スタイルの組み合わせを使用することもできます。次の例…

woah = 

…と同等です：

woah = 

これは、アプリケーションによっては多かれ少なかれ読みやすいかもしれません。 CoffeeScriptを使用すると、ニーズに合わせてさまざまな方法でそれを行うことができます。

オブジェクト

オブジェクトリテラルやハッシュは、JavaScriptの対応するもののように、他のファンキーな方法で宣言することができます。

次のJSONを指定すると…

…カンマと中括弧を削除できます。

空白でインデントする限り、構造体は期待どおりにネストされます。

範囲

範囲は、角括弧で囲まれた二つのピリオドで区切られた二つの整数で宣言されています。

days = 

範囲はJavascriptの標準オブジェクト型ではないため、配列にコンパイルされます。配列のサブセクションを取得するには、範囲を渡すこともできます。 月曜日が1であるから日を取得したいですか？ 配列はゼロベースのインデックス付きであるため、1から始まり4で終わります。あなたも同様の方法で配列のセクション全体を置き換えることができます。

days = tuesday_to_friday = days

あなたも同様の方法で配列のセクション全体を置

次の…

days = 

days100になります。

Splat

splatは、複数の値をメソッドの引数として受け入れる便利な方法です。

次の例では、特定の週の投稿数について、フォーラムユーザーのグループに賞賛ポイントを授与したいと考えています。

最初の人は10ポイントを取得し、第二は6を取得し、第三は2を取得し、他のすべてが単一のポイントを取得します。

最初の人は10ポイントを取得パラメータとしてfirstsecondthirdgiveKudosを作成しましょう。 残りの場合は、変数の名前の後に3つのピリオドが続くsplatを使用します。 giveKudosaddKudosToUserfor inrestをループすることができます。

我々はユーザーの配列を持っている与えられた:P>

users = 

Pasanに10ポイント、Amitに6ポイント、Jimに2ポイント、残りに1ポイントを取得します。

ピリオドを持つユーザーをメソッドに渡す必要があります。

giveKudos users...

これらのピリオドがなければ、usersgetはfirstundefined残りの部分に。

Classes

クラスはcoffeescriptで簡単に宣言することができますが、これははるかに冗長なJavaScriptとは対照的です。

最初にキーワードclassを記述し、その後にクラスの名前を入力します。

コンストラクタメソッドを含むメソッドは、メソッドの名前の後にコロンを付けて記述されます。 各メソッド名の前には空白が必要です。 その後、関数演算子（->）を使用できます。

class TimeMachine constructor: ->

オブジェクトのインスタンスをインスタンス化するには、キーワードnewの後にクラス名を使用します。

time_machine = new TimeMachine

インスタンス変数

インスタンス変数は@シンボルで始まります。 だから私たちはパイロットを持つことができます

class TimeMachine constructor: (pilot) -> @pilot = pilot

ドット表記でもアクセスできます。上記の例では、文字列H. G. Wellsがコンソールに出力されます。

@pilot = pilotを設定する代わりに、次のように省略形で書くことができます。

class TimeMachine constructor: (@pilot) ->

クラス継承

サブクラスを書くには、extends:P>

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

たとえば、TimeMachinegoがあり、タイムマシンが時間内に移動しようとしているときにログアウトされここで、タイムマシンごとにgoを実装し、supergo()を呼び出すと、それぞれのサウンドが出力されます。

一般的な構文

CoffeeScriptを使用すると、コードが英語の文のように見えることがわかります:これは同じです：

light_bulbs() unless switch is not on

後者は前者よりも解析が難しいですが、新しい砂糖の範囲が表示されます。

演算子とエイリアスに関するCoffeeScriptのドキュメントページからの同等の表を次に示します。

CoffeeScript	JavaScript
is	=
はありません	!
ではない	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

Existential Operator

CoffeeScript brings another cool operator to the table called the Existential Operator, which is a question mark (?)。p>

もしuseruserが存在しない場合にログイン関数を呼び出すには、次のような実存演算子を使用します。

login() if not user?

次のようにデフォルト値を設定することもできます。

year ?= 1885

三項演算子と同様の方法で実存演算子を使用することができます….. 以下の例では、セットのご挨拶をするにはmessageundefinedまたは文字列`”こんにちは、世界!”.最後に、プロパティを連鎖させているときにabsorb upnullTypeErrorundefined

ip = securitySystem.lastUser?().remoteSystem?.ipAddress

TypeErrorundefinedを返します。

内包表記

内包表記は、コードを読みやすくすることができます。 私たちの賞賛の例では、forループは、次のように1行に書くことができたときに2行を超えていました:

CoffeeScriptで物事をループするもう一つのクールな機能は、ループがそのループの結果の配列を返すことです。 0から100までを10の倍数で数えたいとしましょう。 私がすることは、ループの先頭に次のような変数割り当てを追加することだけです。

multiples = for num in num * 10

括弧を追加すると、1行にもp>

multiples = (num * 10 for num in )

結論

うわー！ それは取るためにたくさんあったが、あなたが見ることができるようにCoffeeScriptはおいしい甘い構文でいっぱいです。 なぜあなたの次のJavaScriptプロジェクトでbashを与え、それがボンネットの下でコンパイルされるものを見てみませんか？

• coffeescriptへの初心者のガイド
• coffeescript
• プログラミングを学ぶ
• ウェブサイトを作る