モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい） 概要 TypeScriptはマイクロソフトが開発するオープンソースの言
Takazudolog - grunt loadNpmTasks
20 Jul 2012 | Comments [ JavaScript ] [ CoffeeScript ] [ grunt ] [ build ] Basically, with grunt, you need to code your own tasks. But you can also use tasks on npm. Here’s howto. growl Easy growling using grunt-growl. module.exports = function(grunt){ grunt.loadNpmTasks('grunt-growl'); grunt.initConfig({ growl: { test1: { message: 'OMG!!!', title: 'WOOOOT!!' } } }); grunt.registerTask('default',
CoffeeScriptでjQuery使うときのメモ
CoffeeScriptでjQuery使うときのメモ CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 投稿日2012年11月19日 更新日2012年12月24日 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p')
【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる | DevelopersIO
山田（デザイナー） 「あのー小室さん。Coffee Scriptを勉強していて・・・コンパイルするところまではできたんですが、記述方法がわからないんです（泣）」 小室（プログラマー） 「あー、山田さんならまずはTypeScriptでJavaScriptを覚えながら使ってみるのが良いんじゃないかな？」 山田（デザイナー） 「小室さん、ありがとうございます！お礼にこのチョコもらってください！手作りなんです♥」 きっときっと、良い関係になれると思います爆発しろ。 本題 現在進めているWebサイト高速化の調査に必要なのでCoffeeScriptとTypeScriptの利用方法（Win/Mac）について調べてみました。 デザイナーがCofeeScriptやTypeScriptを使うの？という疑問もありますが、中途半端に手を出しているような自分にはそのうち必要になることもあるんじゃないかと思い試してい
Source Maps 101 | Envato Tuts+
In today's modern workflow, the code that we author in our development environments is considerably different from the production code, after running it through compilation, minification, concatenation, or various other optimization processes. This is where source maps come into play, by pointing out the exact mapping in our production code to the original authored code. In this introductory tutor
JavaScript のクラスの書き方 - yoshiweb.NET-blog
IT戦記さんのマネして「プロトタイプを上書きする。コンストラクタをプロトタイプに実装する。」 書き方をしようと思ってたけど、CoffeeScript や TypeScript から書き出されるJavaScriptを参考にしよう！ 比較的見やすいし CoffeeScript と TypeScript のどっちでも同じような JavaScript を生成するってことは そんなに悪い書き方じゃなのかと。。。 CoffeeScriptclass Item constructor: (@price) -> showPrice: () -> alert(this.price); i = new Item(200) i.showPrice() ↓↓↓↓変換 JavaScriptvar Item, i; Item = (function() { function Item(price) { this.pr
はじめるCoffeeScript その1 | DevelopersIO
こんにちは、うえじゅんです。 今回はCoffeeScriptについてです。 CoffeeScriptはRuby on Rails 3.1からデフォルトで使われていたり、SpineというJavaScriptのMVCフレームワークに使われていたりもします。 (Spineについては「Spine.js をはじめよう」を参照してみてください) CoffeeScriptとは 公式Webサイトには以下のようにあります。 CoffeeScript is a little language that compiles into JavaScript.(JavaScriptにコンパイルする小さな言語です) RubyやPythonと似ていると言われており、複雑になりがちのJavaScriptをシンプルに書くことができる言語です。 <script type="text/coffeescript">と指定することで
CodeKit - THE Mac App for Web Developers
All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref
これが決定版？フォルダを監視して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ってなんぞ？
kanazawa.js v1.7 - Back to Basics -（2012年3月31日開催）で使用したスライドです。
今日から始める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ページを開く
Your Friendly Web Development Companion
Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
The Little Book on CoffeeScript
roots.cx
「WebMatrix」でLESS、Sass/SCSS、CoffeeScriptを利用可能に「OrangeBits Compiler」NOT SUPPORTED