Coffeescript-quick-guide

提供:Dev Guides
移動先:案内検索

CoffeeScript-概要

現在、JavaScriptは利用可能な最速のメインストリーム動的言語であり、Webの「lingua franca」として知られています。 1995年にブレンダンアイヒによって10日間で開発されました。

JavaScriptの効果的な機能により、JavaScriptは人気を博し、急速にグローバル化しました。 それは非常に短い時間で研究室にありましたが、言語を磨くには十分ではありませんでした。 JavaScriptには良い部分にもかかわらず、このような理由で、JavaScriptには多くの設計エラーがあり、風変わりな言語であるという悪い評判がありました。

CoffeeScriptとは何ですか?

CoffeeScriptは、RubyとPythonに基づく軽量の言語で、* 1つのソース言語から別の言語にコンパイル*し、JavaScriptに変換します。 JavaScriptの風変わりな部分を避けながら、より優れた構文を提供し、言語の柔軟性と美しさを維持します。

CoffeeScriptの利点

CoffeeScriptの利点は次のとおりです-

  • わかりやすい-CoffeeScriptはJavaScriptの短縮形であり、その構文はJavaScriptと比較して非常に単純です。 CoffeeScriptを使用すると、クリーンでわかりやすく、わかりやすいコードを作成できます。
  • もっと少なく書く-JavaScriptの巨大なコードの場合、CoffeeScriptの行数が比較的少なくて済みます。
  • Reliable -CoffeeScriptは、動的プログラムを作成するための安全で信頼性の高いプログラミング言語です。
  • 読み取り可能および保守可能-CoffeeScriptは、コードを読み取り可能にするほとんどの演算子のエイリアスを提供します。 また、CoffeeScriptで記述されたプログラムの保守も簡単です。
  • クラスベースの継承-JavaScriptにはクラスがありません。 それらの代わりに、強力ではあるがわかりにくいプロトタイプを提供します。 JavaScriptとは異なり、クラスを作成してCoffeeScriptで継承できます。 これに加えて、インスタンスと静的プロパティ、および mixins も提供します。 JavaScriptのネイティブプロトタイプを使用してクラスを作成します。
  • * No varキーワード*-CoffeeScriptで変数を作成するために var キーワードを使用する必要はありません。したがって、偶発的または不要なスコープの減速を回避できます。
  • 問題のある記号を避ける-CoffeeScriptで問題のあるセミコロンと括弧を使用する必要はありません。 中括弧の代わりに、空白を使用して、関数、ループなどのブロックコードを区別できます。
  • 広範なライブラリのサポート-CoffeeScriptでは、JavaScriptのライブラリを使用でき、その逆も可能です。 したがって、CoffeeScriptを使用しながら、豊富なライブラリセットにアクセスできます。

CoffeeScriptの歴史

  • CoffeeScriptはJeremy Ashkenasによって開発されました。 2009年12月13日にGitで最初にコミットされました。
  • もともと、CoffeeScriptのコンパイラはRuby言語で書かれていました。
  • 2010年3月に、CoffeeScriptコンパイラが置き換えられました。今回はRubyの代わりにCoffeeScript自体を使用しました。
  • そして同じ年に、CoffeeScript 1.0がリリースされ、リリースの時点で、Gitハブの最重要指名手配プロジェクトの1つでした。

CoffeeScriptの制限

  • 空白に敏感-CoffeeScriptは空白に非常に敏感なので、プログラマはインデントを提供する際に非常に注意する必要があります。 適切なインデントを維持しないと、コード全体が間違っている可能性があります。

finddevguidesのCoffeeScript IDE

Coding Groundセクションhttp://www.finddevguides.com/codinggroundにあるfinddevguidesのCoffeeScriptコンパイラを使用して、CoffeeScriptファイルをコンパイルできます。 CoffeeScriptコンパイラを使用するには、以下の手順に従ってください。

ステップ1

次のリンクhttp://www.finddevguides.com/[www.finddevguides.com]をクリックして、当社のWebサイトのホームページにアクセスしてください。

ステップ2

以下のスナップショットで強調表示されているように、ホームページの右上隅にある CODING GROUND という名前のボタンをクリックします。

finddevguidesホームページ

ステップ3

これは、約135のプログラミング言語用のオンラインターミナルとIDEを提供する CODING GROUND セクションにつながります。 次のスナップショットに示されている[オンラインIDE]セクションでCoffeeScript IDEを開きます。

コーディンググラウンド

ステップ4

CoffeeScriptコードを main.coffee (ファイル名を変更できます)に貼り付け、 Preview ボタンをクリックすると、次のスナップショットに示すように、コンソールにコンパイル済みのJavaScriptが表示されます。

CoffeeScript IDE

CoffeeScript-環境

CoffeeScriptの最新バージョンのコンパイラは、CoffeeScript自体で記述されています。 ブラウザなしでシステムでCoffeeScriptファイルを実行するには、JavaScriptランタイムが必要です。

Node.js

Node.jsは、ネットワークサーバーアプリケーションの開発に使用されるJavaScriptフレームワークです。 また、JavaScriptとオペレーティングシステム間のブリッジとしても機能します。

CoffeeScriptのコマンドラインバージョンはNode.jsパッケージとして配布されます。 したがって、システムにCoffeeScript(コマンドライン)をインストールするには、まずnode.jsをインストールする必要があります。

Node.jsのインストール

Node.jsをシステムにダウンロードしてインストールする手順は次のとおりです。

ステップ1

nodejs homepageにアクセスし、以下のスナップショットで強調表示されているボタンをクリックして、Windows用の安定バージョンをダウンロードします。

ホームページ

ステップ2

クリックすると、 node-v5.50-x64 という名前の_.msc_ファイルがシステムにダウンロードされ、ダウンロードしたファイルを実行してNode.jsセットアップを開始します。 Node.jsセットアップウィザードのようこそページのスナップショットを次に示します。

次へをクリック

ステップ3

Node.jsセットアップウィザードの[ようこそ]ページで[次へ]ボタンをクリックします。これにより、エンドユーザーライセンス契約ページに移動します。 使用許諾契約に同意し、次のように[次へ]ボタンをクリックします。

ライセンス契約

ステップ4

次のページで、宛先フォルダーをNode.jsをインストールするパスに設定する必要があります。 必要なフォルダーへのパスを変更し、「次へ」ボタンをクリックします。

宛先フォルダーの設定

ステップ5

  • カスタムセットアップ*ページで、Node.jsランタイムを選択してnode.exeファイルをインストールし、[次へ]をクリックします。

カスタムセットアップ

ステップ6

最後に、Node.jsのインストールを開始する[インストール]ボタンをクリックします。

インストールをクリック

以下に示すように、Node.jsセットアップウィザードの[完了]ボタンをクリックして、Node.jsのインストールを完了します。

完了をクリック

CoffeeScriptのインストール

Node.jsは、コマンドプロンプト(* Node.jsコマンドプロンプト*)を提供します。 次のコマンドを入力して、CoffeeScriptをグローバルにインストールできます。

c:\> npm install -g coffeescript

上記のコマンドを実行すると、次の出力を生成してCoffeeScriptがシステムにインストールされます。

CoffeeScriptのインストール

検証

次のコマンドを入力して、CoffeeScriptのインストールを確認できます。

c:\> coffee -v

インストールが成功すると、このコマンドは以下に示すバージョンのCoffeeScriptを提供します。

検証

CoffeeScript-コマンドラインユーティリティ

Node.jsにCoffeeScriptをインストールすると、 coffee-command line utility にアクセスできます。 ここでは、 coffee コマンドがキーコマンドです。 このコマンドのさまざまなオプションを使用して、CoffeeScriptファイルをコンパイルおよび実行できます。

*-h* または*-help *オプションを使用して、 *coffee* コマンドのオプションのリストを表示できます。 * Node.jsコマンドプロンプト*を開き、その中で次のコマンドを実行します。
c:\>coffee -help

このコマンドは、 coffee のさまざまなオプションのリストと、以下に示すように、それぞれが実行する操作の説明を提供します。

coffeecommandヘルプ

CoffeeScriptコードのコンパイル

CoffeeScriptファイルは、。coffee *という拡張子で保存されます。 以下に示すように、coffeeコマンドの *-cまたは—​compile オプションを使用して、これらのファイルをコンパイルできます。

c:\>coffee -c filename.coffee

システムに、コンソールにメッセージを出力する次のCoffeeScriptコードを含むファイルがあるとします。

name = "Raju"
console.log "Hello"+name+" Welcome to finddevguides"

注意-* console.log()*関数は、指定された文字列をコンソールに出力します。

上記のコードをコンパイルするには、 sample.coffee という名前のファイルに保存します。 Node.jsコマンドプロンプトを開きます。 ファイルを保存したパスを参照し、以下に示すように* coffeeコマンドラインユーティリティ*のcoffeeコマンドの -c オプションを使用してコンパイルします。

c:\> coffee -c sample.coffee

上記のコマンドを実行すると、CoffeeScriptコンパイラは指定されたファイル(sample.coffee)をコンパイルし、以下に示すように、sample.jsという名前で現在の場所に保存します。

JSファイル

sample.jsファイルを開くと、生成されたJavaScriptを次のように確認できます。

//Generated by CoffeeScript 1.10.0
(function() {
  var name;
  name = "Raju";
  console.log("Hello " + name + " Welcome to finddevguides");

}).call(this);

CoffeeScriptコードの実行

次のように、Node.jsコマンドプロンプトでcoffeeコマンドにファイル名を渡すだけで、CoffeeScriptファイルを実行できます。

c:\> coffee sample.coffee

たとえば、sample.coffeeファイルを実行します。 そのためには、Node.jsコマンドプロンプトを開きます。 以下に示すように、ファイルを保存したパスを参照し、その名前をcoffeeコマンドに直接渡すことでファイルを実行します。

実行

監視とコンパイル

シナリオによっては、スクリプトに多くの変更を加える可能性があります。 coffeeコマンドの – w オプションを使用して、スクリプトの変更を監視します。

以下に示すように、 - wc オプションを使用して、ファイルを同時に監視およびコンパイルできます。 このオプションを使用すると、スクリプトを変更するたびにファイルが再コンパイルされます。

c:\>coffee -wc file_name

*-wc* オプションを使用して *sample.coffee* という名前のファイルをコンパイルし、スクリプトを3回変更したとします。 スクリプトを変更するたびに、以下に示すようにNode.jsコマンドプロンプトから *.coffee* ファイルが再コンパイルされます。

ウォッチしてコンパイル

出力ディレクトリの設定

*_- o_* オプションを使用すると、出力ディレクトリを設定して、以下に示すようにコンパイル済みJavaScriptファイルを配置できます。
c:\>coffee -o "Required path where we want our .js files" file_name

コマンドプロンプトで次のコマンドを実行して、 - o オプションを使用して、Eドライブの data という名前のフォルダーにsample.coffeeファイルのJavaScriptコードを保存します。

c:\>coffee -o E://data sample.coffee

以下は、上記のコマンドを実行した後の特定のフォルダーのスナップショットです。 ここでは、sample.coffeeのJavaScriptファイルを確認できます

出力ディレクトリ

コンパイルされたJavaScriptを印刷する

コンパイルされたjavascriptをコンソール自体に印刷する場合は、以下に示すようにcoffeeコマンドの - p オプションを使用する必要があります。

c:\>coffee -p file_name

たとえば、次のように_-p_オプションを使用して、_sample.coffee_ファイルのコンパイル済みJavaScriptコードをコンソールに印刷できます。

JavaScriptを印刷

REPL(印刷評価ループの読み取り)

CoffeeScriptは、REPLインタラクティブシェルを提供します。 このシェルは、CoffeeScript式を評価するために使用されます。 このシェルにCoffeeScriptコードを入力して、すぐに結果を取得できます。 以下に示すように、オプションなしで coffee コマンドを実行すると、REPLを開くことができます。

コーヒーコマンドを実行

このシェルを使用して、変数に値を割り当て、関数を作成し、結果を評価できます。 次のスクリーンショットに示すように、REPLで関数を呼び出すと、関数の値が出力されます。 式を指定すると、式の結果を評価して出力します。 そして、その中にステートメントを単に入力すると、最後のステートメントの値を出力します。

REPLの使用法

REPLでは、_ctrl+ v_を押して複数行モードにアクセスできます。この場合、複数の行(関数など)でコードを評価でき、_ctrl+ v_をもう一度押すと、そこからREPLモードに戻ります。 次に、マルチラインモードの使用例を示します。

REPL Mutiline関数

ブラウザからCoffeeScriptを実行する

以下に示すように、JavaScriptのようにHTMLの<script>タグを使用してCoffeeScriptを実行できます。

<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"
   type="text/javascript" charset="utf-8"></script>
<script type="text/coffeescript">
  # Some CoffeeScript
</script>

ただし、このためには、各アプリケーションにライブラリをインポートする必要があり、出力が表示される前にCoffeeScriptコードが1行ずつ解釈されます。 これによりアプリケーションの速度が低下するため、このアプローチは推奨されません。

したがって、アプリケーションでCoffeeScriptを使用するには、Coffeeコマンドラインユーティリティを使用してそれらをプリコンパイルする必要があります。その後、アプリケーションで生成されたJavaScriptを使用できます。

CoffeeScript-構文

前の章で、CoffeeScriptをインストールする方法を見てきました。 この章では、CoffeeScriptの構文を確認します。

CoffeeScriptの構文は、JavaScriptの構文と比較するとより優雅です。 中括弧、セミコロン、可変減速などの面倒な機能を回避します。

CoffeeScriptステートメント

C、C&plus;&plus;、Javaなどの他の多くのプログラミング言語とは異なり、CoffeeScriptのステートメントはセミコロン(;)で終わりません。 その代わりに、すべての新しい行はCoffeeScriptコンパイラーによって個別のステートメントと見なされます。

CoffeeScriptステートメントの例を次に示します。

name = "Javed"
age = 26

同様に、以下に示すようにセミコロンを使用してそれらを区切ることにより、1行に2つのステートメントを書くことができます。

name = "Javed";age = 26

CoffeeScript変数(varキーワードなし)

JavaScriptでは、以下に示すように、作成する前に var キーワードを使用して変数を宣言します。

var name = "Javed"
var age = 20

CoffeeScriptで変数を作成する際、 var キーワードを使用して変数を宣言する必要はありません。 以下に示すように、変数に値を割り当てるだけで、変数を直接作成できます。

name = "Javed"
age = 20

括弧なし

一般に、関数の宣言、呼び出しの際に括弧を使用し、あいまいさを避けるためにコードブロックを分離します。 CoffeeScriptでは、括弧を使用する必要はありません。関数を作成する際には、以下に示すように括弧の代わりに矢印マーク(*→ *)を使用します。

myfunction = -> alert "Hello"

それでも、特定のシナリオでは括弧を使用する必要があります。 パラメータなしで関数を呼び出すときは、括弧を使用します。 たとえば、CoffeeScriptにmy_functionという名前の関数がある場合、以下に示すように呼び出す必要があります。

my_function()

同様に、括弧を使用してあいまいなコードを分離することもできます。 次の例を観察すると、括弧なしの場合、結果は2233であり、括弧付きの場合、45になります。

alert "The result is  "+(22+33)

中かっこなし

JavaScriptでは、関数、ループ、条件ステートメントなどのブロックコードに中括弧を使用します。 CoffeeScriptでは、中括弧を使用する必要はありません。 代わりに、体内で適切なインデント(空白)を維持する必要があります。 これは、Python言語から着想を得た機能です。

