CoffeeScriptの動作-JavaScriptでできる5つのこと

翻訳者から ：この記事には、CoffeeScriptから遠く離れている人にとって興味深いJavaScriptのニュアンスがいくつかあります。



すべてのプログラマーと同様に、私はCoffeeScriptに注意しています。 少しの構文上の砂糖は、どのようにして追加のコンパイル手順を正当化できますか？



しかし、CoffeeScriptで遊んだ後、ほんの数日で、二度と戻らないことに気付きました。 構文糖はほんの始まりにすぎません。 ずっときれいになったので、私はより速く、より少ないエラーでコードを書き始めました。 CoffeeScriptは、優れたコーディングスタイルを維持するのに役立ちます。 以下にJavascriptの例をいくつか示し、CoffeeScriptを使用したよりエレガントなソリューションについて説明します。

1.変数宣言

多くの初心者は、 var xが 「Xという名前の変数を宣言した」という意味だと信じています。 実際、 varはXが現在のエリアの外をローミングするのを防ぐだけです。 あなたが書く場合：



x = 'Hello from the JavaScript Nation!';







varを使用しない場合、 Xは自動的にグローバルになります。 アプリケーションの2つの部分で同様のエラーを行うと、1つのグローバル変数が他のグローバル変数とオーバーラップし、エラーが発生します。



経験豊富なプロでさえ、特にチェーンで変数を宣言する場合、特に同様の間違いを犯します。vara = 1、b = 2で、環境内で新しい値を割り当てます。 b = 2は、値をグローバル変数bに割り当てます。



翻訳者から ：「、」と「;」を混同することを疑う人のために 別の例を挙げます： var a = b = 3

CoffeeScriptパス

CoffeeScriptでは、すべての変数が自動的に現在の環境に分類されます。 あなたが書くとき：



x = 'Welcome to CoffeeScriptville!'







グローバル変数を再定義していないことを確認できます。 それだけでなく、CoffeeScriptコンパイラのおかげで、 X自動は現在のファイルに制限されます。

2.もうこれ

JavaScriptの最も一般的な混乱の原因の1つはthisキーワードです。 簡単な呼び出しを行います。

 tinman.prototype.loadBrain = function() { this.brain = 'loading...'; $.get('ajax/brain', function(data) { this.brain = data; }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、データコール内では、それが指し示していたのと同じオブジェクトを指し示していないため、エラーが発生します。

CoffeeScriptパス

まず、普通の変数と視覚的に区別するために、thisキーワードにはエイリアス@があります。



次に、@変数を関連する関数に渡すには、通常のシンボル->関数の宣言とは対照的に、=>（太字の矢印）を使用する必要があります。

 tinman::loadBrain = -> @brain = 'loading...' $.get 'ajax/brain', (data) => @brain = data
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.減らされた条件

三項演算子は、JavaScriptで特別な場所を取ります。他の条件構造（ if 、 switch ）とは異なり、結果を返します。 これは、プログラマーが三項演算子の簡潔さから選択する必要があることを意味します。

 closestEdge = x > width / 2 ? 'right' : x < width / 2 ? 'left' : 'center';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または論理チェーン：

 if (x > width / 2) { closestEdge = 'right'; } else if (x < width / 2) { closestEdge = 'left'; } else { closestEdge = 'center'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CoffeeScriptパス

CoffeeScriptのすべての条件は結果を返します。 これにより、意味のない繰り返しのない、明確な2番目のアプローチが得られます。

 closestEdge = if x > width / 2 'right' else if x < width / 2 'left' else 'center'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4.非同期機能

人気のテスト「Do You Know JavaScript JavaScript」には次のタスクが含まれます。

 for (var i = 1; i <= 3; i++) { setTimeout(function() { console.log(i); }, 0); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果は次のようになります。

4

4

4





なんで？ setTimeoutでタイムアウトが0に設定されている場合でも、この関数はループが終了した後にのみ機能します。 そして、関数が実行されると、iは4番目に等しくなります。 iの各値をキャプチャするには、以下を行う必要があります。

 for (var i = 1; i <= 3; i++) { (function(i) { setTimeout(function() { console.log(i); }, 0); })(i); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CoffeeScriptパス

CoffeeScriptはループ内の変数を自動的にキャプチャしませんが、短いキャプチャを提供します。

 for i in [1..3] do (i) -> setTimeout (-> console.log i), 0
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果は次のようになります。

1

2

3

5.繰り返し、繰り返し

コードはそれ自体を物語っています：

 x = sprite.x; y = sprite.y; css = { opacity: opacity, fontFamily: fontFamily }; function(request) { body = request.body; status = request.status; // ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CoffeeScriptパス

上記の各フラグメントは1行になります。

 {x, y} = sprite css = {opacity, fontFamily} ({body, status}) -> ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

CoffeeScriptはより美しいコードであるだけでなく、より柔軟なコードです。 初めて適切なコードを作成し、将来それを簡単に変更できるという自信が得られます。



設計パターンと素早い統合が好きなら、CoffeeScriptにチャンスを与えるべきです。 後でこれが自分に向いていないと判断した場合でも、JavaScriptの理解を深めることができます。



（もちろん、Rails 3.1にアップグレードする場合、選択肢はありません ）

翻訳者から ：誰も誤解しないように、これは冗談だと言います！ もちろん、選択肢があります。Gemfileから行を削除するだけです。



翻訳者から ： Rails 3.1 beta 1のリリースについて、すべてのRoR開発者におめでとうございます。 翻訳はすべて正確ではありません。PMに送信してください。