CoffeeScriptでよりすっきりとコードを書くための小ネタをいくつか

普段、JavaScriptをCoffeeScriptで書くことが多い僕ですが、
もっとすっきりコードを書きたいときの小ネタが他言語にあるのと同様に、
CoffeeScriptにもそういうものが存在します。
そういう小ネタの一部を書き留めておこうと思います。

Q1. 配列の要素に連続した無名のオブジェクトを定義したい時

JavaScript記述例

var sample;          
sample = [
  {
    id: 0,
    title: 'hello',
    body: '犬も歩けば棒に当たる'
  }, {
    id: 1,
    title: 'world',
    body: '井の中の蛙大海を知らず'
  }, {
    id: 2,
    title: 'hogehoge',
    body: '下手の考え休むに似たり'
  }
];

A1. CoffeeScript記述例

sample = [
  {
    id: 0
    title: 'hello'
    body: '犬も歩けば棒に当たる'
  }
  {
    id: 1
    title: 'world'
    body: '井の中の蛙大海を知らず'
  }
  {
    id: 2
    title: 'hogehoge'
    body: '下手の考え休むに似たり'
  }
]

省略したのは、変数宣言とカンマやセミコロンのみで、行数も多くなりがち。
そこで、次は行数を減らしてみる。

A2. CoffeeScript記述例

sample = [
    id: 0
    title: 'hello'
    body: '犬も歩けば棒に当たる'
  ,
    id: 1
    title: 'world'
    body: '井の中の蛙大海を知らず'
  ,
    id: 2
    title: 'hogehoge'
    body: '下手の考え休むに似たり'
]

インデントに注意する必要があるが、カンマでオブジェクトの区切りを示す。
これでわりとすっきり書ける。

Q2. 上記の1のような配列の要素などを、より簡単に代入したい時

A. 分割代入を用いる
CooffeeScriptでは以下の様な表記で分割代入を行うことが出来る。

[a, b, c] = sample
# a = sample[0], b = sample[1], c = sample[2]

これを利用して、配列や、オブジェクトの各要素を順に定義していく事もできる。
非同期通信でのレスポンスのJSONなどを、より短いコードで代入することが出来て非常に楽、かつわかりやすい。

Q3. aに値があれば、a、なければbを返したい（0を値に含む）

A. 以下のコードで実行できる

a ? b

また、aに値があれば、a、偽ならbを返したい（0を含まない）場合は、

a || b

これはJavaScriptでも使える同じ表記

Q4. クラスにおける、publicなメンバ、privateなメンバなどの定義の仕方

A. 以下のコードで（ry

class Sample
  # -- PRIVATE STATIC MEMBER -- #
  _privateStaticMember = ''

  # -- PRIVATE STATIC METHOD -- #
  _privateStaticMethod = ->
    false

  # -- PUBLIC STATIC MEMBER -- #
  publicStaticMember = ''

  # -- PUBLIC STATIC METHOD -- #
  publicStaticMethod = ->
    true

  # -- CONSTRUCTOR -- #
  constructor: (arg)->
    # -- PRIVATE INSTANCE MEMBER -- #
    _privateInstanceMember = arg

    # -- PRIVATE INSTANCE METHOD -- #
    _privateInstanceMethod = ->
      arg

    # -- PUBLIC INSTANCE MEMBER -- #
    @publicInstanceMember = arg

    # -- PUBLIC INSTANCE METHOD -- #
    @publicInstanceMember = ->
      arg

大体こんな感じ、うん、まぁ初見さんお断りな非常にキモい書き方ではあると思う

【AngularJS】$scopeプロパティの監視、処理のバインドを設定

AngularJSにおいて、通常、モデルとなる$scopeプロパティの更新は常に行われるますが、値の変更に対して処理のバインドを行いたい場合は、$watch()メソッドを用いて監視できます。

// $scope.$watch(watchExpression, listener, objectEquality)
$scope.$watch('name', function (newVal, oldVal) {
    if (newVal === oldVal) { return; }
    $scope.name = oldVal + newVal;
});

基本的に、値が書き換わったときにコールされますが、リスナーの登録時など、そうでない場合でも処理が走る時があるみたい。

【AngularJS】画像リクエスト時に、ngModelを含めているため、リクエストエラーが起きる時の対処法

AngularJSを使用しているときに、imgタグのsrcで下記のように

<img src="{{imageSource}}">

と書くと、JSでの解釈より先に画像のリクエストが飛ぶので、当然リクエストエラーが起きる。
ので、ng-srcを用いることで回避できる。

<img ng-src="{{imageSource}}">

jQueryプラグイン、jQuery.uploadを使って画像の非同期的にアップロードを行う

ページ遷移を行わずにファイルタイプのアップロードを行うには、大体２つのパターンが考えられます。
一つは、ファイルデータをbase64形式にエンコードして、Ajax通信でサーバへ送る方法。
そして、もう一つは、ページ内にiframeを生成して、そこでformによる通信からサーバへ送る方法。

今回は後者の方法を行ってくれるライブラリ、jQuery.uploadを用いて使用者が特に意識することなく画像を非同期っぽくアップロードする方法の紹介です。

jQuery.upload

サンプルコード

// $(inputSelector).upload(url, callback, type)
var url = '/action/to/upload';
var callback = function(res) {
    alert('File uploaded');
    return this;
};
var type = 'json';
$('input[type=file]').change(function() {
    $(this).upload(url, callback, type);
});

はい、とても簡単ですね。シンプルです。

IEで動かない

ありえます。僕もIE9でハマりました。
環境によっては、指定したデータ形式を返さず、IEが独自にレスポンスの文字列を解釈することがあります。

var url = '/action/to/upload';
var callback = function(res) {
    // IEのコールバックタイプが動かない場合への対処
    res = JSON.parse(res); 
    alert('File uploaded');
    return this;
};
$('input[type=file]').change(function() {
    $(this).upload(url, callback);
});

上記のように、戻り値のデータ形式を指定せずに、自分でレスポンスの文字列をパースする必要があります。

大なごやJS vol.5 開催レポート『Slider MVC』

2013/02/23 ベースキャンプ名古屋にて、名古屋のJSerたちによるJavaScript勉強会である『大なごやJS vol.5』が開催されました。
僕はvol.2からの、４度目となる参加、そしてはじめての主催でもありました。（やー、緊張した）

@girigiribauer さんによる togetterまとめはコチラ。

Slider MVC

よくありそうな画像スライダーをjQueryのみ、Backbone.js、AngularJSの3パターンで実装してみたサンプル。
ソースコードGithubに公開しました。 https://github.com/eiji-sm/slider_mvc
各々、すべてのフレームワークの性能をすべて引き出すようなベストプラクティスな内容というわけではありませんが、ToDoMVCのようなWebアプリケーションのサンプルだと、Webサイト制作が専門の方の多い名古屋では、ピンと来ない方も多いのではないかなーということで作ったデモです。
話したかったのは主にデータバインディングの考えについて。

その他、面白いセッション盛りだくさんだったのですが、内容多すぎて、まとめきれないのであとはtogetter参照ということで（ぉ