モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい） 概要 TypeScriptはマイクロソフトが開発するオープンソースの言
【CoffeeScript編】Node + Socket.IO で簡単なチャットアプリの作成 | DevelopersIO
こんにちは、うえじゅんです。 今回は前回作成したチャットアプリを「CoffeeScript」で置き換えてみます。 CoffeeScriptについては「はじめるCoffeeScript」シリーズを見ていただけると嬉しいです。 「はじめるCoffeeScript その1」 「はじめるCoffeeScript その2」 「はじめるCoffeeScript その3」 CoffeeScriptのインストール まず「CoffeeScript」インストールします。 ターミナルで以下のコマンドを実行してください。 (エラーが出る場合は、「sudo」をつけてみてください。) 「CoffeeScript」 npm install -g coffee-script インストールが終わったらこちらもバージョンを確認しておきましょう。 「coffee -v」で「CoffeeScript version 1.4.0」
phiary
JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の２通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき（数字の値が等しいとき）、厳密に等しくなります。NaNは、どんなものとも（Na
CoffeeScriptのあまり知られていない文法 - mizchi log
知られてない機能ってのは大抵公式リファレンスにのってない奴なんですが、結構便利なのがあるので紹介しておこうと思います。 ハッシュ値を取り出す方法 {abs, sin, cos} = Math引数値でもパターンマッチ的に使うことができる。 次のコードが $.get "/json", {}, (data) -> console.log data.a, data.b, data.cこのように書き換えられる。 $.get "/json", {}, ({a, b, c}) -> console.log a, b, cすべてのオブジェクトがハッシュで表現されるJS、その拡張ならではの略記ですね なお、展開後の変数にデフォルト引数は付けられなかったです。残念。 引数オブジェクト展開 arguments... で引数オブジェクトを展開することができます。 f = -> console.log argume
ブラウザでJSX, CoffeeScript, SCSS, LESSをすぐに試せる魔法の1行
ブラウザだけでjavascript, HTML, CSSを書いて実行できるサービス「jsdo.it」が、ちょっとパワーアップしました！ これまでの言語に加え、JSX, CoffeeScript, SCSS, LESSを実行できるようになりましたー！！ 「ちょっと試したいけど環境を作るが面倒...」「SCSSのmixinをシェアしたい」などなどブラウザだけで解決できちゃいますよ♪ 使い方 コードの1行目に特定のコメントを記述するだけです！ JavaScript → JSX JavaScriptの1行目に以下のコメントを記述してください。 // #! jsx JavaScript → CoffeeScript JavaScriptの1行目に以下のコメントを記述してください。 #! coffeescript CSS → SCSS CSSの1行目に以下のコメントを記述してください。 /* #! s
CoffeeScriptを3時間で理解するための10のポイント(6)-(7)
＜＜ポイント(4)-(5)へ＜＜ CoffeScriptを3時間で理解するための10のポイントのうち、ポイント6と7を解説します。ポイント6は「配列/ハッシュの内容を順番に取り出すのが簡単になった」こと、ポイント7は「関数が高機能になった」ことです。 POINT6 配列/ハッシュの内容を順番に取り出すのが簡単になった ★要素を順番に取り出すために、配列対応のfor...in、ハッシュ対応のfor...of命令を提供 配列から要素を順番に取り出して処理をする場合、JavaScriptでもfor...in命令を利用できます。しかし、for...in命令は配列のインデックスを取り出すだけですので、コードがさほどシンプルにはなりません。値そのものでないので、かえって誤解を招くおそれもあるでしょう。 そもそも、for...in命令はもともと、配列の要素ではなくオブジェクトの列挙可能なプロパティを走査
CoffeeScriptを3時間で理解するための10のポイント(1)-(3)
＜＜前回「CoffeeScriptって何？」へ＜＜ CoffeScriptを3時間で理解するための10のポイントのうち、ポイント1から3までを解説します。ポイント1は「CoffeeScriptはコンパイルで即時関数に変換される」こと、ポイント2は「変数は自動的に宣言される」こと、ポイント3は「リテラルで豊かな表現を可能に」したことです。 POINT1 CoffeeScriptはコンパイルで即時関数に変換される ★「即時関数」でグローバル変数を作らない ★JavaScriptのstrictモードにも対応 CoffeeScriptで記述されたコードをコンパイルすると、JavaScriptのコードは、(function() {...}).call(this);でラップされた状態で出力されます（リスト7）＊1。奇異にも見える書き方ですが、実は、JavaScriptの世界では定石とも言える書き方の一
無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応
無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応 先週末に行われたWindows Azureの新機能を紹介するイベント「Go Azure」の基調講演の中で、Azure以外に興味を引かれたソフトウェアがありました。マイクロソフトが無償で公開しているWebサイト構築ツール「WebMatrix」の新版、「WebMatrix 2」です。 WebMatrixは、HTML/CSS/JavaScript/PHP/ASP.NETなどに対応したエディタ機能を備え、コード補完機能も搭載。ローカルにデータベースやWebサーバを用意してPHPの動作をそのまま確認したり、WordPressやDrupalなどのWebアプリケーションをローカルで試すこともできました。 下記はその画面（参考：マイクロソフト、無償のWeb開発
これが決定版？フォルダを監視してCSS/JavaScript/HTMLを生成·Fire.app MOONGIFT
Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。 プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか
CoffeeScript 入門! 怒濤の 100 サンプル!! | TM Life
今まで CoffeeScript についてのエントリーを連投してきましたが とりあえずこのエントリーで一区切りつけようと思います. ちなみに今までに書いた CoffeeScript についてのエントリーはこんな感じです. node.js 不要! Windows でも簡単に CoffeeScript を使う方法 jsdo.it で CoffeeScript を使う方法 CoffeeScript 入門 基礎編 – CoffeeScript と JavaScript を 10個のサンプルで比較してみた CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ 今回は enchant.js で怒濤ったとき同様 CoffeeScript についても怒濤ってみました. プログラミングは本を読むだけでは学んだとは言えません. 作ってナンボの世
CoffeeScript 入門 基礎編 – CoffeeScript と JavaScript を 10個のサンプルで比較してみた | TM Life
またまた前回に引き続き CoffeeScript についてのエントリーです. 今回は以前書いた『JavaScript 入門 基礎編』で作ったサンプル 10 個を CoffeeScript で作り直してみました. CoffeeScript 版も JavaScript 版も, 全て jsdo.it にアップしているので コードを見比べてみると面白いかもしれません. { } } }{ { { }{ } } _____ __ __ }{ }{ { ) / ____| / _|/ _| .- { { } { }} -. | | ___ | |_| |_ ___ ___ ( ( } { } { } } ) | | / _ \| _| _/ _ \/ _ \ |`-..________ ..-'| | |___| (_) | | | || __/ __/ | | \_____\___/|_| |_| \
CoffeeScript - unknownplace.org
なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech 僕の考えでは JavaScript ネイティブでない（けれど非同期プログラミングやネットワークの知識はある）人が、Node.js を使ってネットワークアプリケーションを書くという用途では結構使えると思う。 デバッグしづらいという点も Node と組み合わせる前提で考えれば coffee コマンドで直接実行すればいい話である。 また僕自身も小さなネットワークアプリケーションは最近は CoffeeScript で書いてて、fujiwara 氏などにメンテしてもらっているけれど、やはり彼も僕と同じようなスキル（JavaScriptネイティブでない）だから、そういう人が見て大体なんとなく理解できるものになってると感じる。 これがもし、AnyEvent で書いたコードだったらそ
なぜ CoffeeScript がよいか - 0xff.toBlog()
なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtechについて。 いや、本当はこのタイトルにするほど CoffeeScript 推しているわけではないのですが、まあそういう建前で書きます。 CoffeeScript のメリット 簡潔に書ける 簡潔であるということは、ソースコードにおいて、本質ではない部分を書かなくてよいということで、逆に言えば必要なことだけが書かれている状態に近くなります。少し慣れればむしろ読みやすくなる(と思います)。 JavaScript の罠を回避できる var を忘れた変数がグローバル変数になるとか、変数のホイスティングとか、オブジェクトリテラルの最後のカンマとか、 JavaScript の for in は prototype を辿ってしまう問題とか、JavaScript の等価演算子が曖昧すぎて
CoffeeScriptってなんぞ？
kanazawa.js v1.7 - Back to Basics -（2012年3月31日開催）で使用したスライドです。
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場 JavaScriptをデプロイする際には、できるだけ小さくするために余計なスペースや改行を取り除き、さらに関数名なども変換して圧縮することがあります。しかし圧縮後のJavaScriptにバグが見つかるとそのままではデバッグしにくいため、いちいち元のソースコードに戻してデバッグしなければなりません。 Webサイト「HTML5 Rocks」の記事「INTRODUCTION TO JAVASCRIPT SOURCE MAPS」で紹介されたWebブラウザの新技術「Source Maps」は、圧縮状態のコードを実行していても元のソースコードを参照しながらデバッグできるだけでなく、CoffeeScriptのようなJavaScriptへ変換する言語であっても、
CoffeeScriptをおすすめしたいワケ
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 以下のエントリでも少し書いたけれども、 CoffeeScriptいいかも - Takazudo hamalogそれ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、 サンプルこのひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。 var Hoge = function(el) { this.content = el.find
Titanium+CoffeeScript+Guard+Vim環境できたよー！ - がぶちゃんの日記
20111011 追記 node.jsをインストールしないと.coffee内の日本語が.jsにコンパイルされた後に欠落する問題がありました。 brew install node.js で、node.jsをインストールすることをおすすめします。 Homebrewは https://github.com/mxcl/homebrew/wiki/installation を参考に簡単にインストールできます。 もう生JSは触れない Titaniumでロジックを書いていて生JSの非力さに絶望していたところ、CoffeeScriptのことを思い出して食わず嫌いで触ってなかったので試しにCoffeeScriptを触ってみたら壮絶良かったので、もうTitaniumもCoffeeScriptで書こうと思いました。 Guardで自動コンパイル CoffeeScriptはコンパイルすることでJavaScriptの
今日から始めるCoffeeScript - KAYAC engineers' blog
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 （2011/6/28：@m_satyr様にご指摘頂いた箇所を修正しました。） 目次 CoffeeScriptとは？ インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CoffeeScript 言語リファレンス