開発の効率を2倍に！Jade、Stylus、CoffeeScript入門・使い方 | creive【クリーブ】
はじめまして、かるねです。 フリーランスでWebエンジニアをしています。HTML、CSS、Javascript、Ruby on Rails、Wordpress、AWS辺りを薄くひろくやっております。 さて、今回はWebサイトをコーディングする際に必要となるHTML、CSS、Javascriptという3つの言語について、Jade、Stylus、CoffeeScriptといった拡張言語を使って開発効率のスピードを上げる方法を紹介していきます。 なお、今回はターミナルアプリ(MacであればiTermのような)と、Node.jsの環境、npm(Node Package Manager)が必要になります。 下準備(Node.js、npm) まずは下準備として、Node.js(n)とnpmの環境を構築していきます。ご存知ない方のために簡単に用語を説明します。 ・Node.js：Javascriptエン
React.jsをCoffeeScriptとjadeで書く - Future [ _ ]
React.jsをCoffeeScriptとjadeで書く February 13, 2015 はじめに React v0.13.0 Beta 1 | React React.Componentを使うと生のJSのclass形式でReact Componentを定義できる reactjs - react-jadeでjadeテンプレートから仮想DOMを出力する - Qiita JSXのXの部分をjadeで書けるようにするライブラリ (Jade -> React VDOM) ここあたりの記事を読んでRiot.jsなら素でできるCoffeeScriptとJadeの組み合わせがReactでも出来そうだと気づいたので試行錯誤中、 よさ気な書き方を見つけた話です。 結論 こうです。 https://gist.github.com/uzimith/145a0cf8e342dc46ac96 React =
「CoffeeScriptのリファクタリング」の実践とレビュー - mizchi's blog
CoffeeScriptのリファクタリング - ワザノバ | wazanova CoffeeScriptのリファクタリングと聞いたので、いてもたってもいられなくなった。まず、お題の結果を見ずにやってみる。 これが元のコード $(document).ready -> photoHTML = (photo) => "<li> <a id='photo_#{photo.id}' href='#{photo.url}'> <img src='#{photo.url}' alt='#{photo.alt}' /> </a> </li>" $.ajax url: '/photos' type: 'GET' contentType: 'application/json' onSuccess: (response) => for photo in response.photos node = $(phot
CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of CoffeeScript is: “It’s just JavaScript.” The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can u
「コーヒースクリプト？うーんあれは微妙かなー」←知り合いのエンジニア8割の意見 - uzullaがブログ
もう二週くらいして、いろんな人のブログをよんで、自分が極端にトンチンカンな事を言わないであろう後出しじゃんけん状態になったので、季節外れの台風で嵐吹き荒れる中、のんびりとCoffeeScriptについて書こうと思います。 皆様の人生のお役に立つ情報 http://udzura.hatenablog.jp/entry/2012/04/03/175221 こちらにとても良いまとめが有りますので、この下級プログラマの稚拙な感想文など放置して、こちらのまとめを読んでブラウザを閉じる事をお勧め致します。 私とCoffeeScript CoffeeScriptとの出会いは忘れましたが、最近iPhone向けのウェブアプリ（HTML+JSでほぼすべて動作して、Web sql databaseにデータを保存し、必要な時にサーバとJsonでやりとりする感じ）をCoffeeScriptをつかって書きました。 ま
CoffeeScript についての議論にリンクを貼るだけのページ += 1 - ローファイ日記
前提として、 CoffeeScript は名前に反して言語じゃないので（そうぼくは思っている）、近いところで言うとコードジェネレーターとかフレームワークとか？ ということであんまり宗教的にこだわるところでもなさそうで、便利な場面では使えば良いし、 JavaScript でしか表現できない箇所は素直に JavaScript で書けば良いと思う。だって、共存できるし。 http://subtech.g.hatena.ne.jp/cho45/20120402/1333366338 読みやすいとか読みにくいとかは主観っぽい（ぼくは読みにくいと感じたことがない）のでよくわからない。慣れの問題もありそう。むしろぼくは、 Java に文法の似ているプレーンな JavaScript のほうが、特にあんまり長いコードベースを読もうとすると、ウワッてなる（個人の感想です）。 デバッグとかメンテナンス性は Ja
CoffeeScript入門（前編） ― CoffeeScriptの基本構文
前回までは、Railsアプリケーションの作成方法について解説しました。今回からは応用編としてCoffeeScriptについて説明します。 ■ 9.3 CoffeeScript CoffeeScriptとは、一言で言ってしまうと、JavaScriptのコードを生成するためのコンパクトな高級言語です。CoffeeScriptを利用することで、JavaScriptでは冗長なコードを記述せざるを得なかった、また、誤りが混在しやすかった局面で、よりシンプルで、安全なコードを記述しやすくなります。 CoffeeScriptのコードはJavaScriptにコンパイルされた上で実行されますので、クライアント環境に特別なプラグインやライブラリは必要ありません。文法もJavaScriptをベースとしつつ、Rubyのそれにもよく似ていますので、これまでRuby＋JavaScriptを利用してきた人であれば、習得
CoffeeScriptを使う理由 - Qiita
function Person() { this.name = "takashi"; this.age = 20; }; Person.prototype.echo = function () { return "Hello " + this.name + " !!"; }; コンストラクタ、メソッドを書いただけで、コード量が増えてきましたね。 毎回クラス名とprototypeと書く必要があります。 めげてきましたか？ 私はめげてます。 次は継承してみましょう。 function inherits(ctor, superCtor) { ctor.super = superCtor; ctor.prototype = Object.create(superCtor.prototype, { constructor: { value: ctor, enumerable: false, writ
CoffeeScript で学ぶ Observer パターンの基礎 | DevelopersIO
CoffeeScript を導入したことによってクラス化が比較的易しくなり、導入前よりもずっと見通しの良いコードが書けるようになってきました。クラス化することによって関連する機能を一箇所に集約することができ、後から機能を追加する際も関連するクラス内に迷わず追記することができるので、コードがあちこちに散らばることがなくなります。そして各クラスは、それぞれが与えられた役目だけに徹する（関連機能が集約されているから）ので、他のクラスのことなど知ったこっちゃないと言わんばかりに意識しなくなり、自然と疎結合なコードになっていきます。 と、いうのが理想なわけですが、実際そうも言ってられなくなったりします。ひとつ以下の様なケースで考えてみます。 出版社（Publisher）と読者（Reader）という2つの登場人物がいます。読者は出版社が近日発売予定のとある書籍を購入したいと考えていますが、出版社内で編
JavaScript か CoffeeScript かで結果が変わるプログラム - 音の鳴るブログ
使い所皆無なんだけど、このプログラムは JavaScript だと "JavaScript" と評価されて CoffeeScript だと "CoffeeScript" と評価される。 { JavaScript: ["CoffeeScript"] }["JavaScript"][0] 検証用コード code = '{ JavaScript: ["CoffeeScript"] }["JavaScript"][0]'; // "CoffeeScript" と評価される eval(CoffeeScript.compile(code, {bare:true})); // "JavaScript" と評価される eval(code); こうしてしまうと、観察者効果でどちらでも "CoffeeScript" と評価されてしまう。 a = { JavaScript: ["CoffeeScript"] }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hubot + CoffeeScript ではじめるやわらかプログラミング入門
「CoffeeScript」の開発環境を用意して、サンプルを表示してみよう