以下は、CoffeeScriptの関数の例です。 ここでは、中括弧の代わりに、関数の本体を区切るためのインデントとして3つの空白を使用していることがわかります。

myfunction = ->
   name = "John"
   alert "Hello"+name

CoffeeScriptのコメント

どのプログラミング言語でも、コメントを使用して、記述したコードに関する説明を記述します。 これらのコメントは、プログラムの一部とは見なされません。 CoffeeScriptのコメントは、Ruby言語のコメントに似ています。 CoffeeScriptは次の2種類のコメントを提供します-

単一行コメント

CoffeeScriptの1行をコメントする場合は、次のようにハッシュタグをその前に配置するだけです。

# This is the single line comment in CoffeeScript

ハッシュタグ()に続くすべての行は、CoffeeScriptコンパイラーによってコメントと見なされ、コメントを除く、指定されたファイル内の残りのコードをコンパイルします。

複数行コメント

CoffeeScriptで複数の行(複数行)をコメントしたいときはいつでも、以下に示すようにトリプルハッシュタグのペアでそれらの行をラップすることでそれを行うことができます。

###
These are the multi line comments in CoffeeScript
We can write as many number of lines as we want
within the pair of triple hash tags.
###

CoffeeScriptの予約済みキーワード

CoffeeScriptのすべての予約語のリストを次の表に示します。 CoffeeScript変数、関数、メソッド、ループラベル、またはオブジェクト名として使用することはできません。

a

場合

デフォルト

関数

var

void

with

const

let

enum

輸出する

インポート

ネイティブ

hasProp

</emphasis>extends

スライス

</emphasis>バインド

__の指標

実装する

a

他に

インタフェース

パッケージ

非公開

保護された

パブリック

静的

産出

true

null

this

new

削除する

typeof

in

引数

eval

a

instanceof

戻る

スロー

ブレーク

持続する

デバッガ

if

else

スイッチ

for

しながら

do

try

キャッチ

最後に

クラス

伸びる

スーパー

a

CoffeeScript-データ型

CoffeeScriptのデータ型

プログラミング言語の最も基本的な特性の1つは、サポートするデータ型のセットです。 これらは、プログラミング言語で表現および操作できる値のタイプです。

CoffeeScriptは1行ずつJavaScriptにコンパイルするため、CoffeeScriptが提供するデータ型はJavaScriptと同じです。 CoffeeScriptが追加の本質を追加するという事実を除いて。

CoffeeScriptは以下のデータタイプを提供して動作します-

  • 文字列-文字列データ型は一般的な文字のグループを表し、二重引用符( "")で囲まれた文字列値を表します。 + :「Raj」、「Rahman」
  • Number -数値データ型は数値を表します。 + :12、212など
  • ブール-ブールデータタイプは1ビットの情報を表します。 指定できる値はtrueとfalseの2つのみです。
  • 配列-配列オブジェクトを使用すると、単一の変数に複数の値を保存できます。 同じタイプの要素の固定サイズの順次コレクションを格納します。 + :student = ["Rahman"、 "Ramu"、 "Ravi"、 "Robert"]
  • オブジェクト-CoffeeScriptのオブジェクトはJavaScriptのオブジェクトに似ており、プロパティのコレクションです。 プロパティにセミコロン(:)で区切られたキーと値が含まれる場合。 要するに、CoffeeScriptオブジェクトはキーと値のペアのコレクションです。 + :student = \ {name: "Mohammed"、年齢:24、電話:9848022338}
  • Null -定義され、値を保持しない変数は考慮され、nullになります。 これは、JavaScriptのnull値に似ています。
  • 未定義-値が割り当てられていない変数は、未定義変数と見なされます。 コードでこのような変数を使用すると、未定義のエラーが発生します。

データ型の配列とオブジェクトについては、別の章で詳しく説明します。

CoffeeScript-変数

変数は名前付きコンテナに他なりません。 これらのコンテナにデータを配置し、コンテナの名前を使用してデータを参照できます。

CoffeeScript変数

JavaScriptでは、変数を使用する前に、変数を宣言して初期化する(値を割り当てる)必要があります。 JavaScriptとは異なり、CoffeeScriptで変数を作成するときに、 var キーワードを使用して変数を宣言する必要はありません。 以下に示すように、リテラルに値を割り当てるだけで変数を作成します。

name = variable name

次のCoffeeScriptコードでは、文字列と数値データ型の2つの変数 nameage をそれぞれ定義しています。 variable_example.coffee という名前のファイルに保存します。

name = "Javed"
age = 25

コードのコンパイル

コマンドプロンプトで次のコマンドを実行して、上記のCoffeeScriptコードをコンパイルします。

c:\> compile -c variable_example.coffee

コンパイル時に、 variable_example.js という名前のJavaScriptファイルが生成され、次のコンテンツが含まれます。 ここで、コンパイラーが私たちに代わって var キーワードを使用して変数(年齢と名前)を宣言したことを確認できます。

//Generated by CoffeeScript 1.10.0
(function() {
  var age, name;
  name = "Javed";
  age = 25;

}).call(this);

可変スコープ

変数の範囲は、それが定義されているプログラムの領域です。 JavaScript変数とCoffeeScript変数のスコープは2つだけです。

  • グローバル変数-グローバル変数にはグローバルスコープがあり、JavaScriptコードのどこでも使用できます。
  • ローカル変数-ローカル変数は、定義されている関数内でのみ表示されます。 関数パラメーターは、常にその関数に対してローカルです。

JavaScriptの変数に関する問題

JavaScriptでは、 var キーワードを使用せずに変数を定義するたびに、グローバルスコープで作成されます。 これは多くの問題を引き起こします。 次の例を考慮してください-

<script type = "text/javascript">
   var i = 10;
   document.write("The value of global variable i is "+ i);
   document.write("<br>");
   test();
   function test() {
      i = 20;
      document.write("The value of local variable i is "+i);
      document.write("<br>");
   }
   document.write("The value of global variable i is "+i);
</script>

実行すると、上記のJavaScriptは次の出力を提供します-

The value of global variable i is 10

The value of local variable i is 20

The value of global variable i is 20

上記の例では、グローバルスペースに i という変数を作成し、値10を割り当てました。 そして、関数内で、同じ名前のローカル変数を作成しようとすると、i = 20;として宣言しました。 varキーワードなし。 var キーワードが欠落しているため、グローバル変数 i の値は20に再割り当てされます。

このため、 var キーワードを使用して変数を宣言することをお勧めします。

CoffeeScriptの可変スコープ

CoffeeScriptファイルをコンパイルするたびに、CoffeeScriptコンパイラーは匿名関数を作成し、その関数内で、CoffeeScriptコードを1行ずつJavaScriptにトランスコンパイルします。 (必要に応じて、コンパイルコマンドの -b または*-bare オプションを使用して最上位関数ラッパーを削除できます)作成するすべての変数は、匿名関数内で *var キーワードを使用して宣言されるため、 、デフォルトでは、すべての変数はCoffeeScriptでローカルです。

(function() {
  var age, name;
  name = "javed";
  age = 20;
}).call(this);

とにかく、必要に応じて、グローバル名前空間で変数を宣言できます。 以下に示すように明示的に行うことができます。

obj = this
obj.age = 30

CoffeeScript変数名(リテラル)

CoffeeScriptで変数に名前を付けるときは、次のルールに留意してください。

  • CoffeeScriptの予約キーワードを変数名として使用しないでください。 これらのキーワードについては、次のセクションで説明します。 たとえば、ブレークまたはブール変数名は無効です。
  • CoffeeScriptの変数名は数字(0-9)で始まってはなりません。 文字またはアンダースコア文字で始まる必要があります。 たとえば、123testは無効な変数名ですが、_123testは有効な変数名です。
  • CoffeeScriptの変数名では大文字と小文字が区別されます。 たとえば、 Namename は2つの異なる変数です。

CoffeeScript-演算子とエイリアス

CoffeeScriptオペレーター

演算子は、特定の数学関数または論理関数を実行するようコンパイラーに指示する記号です。 簡単な式を見てみましょう 4&plus; 5は9 です。 ここで、4と5は*オペランド*と呼ばれ、「&plus;」は*演算子*と呼ばれます。

CoffeeScriptが提供する演算子は、いくつかの違いを除いてJavaScriptと同じです。 JavaScriptには問題のある演算子がいくつかあります。 CoffeeScriptはそれらを削除するか機能を変更し、いくつかの新しい演算子も導入しました。

以下は、CoffeeScriptでサポートされている演算子のリストです。

  • 算術演算子
  • 比較演算子
  • 論理(またはリレーショナル)演算子
  • 割り当て演算子

CoffeeScriptエイリアス

演算子に加えて、CoffeeScriptはエイリアスも提供します。 CoffeeScriptは、CoffeeScriptコードを読みやすく、より使いやすいものにするために、さまざまな演算子とシンボルのエイリアスを提供します。

CoffeeScriptのすべての演算子とエイリアスを1つずつ見ていきましょう。

算術演算子

CoffeeScriptは次の算術演算子をサポートしています。 変数 A10 を保持し、変数 B20 を保持すると仮定します-

link:/coffeescript/coffeescript_arithmetic_operators [例を表示]

S.No Operator and Description Example
1

PLUS (Addition)

2つのオペランドを追加します

A PLUS B = 30
2

− (Subtraction)

最初のオペランドから2番目のオペランドを減算します

A - B = -10
3
  • (乗算) *

両方のオペランドを乗算します

A* B = 200
4

/(Division)

分子を分母で除算する

B/A = 2
5

% (Modulus)

整数除算の剰余を出力します

B % A = 0
6

PLUSPLUS (Increment)

整数値を1つ増やします

APLUSPLUS = 11
7
  • (デクリメント)*

整数値を1減らします

A-- = 9

比較演算子

JavaScriptは、次の比較演算子をサポートしています。 変数 A10 を保持し、変数 B20 を保持すると仮定します-

link:/coffeescript/coffeescript_comparison_operators [例を表示]

S.No Operator and Description Example
1

= = (Equal)

2つのオペランドの値が等しいかどうかを確認し、等しい場合は条件が真になります。

(A == B) is not true.
2

!= (Not Equal)

2つのオペランドの値が等しいかどうかをチェックし、値が等しくない場合は条件が真になります。

(A != B) is true.
3

> (Greater than)

左のオペランドの値が右のオペランドの値よりも大きいかどうかをチェックし、そうであれば条件は真になります。

(A > B) is not true.
4

< (Less than)

左のオペランドの値が右のオペランドの値よりも小さいかどうかを確認し、そうであれば条件は真になります。

(A < B) is true.
5

>= (Greater than or Equal to)

左のオペランドの値が右のオペランドの値以上かどうかをチェックし、そうであれば条件は真になります。

(A >= B) is not true.
6

⇐ (Less than or Equal to)

左のオペランドの値が右のオペランドの値以下かどうかをチェックし、そうであれば条件は真になります。

(A ⇐ B) is true.

次の表に、いくつかの比較演算子のエイリアスを示します。 A20 を保持し、変数 B20 を保持するとします。

リンク:/coffeescript/coffeescript_comparison_aliases [例を表示]

Operator Alias Example
= = (Equal) is A is B gives you true.
!= = (Not Equal) isnt A isnt B gives you false.

論理演算子

CoffeeScriptは次の論理演算子をサポートしています。 変数 A10 を保持し、変数 B20 を保持すると仮定します-

link:/coffeescript/coffeescript_logical_operators [例を表示]

S.No Operator and Description Example
1

&& (Logical AND)

両方のオペランドがゼロ以外の場合、条件は真になります。

(A && B) is true.
2 *

(Logical OR)*

2つのオペランドのいずれかがゼロ以外の場合、条件は真になります。

(A
B) is true. 3

! (Logical NOT)

オペランドの論理状態を反転します。 条件が真の場合、Logical NOT演算子はそれを偽にします。

次の表に、いくつかの論理演算子のエイリアスを示します。 Xtrue を保持し、変数 Yfalse を保持するとします。

リンク:/coffeescript/coffeescript_logical_aliases [例を表示]

Operator Alias Example
&& (Logical AND) and X and Y gives you false
(Logical OR)
or X or Y gives you true ! (not x)

ビット演算子

CoffeeScriptは次のビット演算子をサポートしています。 変数 A2 を保持し、変数 B3 を保持すると仮定します-

リンク:/coffeescript/coffeescript_bitwise_operators [例を表示]

S.No Operator and Description Example
1

& (Bitwise AND)

整数引数の各ビットに対してブールAND演算を実行します。

(A & B) is 2.
2 *

(BitWise OR)*

整数引数の各ビットに対してブールOR演算を実行します。

(A B) is 3. 3

^ (Bitwise XOR)

整数引数の各ビットに対してブール排他的OR演算を実行します。 排他的ORは、オペランド1が真であるか、オペランド2が真であり、両方ではないことを意味します。

(A ^ B) is 1. 4

~ (Bitwise Not)

これは単項演算子であり、オペランドのすべてのビットを反転することにより動作します。

(~B) is -4. 5

<< (Left Shift)

第1オペランドのすべてのビットを、第2オペランドで指定された桁数だけ左に移動します。 新しいビットはゼロで埋められます。 値を1ポジション左にシフトすることは、2を乗算することと同等です。2ポジションをシフトすることは、4を乗算することと同等です。

(A << 1) is 4. 6

割り当て演算子

CoffeeScriptは次の割り当て演算子をサポートしています-

link:/coffeescript/coffeescript_assignment_operators [例を表示]

S.No Operator and Description Example
1

= (Simple Assignment )

右側のオペランドから左側のオペランドに値を割り当てます

C = A PLUS B will assign the value of A PLUS B into C
2

PLUS= (Add and Assignment)

右オペランドを左オペランドに追加し、結果を左オペランドに割り当てます。

C PLUS= A is equivalent to C = C PLUS A
3

-= (Subtract and Assignment)

左のオペランドから右のオペランドを減算し、結果を左のオペランドに割り当てます。

C -= A is equivalent to C = C - A
4

*= (Multiply and Assignment)

右オペランドと左オペランドを乗算し、結果を左オペランドに割り当てます。

C *= A is equivalent to C = C *A
5

/= (Divide and Assignment)

左のオペランドを右のオペランドで除算し、結果を左のオペランドに割り当てます。

C/= A is equivalent to C = C/A
6

%= (Modules and Assignment)

2つのオペランドを使用してモジュラスを取得し、結果を左のオペランドに割り当てます。

C %= A is equivalent to C = C % A

-ビット単位演算子にも同じロジックが適用されるため、⇐=、>> =、>> =、&=、| =、^ =のようになります。

CoffeeScriptの等価演算子

JavaScriptを使用しているときに、2種類の等値演算子 ===== に遭遇します。

JavaScriptの == 演算子は type coercive です。つまり、操作内の2つのオペランドの型が異なる場合、一方の演算子のデータ型が他方に変換されてから、両方が比較されます。

CoffeeScriptはこの望ましくない強制を回避し、 == 演算子をJavaScript === の厳密な比較演算子にコンパイルします。

*===* を使用して2つのオペランドを比較する場合、値とデータ型の両方が等しい場合にのみ *true* を返し、そうでない場合は *false* を返します。

次の例を考えてください。 ここには、2つの変数 ab があります。 a は整数型の値21を保持し、 b は同じ値を保持しますが、それは string 型です。 CoffeeScriptでは、 ab を比較すると、結果は false になります。 (CoffeeScriptの == 演算子はJavaScriptの === 演算子に変換されるため)

a=21
b="21"
result = 21=='21'
console.log result

