サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ElectronベースのTwitterクライアント: Nocturn ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun'sblog の時にCoffeeScriptとjQueryで作っていたNocturnというTwitterクライアントがあり、これをES6,React, Reduxを使って書き直した。この記事ではその時に得た知見、感じた事を書いておく。 移行したスタックと移行時に感じたこと あらかじめお断りしておくと、僕は普段はRubyでサーバサイドの実装や運用をやっている人であり、JavaScriptに関してはほぼ素人の意見なので、以下はReactとかRedux興味あるけどまだ触ったことないですみたいな人向けの内容になると思う。 CoffeeScript → ES6 移行 参考: 春からはじめるモダンJavaScript / ES201
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。javascriptの関数型への憧れ、prototypeベースの限界javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman やRuby onRails が標準サポートしているため、面倒な環境構築等をしなくて済んだからRuby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要はJavaScript をよ
This reference is an adaptation of the documentation at Underscore.js.It is interactive initsHTML5 form. Edit a CoffeeScript segment to tryit. You can see the generatedJavaScript when you write a CoffeeScript function by typing ‘show name’ afterits definition. Example Underscore Underscore is a library for functional styleprogramming.It provides 60-odd functions that support both the usual
最近CoffeeScriptというものを知って少し調べてみたら、本家の言語リファレンスがそんなに多くなかったので日本語訳に挑戦してみました。 http://coffeescript.org/ CoffeeScriptとはJavaScriptにコンパイル可能なシンプルな言語です。クラスベースのオブジェクト指向、Python/Rubyを参考にした内包表記、文字列内変数展開、スタティックスコープなどなどがあります。 先にネタバラシをしておくと日本語訳は既に別の方がしていました＼(^o^)／ http://sites.google.com/site/sappariwiki/coffeescript しかも僕の日本語訳より全然わかりやすい！ぶっちゃけ英語は大の苦手なので、翻訳したはいいけど間違ってるところは色々あるはずです。 でもまあ技術的なドキュメントの翻訳に挑戦したのは、数年前に前職でRDP(R
The Bad Parts: 悪い所JavaScriptは狡猾な猛獣です。あなたにとって避けるべき部分を知ることは使うべき部分を知ることと同じくらい重要です。孫子は"己の敵を知れ"と言いました。それは完全に私達がこれからこの章で行おうとしていることです。JavaSriptの闇の側面を探検すると、疑うことを知らない開発者を急襲するのに準備万端なモンスター達が潜んでいます。全てを陽の下に晒しましょう。 イントロで説明しましたとおり、CoffeeScriptの良さはその文法だけでなく、JavaScriptの欠点を直す能力にあります。しかしCoffeeScriptの文は直接JavaScriptに翻訳され、仮想機械やインタプリタ上で実行される訳ではないため、CoffeeScriptは全てのJavaScriptの恐怖に対する銀の弾丸ではなく、注意しなければならない問題がまだあります。 最初にCoff
タイトルとおりほんとに無料すか？っていうくらい高機能なGUIコンパイラーがPreprosがリリースされました。CSS HappyLife大明神様よりとても詳しく丁寧に解説してくれるだろうとのフリをうけ筆を走らせている次第でございます。 追記:現在は無料版はなく有料版のみっぽいです (2015.04.05) Preprocessingjustgot easier with Prepros Prepros 現在バージョンは1.7。Windows版のみリリースされています。 追記:バージョン2.2でMac版も出ました (2013.07.11) Codekitのような高機能GUIコンパイラーがWindowsにもいよいよ登場ですね。 すでに海外の記事では「WindowsのCodekitだぜ！」みたいなことが言われてるとかいないとか。 Preprosの主な機能 Preprosの主な機能として ブ
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
log console.log with styleGithub Console SourcestopDefault levels log.js:19 Bold &italicslog.js:19 this isitalic and this is bold.log.js:19 Inline codelog.js:19 this is code: a == b == clog.js:19 Colorlog.js:19 this is red. this isgreen.log.js:19 Learn morelog.js:19 https://github.com/adamschwartz/log
We’re getting things ready Loading your experience… This won’t take long.
以前、jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話 を書いたけど、Node.js でソースマップする方法を紹介する。 何がうれしいかというと、Node.js で CoffeeScript やTypeScript、JSX なんかを使ったときに、例外に含まれるスタックトレースに変換前の位置を表示できる。 やり方は簡単。source-map-support というモジュールを require() するだけ。 ためしに使ってみたGitHub に動かし方が書いてあるので、その通りにやってみる。 こんな感じの demo.coffee があったとする。 require 'source-map-support' foo = -> bar = -> throw newError 'this is a demo' bar() foo() npm install sourc
山田（デザイナー） 「あのー小室さん。Coffee Scriptを勉強していて・・・コンパイルするところまではできたんですが、記述方法がわからないんです（泣）」 小室（プログラマー） 「あー、山田さんならまずはTypeScriptでJavaScriptを覚えながら使ってみるのが良いんじゃないかな？」 山田（デザイナー） 「小室さん、ありがとうございます！お礼にこのチョコもらってください！手作りなんです♥」 きっときっと、良い関係になれると思います爆発しろ。本題 現在進めているWebサイト高速化の調査に必要なのでCoffeeScriptとTypeScriptの利用方法（Win/Mac）について調べてみました。 デザイナーがCofeeScriptやTypeScriptを使うの？という疑問もありますが、中途半端に手を出しているような自分にはそのうち必要になることもあるんじゃないかと思い試してい
最近業務でBackboneを使ってるので、その中で考えた最強の構成。 CakefileとソースサンプルはBitbucketに上げました。 Compile-coffee-scripts-in-(sub)-directories https://bitbucket.org/takyam/compile-coffee-scripts-in-sub-directories ソースファイルの構成 src ├── 001_init │ ├── 001_setup.coffee │ └── 002_helpers.coffee ├── 002_common │ ├── 001_init │ │ └── setup.coffee │ ├── 002_config │ ├── 003_events │ ├── 004_models │ │ ├── 001_post.c
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
以下のSlideShareが大変参考になったので備忘を兼ねてCoffeeScript版を書いてみた。 JS開発におけるTDDと自動テストツール利用の勘所 http://www.slideshare.net/KojiNakamura/jstdd 目次 1. Matcher概観 2. beforeEach / afterEach 3. Spy 4. Async Test 5. jQuery code test 1. Matcher概観 notで否定のMatcherとなる expect(x).toEqual(y) expect(x).not.toEqual(y) expect(x).toBe(y) toBeは === による等値チェック expect(x).toMatch(pattern) expect(x).toBeDefined() expect(x).toBeUndefined() expec
An Analysis of the Redesign of the CoffeeScript Compiler - YOW2012
これ読んでたらr7kamura君にJSのMVCどうするの的な話きかれてたのを思い出したので、自分がBackboneを使う時のパターンをr7kamura君の記事をベースに書きなおしてみた。 > サバクラ両方で動くJavaScript の大規模開発を行うために ―Gist https://gist.github.com/1362110 > client-sidejavascript - ✘╹◡╹✘ http://r7kamura.hatenablog.com/entry/2012/10/18/023629 以下の様なコードを書いた。かなり冗長だが、複雑なアプリだとこれぐらいの冗長性は必要になる。 (なお概念を伝えるための解説用コードなのでそのままじゃ動かない) Backbone.Model # 名前空間の初期化 App = {} App.View = {} App.Model = {}
久しぶりにCoffeeScriptを書くことになったので、調べごとついでに色々まとめてみました。 そもそもCoffeeScriptとは何か CoffeeScript はプログラミング言語のひとつである。コードはJavaScript のコードに変換される。Ruby やPython、Haskell [1] から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包 (Array comprehensions) やパターンマッチといった機能を追加している。 CoffeeScript により、パフォーマンスを下げることなく、より短いコードでプログラムを記述することができる (JavaScript に比べ 1/3 程度の行数が削減できる)。 CoffeeScript -WikipediaJavaScriptには罠がたくさんあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
