LotosLabo

プログラミング技術とか気になった情報を載せていきます

CoffeeScriptについて1

f:id:lo25131:20140326182112p:plain


この図のようにコーヒースクリプトと読みます。

JavaScriptを楽に書くための言語のようなものです。

使い方としては、CoffeeScriptJavaScriptに変換して使います。


最初からJavaScriptでいいんじゃないの。
と思いますが、JavaScriptの複雑な形式を使って書くよりも、簡単な書き方で書けるなら
簡単な方を選びますよね。

どっちにしてもJavaScriptの知識は必要になりますが・・・



CoffeeScript開発環境


[導入手順]

CoffeeScriptをインストールします
②Node.jsをインストールします


これで終わりです。


では①のコーヒーをインストールします。


1. コマンドプロンプトを開きます。
2. npm install -g coffee-script と入力・・・ 暫く待ちます
3. エラーが無いことを確認して、coffee -v でバージョンの確認


正しくバージョンが表示されれば完了です。

f:id:lo25131:20140326184856j:plain


node.jsについてはインストール方法は紹介しませんので、ご了承ください。


CoffeeScriptを始める


coffeeと入力します。

そうすると coffee> となりますのでここに入力していきます。

コーヒースクリプトを終了するには .exit と入力します。

f:id:lo25131:20140326195124j:plain


基本的なプログラム


出力方法についてご紹介します。

基本的にcoffeeScriptはcoffeeファイルから読み込んで出力しますが、
コマンド・ラインからの入力をする方法もやってみます


文字の出力

console.log "Hello,World!"

f:id:lo25131:20140326200636j:plain

undefinedと表示されますが、無視していいです


計算

coffee> 3 + 3
6

そのまま書けば計算されます。

同じく、* / - % も使用できます。

f:id:lo25131:20140326201355j:plain


代入


数字や文字の代入が出来ます

f:id:lo25131:20140326201025j:plain

そしてこのようにプログラムの評価結果を直ぐに確認出来る環境を
REPL といいます。

Read >> 読み込み
eval >> 評価
print >> 出力
loop >> 繰り返し


ファイルから読み込み


テキストエディタでもいいので hello.coffee というファイルを作成します。

下の1行を記述します。

console.log "Hello, World"

次にこのファイルをコンソール画面にて呼び出します。


まずはディレクトリを作成して、そのディレクトリにcoffeeファイルを入れます。
コンソール画面より、cdでディレクトリを切り替え、これで呼び出します。

coffee hello.coffee
(coffee <ファイル名>)


f:id:lo25131:20140326204918j:plain

拡張子を省略してもいいです coffee hello



CoffeeScript => JavaScript に変換します


先ほどの hello.coffee を使いコンパイルします

コンソール画面に、 coffee -c hello.coffee と入力します。


そうすると、なんとカレントディレクトリに hello.js というjavascript形式のファイルが作成されています。

中身を見てみると

(function() {
console.log("Hello, World!");
}).call(this);

このように記述されているのがわかります。

そうですこんな簡単に変換できちゃうのです。

また、変換したjavascriptファイルを起動するには

node hello.js で起動できます。


f:id:lo25131:20140326211513j:plain