コンパイル時に、上記のCoffeeScriptは次のJavaScriptを生成します

//Generated by CoffeeScript 1.10.0
(function() {
  var a, b, result;

  a = 21;

  b = "21";

  result = a === b;
  console.log(result);
}).call(this);

実行すると、次の出力が生成されます。

false

実存のオペレーター

CoffeeScriptは、変数の存在を検証するために、実在演算子と呼ばれる新しい演算子を提供します。 *?*で示されます。 変数がnullまたは未定義でない限り、存在演算子はtrueを返します。

以下は、実存演算子の例です。 ここには、 name、age 、および subject という3つの変数があり、実在演算子を使用して変数名と電話の存在を確認しています。

name="Ramu"
age=24
subject="Engineering"
verify_name = name?
verify_phone = phone?
console.log verify_name
console.log verify_phone

コンパイル時に、これにより次のJavaScriptコードが生成されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var age, name, subject, verify_name, verify_phone;
  name = "Ramu";
  age = 24;

  subject = "Engineering";
  verify_name = name != null;
  verify_phone = typeof phone !== "undefined" && phone !== null;
  console.log(verify_name);
  console.log(verify_phone);

}).call(this);

上記のCoffeeScriptファイルを実行すると、次の出力が生成されます。

true
false

-存在演算子*?*のアクセサバリアントがあります。 の代わりに使用できます。 null参照を見つける演算子。

連鎖比較

Pythonと同様に、CoffeeScriptの単一の式で一連の比較演算子を使用できます。

以下は、連鎖比較の使用例です。

score = 70
passed = 100 > score > 40

console.log passed

コンパイル時に、CoffeeScriptの例は次のJavaScriptコードを提供します。

//Generated by CoffeeScript 1.10.0
(function() {
  var passed, score;

  score = 70;

  passed = (100 > score && score > 40);

  console.log(passed);

}).call(this);

上記のCoffeeScriptコードを実行すると、次の出力が生成されます。

true

注意-CoffeeScriptは三項演算子を削除します。その代わりに、 inline if ステートメントを使用できます。

CoffeeScriptエイリアス

一般的に、CoffeeScriptは、CoffeeScriptコードを読みやすく、より使いやすいものにするために、さまざまな演算子とシンボルにエイリアスを提供します。 以下は、CoffeeScriptによって提供されるエイリアスです。

Name Operator/symbol Aliases
"equals to" operator == is
"not equals to" operator !== isnt
"not" operator ! not
"and" operator && and
"or" operator
or boolean value true
true true, yes, on boolean value false
false off, no current object
this @ new line (or) semi colon
\n or ; then Inverse of if
! if unless To test for array presence
in To test for object presence
of Exponentiation
a**b Integer division
a//b dividend dependent modulo

次の例は、CoffeeScriptでエイリアスを使用する方法を示しています-

a=21; b=21

x = true; y = false

console.log a is b

console.log a isnt b

console.log x and y

console.log x or y

console.log yes or no

console.log on or off

console.log a**b

console.log a//b

console.log a%%b

上記の例をコンパイルすると、次のJavaScriptコードが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var a, b, x, y,
    modulo = function(a, b) { return (+a % (b = +b) + b) % b; };

  a = 21;

  b = 21;

  x = true;

  y = false;

  console.log(a === b);

  console.log(a !== b);

  console.log(x && y);

  console.log(x || y);

  console.log(true || false);

  console.log(true || false);

  console.log(Math.pow(a, b));

  console.log(Math.floor(a/b));

  console.log(modulo(a, b));

}).call(this);

上記のCoffeeScriptファイルを実行すると、次の出力が生成されます-

true
false
false
true
true
true
5.842587018385982e+27
1
0

CoffeeScript-条件付き

プログラミング中に、特定のパスのセットからパスを選択する必要があるいくつかのシナリオに遭遇します。 そのような状況では、条件文が必要です。 条件文は、決定を下し、正しい行動をとるのに役立ちます。

以下は、ほとんどのプログラミング言語で見られる典型的な意思決定構造の一般的な形式です。

意思決定構造

JavaScriptは、 if ステートメント(そのバリアントを含む)および switch ステートメントをサポートしています。 JavaScriptで使用可能な条件に加えて、CoffeeScriptには unless ステートメント、ifの否定、その他が含まれています。

以下は、CoffeeScriptが提供する条件ステートメントです。

S.No. Statement & Description
1

if statement

  • if* ステートメントは、ブール式とそれに続く1つ以上のステートメントで構成されます。 これらのステートメントは、指定されたブール式が真のときに実行されます。
2

if…​else statement

  • if* ステートメントの後にオプションの *else* ステートメントを続けることができます。これは、ブール式がfalseの場合に実行されます。
3

unless statement

  • unless* ステートメントは、 *if* と似ていますが、ブール式の後に1つ以上のステートメントが続きます。 これらのステートメントは、特定のブール式が偽のときに実行されます。
4

unless…​else statement

  • unless* ステートメントの後にオプションの *else* ステートメントを続けることができます。これは、ブール式が真の場合に実行されます。
5

switch statement

  • switch* ステートメントを使用すると、変数を値のリストと等しいかどうかをテストできます。

CoffeeScriptのthenキーワード

*if* および *unless* ステートメントは、複数行で記述されたブロックステートメントです。 CoffeeScriptには *then* キーワードがあり、これを使用して *if* および *unless* ステートメントを1行で記述できます。

以下は、 then キーワードを使用して記述されたCoffeeScriptのステートメントです。

S.No. Statement & Description
1

if-then statement

if-thenステートメントを使用して、CoffeeScriptの if ステートメントを1行で記述できます。 ブール式の後にthenキーワードが続き、その後に1つ以上のステートメントが続きます。 これらのステートメントは、指定されたブール式が真のときに実行されます。

2

if-then…​else statement

if-thenステートメントの後にオプションの else ステートメントを続けることができます。これは、ブール式がfalseの場合に実行されます。 if-then …​ elseステートメントを使用して、if …​ elseステートメントを1行で記述できます。

3

unless-then statement

without-thenステートメントを使用すると、CoffeeScriptの unless ステートメントを1行で記述できます。 ブール式の後に then キーワードが続き、その後に1つ以上のステートメントが続きます。 これらのステートメントは、指定されたブール式が偽のときに実行されます。

4

unless…​then else statement

except-thenステートメントの後にオプションの else ステートメントを続けることができます。これはブール式がtrueの場合に実行されます。 except-then …​ elseステートメントを使用すると、unless …​ elseステートメントを1行で記述できます。

ステートメントの後置ifおよび後置

CoffeeScriptでは、以下に示すように、最初にコードブロックがあり、その後に if または unless キーワードが続く if および unless ステートメントを記述することもできます。 これは、これらのステートメントの接尾辞形式です。 CoffeeScriptでプログラムを作成するときに便利です。

#Postfix if
Statements to be executed if expression

#Postfix unless
Statements to be executed unless expression

リンク:/coffeescript/postfix_if_and_unless [例を表示]

CoffeeScript-ループ

コーディング中に、コードのブロックを繰り返し実行する必要がある場合があります。 このような状況では、ループステートメントを使用できます。

一般に、ステートメントは順番に実行されます。関数の最初のステートメントが最初に実行され、次に2番目のステートメントが実行されます。

ループステートメントを使用すると、ステートメントまたはステートメントのグループを複数回実行できます。 以下に示すのは、ほとんどのプログラミング言語での一般的なループ文の形式です

ループアーキテクチャ

JavaScriptは、 while、for 、および for..in ループを提供します。 CoffeeScriptのループはJavaScriptのループに似ています。

*while* ループとそのバリアントは、CoffeeScriptの唯一のループ構造です。 一般的に使用される *for* ループの代わりに、CoffeeScriptは *Comprehensions* を提供します。これについては後の章で詳しく説明します。

CoffeeScriptのwhileループ

*while* ループは、CoffeeScriptが提供する唯一の低レベルのループです。 ブール式とステートメントのブロックが含まれています。 *while* ループは、指定されたブール式が真である限り、指定されたステートメントブロックを繰り返し実行します。 式が偽になると、ループは終了します。

構文

以下は、CoffeeScriptの while ループの構文です。 ここでは、括弧を使用してブール式を指定する必要はなく、ループの本体を中括弧で囲む代わりに(一貫した数の)空白を使用してインデントする必要があります。

while expression
   statements to be executed

次の例は、CoffeeScriptでの while ループの使用法を示しています。 このコードを while_loop_example.coffee という名前のファイルに保存します

console.log "Starting Loop "
count = 0
while count < 10
   console.log "Current Count : " + count
   count++;

console.log "Set the variable to different value and then try"
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c while_loop_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var count;

  console.log("Starting Loop ");

  count = 0;

  while (count < 10) {
    console.log("Current Count : " + count);
    count++;
  }

  console.log("Set the variable to different value and then try");

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee while_loop_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Set the variable to different value and then try

whileのバリアント

CoffeeScriptのWhileループには、* untilバリアント*と* loopバリアント*の2つのバリアントがあります。

S.No. Loop Type & Description
1

until variant of while

  • while* ループの *until* バリアントには、ブール式とコードブロックが含まれています。 このループのコードブロックは、指定されたブール式が偽である限り実行されます。
2

loop variant of while

  • loop* バリアントは、true値*(while true)*の *while* ループと同等です。 このループ内のステートメントは、 *Break* ステートメントを使用してループを終了するまで繰り返し実行されます。

CoffeeScript-理解

前の章で、CoffeeScriptが提供するさまざまなループ、 while およびそのバリアントを学習しました。 それらに加えて、CoffeeScriptは comprehensions として知られる追加のループ構造を提供します。

オプションのガード句と現在の配列インデックスの値を明示的に追加すると、これらの内包表記は他のプログラミング言語の for ループを置き換えます。 内包表記を使用すると、配列だけでなくオブジェクトを反復することができ、配列を反復する内包表記は式であり、関数で返すか、変数に割り当てることができます。

S.No. Statement & Description
1

for..in comprehensions

  • for..in* 内包表記はCoffeeScriptの内包表記の基本形式で、これを使用してリストまたは配列の要素を反復処理できます。
2

for..of comprehensions

配列のように、CoffeeScriptScriptは、オブジェクトと呼ばれるキーと値のペアを保存するためのコンテナーを提供します。 CoffeeScriptが提供する for..of 内包表記を使用してオブジェクトを反復できます。

3

list comprehensions

CoffeeScriptの list 内包表記は、オブジェクトの配列を別の配列にマッピングするために使用されます。

理解の指標

要素のリスト/配列には、内包表記で使用できるインデックスがあります。 以下に示すように、変数を使用して内包表記で使用できます。

for student,i in [element1, element2, element3]

次の例は、CoffeeScriptの for…in 内包表記のインデックスの使用方法を示しています。 このコードを for_in_index.coffee という名前のファイルに保存します

for student,i in ['Ram', 'Mohammed', 'John']
   console.log "The name of the student with id "+i+" is: "+student
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c for_in_index.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var i, j, len, ref, student;

  ref = ['Ram', 'Mohammed', 'John'];
  for (i = j = 0, len = ref.length; j < len; i = ++j) {
    student = ref[i];
    console.log("The name of the student with id " + i + " is: " + student);
  }
}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee for_in_index.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

The name of the student with id 0 is: Ram
The name of the student with id 1 is: Mohammed
The name of the student with id 2 is: John

後置形式の内包表記

接尾辞 if および unless と同様に、CoffeeScriptは、コードの作成中に便利なComprehensionsの接尾辞形式を提供します。 これを使用して、次のように for..in 内包表記を1行で記述できます。

#Postfix for..in comprehension
console.log student for student in ['Ram', 'Mohammed', 'John']

#postfix for..of comprehension
console.log key+"::"+value for key,value of { name: "Mohammed", age: 24, phone: 9848022338}

リンク:/coffeescript/postfix_form_of_comprehensions [例を表示]

変数への割り当て

配列を反復するために使用する内包表記は変数に割り当てられ、関数によって返されます。

以下の例を考えてみましょう。 ここでは、 for..in 内包表記を使用して配列の要素を取得し、これを names という名前の変数に割り当てたことを確認できます。 また、 return キーワードを使用して明示的に内包表記を返す関数もあります。 このコードを example.coffee という名前のファイルに保存します

my_function =->
   student = ['Ram', 'Mohammed', 'John']

   #Assigning comprehension to a variable
   names = (x for x in student )
   console.log "The contents of the variable names are ::"+names

   #Returning the comprehension
   return x for x in student
console.log "The value returned by the function is "+my_function()
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var my_function;

  my_function = function() {
    var i, len, names, student, x;
    student = ['Ram', 'Mohammed', 'John'];
    names = (function() {
      var i, len, results;
      results = [];
      for (i = 0, len = student.length; i < len; i++) {
        x = student[i];
        results.push(x);
      }
      return results;
    })();
    console.log("The contents of the variable names are ::" + names);
    for (i = 0, len = student.length; i < len; i++) {
      x = student[i];
      return x;
    }
  };

  console.log("The value returned by the function is " + my_function());

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

The contents of the variable names are ::Ram,Mohammed,John
The value returned by the function is Ram

byキーワード

CoffeeScriptは、要素のリストを定義する範囲を提供します。 たとえば、範囲[1..10]は[1、2、3、4、5、6、7、8、9、10]と同等であり、すべての要素が1ずつ増加します。 内包表記の by キーワードを使用して、この増分を変更することもできます。

次の例は、CoffeeScriptが提供する for..in 内包表記の by キーワードの使用方法を示しています。 このコードを by_keyword_example.coffee という名前のファイルに保存します

array = (num for num in [1..10] by 2)
console.log array
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c by_keyword_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var array, num;

  array = (function() {
    var i, results;
    results = [];
    for (num = i = 1; i <= 10; num = i += 2) {
      results.push(num);
    }
    return results;
  })();

  console.log(array);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee by_keyword_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

[ 1, 3, 5, 7, 9 ]

CoffeeScript-関数

関数は、プログラム内のどこからでも呼び出すことができる再利用可能なコードのブロックです。 これにより、同じコードを何度も記述する必要がなくなります。 プログラマーがモジュラーコードを書くのに役立ちます。

関数を使用すると、プログラマは大きなプログラムをいくつかの小さく管理可能な関数に分割できます。

一般に、JavaScriptを使用して、2つのタイプの関数を定義できます-名前付き関数、関数名本体を持つ通常の関数、および*関数式*。 関数式を使用して、変数に関数を割り当てることができます。

//named function
function sayHello(){
   return("Hello there");
}

//function expressions
var message = function sayHello(){
   return("Hello there");
}

CoffeeScriptの関数

CoffeeScriptの関数の構文は、JavaScriptに比べて簡単です。 CoffeeScriptでは、関数式のみを定義します。

CoffeeScriptでは function キーワードが削除されています。 ここで関数を定義するには、細い矢印(*→ *)を使用する必要があります。

背後では、CoffeeScriptコンパイラーが矢印をJavaScriptの関数定義に変換します(以下を参照)。

(function() {});

CoffeeScriptで return キーワードを使用することは必須ではありません。 CoffeeScriptのすべての関数は、関数の最後のステートメントを自動的に返します。

  • 関数の最後に到達する前に呼び出し元の関数に戻るか、値を返したい場合は、 return キーワードを使用できます。
  • インライン関数(1行にある関数)に加えて、CoffeeScriptで複数行の関数を定義することもできます。 中括弧は削除されるため、適切なインデントを維持することで実行できます。

関数を定義する

以下は、CoffeeScriptで関数を定義する構文です。

