そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman や Ruby on Rails が標準サポートしているため、面倒な環境構築等をしなくて済んだから Ruby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要は JavaScript をよ
前提 会社(Quipper)で今からこういう風にしたい、と宣言した社内ドキュメントを公開する。 枯れてるわけではない。 coffeescript Backbone Backbone.stickit (データバインディング) Chapling.js(は、オマケなのでどうでもいいがサンプルコードはこう) backbone.stickitは安心と信頼のNYT製。(実質Backbone作ってるDocumentCloudと一緒のところ?) backbone.stickit 目的 データバインディングを全面的に使って再描画を最小限にし、コードの見通しをよくしたい。 モデルの役割を明示的にし、MVVMを導入する。 理想的なAPI 擬似コード # ビューモデルの定義 class TopicViewModel extends Model defaults: title: '' # たぶんここでパラメータ名(
CoffeeScriptの関数は明示的にreturnするべき | CreativeStyle 本当に遅いのか、それを確かめましょう。 適当にでっちあげたコードです f1 = -> for i in [1, 2, 3] for j in [4, 5, 6] i + j f2 = -> for i in [1, 2, 3] for j in [4, 5, 6] i + j return console.time "f1" for i in [1..100000] then f1() console.timeEnd "f1" console.time "f2" for i in [1..100000] then f2() console.timeEnd "f2" 実行してみます $ coffee hoge.coffee f1: 105ms f2: 4ms 約26倍違う、ということがわかります。
こんにちは。 昼夜逆転が一周してやっと普通の生活に戻って来ました。れこです 最近、CoffeeScriptというJavaScriptのライブラリにハマっています。 半年前くらいに流行った、賛否両論なjsライブラリです。 非常にシンプルにjsを書くことができて、Ruby on Railsでも公式採用されています。 そのCoffeeScriptでjQueryのプラグインを１つ書いてみて、CoffeeScriptで開発していくことについて感じたことをメモします。 CoffeeScriptやjQueryプラグインの基礎については特に触れません。ご了承下さい。 CoffeeScriptとは CoffeeScriptはJavaScriptを楽にシンプルに書けるライブラリです。おおまかな特徴は、 文法はRubyやPythonに近い 関数呼び出しの際に引数の括弧を省略できる インデントでループや関数などの
Rails の Asset Pipeline は CoffeeScript をコンパイルしてくれるけど、SourceMaps は生成してくれない。 せっかく Chrome が SourceMaps をサポートしているというのに、未だに生成された JavaScript コードでデバッグしろというのか。 実はもう既に SourceMaps を生成できるようになっていることを期待して、coffee-rails のイシュー見てみると Support for source maps · Issue #40 · rails coffee-rails Sprockets の対応待ちときた。 そう思った人がいたようで、coffee-rails のモンキーパッチを gist で公開していた。 Monkey patch for Coffee Script v.1.6.1 Source Maps for Rai
CoffeeScriptでは、クラス内の変数に「@」をつけて宣言するとクラスメソッドになる。 例class Hoge #クラスメソッド @classMethod = (param) -> "param is #{param}." #クラス変数 @count = 0 constructor: -> # コンストラクタ内で、クラス変数の値をインクリメント Hoge.count += 1; console.log Hoge.classMethod "パラメータ" new Hoge(); console.log Hoge.count new Hoge(); console.log Hoge.count 実行結果param is パラメータ. 1 2 JavaScriptへの変換結果クラスメソッドや変数は、CoffeeScriptで定義したクラスに対応するfunctionのプロパティとして宣言される
なんでやねんと話していたら、どうやら「コンパイルするスクリプトにておいて、その変数が使われていたら != null版、それ以外はtypeof版」になるっぽい。 まず、 age != null のチェックは、age が undefined か、null の場合にのみ false を返すらしい。要するに何かセットされているかをチェックするうまい書き方らしい。 で、じゃあなんで typeofうんちゃら っていう長いやつになるかって言うと、その変数がまだ使われていなかった場合、if (age != null) でチェックしちゃうと、age is undefined と、エラーを返されてしまう。ここを typeof age とすれば、変数 age が宣言されていない場合でも、エラーが出ない。
やり方 定義の際に@を頭に付ける。 class Something someProp: "hoge" someMethod: -> ... @someClassProp: "HOGEHOGE" @someClassMethod: -> ... どうやってやるんだろうと探したらドキュメントに追記っぽくちょろっと書いてあった。 object itself (the constructor function), you can assign static properties by using @property: value, and call functions defined in parent classes: @attr ‘title’, type: ‘text’ まあドキュメント自体がちょっと解説のついたチートシートみたいな具合なので、いろいろなことがちょろっと書いてある。 Java
CoffeeScriptとは? Ajaxの普及に伴って広く利用されるようになったJavaScriptだが、大規模なアプリケーションの開発に向いていないことや、ブラウザごとの機能や挙動の違いなど、様々な問題を抱えているのは周知の事実だ。 これらの問題を解決するために様々な技術が登場してきているが、なかでも目を引くのが本連載でも紹介したTypeScriptなど、JavaScriptの代替となる新たなプログラミング言語たちだ。これらの言語はコンパイラによってJavaScriptコードに変換されて実行されるため、実行時に特別なソフトウェアを必要としないという特徴がある。 CoffeeScriptもこれらのJavaScript代替言語のひとつで、シンタックスシュガーやパターンマッチによってJavaScriptと比べて簡潔にコードを記述することができる。CoffeeScriptは、JavaScript
stockNum.App Something new is just around the corner 👍👍
JavaScriptを最適化する CoffeeScriptをJavaScriptにコンパイルしたら、本番環境のサーバに配置する前に最適化を行っておくとよいでしょう。ここでいう最適化とは、空白などの不要な部分を取り除いたり、変数名を短い名前に置き換えてファイルサイズを減らす処理をいいます。最適化をすると、ソースコードの挙動を全く変えずにファイルサイズを減らすことができます。 UglifyJS（BSDライセンス）という最適化ツールは、YUI Compressor（Yahoo!が開発したJavaScript最適化ツール）やGoogle Closure Compiler（Googleが開発したJavaScript最適化ツール）などの他の最適化ツールと比べて実行速度と圧縮効率の面で非常にバランスがよく取れています。YUI Compressorと比べた場合、UglifyJSの方が圧縮効率は大幅に良く、
CoffeeScriptでClassを作った場合、そのクラスをグローバルから参照出来ないんじゃん思った。 例えば、 class Hoge constructor: (@param) -> @name = @param.name setName: (name) -> @name = name getName: -> @nameこのCoffeeScriptをコンパイルすると以下のようなJSファイルが出力される。 (function() { var Hoge; Hoge = (function() { function Hoge(param) { this.param = param; this.name = this.param.name; } Hoge.prototype.setName = function(name) { return this.name = name; }; Hoge.
CoffeeScriptで即時関数は書けないのかなーと思っていろいろ試してみたら書けた。 環境：CoffeeScript 1.1.1 (-> console.log 1 return )() ()で囲んでやればいいのか。 追記： id:murky-satyrさんにコメントで教えてもらった！ do -> console.log 1 return 最初に書いた方はCoffeeScriptなのにシンプルな書き方じゃないなー、と思ってたらたまたま即時関数として解釈されてただけだったみたい？ 公式に書いてあるとしたら CoffeeScript provides the do keyword, which immediately invokes a passed function, forwarding any arguments.これ、かな……？ 追記2： 即時関数に引数を渡す場合は最初に書いた感じ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く