function_name = -> function_body

以下に、CoffeeScriptの関数の例を示します。 ここでは、 greet という名前の関数を作成しました。 この関数は、その中のステートメントを自動的に返します。 function_example.coffee という名前のファイルに保存します

greet = -> "This is an example of a function"

コマンドプロンプトで次のコマンドを実行してコンパイルします。

c:\>coffee -c function_example.coffee

コンパイル時に、次のJavaScriptコードが生成されます。 ここで、CoffeeScriptコンパイラが* greet()*という名前の関数で文字列値を自動的に返したことを確認できます。

//Generated by CoffeeScript 1.10.0
(function() {
  var greet;

  greet = function() {
    return "This is an example of a function";
  };

}).call(this);

複数行関数

また、中括弧の代わりにインデントを維持することにより、複数行の関数を定義できます。 ただし、関数全体の行に続くインデントと一致する必要があります。

greet =  ->
  console.log "Hello how are you"

コンパイル時に、上記のCoffeeScriptは次のJavaScriptコードを提供します。 CoffeeScriptコンパイラーは、インデントを使用して分離し、中括弧内に配置した関数の本体を取得します。

//Generated by CoffeeScript 1.10.0
(function() {
  var greet;

  greet = function() {
    return console.log("Hello how are you");
  };

}).call(this);

引数を持つ関数

以下に示すように、かっこを使用して関数に引数を指定することもできます。

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c

上記のCoffeeScriptファイルをコンパイルすると、次のJavaScriptが生成されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

}).call(this);

関数の呼び出し

関数を定義した後、その関数を呼び出す必要があります。 次の例に示すように、名前の後に括弧を配置するだけで、関数を呼び出すことができます。

add = ->
  a=20;b=30
  c=a+b
  console.log "Sum of the two numbers is: "+c
add()

コンパイル時に、上記の例は次のJavaScriptを提供します

//Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function() {
    var a, b, c;
    a = 20;
    b = 30;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };
  add();
}).call(this);

上記のCoffeeScriptコードを実行すると、次の出力が生成されます。

Sum of the two numbers is: 50

引数付きの関数の呼び出し

同様に、以下に示すように、引数を渡して関数を呼び出すことができます。

my_function argument_1,argument_2
or
my_function (argument_1,argument_2)

注意-引数を渡して関数を呼び出すとき、括弧の使用はオプションです。

次の例では、2つのパラメーターを受け入れる* add()*という名前の関数を作成し、呼び出しました。

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20

コンパイル時に、上記の例は次のJavaScriptを提供します。

//Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);

}).call(this);

上記のCoffeeScriptコードを実行すると、次の出力が生成されます。

Sum of the two numbers is: 30

デフォルトの引数

CoffeeScriptはデフォルト引数もサポートしています。 次の例に示すように、関数の引数にデフォルト値を割り当てることができます。

add =(a = 1, b = 2) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20

#Calling the function with default arguments
add()

コンパイル時に、上記のCoffeeScriptは次のJavaScriptファイルを生成します。

//Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    if (a == null) {
      a = 1;
    }
    if (b == null) {
      b = 2;
    }
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);
  add()

}).call(this);

上記のCoffeeScriptコードを実行すると、次の出力が生成されます。

Sum of the two numbers is: 30
Sum of the two numbers is: 3

CoffeeScript-ストリング

Stringオブジェクトを使用すると、一連の文字を操作できます。 ほとんどのプログラミング言語のように、CoffeeScriptの文字列は、引用符を使用して宣言されます-

my_string = "Hello how are you"
console.log my_string

コンパイル時に、次のJavaScriptコードが生成されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var my_string;

  my_string = "Hello how are you";

  console.log(my_string);

}).call(this);

文字列連結

「&plus;」を使用して2つの文字列を連結できます下に示すようなシンボル。

new_string = "Hello how are you "+"Welcome to finddevguides"
console.log new_String

コンパイル時に、次のJavaScriptコードが生成されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var new_string;

  new_string = "Hello how are you " + "Welcome to finddevguides";

  console.log(new_String);

}).call(this);

上記の例を実行すると、次のように連結された文字列を観察できます。

Hello how are you Welcome to finddevguides

文字列補間

CoffeeScriptには、*文字列補間*と呼ばれる機能もあり、スティングに変数を含めます。 CoffeeScriptのこの機能は、Ruby言語から着想を得たものです。

文字列の補間は、二重引用符 "" 、ハッシュタグ*#、および中括弧のペア *\ {} を使用して行われました。 文字列は二重引用符で宣言され、補間される変数は、下に示すようにハッシュタグが前に付いた中括弧で囲まれます。

name = "Raju"
age = 26
message ="Hello #{name} your age is #{age}"
console.log message

上記の例をコンパイルすると、次のJavaScriptが生成されます。 ここでは、*&plus; *記号を使用して、ストリング補間が通常の連結に変換されることを確認できます。

//Generated by CoffeeScript 1.10.0
(function() {
  var age, message, name;

  name = "Raju";

  age = 26;

  message = "Hello " + name + " your age is " + age;

  console.log(message);

}).call(this);

上記のCoffeeScriptコードを実行すると、次の出力が得られます。

Hello Raju your age is 26

'#\ {variable} *として渡される変数は、文字列が二重引用符 *"" で囲まれている場合にのみ補間されます。 二重引用符の代わりに一重引用符 ''' を使用すると、そのままの行が生成されます。 次の例を考えてください。

name = "Raju"
age = 26
message ='Hello #{name} your age is #{age}'
console.log message

補間で二重引用符の代わりに単一引用符を使用すると、次の出力が得られます。

Hello #{name} your age is #{age}

CoffeeScriptでは、以下に示すように、連結せずに文字列内の複数の行を許可します。

my_string = "hello how are you
Welcome to finddevguides
Have a nice day."
console.log my_string

次の出力が生成されます。

hello how are you Welcome to finddevguides Have a nice day.

JavaScript文字列オブジェクト

JavaScriptのStringオブジェクトを使用すると、一連の文字を操作できます。 このオブジェクトは、Stingでさまざまな操作を実行するための多くのメソッドを提供します。

CoffeeScriptコードでJavaScriptライブラリを使用できるため、CoffeeScriptプログラムでこれらのメソッドをすべて使用できます。

文字列メソッド

以下は、JavaScriptのStringオブジェクトのメソッドのリストです。 これらのメソッドの名前をクリックして、CoffeeScriptでの使用法を示す例を取得します。

S.No. Method & Description
1

charAt()

指定されたインデックスにある文字を返します。

2

charCodeAt()

指定されたインデックスにある文字のUnicode値を示す数値を返します。

3

concat()

2つの文字列のテキストを結合し、新しい文字列を返します。

4

indexOf()

指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

5

lastIndexOf()

指定した値が最後に出現する呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

6

localeCompare()

参照文字列がソート順で指定された文字列の前後にあるか、同じかを示す数値を返します。

7

match()

正規表現を文字列と照合するために使用されます。

8

search()

正規表現と指定された文字列の一致の検索を実行します。

9

slice()

文字列のセクションを抽出し、新しい文字列を返します。

10

split()

文字列を部分文字列に分離することにより、文字列オブジェクトを文字列の配列に分割します。

11

substr()

指定した位置から指定した文字数までの文字列内の文字を返します。

12

toLocaleLowerCase()

文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます。

13

toLocaleUpperCase()

文字列内の文字は、現在のロケールを考慮しながら大文字に変換されます。

14

toLowerCase()

呼び出し文字列値を小文字に変換して返します。

15

toUpperCase()

呼び出し文字列値を大文字に変換して返します。

CoffeeScript-配列

Arrayオブジェクトを使用すると、1つの変数に複数の値を保存できます。 同じタイプの要素の固定サイズの順次コレクションを格納します。 配列はデータのコレクションを格納するために使用されますが、配列を同じタイプの変数のコレクションと考える方が便利な場合がよくあります。

構文

配列を作成するには、以下に示すように new 演算子を使用して配列をインスタンス化する必要があります。

array = new (element1, element2,....elementN)

Array()コンストラクターは、文字列または整数型のリストを受け入れます。 コンストラクタに単一の整数を渡すことで、配列の長さを指定することもできます。

以下に示すように、要素のリストを角括弧( [] )で指定するだけで配列を定義することもできます。

array = [element1, element2, ......elementN]

以下は、CoffeeScriptで配列を定義する例です。 このコードを array_example.coffee という名前のファイルに保存します

student = ["Rahman","Ramu","Ravi","Robert"]
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c array_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var student;

  student = ["Rahman", "Ramu", "Ravi", "Robert"];

}).call(this);

コンマの代わりに改行

また、以下に示すように適切なインデントを維持して新しい行に各要素を作成することにより、配列の要素間のコンマ(、)を削除することもできます。

student = [
  "Rahman"
  "Ramu"
  "Ravi"
  "Robert"
  ]

配列の理解

内包表記を使用して配列の値を取得できます。

次の例は、内包表記を使用した配列の要素の取得を示しています。 このコードを array_comprehensions.coffee という名前のファイルに保存します

students = [ "Rahman", "Ramu", "Ravi", "Robert" ]
console.log student for student in students
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c array_comprehensions.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var i, len, student, students;

  students = ["Rahman", "Ramu", "Ravi", "Robert"];

  for (i = 0, len = students.length; i − len; i++) {
    student = students[i];
    console.log(student);
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee array_comprehensions.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

Rahman
Ramu
Ravi
Robert

他のプログラミング言語の配列とは異なり、CoffeeScriptの配列は複数のタイプのデータを持つことができます。 文字列と数値の両方。

以下は、複数のタイプのデータを保持するCoffeeScript配列の例です。

students = [ "Rahman", "Ramu", "Ravi", "Robert",21 ]

CoffeeScript-オブジェクト

CoffeeScriptのオブジェクトはJavaScriptのオブジェクトに似ています。 これらはプロパティのコレクションです。プロパティには、セミコロン()で区切られたキーと値が含まれます。 要するに、CoffeeScriptオブジェクトはキーと値のペアのコレクションです。 オブジェクトは中括弧を使用して定義され、空のオブジェクトは \ {} として表されます。

構文

以下に、CoffeeScriptのオブジェクトの構文を示します。 ここでは、オブジェクトのキーと値のペアを中括弧内に配置し、コンマ()を使用して区切ります。

object ={key1: value, key2: value,......keyN: value}

以下は、CoffeeScriptでオブジェクトを定義する例です。 このコードを objects_example.coffee という名前のファイルに保存します

student = {name: "Mohammed", age: 24, phone: 9848022338 }
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
> coffee -c objects_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var student;

  student = {
    name: "Mohammed",
    age: 24,
    phone: 9848022338
  };

}).call(this);

配列の場合と同様に、以下に示すように、新しい行でキーと値のペアを指定することにより、コンマを削除できます。

student = {
  name: "Mohammed"
  age: 24
  phone: 9848022338
  }

中括弧ではなくインデント

CoffeeScriptの他のブロックステートメントと同様に、次の例に示すように、中括弧 \ {} の代わりにインデントを使用できます。

以下に示すように、中括弧なしで上記の例を書き換えることができます。

student =
  name: "Mohammed"
  age: 24
  phone: 9848022338

ネストされたオブジェクト

CoffeeScriptでは、オブジェクト内にオブジェクトを書くことができます。

次の例は、CoffeeScriptのネストされたオブジェクトを示しています。 このコードを nested_objects.coffee という名前のファイルに保存します

contact =
  personal:
    email: "[email protected]"
    phone:  9848022338
  professional:
    email: "[email protected]"
    phone:  9848033228
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
> coffee -c nested_objects.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var contact;

  contact = {
    personal: {
      email: "[email protected]",
      phone: 9848022338
    },
    professional: {
      email: "[email protected]",
      phone: 9848033228
    }
  };

}).call(this);

オブジェクトの理解

オブジェクトの内容を反復処理するために、内包表記を使用できます。 オブジェクトの内容を繰り返すことは、配列の内容を繰り返すことと同じです。 オブジェクトでは、2つの要素のキーと値を取得する必要があるため、2つの変数を使用します。

以下は、内包表記を使用してオブジェクトのコンテンツを反復する方法を示す例です。 このコードを object_comprehensions.coffee という名前のファイルに保存します

student =
  name: "Mohammed"
  age: 24
  phone: 9848022338

console.log key+"::"+value for key,value of student
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
> coffee -c object_comprehensions.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var key, student, value;

  student = {
    name: "Mohammed",
    age: 24,
    phone: 9848022338
  };

  for (key in student) {
    value = student[key];
    console.log(key(+"::" + value));
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

> coffee object_comprehensions.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

name::Mohammed
age::24
phone::9848022338

オブジェクトの配列

CoffeeScriptでは、以下に示すように配列にオブジェクトを含めることもできます。

  a = [
     object1_key1: value
     object1_key2: value
     object1_key3: value
  ,
     object2_key1: value
     object2_key2: value
     object2_key3: value
]

次の例は、オブジェクトの配列を定義する方法を示しています。 カンマ*(、)*を使用して区切ることにより、必要なオブジェクトのキーと値のペアを配列にリストできます。

students =[
    name: "Mohammed"
    age: 24
    phone: 9848022338
  ,
    name: "Ram"
    age: 25
    phone: 9800000000
  ,
    name: "Ram"
    age: 25
    phone: 9800000000
 ]
console.log student for student in students
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c array_of_objects.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var i, len, student, students;

  students = [
    {
      name: "Mohammed",
      age: 24,
      phone: 9848022338
    }, {
      name: "Ram",
      age: 25,
      phone: 9800000000
    }, {
      name: "Ram",
      age: 25,
      phone: 9800000000
    }
  ];

  for (i = 0, len = students.length; i < len; i++) {
    student = students[i];
    console.log(student);
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee array_of_objects.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

{ name: 'Mohammed', age: 24, phone: 9848022338 }
{ name: 'Ram', age: 25, phone: 9800000000 }
{ name: 'Ram', age: 25, phone: 9800000000 }

予約済みキーワード

JavaScriptでは、予約キーワードをオブジェクトのプロパティ名として使用できません。使用する場合は、二重引用符 "" を使用してラップする必要があります。

次の例を考えてください。 ここでは、 class という名前のプロパティを作成しましたが、これは予約済みのキーワードです。 このコードを reserved_keywords.coffee という名前のファイルに保存します

student ={
  name: "Mohammed"
  age: 24
  phone: 9848022338
  class: "X"
  }
console.log key+"::"+value for key,value of student
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c reserved_keywords.coffee

コンパイル時に、次のJavaScriptが提供されます。 ここで、CoffeeScriptコンパイラが私たちに代わってキーワードクラスを二重引用符でラップしていることがわかります。

//Generated by CoffeeScript 1.10.0
(function() {
  var key, student, value;

  student = {
    name: "Mohammed",
    age: 24,
    phone: 9848022338,
    "class": "X"
  };

  for (key in student) {
    value = student[key];
    console.log(key + "::" + value);
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee array_of_objects.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

name::Mohammed
age::24
phone::9848022338
class::X

CoffeeScript-範囲

前の章で、CoffeeScriptで配列を見てきましたが、プログラミング中に、以下に示すように配列に数値のシーケンスを格納する必要があるいくつかのシナリオに直面します。

numbers =[1,2,3,4,5,6,7,8,9,10]

CoffeeScriptは、 ranges と呼ばれる一連の数値を含む配列を表現する簡単な方法を提供します。 CoffeeScriptのこの機能は、Rubyから着想を得ています。

構文

範囲は、。で区切られた範囲内の最初と最後の位置の2つの数値によって作成されます。 または…​. 2つのドット(1..4)では、範囲は包括的(1、2、3、4)です。 3つのドット(1 …​ 4)で、範囲は終了(1、2、3)を除外します。

以下に、CoffeeScriptの範囲の構文を示します。 配列と同様に、角カッコ [] の間の範囲で値を定義します。 範囲内では、数値のシーケンスを格納する際に、シーケンス全体の値を提供する代わりに、以下に示すように、2つのドット( .. )で区切られた begin および end 値を指定できます。

range =[Begin..End]

CoffeeScriptの範囲の例を次に示します。 これを ranges_example.coffee という名前のファイルに保存します。

numbers =[0..9]
console.log "The contents of the range are: "+ numbers
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c ranges_example.coffee

コンパイル時に、次のJavaScriptが提供されます。 ここで、範囲が完全なCoffeeScript配列に変換されることがわかります。

//Generated by CoffeeScript 1.10.0
(function() {
  var numbers;

  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  console.log("The contents of the range are:: " + numbers);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee ranges_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

The contents of the range are:: 0,1,2,3,4,5,6,7,8,9

最終値を除く

範囲は、すべての数値を含む完全な配列にコンパイルされます。 end 値を除外する場合、以下に示すように3つのドット( …​ )を使用して範囲の start および end 要素を分離する必要があります。

range =[Begin...End]

以下に示すように、 end 値を除外することにより、上記の例を書き換えることができます。 次のコンテンツを range_exexcept_end.coffee という名前のファイルに保存します

numbers =[0...9]
console.log "The contents of the range are:: "+ numbers
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c ranges_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var numbers;

  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8];

  console.log("The contents of the range are:: " + numbers);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee ranges_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。 ここでは、終了値 9 が除外されていることがわかります。

The contents of the range are:: 0,1,2,3,4,5,6,7,8

変数で範囲を使用する

開始値と終了値を変数に割り当てることにより、範囲を定義することもできます。

次の例を考えてください。 ここで、変数を使用して範囲を定義しました。 このコードを range_variables.coffee という名前のファイルに保存します

start=0
end=9
numbers =[start..end]
console.log "The contents of the range are: "+ numbers
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c range_variables.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var end, i, numbers, results, start;

  start = 0;

  end = 9;

  numbers = (function() {
    results = [];
    for (var i = start; start <= end ? i <= end : i >= end; start <= end ? i++ : i--) {
      results.push(i);
    }
    return results;
  }).apply(this);

  console.log("The contents of the range are:: " + numbers);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee range_variables.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。 ここでは、終了値 9 が除外されていることがわかります。

The contents of the range are:: 0,1,2,3,4,5,6,7,8,9

配列のある範囲

範囲を使用して配列をスライスできます。 配列(変数)の直後に範囲を指定すると、CoffeeScriptコンパイラーはそれをJavaScriptの* slice()*メソッド呼び出しに変換します。

0〜9などの数値を持つ配列があるとします。次に示すように、最初の4つの要素を取得できます。

num  = [1, 2, 3, 4, 5, 6, 7, 8, 9]
data = num[0..5]

負の値は、末尾からの要素を表します。たとえば、-1は9を示します。 負の数3の後に2つのドットを指定すると、配列の最後の3つの要素が抽出されます。

data = num[-3..]

配列の範囲内で2つのドットのみを num [..] として指定すると、完全な配列が抽出されます。 以下に示す範囲を使用して、配列セグメントを他の要素に置き換えることもできます。

num[2..6] = [13,14,15,16,17]

次の例は、配列での範囲の使用を示しています。 このコードを range_arrays.coffee という名前のファイルに保存します

#slicing an array using ranges
num  = [1, 2, 3, 4, 5, 6, 7, 8, 9]
data = num[0..5]
console.log "The first four elements of the array : "+data


#Using negative values
data = num[-3..]
console.log "The last 3 elements of the array : "+data

#Extracting the whole array
console.log "Total elements of the array : "+num[..]


#Replacing the elements of an array
num[2..6] = [13,14,15,16,17]
console.log "New array : "+num
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c range_arrays.coffee

コンパイル時に、次のJavaScriptが提供されます。 ここで、すべての範囲がJavaScriptのslice()メソッド呼び出しに変換されることを確認できます。

//Generated by CoffeeScript 1.10.0
(function() {
  var data, num, ref;

  num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  data = num.slice(0, 6);

  console.log("The first four elements of the array : " + data);

  data = num.slice(-3);

  console.log("The last 3 elements of the array : " + data);

  console.log("Total elements of the array : " + num.slice(0));

  [].splice.apply(num, [2, 5].concat(ref = [13, 14, 15, 16, 17])), ref;

  console.log("New array : " + num);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee range_arrays.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。 ここでは、終了値 9 が除外されていることがわかります。

The first four elements of the array : 1,2,3,4,5,6
The last 3 elements of the array : 7,8,9
Total elements of the array : 1,2,3,4,5,6,7,8,9
New array : 1,2,13,14,15,16,17,8,9

文字列のある範囲

文字列で範囲を使用することもできます。 Stringsの後に範囲を指定すると、CoffeeScriptは範囲をスライスし、文字の新しいサブセットを返します。

次の例は、文字列での範囲の使用を示しています。 ここで、文字列を作成し、範囲を使用してそこから部分文字列を抽出しました。 このコードを ranges_with_strings.coffee という名前のファイルに保存します

my_string = "Welcome to finddevguides"
new_string = my_string[0..10]
console.log new_string
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c ranges_with_strings.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var my_string, new_string;

  my_string = "Welcome to finddevguides";

  new_string = my_string.slice(0, 6);

  console.log(new_string);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee ranges_with_strings.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。 ここでは、終了値 9 が除外されていることがわかります。

Welcome to

範囲にわたる理解

オブジェクトおよび配列として、内包表記を使用して範囲の要素を繰り返すこともできます。

以下は、範囲に対する内包表記の使用例です。 ここで、範囲を作成し、内包表記を使用してその中の要素を取得しました。 このコードを comprehensions_over_ranges.coffee という名前のファイルに保存します

numbers =[0..9]
console.log "The elements of the range are: "
console.log num for num in numbers
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c comprehensions_over_ranges.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var i, len, num, numbers;

  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  console.log("The elements of the range are: ");

  for (i = 0, len = numbers.length; i < len; i++) {
    num = numbers[i];
    console.log(num);
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee comprehensions_over_ranges.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。 ここでは、終了値 9 が除外されていることがわかります。

The elements of the range are:
0
1
2
3
4
5
6
7
8

同様に、内包表記のbyキーワードを使用してこの増分を変更することもできます。

array = (num for num in [1..10] by 2)
console.log array

CoffeeScript-スプラット

前の章では、関数を定義し、関数を呼び出して引数を渡す方法を説明しました。 一般に、関数に固定数の引数を渡すことができます。 プログラミング中に、変数引数をこれらの関数に渡す必要がある状況に直面する場合があります。 JavaScriptでは、オブジェクトを使用して、関数への可変数の引数を受け入れます。

CoffeeScriptには、複数の引数を関数に渡すための splats という機能があります。 関数でスプラットを使用するには、引数名の後に3つのドットを配置し、 …​ で示します。

構文

以下に、スプラットを使用して関数内で複数の引数を受け入れる構文を示します。

my_function = (arguments...)->
   ............
   ............
   ............

以下は、スプラットを使用して、関数内で複数の引数を受け入れる例です。 ここでは、スプラットを使用して* indian_team()という名前の関数を定義しました。 この関数を3回呼び出しており、呼び出すたびに4人のプレーヤー、6人のプレーヤー、およびフルチームを同時に渡します。 関数定義でスプラットを使用しているため、呼び出すたびに可変数の引数を受け入れます。 このコードを *splats_definition.coffee という名前のファイルに保存します

indian_team = (first, second, others...) ->
  Captain = first
  WiseCaptain = second
  team  = others
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Other team members: " +team

#Passing 4 arguments
console.log "############## Four Players ############"
indian_team "Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma"

#Passing 6 arguments
console.log "############## Six Players ############"
indian_team "Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan"

#Passing full squad
console.log "############## Full squad #############"
indian_team "Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c splats_definition.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var indian_team,
    slice = [].slice;

  indian_team = function() {
    var Captain, WiseCaptain, first, others, second, team;
    first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
    Captain = first;
    WiseCaptain = second;
    team = others;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    return console.log("Other team members: " + team);
  };

  console.log("############## Four Players ############");

  indian_team("Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma");

  console.log("############## Six Players ############");

  indian_team("Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan");

  console.log("############## Full squad #############");

  indian_team("Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane");

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee splats_definition.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

############## Four Players ############
Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma
############## Six Players ############
Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan
############## Full squad #############
Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan,Ravindra Jadeja,Axar Patel,Jasprit Bumrah,Umesh Yadav,Harbhajan Singh,Ashish Nehra,Hardik Pandya,Suresh Raina,Yuvraj Singh,Ajinkya Rahane

スプラットを使用した関数の呼び出し

スプラットを使用して関数を呼び出すこともできます。 そのためには、関数に渡す必要のある要素を保持する配列を作成する必要があります。次に示すように、3つのドットが末尾に付いた配列を渡すことで関数を呼び出す必要があります。

my_function values...

以下は、スプラットを使用して関数を呼び出す例です。 このコードを splats_call.coffee という名前のファイルに保存します

indian_team = (first, second, others...) ->
  Captain = first
  WiseCaptain = second
  team  = others
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Other team members: " +team

squad = [
   "Mahendra Singh Dhoni"
   "Virat Kohli"
   "Shikhar Dhawan"
   "Rohit Sharma"
   "Gurkeerat Singh Mann"
   "Rishi Dhawan"
   "R Ashwin"
   "Ravindra Jadeja"
   "Axar Patel"
   "Jasprit Bumrah"
   "Umesh Yadav"
   "Harbhajan Singh"
   "Ashish Nehra"
   "Hardik Pandya"
   "Suresh Raina"
   "Yuvraj Singh"
   "Ajinkya Rahane"
 ]

indian_team squad...
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c splats_call.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var indian_team, squad,
    slice = [].slice;

  indian_team = function() {
    var Captain, WiseCaptain, first, others, second, team;
    first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
    Captain = first;
    WiseCaptain = second;
    team = others;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    return console.log("Other team members: " + team);
  };

  squad = ["Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "R Ashwin", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"];

  indian_team.apply(null, squad);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee splats_call.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan,R Ashwin,Ravindra Jadeja,Axar Patel,Jasprit Bumrah,Umesh Yadav,Harbhajan Singh,Ashish Nehra,Hardik Pandya,Suresh Raina,Yuvraj Singh,Ajinkya Rahane

テーリング引数を持つスプラット

スプラットにテーリング引数を渡すこともできます。 以下の例では、感嘆符の後に last という名前の末尾引数を渡しました。 この例を tailing_arguments.coffee という名前のファイルに保存します

indian_team = (first, second, others..., last) ->
  Captain = first
  WiseCaptain = second
  team  = others
  Wicketkeeper =last
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Wicket keeper is:"+last
  console.log "Other team members: " +team

squad = [
   "Mahendra Singh Dhoni"
   "Virat Kohli"
   "Shikhar Dhawan"
   "Rohit Sharma"
   "Gurkeerat Singh Mann"
   "Rishi Dhawan"
   "R Ashwin"
   "Ravindra Jadeja"
   "Axar Patel"
   "Jasprit Bumrah"
   "Umesh Yadav"
   "Harbhajan Singh"
   "Ashish Nehra"
   "Hardik Pandya"
   "Suresh Raina"
   "Yuvraj Singh"
   "Ajinkya Rahane"
 ]

indian_team squad...
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c tailing_arguments.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var indian_team, squad,
    slice = [].slice;

  indian_team = function() {
    var Captain, Wicketkeeper, WiseCaptain, first, i, last, others, second, team;
    first = arguments[0], second = arguments[1], others = 4 <= arguments.length ? slice.call(arguments, 2, i = arguments.length - 1) : (i = 2, []), last = arguments[i++];
    Captain = first;
    WiseCaptain = second;
    team = others;
    Wicketkeeper = last;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    console.log("Wicket keeper is:" + last);
    return console.log("Other team members: " + team);
  };

  squad = ["Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "R Ashwin", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"];

  indian_team.apply(null, squad);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee tailing_arguments.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Wicket keeper is:Ajinkya Rahane
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan,R Ashwin,Ravindra Jadeja,Axar Patel,Jasprit Bumrah,Umesh Yadav,Harbhajan Singh,Ashish Nehra,Hardik Pandya,Suresh Raina,Yuvraj Singh

スプラットの理解

関数内では、次の例に示すように、内包表記を使用してスプラットの要素を繰り返すこともできます。 このコードを splats_comprehensions.coffee という名前のファイルに保存します

indian_team = (first, second, others...) ->
  Captain = first
  WiseCaptain = second
  team  = others
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Other team members:: "
  console.log member for member in others

squad = [
   "Mahendra Singh Dhoni"
   "Virat Kohli"
   "Shikhar Dhawan"
   "Rohit Sharma"
   "Gurkeerat Singh Mann"
   "Rishi Dhawan"
   "R Ashwin"
   "Ravindra Jadeja"
   "Axar Patel"
   "Jasprit Bumrah"
   "Umesh Yadav"
   "Harbhajan Singh"
   "Ashish Nehra"
   "Hardik Pandya"
   "Suresh Raina"
   "Yuvraj Singh"
   "Ajinkya Rahane"
 ]

indian_team squad...
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c splats_comprehensions.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var indian_team, squad,
    slice = [].slice;

  indian_team = function() {
    var Captain, WiseCaptain, first, i, len, member, others, results, second, team;
    first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
    Captain = first;
    WiseCaptain = second;
    team = others;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    console.log("Other team members:: ");
    results = [];
    for (i = 0, len = others.length; i < len; i++) {
      member = others[i];
      results.push(console.log(member));
    }
    return results;
  };

  squad = ["Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "R Ashwin", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"];

  indian_team.apply(null, squad);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee splats_comprehensions.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members::
Shikhar Dhawan
Rohit Sharma
Gurkeerat Singh Mann
Rishi Dhawan
R Ashwin
Ravindra Jadeja
Axar Patel
Jasprit Bumrah
Umesh Yadav
Harbhajan Singh
Ashish Nehra
Hardik Pandya
Suresh Raina
Yuvraj Singh
Ajinkya Rahane

CoffeeScript-日付

Dateオブジェクトは、JavaScript言語に組み込まれたデータ型です。 日付オブジェクトは* new Date()*として作成されます。

Dateオブジェクトが作成されると、いくつかのメソッドを使用して操作できます。 ほとんどのメソッドでは、ローカル時間またはUTC(ユニバーサル、またはGMT)時間を使用して、オブジェクトの年、月、日、時間、分、秒、ミリ秒のフィールドを取得および設定することができます。

ECMAScript標準では、1970年1月1日前後の1億日以内に、Dateオブジェクトが任意の日付と時刻をミリ秒の精度で表現できる必要があります。 これは、プラスマイナス273,785年の範囲なので、JavaScriptは275755年までの日付と時刻を表すことができます。

他のJavaScriptオブジェクトと同様に、CoffeeScriptコードで日付オブジェクトを使用することもできます。

日付メソッド

以下は、JavaScriptの Date オブジェクトのメソッドのリストです。 これらのメソッドの名前をクリックして、CoffeeScriptでの使用法を示す例を取得します。

S.No. Method & Description
1

getDate()

現地時間に従って、指定された日付の月の日を返します。

2

getDay()

現地時間に従って、指定された日付の曜日を返します。

3

getFullYear()

現地時間に従って、指定された日付の年を返します。

4

getHours()

現地時間に従って、指定された日付の時間を返します。

5

getMilliseconds()

現地時間に従って、指定された日付のミリ秒を返します。

6

getMinutes()

現地時間に従って、指定された日付の分を返します。

7

getMonth()

現地時間に従って、指定された日付の月を返します。

8

getSeconds()

現地時間に従って、指定された日付の秒を返します。

9

getTime()

1970年1月1日00:00:00 UTCからのミリ秒数として、指定された日付の数値を返します。

10

getTimezoneOffset()

現在のロケールのタイムゾーンオフセットを分単位で返します。

11

getUTCDate()

世界時に基づき、指定された日付の月の日(日付)を返します。

12

getUTCDay()

世界時に基づき、指定された日付の曜日を返します。

13

getUTCFullYear()

世界時に基づき、指定された日付の年を返します。

14

getUTCHours()

世界時に基づき、指定された日付の時間を返します。

15

getUTCMinutes()

世界時に基づき、指定された日付のミリ秒を返します。

16

getUTCMilliseconds()

世界時に基づき、指定された日付の分を返します。

17

getUTCMonth()

世界時に基づき、指定された日付の月を返します。

18

getUTCSeconds()

世界時に基づき、指定された日付の秒を返します。

19

getYear()

非推奨-現地時間に従って、指定された日付の年を返します。 代わりにgetFullYearを使用してください。

20

setDate()

現地時間に従って、指定された日付の月の日を設定します。

21

setFullYear()

現地時間に従って、指定された日付の通年を設定します。

22

setHours()

現地時間に従って、指定された日付の時間を設定します。

23

setMilliseconds()

現地時間に従って、指定された日付のミリ秒を設定します。

24

setMinutes()

現地時間に従って、指定された日付の分を設定します。

25

setMonth()

現地時間に従って、指定された日付の月を設定します。

26

setSeconds()

現地時間に従って、指定された日付の秒を設定します。

27

setTime()

Dateオブジェクトを、1970年1月1日00:00:00 UTCからのミリ秒数で表される時間に設定します。

28

setUTCDate()

世界時に基づき、指定された日付の月の日を設定します。

29

setUTCFullYear()

世界時に基づき、指定された日付の通年を設定します。

30

setUTCHours()

世界時に基づき、指定された日付の時間を設定します。

31

setUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を設定します。

32

setUTCMinutes()

世界時に基づき、指定された日付の分を設定します。

33

setUTCMonth()

世界時に基づき、指定された日付の月を設定します。

34

setUTCSeconds()

世界時に基づき、指定された日付の秒を設定します。

35

setYear()

非推奨-現地時間に従って指定された日付の年を設定します。 代わりにsetFullYearを使用してください。

36

toDateString()

日付の「日付」部分を人間が読める文字列として返します。

37

toLocaleDateString()

現在のロケールの規則を使用して、日付の「日付」部分を文字列として返します。

38

toLocaleString()

現在のロケールの規則を使用して、日付を文字列に変換します。

39

toLocaleTimeString()

現在のロケールの規則を使用して、日付の「時刻」部分を文字列として返します。

40

toTimeString()

日付の「時刻」部分を人間が読める文字列として返します。

41

toUTCString()

世界時の規則を使用して、日付を文字列に変換します。

CoffeeScript-数学

JavaScriptの Math オブジェクトは、数学的な定数と関数のプロパティとメソッドを提供します。 他のグローバルオブジェクトとは異なり、 Math はコンストラクタではありません。 Math のすべてのプロパティとメソッドは静的であり、Mathを作成せずにオブジェクトとして使用して呼び出すことができます。

したがって、定数 piMath.PI として参照し、サイン関数を* Math.sin(x)*として呼び出します。ここで、xはメソッドの引数です。 CoffeeScriptコードでJavaScriptのMathオブジェクトを使用して、数学演算を実行できます。

数学定数

piやeなどの一般的な数学定数を使用する場合は、JavaScriptの Math オブジェクトを使用して使用できます。

以下は、JavaScriptのMathオブジェクトによって提供されるMath定数のリストです

S.No. Property & Description
1

E

オイラー定数と自然対数の底、約2.718。

2

LN2

2の自然対数、約0.693。

3

LN10

10の自然対数、約2.302。

4

LOG2E

Eの2を底とする対数、約1.442。

5

LOG10E

Eの10を底とする対数、約0.434。

6

PI

円の円周と直径の比、約3.14159。

7

SQRT1_2

1/2の平方根。同様に、2の平方根に対して1、約0.707です。

8

SQRT2

2の平方根、約1.414。

次の例は、CoffeeScriptでJavaScriptによって提供される数学定数の使用方法を示しています。 このコードを math_example.coffee という名前のファイルに保存します

e_value = Math.E
console.log "The value of the constant E is: " + e_value

LN2_value = Math.LN2
console.log "The value of the constant LN2 is: " + LN2_value

LN10_value = Math.LN10
console.log "The value of the constant LN10 is: " + LN10_value

LOG2E_value = Math.LOG2E
console.log "The value of the constant LOG2E is: " + LOG2E_value

LOG10E_value = Math.LOG10E
console.log "The value of the constant LOG10E is: " + LOG10E_value

PI_value = Math.PI
console.log "The value of the constant PI is: " + PI_value

SQRT1_2_value = Math.SQRT1_2
console.log "The value of the constant SQRT1_2 is: " + SQRT1_2_value

SQRT2_value = Math.SQRT2
console.log "The value of the constant SQRT2 is: " + SQRT2_value
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c math_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var LN10_value, LN2_value, LOG10E_value, LOG2E_value, PI_value, SQRT1_2_value, SQRT2_value, e_value;

  e_value = Math.E;

  console.log("The value of the constant E is: " + e_value);

  LN2_value = Math.LN2;

  console.log("The value of the constant LN2 is: " + LN2_value);

  LN10_value = Math.LN10;

  console.log("The value of the constant LN10 is: " + LN10_value);

  LOG2E_value = Math.LOG2E;

  console.log("The value of the constant LOG2E is: " + LOG2E_value);

  LOG10E_value = Math.LOG10E;

  console.log("The value of the constant LOG10E is: " + LOG10E_value);

  PI_value = Math.PI;

  console.log("The value of the constant PI is: " + PI_value);

  SQRT1_2_value = Math.SQRT1_2;

  console.log("The value of the constant SQRT1_2 is: " + SQRT1_2_value);

  SQRT2_value = Math.SQRT2;

  console.log("The value of the constant SQRT2 is: " + SQRT2_value);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee math_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

The value of the constant E is: 2.718281828459045
The value of the constant LN2 is: 0.6931471805599453
The value of the constant LN10 is: 2.302585092994046
The value of the constant LOG2E is: 1.4426950408889634
The value of the constant LOG10E is: 0.4342944819032518
The value of the constant PI is: 3.141592653589793
The value of the constant SQRT1_2 is: 0.7071067811865476
The value of the constant SQRT2 is: 1.4142135623730951

数学メソッド

プロパティに加えて、Mathオブジェクトはメソッドも提供します。 以下は、JavaScriptの Math オブジェクトのメソッドのリストです。 これらのメソッドの名前をクリックして、CoffeeScriptでの使用法を示す例を取得します。

S.No. Method & Description
1

abs()

数値の絶対値を返します。

2

acos()

数値の逆余弦(ラジアン)を返します。

3

asin()

数値の逆正弦(ラジアン)を返します。

4

atan()

数値の逆正接(ラジアン単位)を返します。

5

atan2()

引数の商のアークタンジェントを返します。

6

ceil()

数値以上の最小の整数を返します。

7

cos()

数値の余弦を返します。

8

exp()

E ^ N ^を返します。ここで、Nは引数で、Eはオイラーの定数、自然対数の底です。

9

floor()

数値以下の最大の整数を返します。

10

log()

数値の自然対数(底E)を返します。

11

max()

ゼロ以上の数の最大値を返します。

12

min()

ゼロ以上の数の最小値を返します。

13

pow()

baseを指数のべき乗、つまりbase exponentに戻します。

14

random()

0から1までの擬似乱数を返します。

15

round()

最も近い整数に丸められた数値の値を返します。

16

sin()

数値のサインを返します。

17

sqrt()

数値の平方根を返します。

18

tan()

数値のタンジェントを返します。

CoffeeScript-例外処理

例外(または例外的なイベント)は、プログラムの実行中に発生する問題です。 例外が発生すると、プログラムの通常のフローが中断され、プログラム/アプリケーションが異常終了します。これは推奨されません。したがって、これらの例外は処理されます。

例外は、さまざまな理由で発生する可能性があります。 例外が発生するいくつかのシナリオを次に示します。

  • ユーザーが無効なデータを入力しました。
  • 開く必要があるファイルが見つかりません。

CoffeeScriptの例外

CoffeeScriptsは、 try catchブロックとfinally ブロックを使用した例外/エラー処理をサポートしています。 これらのブロックの機能はJavaScriptと同じです。 try ブロックには例外ステートメントが保持され、 catch ブロックには例外が発生したときに実行されるアクションがあり、 finally ブロックはステートメントを無条件に実行するために使用されます。

以下は、CoffeeScriptの try catch および finally ブロックの構文です。

 try
  //Code to run

 catch ( e )
  //Code to run if an exception occurs

 finally
  //Code that is always executed regardless of
  //an exception occurring
*try* ブロックの後には、正確に1つの *catch* ブロックまたは1つの *finally* ブロック(または両方)が続く必要があります。 *try* ブロックで例外が発生すると、例外は *e* に配置され、 *catch* ブロックが実行されます。 オプションの *finally* ブロックは、try/catchの後に無条件に実行されます。

次の例は、CoffeeScriptでtryブロックとcatchブロックを使用した例外処理を示しています。 ここでは、CoffeeScript操作で未定義のシンボルを使用しようとしており、 try および catch ブロックを使用して発生したエラーを処理しました。 このコードを Exception_handling.coffee という名前のファイルに保存します

try
  x = y+20
  console.log "The value of x is :" +x
catch e
  console.log "exception/error occurred"
  console.log "The STACKTRACE for the exception/error occurred is ::"
  console.log e.stack
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c Exception_handling.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var e, error, x;

  try {
    x = y + 20;
    console.log("The value of x is :" + x);
  } catch (error) {
    e = error;
    console.log("exception/error occurred");
    console.log("The STACKTRACE for the exception/error occurred is ::");
    console.log(e.stack);
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee Exception_handling.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

exception/error occurred
The STACKTRACE for the exception/error occurred is ::
ReferenceError: y is not defined
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:3:7)
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:2:1)
  at Module._compile (module.js:413:34)
  at Object.exports.run (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-script.js:134:23)
  at compileScript (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:224:29)
  at compilePath (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:174:14)
  at Object.exports.run (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:98:20)
  at Object.<anonymous> (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\bin\coffee:7:41)
  at Module._compile (module.js:413:34)
  at Object.Module._extensions..js (module.js:422:10)
  at Module.load (module.js:357:32)
  at Function.Module._load (module.js:314:12)
  at Function.Module.runMain (module.js:447:10)
  at startup (node.js:139:18)
  at node.js:999:3

最終ブロック

*finally* ブロックを使用して、上記の例を書き換えることもできます。 そうすると、このブロックの内容は *try* と *catch* の後に無条件に実行されます。 このコードを *Exception_handling_finally.coffee* という名前のファイルに保存します
try
  x = y+20
  console.log "The value of x is :" +x
catch e
  console.log "exception/error occurred"
  console.log "The STACKTRACE for the exception/error occurred is ::"
  console.log e.stack

finally
  console.log "This is the statement of finally block"
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c Exception_handling_finally.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var e, error, x;

  try {
    x = y + 20;
    console.log("The value of x is :" + x);
  } catch (error) {
    e = error;
    console.log("exception/error occurred");
    console.log("The STACKTRACE for the exception/error occurred is ::");
    console.log(e.stack);
  } finally {
    console.log("This is the statement of finally block");
  }

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee Exception_handling_finally.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

exception/error occurred
The STACKTRACE for the exception/error occurred is ::
ReferenceError: y is not defined
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:3:7)
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:2:1)
  at Module._compile (module.js:413:34)
  at Object.exports.run (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-script.js:134:23)
  at compileScript (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:224:29)
  at compilePath (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:174:14)
  at Object.exports.run (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:98:20)
  at Object.<anonymous> (C:\Users\finddevguides\AppData\Roaming\npm\node_modules\coffee-script\bin\coffee:7:41)
  at Module._compile (module.js:413:34)
  at Object.Module._extensions..js (module.js:422:10)
  at Module.load (module.js:357:32)
  at Function.Module._load (module.js:314:12)
  at Function.Module.runMain (module.js:447:10)
  at startup (node.js:139:18)
  at node.js:999:3

This is the statement of finally block

throwステートメント

CoffeeScriptは throw ステートメントもサポートしています。 throwステートメントを使用して、組み込み例外またはカスタマイズされた例外を発生させることができます。 後でこれらの例外をキャプチャして、適切なアクションを実行できます。

次の例は、CoffeeScriptでの throw ステートメントの使用法を示しています。 このコードを throw_example.coffee という名前のファイルに保存します

myFunc = ->
  a = 100
  b = 0
  try
    if b == 0
      throw ("Divided by zero error.")
    else
      c = a/b
  catch e
    console.log "Error: " + e

myFunc()
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c throw_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var myFunc;

  myFunc = function() {
    var a, b, c, e, error;
    a = 100;
    b = 0;
    try {
      if (b === 0) {
        throw "Divided by zero error.";
      } else {
        return c = a/b;
      }
    } catch (error) {
      e = error;
      return console.log("Error: " + e);
    }
  };

  myFunc();

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee throw_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

Divided by zero error.

CoffeeScript-正規表現

正規表現は、JavaScriptがサポートする文字のパターンを記述するオブジェクトです。 JavaScriptでは、RegExpクラスは正規表現を表し、StringとRegExpの両方が、正規表現を使用してテキストの強力なパターンマッチングおよび検索と置換機能を実行するメソッドを定義します。

CoffeeScriptの正規表現

CoffeeScriptの正規表現はJavaScriptと同じです。 JavaScriptでの正規表現を確認するには、次のリンクにアクセスしてください-リンク:/javascript/javascript_regexp_object [javascript_regular_expressions]

構文

以下に示すように、CoffeeScriptの正規表現は、スラッシュの間にRegExpパターンを配置することによって定義されます。

pattern =/pattern/

以下は、CoffeeScriptの正規表現の例です。 ここでは、太字のデータ(<b>タグと</b>タグの間のデータ)を見つける式を作成しました。 このコードを regex_example.coffee という名前のファイルに保存します

input_data ="hello how are you welcome to <b>Tutorials Point.</b>"
regex =/<b>(.*)<\/b>/
result = regex.exec(input_data)
console.log result
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c regex_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var input_data, regex, result;

  input_data = "hello how are you welcome to <b>Tutorials Point.</b>";

  regex =/<b>(.*)<\/b>/;

  result = regex.exec(input_data);

  console.log(result);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee regex_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

[ '<b>Tutorials Point.</b>',
  'Tutorials Point.',
  index: 29,
  input: 'hello how are you welcome to <b> Tutorials Point.</b>' ]

異端者

JavaScriptが提供する構文を使用して記述する複雑な正規表現は読みにくいため、正規表現を読みやすくするために、CoffeeScriptは heregex として知られる正規表現の拡張構文を提供します。 この構文を使用すると、空白を使用して通常の正規表現を壊すことができます。また、これらの拡張正規表現でコメントを使用して、ユーザーフレンドリにすることができます。

次の例は、CoffeeScript heregex の高度な正規表現の使用方法を示しています。 ここでは、高度な正規表現を使用して上記の例を書き換えています。 このコードを heregex_example.coffee という名前のファイルに保存します

input_data ="hello how are you welcome to Tutorials Point."
heregex =///
<b>  #bold opening tag
(.*) #the tag value
</b>  #bold closing tag
///
result = heregex.exec(input_data)
console.log result
  • コマンドプロンプト*を開き、以下に示すように.coffeeファイルをコンパイルします。
c:\> coffee -c heregex_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var heregex, input_data, result;

  input_data = "hello how are you welcome to <b> Tutorials Point.</b>";

  heregex =/<b>(.*) <\/b>/;

  result = heregex.exec(input_data);

  console.log(result);

}).call(this);

次に、*コマンドプロンプト*を再度開き、以下に示すようにCoffeeScriptファイルを実行します。

c:\> coffee heregex_example.coffee

CoffeeScriptファイルを実行すると、次の出力が生成されます。

[ '<b>Tutorials Point.</b>',
  'Tutorials Point.',
  index: 29,
  input: 'hello how are you welcome to <b>Tutorials Point.</b>' ]

CoffeeScript-クラスと継承

JavaScriptは class キーワードを提供しません。 オブジェクトとそのプロトタイプを使用して、JavaScriptの継承を実現できます。 すべてのオブジェクトには独自のプロトタイプがあり、プロトタイプから関数とプロパティを継承します。 プロトタイプもオブジェクトなので、独自のプロトタイプもあります。

プロトタイプ継承は従来の継承よりもはるかに強力ですが、初心者ユーザーにとっては難しく、混乱を招きます。

CoffeeScriptのクラス

この問題に対処するために、CoffeeScriptはJavaScriptのプロトタイプを使用して構築される class と呼ばれる基本構造を提供します。 以下に示すようにclassキーワードを使用して、CoffeeScriptでクラスを定義できます。

class Class_Name

次の例を考えてみましょう。ここでは、キーワード class を使用して Student という名前のクラスを作成しました。

class Student

上記のコードをコンパイルすると、次のJavaScriptが生成されます。

var Student;

Student = (function() {
  function Student() {}

  return Student;

})();

クラスのインスタンス化

次に示すように、他のオブジェクト指向プログラミング言語と同様に、new演算子を使用してクラスをインスタンス化できます。

new Class_Name

以下に示すように、 new 演算子を使用して、上記で作成した(Student)クラスをインスタンス化できます。

class Student
new  Student

上記のコードをコンパイルすると、次のJavaScriptが生成されます。

var Student;

Student = (function() {
  function Student() {}

  return Student;

})();

new Student;

コンストラクターの定義

コンストラクターは、クラスをインスタンス化するときに呼び出される関数です。その主な目的は、インスタンス変数を初期化することです。 CoffeeScriptでは、次のように constructor という名前の関数を作成するだけで、コンストラクターを定義できます。

class Student
  constructor: (name)->
  @name = name

ここでは、コンストラクターを定義し、ローカル変数名をインスタンス変数に割り当てています。

*@* 演算子は *this* キーワードのエイリアスであり、クラスのインスタンス変数を指すために使用されます。

コンストラクタの引数の前に @ を配置すると、インスタンス変数として自動的に設定されます。 したがって、上記のコードは、以下に示すように簡単に書くことができます-

class Student
  constructor: (@name)->

CoffeeScriptのコンストラクターの例を次に示します。 constructor_example.coffee という名前のファイルに保存します

#Defining a class
class Student
  constructor: (@name)->

#instantiating a class by passing a string to constructor
student = new Student("Mohammed");
console.log "the name of the student is :"+student.name

コードのコンパイル

コマンドプロンプトを開き、次のように上記の例をコンパイルします。

c:\>coffee -c constructor_example.coffee

上記のコマンドを実行すると、次のJavaScriptが生成されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var Student, student;

  Student = (function() {
    function Student(name) {
      this.name = name;
    }

    return Student;

  })();

  student = new Student("Mohammed");

  console.log("The name of the student is :"+student.name);

}).call(this);

コードの実行

コマンドプロンプトで次のコマンドを実行して、上記の例を実行します。

coffee constructor_example.coffee

実行すると、上記の例では次の出力が得られます。

The name of the student is :Mohammed

インスタンスのプロパティ

オブジェクトと同じように、クラス内にプロパティを持つこともできます。 そして、これらは*インスタンスプロパティ*と呼ばれます。

次の例を考えてください。 ここでは、クラス内に変数(名前、年齢)と関数(message())を作成し、そのオブジェクトを使用してそれらにアクセスしました。 この例を instance_properties_example.coffee という名前のファイルに保存します

#Defining a class
class Student
  name="Ravi"
  age=24
  message: ->
    "Hello "+name+" how are you"

#instantiating a class by passing a string to constructor
student = new Student();
console.log student.message()

コンパイル時に、上記のコードは次の出力を生成します。

//Generated by CoffeeScript 1.10.0
(function() {
  var Student, student;

  Student = (function() {
    var age, name;

    function Student() {}

    name = "Ravi";

    age = 24;

    Student.prototype.message = function() {
      return "Hello " + name + " how are you";
    };

    return Student;

  })();

  student = new Student();

  console.log(student.message());

}).call(this);

静的プロパティ

クラスで静的プロパティを定義できます。 静的プロパティの範囲はクラス内で制限されており、* thisキーワード*またはそのエイリアス @ シンボルを使用して静的関数を作成し、クラス名を_Class_Name.property_として使用してこれらのプロパティにアクセスする必要があります。

次の例では、messageという名前の静的関数を作成しました。 アクセスしました。 static_properties_example.coffee という名前のファイルに保存します。

#Defining a class
class Student
  @message:(name) ->
    "Hello "+name+" how are you"
console.log Student.message("Raju")

コマンドプロンプトを開き、次のコマンドを使用して上記のCoffeeScriptファイルをコンパイルします。

c:\>coffee -c  static_properties_example.coffee

コンパイル時に、次のJavaScriptが提供されます。

//Generated by CoffeeScript 1.10.0
(function() {
  var Student;

  Student = (function() {
    function Student() {}

    Student.message = function(name) {
      return "Hello " + name + " how are you";
    };

    return Student;

  })();

  console.log(Student.message("Raju"));

}).call(this);

以下に示すように、コマンドプロンプトで上記のcoffeeScriptを実行します。

c:\>coffee static_properties_example.coffee

実行すると、上記の例では次の出力が得られます。

Hello Raju how are you

継承

CoffeeScriptでは、 extends キーワードを使用して、あるクラスのプロパティを別のクラスに継承できます。

以下は、CoffeeScriptでの継承の例です。 ここには、 AddMy_class という2つのクラスがあります。 クラスMy_classのAddという名前のクラスのプロパティを継承し、 extends キーワードを使用してそれらにアクセスしました。

#Defining a class
class Add
   a=20;b=30

   addition:->
     console.log "Sum of the two numbers is :"+(a+b)

class My_class extends Add

my_class = new My_class()
my_class.addition()

CoffeeScriptは、舞台裏でプロトタイプ継承を使用します。 CoffeeScriptでは、インスタンスを作成するたびに、親クラスのコンストラクターがオーバーライドされるまで呼び出されます。

以下の例に示すように、* super()*キーワードを使用して、サブクラスから親クラスのコンストラクターを呼び出すことができます。

#Defining a class
class Add
   constructor:(@a,@b) ->

   addition:=>
     console.log "Sum of the two numbers is :"+(@a+@b)

class Mul extends Add
   constructor:(@a,@b) ->
     super(@a,@b)

   multiplication:->
     console.log "Product of the two numbers is :"+(@a*@b)

mul = new Mul(10,20)
mul.addition()
mul.multiplication()

動的クラス

CoffeeScriptはプロトタイプ継承を使用して、クラスのすべてのインスタンスプロパティを自動的に継承します。 これにより、クラスが動的になります。子が作成された後に親クラスにプロパティを追加しても、継承されたすべての子にプロパティが伝播されます。

class Animal
  constructor: (@name) ->

class Parrot extends Animal

Animal::rip = true

parrot = new Parrot("Macaw")
console.log "This parrot is no more" if parrot.rip

実行時に、上記のCoffeeScriptは次のJavaScriptコードを生成します。

//Generated by CoffeeScript 1.10.0
(function() {
  var Animal, Parrot, parrot,
    extend = function(child, parent) { for (var key in parent) {
      if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() {
      this.constructor = child; } ctor.prototype = parent.prototype;
      child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    hasProp = {}.hasOwnProperty;

  Animal = (function() {
    function Animal(name) {
      this.name = name;
    }

    return Animal;

  })();

  Parrot = (function(superClass) {
    extend(Parrot, superClass);

    function Parrot() {
      return Parrot.__super__.constructor.apply(this, arguments);
    }

    return Parrot;

  })(Animal);

  Animal.prototype.rip = true;

  parrot = new Parrot("Macaw");

  if (parrot.rip) {
    console.log("This parrot is no more");
  }

}).call(this);

CoffeeScript-Ajax

AJAXは、インタラクティブなWebアプリケーションを作成するためのWeb開発手法です。

  • AJAXは* A synchronous Ja * vaScriptおよび* X * MLの略です。 これは、XML、HTML、CSS、およびJavaスクリプトの助けを借りて、より良く、より速く、よりインタラクティブなWebアプリケーションを作成するための新しい手法です。
  • Ajaxは、コンテンツにXHTMLを、プレゼンテーションにCSSを、ダイナミックコンテンツ表示にDocument Object ModelとJavaScriptを使用します。
  • 従来のWebアプリケーションは、同期要求を使用してサーバーとの間で情報を送信します。 これは、フォームに入力し、送信をクリックして、サーバーからの新しい情報を含む新しいページにリダイレクトされることを意味します。
  • AJAXを使用すると、送信を押すと、JavaScriptがサーバーにリクエストを行い、結果を解釈して、現在の画面を更新します。 最も純粋な意味では、ユーザーはサーバーに何かが送信されたことさえ知らないでしょう。
  • 通常、XMLはサーバーデータを受信するための形式として使用されますが、プレーンテキストを含む任意の形式を使用できます。
  • AJAXは、Webサーバーソフトウェアに依存しないWebブラウザーテクノロジーです。
  • クライアントプログラムがバックグラウンドでサーバーに情報を要求している間、ユーザーはアプリケーションを引き続き使用できます。

一般に、jQueryを使用してAjaxを操作します。 以下はAjaxとjQueryの例です

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/resultl');
            });
         });
      </script>
   </head>

   <body>

      <p>Click on the button to load/jquery/resultl file −</p>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>

   </body>

</html>

ここで* load()は、指定されたURL */coffeescript/resultl ファイルへのAjaxリクエストを開始します。 このファイルをロードすると、ID _stage_でタグ付けされた<div>内にすべてのコンテンツが入力されます。/jquery/resultlファイルにHTML行が1つしかないと仮定します-

<h1>THIS IS RESULT...</h1>

指定されたボタンをクリックすると、結果ファイルがロードされます。

Ajaxを使用したCoffeeScript

以下に示すように、CoffeeScriptを使用して上記の例を書き換えることができます。

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>

      <script type="text/coffeescript">
        $(document).ready ->
          $('#driver').click (event) ->
            $('#stage').load '/jquery/resultl'
            return
          return
      </script>
   </head>

   <body>

      <p>Click on the button to load/jquery/resultl file -</p>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>

   </body>

</html>

CoffeeScript-jQuery

jQueryは、2006年にJohn Resigによって作成されたJavaScriptを使用して構築された高速で簡潔なライブラリ/フレームワークです。

jQueryは、迅速なWeb開発のために、HTMLドキュメントのトラバース、イベント処理、アニメーション、およびAjax対話を簡素化します。 link:/jquery/index [jQuery]については、jQueryチュートリアルをご覧ください。

CoffeeScriptを使用して jQuery を操作することもできます。 この章では、CoffeeScriptを使用してjQueryを操作する方法を説明します。

CoffeeScriptとjQueryの使用

jQueryはブラウザの問題を解決しますが、いくつかの悪い部分があるJavaScriptでjQueryを使用することは少し問題です。 JavaScriptの代わりにCoffeeScriptを使用することをお勧めします。

CoffeeScriptでjQueryを使用しているときに変換する際は、次の点に留意してください。

*$* 記号は、アプリケーションのjQueryコードを示します。 以下に示すように、これを使用してjQueryコードをスクリプト言語から分離します。
$(document).ready

CoffeeScriptで中括弧を使用する必要はありません。ただし、パラメーターを使用して関数を呼び出し、あいまいなコードを処理する場合を除き、関数定義* function()*を下図のように矢印で置き換える必要があります。

$(document).ready ->

CoffeeScriptは関数の末尾のステートメントを暗黙的に返すため、不要なreturnステートメントを削除します。

以下は、クリックされた要素の直前に<div>要素が挿入されているJavaScriptコードです-

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>

      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>

   </body>

</html>

次のように、上記のコードをCoffeeScriptコードに変換できます。

 <html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>

      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div class="div"></div>'
            return
          return
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>

      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>

   </body>

</html>

実行すると、次の出力が得られます。

コールバックとは何ですか?

コールバックは、関数の非同期同等物です。 コールバック関数は、特定のタスクの完了時に呼び出されます。 Nodeはコールバックを多用します。 NodeのすべてのAPIは、コールバックをサポートするような方法で作成されます。

たとえば、ファイルを読み取る関数は、ファイルの読み取りを開始し、すぐに制御を実行環境に戻し、次の命令を実行できるようにします。 ファイルI/Oが完了すると、コールバック関数を渡すときにコールバック関数を呼び出し、ファイルの内容をパラメーターとして渡します。 そのため、ファイルI/Oのブロックや待機はありません。 Node.jsは、関数が結果を返すのを待たずに大量のリクエストを処理できるため、非常にスケーラブルです。

ブロッキングコードの例

次の内容を持つinput.txtという名前のテキストファイルを作成します。

Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!

次のコードを持つmain.jsという名前のjsファイルを作成します-

var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("Program Ended");

次に、main.jsを実行して結果を確認します-

$ node main.js

出力を確認します。

Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!
Program Ended

ノンブロッキングコードの例

次の内容を持つinput.txtという名前のテキストファイルを作成します。

Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!

main.jsファイルを更新して、次のコードを作成します-

var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
  if (err) return console.error(err);
    console.log(data.toString());
});
console.log("Program Ended");

次に、main.jsを実行して結果を確認します-

$ node main.js

出力を確認します。

Program Ended
Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!

これらの2つの例は、*ブロッキング呼び出しと非ブロッキング呼び出し*の概念を説明しています。 最初の例は、プログラムがファイルを読み取るまでブロックしてから、プログラムの終了に進むことを示しています。一方、2番目の例では、プログラムはファイルの読み取りを待たずに「プログラム終了」の印刷に進みました。

したがって、ブロッキングプログラムは非常に順番に実行されます。 プログラミングの観点から見ると、ロジックの実装は簡単ですが、ノンブロッキングプログラムは順番に実行されません。 プログラムで処理するデータを使用する必要がある場合は、同じブロック内に保持して、順次実行する必要があります。

CoffeeScript-MongoDB

MongoDBは、高性能、高可用性、および容易なスケーラビリティを提供するクロスプラットフォームのドキュメント指向データベースです。 MongoDBは、コレクションとドキュメントの概念に基づいて機能します。 詳細については、http://www.finddevguides.com/mongodb/index [MongoDBチュートリアル]をご覧ください。

この章では、CoffeeScriptを使用してMongoDBデータベースと通信する方法を学習します。

インストール

MongoDBデータベースは、MongoDBのNode.js 2.0ドライバーを使用してCoffeeScriptと統合できます。 まず、MongoDBチュートリアルのlink:/mongodb/mongodb_environment [environment]の章を参照して、システムにMongoDBをインストールする必要があります。

MongoDBをインストールした後、 bin フォルダーを参照して(パスを設定していない場合)、以下に示すようにMongoDBサービスを開始します。

C:\Program Files\MongoDB\Server\3.2\bin> mongod

最後に、コマンドプロンプトで次のNPMコマンドを実行して、MongoDBドライバーとその依存関係をインストールします。

npm install mongodb --save

MongoDBへの接続

MongoDBに接続するには、まずこれを使用してMongoClientを作成し、* connect()*関数を呼び出します。 この関数は、url、およびコールバック関数をパラメーターとして受け入れます。

次のCoffeeScriptコードは、MongoDBサーバーに接続する方法を示しています。 MongoDBサーバーがシステムで実行されている場合、このプログラムはサーバーへの接続を確立します。

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://localhost:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
    #Close connection
    db.close()
  return

上記のコードを connect_db.coffee という名前のファイルに保存し、次のように実行します。 データベースが正常に作成されると、次のメッセージが表示されます

c:\> coffee connect_db.coffee
coffee connect_db.collection
Connection established to mongodb://localhost:27017/testdb

コレクションを作成する

MongoDBのコレクションには、格納するドキュメントが保持されます。 * collection()*関数を使用して、コレクションを作成できます。 この関数は、作成するコレクションの名前を表す文字列引数を受け入れます。

次のCoffeeScriptコードは、MongoDBでコレクションを作成する方法を示しています。 エラーが発生した場合、コンソールにエラーが表示されます。

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://localhost:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url

    #Create collection
    col = db.collection('My_collection')
    console.log "Collection created successfully."

    #Close connection
    db.close()
  return

上記のコードを create_collection.coffee という名前のファイルに保存し、以下に示すように実行します。 コレクションが正常に作成されると、次のメッセージが表示されます

c:/> coffee create_collection.coffee
Connection established to mongodb://localhost:27017/testdb
Collection created successfully.

ドキュメントを挿入する

MongoDBのコレクションにドキュメントを挿入するには、挿入する必要があるドキュメントのリストをパラメーターとして渡すことにより、* insert()*という名前の関数を呼び出す必要があります。

次のCoffeeScriptコードは、 My_collection という名前のコレクションにドキュメントを挿入する方法を示しています。 エラーが発生した場合、コンソールにエラーが表示されます。

#Sample JSON Documents
doc1 = {name: 'Ram', age: 26, city: 'Hyderabad'}
doc2 = {name: 'Rahim', age: 27, city: 'Banglore'}
doc3 = {name: 'Robert', age: 28, city: 'Mumbai'}

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://localhost:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
  #Creating collection
  col = db.collection('My_collection')

  #Inserting documents
  col.insert [doc1,doc2,doc3], (err, result) ->
    if err
      console.log err
    else
      console.log "Documents inserted successfully"
    #Close connection
    db.close()
    return
  return

上記のコードを insert_documents.coffee という名前のファイルに保存し、次のように実行します。 ドキュメントが正常に挿入されると、次のメッセージが表示されます

c:/> coffee insert_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Documents inserted successfully

文書を読む

  • find()*という名前の関数を使用して、MongoDBに保存されているドキュメントを取得できます。 次のCoffeeScriptコードは、MongoDBに保存されているレコードを取得する方法を示しています。
#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://localhost:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
    #Creating collection object
    col = db.collection('My_collection')
    #Inserting Documents
    col.find({name: 'Ram'}).toArray (err, result)->
      if err
        console.log err
      else
      console.log 'Found:', result
      #Closing connection
      db.close()
      return
  return

上記のコードを read_documents.coffee という名前のファイルに保存し、次のように実行します。 このプログラムは、指定されたコレクション内の必要なドキュメントを取得し、以下に示すように表示します。

C:\> coffee read_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Found: [ { _id: 56e269c10478809c3009ad1e,
    name: 'Ram',
    age: 26,
    city: 'Hyderabad' } ]

以下に示すように、引数を渡さずに* find()*関数を実行することにより、特定のコレクションに存在するすべてのドキュメントを読み取ることもできます。

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://localhost:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
    #Creating collection object
    col = db.collection('My_collection')
    #Reading all Documents
    col.find().toArray (err, result)->
      if err
        console.log err
      else
      console.log 'Found:', result
      #Closing connection
      db.close()
      return
  return

上記のコードを read_all_documents.coffee という名前のファイルに保存し、次のように実行します。 このプログラムは、指定されたコレクション内のすべてのドキュメントを取得し、以下に示すように表示します。

C:\> coffee read_all_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Found: [ { _id: 56e2c5e27e0bad741a68c03e,
    name: 'Ram',
    age: 26,
    city: 'Hyderabad' },
  { _id: 56e2c5e27e0bad741a68c03f,
    name: 'Rahim',
    age: 27,
    city: 'Banglore' },
  { _id: 56e2c5e27e0bad741a68c040,
    name: 'Robert',
    age: 28,
    city: 'Mumbai' } ]

ドキュメントの更新

  • update()*という名前の関数を使用して、MongoDBに保存されているドキュメントを更新できます。 次のCoffeeScriptコードは、MongoDBに保存されているレコードを更新する方法を示しています。
#Get mongo client object
MongoClient = require('mongodb').MongoClient
#Connecting to mongodb
url = 'mongodb://localhost:27017/testdb'
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
    #Creating collection
    col = db.collection('My_collection')
    #Reading Data
    col.update {name:'Ram'},{$set:{city:'Delhi'}},(err, result)->
      if err
        console.log err
      else
      console.log "Document updated"

      #Closing connection
      db.close()
      return
  return

このプログラムは、ラムという名前の従業員の都市をハイデラバードからデリーに更新します。

上記のコードを update_documents.coffee という名前のファイルに保存し、次のように実行します。 このプログラムは、指定されたコレクション内のドキュメントを取得し、以下に示すように表示します。

C:\> coffee update_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Document updated

更新後、 read_documents.coffee プログラムを実行すると、Ramという名前の人の都市名が Hyderabad から Delhi に更新されていることがわかります。

C:\> coffee Read_all_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Found: [ { _id: 56e2c5e27e0bad741a68c03e,
    name: 'Ram',
    age: 26,
    city: 'Delhi' },
  { _id: 56e2c5e27e0bad741a68c03f,
    name: 'Rahim',
    age: 27,
    city: 'Banglore' },
  { _id: 56e2c5e27e0bad741a68c040,
    name: 'Robert',
    age: 28,
    city: 'Mumbai' } ]

ドキュメントを削除する

  • remove()*関数を使用して、コレクションからすべてのドキュメントを削除できます。 次のCoffeeScriptコードは、MongoDBに保存されているすべてのレコードを削除する方法を示しています。
#Get mongo client object
MongoClient = require('mongodb').MongoClient
#Connecting to mongodb
url = 'mongodb://localhost:27017/testdb'
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
    #Creating collection
    col = db.collection('My_collection')
    #Deleting Data
    col.remove()
    console.log "Document deleted"

    #Closing connection
    db.close()
  return

上記のコードを delete_documents.coffee という名前のファイルに保存し、次のように実行します。 このプログラムは、指定されたコレクション内のすべてのドキュメントを削除し、次のメッセージを表示します。

C:\> coffee delete_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Document deleted

削除後、 read_documents.coffee プログラムを実行すると、次のように空のコレクションが取得されます。

C:\> coffee Read_all_documents.coffee
Connection established to mongodb://localhost:27017/testdb
Found: [ ]

CoffeeScript-SQLite

SQLiteは、軽量のスキーマベースのリレーショナルデータベースエンジンです。 Webブラウザーのローカルストレージ用の組み込みデータベースソフトウェアとして人気があります。

他の多くのデータベース管理システムとは異なり、SQLiteはクライアントサーバーデータベースエンジンではありません。 詳細については、リンクを参照してください:/sqlite/sqlite_overview%20 [SQLiteチュートリアル]

この章では、CoffeeScriptを使用してSQLiteデータベースと通信する方法を学習します。

インストール

SQLite3データベースは、 node-sqlite3 モジュールを使用してCoffeeScriptと統合できます。 このモジュールは、Node.js v0.10.x、v0.12.x、v4.x、およびv5.xで動作します。 このモジュールは、CoffeeScriptを使用してSQLite3と通信するためのさまざまな機能を提供します。これに加えて、簡単なクエリとパラメーターバインディングインターフェイス、およびクエリシリアル化APIも提供します。

以下に示すように、npmを使用してnode-sqlite3モジュールをインストールできます。

npm install sqlite3

sqlite3モジュールを使用するには、まずデータベースを表す接続オブジェクトを作成する必要があります。このオブジェクトは、すべてのSQLステートメントの実行に役立ちます。

データベースへの接続

まずSQLiteデータベースに接続するには、 node-sqlite3 モジュールの* require()関数を呼び出してパッケージを作成し、パラメーターとして文字列 *sqlite3 を渡します。 次に、データベースの名前を* sqlite3.Database()*コンストラクトに渡して、データベースに接続します。

次のCoffeeScriptコードは、既存のデータベースに接続する方法を示しています。 データベースが存在しない場合は、指定された名前 test.db で作成され、開かれ、最後にデータベースオブジェクトが返されます。

#Creating sqlite3 package
sqlite3 = require('sqlite3')

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Database opened successfully."

test.dbの代わりに、匿名のメモリ内データベースを作成する*:memory:と、匿名のディスクベースのデータベースを作成する空の文字列を指定することもできます。 上記のコードを *create_db.coffee という名前のファイルに保存し、以下に示すように実行します。 データベースが正常に作成された場合、次のメッセージが生成されます-

c:\> coffee create_db.coffee
Successfully connected

テーブルを作成する

  • run()*関数を使用して、CoffeeScriptでSQLiteデータベースにテーブルを作成できます。 クエリを渡して、文字列形式でこの関数にテーブルを作成します。

次のCoffeeScriptプログラムは、以前の test.db データベースにテーブルを作成するために使用されます-

#Creating sqlite3 package
sqlite3 = require('sqlite3')

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  db.run 'CREATE TABLE STUDENT (name TEXT, age INTEGER, city TEXT)'
  console.log "Table created successfully"
  return
db.close()
  • serialize()関数は、データベースをシリアル化モードに設定します。 このモードでは、コールバックが発生するとすぐに呼び出されます。 そのコールバックのクエリはシリアルで実行されます。 すぐに関数が戻ります。データベースは再び通常モードに設定されます。 トランザクションが完了したら、 close()*関数を使用して接続を閉じる必要があります。

上記のコードを create_table.coffee という名前のファイルに保存し、次のように実行します。 これにより、データベース_test.db_に STUDENT という名前のテーブルが作成され、次のメッセージが表示されます。

C:\> coffee create_table.coffee
Successfully connected
Table created successfully

データの挿入/作成

insertステートメントを実行することにより、CoffeeScriptコードを介してSQLiteデータベースにデータを挿入できます。 そのためには、SQLステートメントを準備する* prepare()*関数を使用できます。

また、バインド変数()を使用したクエリも受け入れます。これらの変数の値は、* run()関数を使用して添付できます。 準備済みステートメントを使用して複数のレコードを挿入できます。すべてのレコードを挿入した後、 finalize()*関数を使用して準備済みステートメントをファイナライズする必要があります。

次のCoffeeScriptプログラムは、前の例で作成されたSTUDENTという名前のテーブルにレコードを挿入する方法を示しています。

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  stmt = db.prepare('INSERT INTO STUDENT VALUES (?,?,?)')
  stmt.run 'Ram',24,'Hyderabad'
  stmt.run 'Robert',25,'Mumbai'
  stmt.run 'Rahim',26,'Bangalore'
  stmt.finalize()
  console.log "Data inserted successfully"
  return
db.close()

上記のコードを insert_data.coffee という名前のファイルに保存し、次のように実行します。 これにより、次のメッセージを表示するSTUDENTという名前のテーブルが作成されます。

C:\> coffee insert_data.coffee
Successfully connected
Data inserted successfully

データの読み取り/取得

  • each()*関数を使用して、SQLiteテーブルからデータを取得できます。 この関数は、各行で呼び出されるオプションのコールバック関数を受け入れます。

次のCoffeeScriptプログラムは、前の例で作成したSTUDENTという名前のテーブルからレコードを取得して表示する方法を示しています

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  console.log "The contents of the table STUDENT are ::"
  db.each 'SELECT rowid AS id, name,age,city FROM STUDENT', (err, row) ->
    console.log row.id + ': ' +row.name+', '+ row.age+', '+ row.city
    return
  return
db.close()

上記のコードを retrive_data.coffee という名前のファイルに保存し、次のように実行します。 これにより、STUDENTという名前のテーブル内のすべてのレコードが取得され、次のようにコンソールに表示されます。

C:\> coffee retrive_data.coffee
Successfully connected
The contents of the table STUDENT are ::
1: Ram, 24, Hyderabad
2: Robert, 25, Mumbai
3: Rahim, 26, Bangalore

データの更新

次のCoffeeScriptコードは、UPDATEステートメントを使用してレコードを更新し、更新されたレコードをフェッチしてSTUDENTという名前のテーブルに表示する方法を示しています

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  #Updating data
  stmt = db.prepare('UPDATE STUDENT SET city = ? where name = ?')
  stmt.run 'Delhi','Ram'
  console.log "Table updated"
  stmt.finalize()

  #Retrieving data after update operation
  console.log "The contents of the table STUDENT after update operation are ::"
  db.each 'SELECT rowid AS id, name, city FROM STUDENT', (err, row) ->
    console.log row.id + ': ' +row.name+', '+ row.city
    return
  return
db.close()

上記のコードを update_data.coffee という名前のファイルに保存し、次のように実行します。 これにより、Ramという名前の学生の都市が更新され、更新操作後に次のようにテーブル内のすべてのレコードが表示されます。

C:\> coffee update_data.coffee
Successfully connected
Table updated
The contents of the table STUDENT after update operation are ::
1: Ram, Delhi
2: Robert, Mumbai
3: Rahim, Bangalore

データを削除する

次のCoffeeScriptコードは、DELETEステートメントを使用してレコードを削除し、残りのレコードをSTUDENTという名前のテーブルから取得して表示する方法を示しています。

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  #Deleting data
  stmt = db.prepare('DELETE FROM STUDENT WHERE name = ?')
  stmt.run 'Ram'
  console.log "Record deleted"
  stmt.finalize()

  #Retrieving data after delete operation
  console.log "The contents of the table STUDENT after delete operation are ::"
  db.each 'SELECT rowid AS id, name, city FROM STUDENT', (err, row) ->
    console.log row.id + ': ' +row.name+', '+ row.city
    return
  return
db.close()

上記のコードを delete_data.coffee という名前のファイルに保存し、次のように実行します。 Ramという学生のレコードを削除し、次のように削除操作後にテーブルに残っているすべてを表示します。

Successfully connected
Record deleted
The contents of the table STUDENT after delete operation are ::
2: Robert, Mumbai
3: Rahim, Bangalore