CoffeeScriptからES2015(ES6)へ移行しました - Pepabo Tech Portal
ネットショップ運営サービス カラーミーショップで「新カゴプロジェクト」と呼んでいる最高のショッピングカートの開発をしている@tsuchikazuです。 2014年に開発を開始した新カゴプロジェクトではフロントエンドをCoffeeScript + Angularで開発してきました。ES5までの時代にAltJS文化を作り、Class構文やArrow Functionを先取りしていたCoffeeScript。それらはES2015(ES6)の仕様に採用され、一方でCoffeeScript自体の開発は止まり、CoffeeScriptは役割を終えたのではないでしょうか。先月、今後も変化し続けるフロントエンドに追従するためにも、新カゴプロジェクトで200ファイル以上のCoffeeScriptをES2015へ移行しましたので、今回その方法を紹介します。 トランスパイラ 移行方法としてCoffeeScrip
CoffeeScript スタイルガイドの公開とその目的 - クックパッド開発者ブログ
こんにちは、クックパッド編集室の太田(@os0x)です。 普段は料理動画やクックパッドニュースなど、メディア寄りのサービスを担当しながら、社内のCoffeeScriptを中心としたウェブフロントエンドのコードレビューなどを行っています。 今回は、そのCoffeeScriptのレビューを円滑に行うためのコーディングスタイルについてお話したいと思います。 Style guides in Cookpad クックパッドでは、github.com上でスタイルガイドを公開しているのをご存知でしょうか？ cookpad/styleguide これまで、Ruby / Objective-C / Java のコーディングスタイルが公開されていました。そして、本日 CoffeeScript のコーディングスタイルを追加しました。 さて、そもそもスタイルガイドとはなんでしょうか？コーディング規約とも言われたりし
React + (Javascript || CoffeeScript) + Bower スタータキット @masuidrive - Qiita
React + (Javascript || CoffeeScript) + Bower スタータキット @masuidriveJavaScriptVagrantgulpReact 最近、React.jsにハマっています。いままでとパラダイムが結構ちがうのですが、とても面白い感じです。React.jsがどんな物についてはかは、下記の記事にまとめて見ました。興味のある方はまずこれに目を通してみてください。 Ajaxを劇的に簡単にするReact.js – @masuidrive blog Reactを簡単に始めるには、jsfiddleのReactサンプルや公式スタータキットを使う方法があります。 両方ともブラウザだけで実行でき手軽なのですが、ソースファイルを分割しrequireで読み込んだり、ライブラリを使ったり、SaSSを使うようなコンパイルが必要なモノには対応する事ができません。 実際にR
Replace CoffeeScript with ES6
I’ve been looking into ES6, the next version of JavaScript, and finally got a chance to use it on a project. In the brief amount of time I was able to use it I’ve found that it solves a lot of the problems that CoffeeScript is trying to solve without drastic syntax changes. Using ES6 Today We can start using ES6 today through the 6to5 project which transpiles our ES6 code into ES5. 6to5 supports a
「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のリファクタリング - ワザノバ | wazanova
http://blog.arkency.com/2014/07/6-front-end-techniques-for-rails-developers-part-i-from-big-ball-of-mud-to-separated-concerns/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 シングルページアプリもあり、それでなくてもフロント側のコードを書く機会は増えてきてますが、コードをうまく整理して、 簡単に、もっとテストしやすいコードを書く。 クオリティを下げることなく開発スピードをあげる。 ためのノウハウの一端を開発会社のArkencyがシェアしてくれています。 シリーズの初回は、シンプルなリファクタリングのケーススタディ。 CoffeeScriptのコードが、DOM変換、イベントハン
クライアントサイド JavaScript (AltJS) のテストを書くのは本当に難しいのか？ - @kyanny's blog
TL;DR - 最初の一人はつらいけど後続はそうでもないので先駆者は自覚と誇りを持ってオールグリーンを維持しよう このエントリはMarionette.js ベースで3ヶ月開発したアプリのカバレッジ推移をまとめてみた - @kyanny's blogというエントリの続きにあたります。未読の方は先にそちらを一読されることをおすすめします。 Marionette.js ベースで3ヶ月開発したアプリのカバレッジ推移をまとめてみた - @kyanny's blogの結論で触れたように、今回テストを書くことにこだわったのは、「クライアントサイド JavaScript (AltJS) のテストを書くのは本当に難しいのか？」という問いに対する自分なりの回答を実践して検証してみたかったという理由があったからだ。 以前から「クライアント JavaScript (CoffeeScript や他の AltJS を
Marionette.js ベースで3ヶ月開発したアプリのカバレッジ推移をまとめてみた - @kyanny's blog
6月の頭から3ヶ月ほどかけて、 Rails + 一部 jQuery 的なよくある構成のウェブアプリケーションのフロントエンド部分を Marionette.js をベースに作りなおした。メンバーはいわゆるウェブ系のスキルセットを持つ開発者3名。 Marionette.js の経験者は一人もいなかったが、別プロジェクトが先行して Marionette.js を採用して同様のリニューアルを終えたタイミングで、ある程度のノウハウと「なんとかなりそう」という手応えはあった。 せっかく新しくはじめるのだからちゃんとテストを書きたい、そしてカバレッジも計測したいと思い、先行していたプロジェクトで利用していた konacha ではなく、カバレッジ計測機能をもつ teaspoon を採用した。どちらも Rails アプリの assets に置かれる JavaScript/CoffeeScript に対するテ
JavaScript 徹底入門のための資料＆書籍まとめ - 酒と泪とRubyとRailsと
JavaScriptはブラウザから簡単に使えるし、jQuery Pluginも簡単に追加できるので、つい基礎をおろそかにしたまま使っていて、ちょっと凝ったことをしようとした時にいつもハマっていました。ということで今回は、独習JavaScriptの第二版を購入して読み進めつつ、ネットのお勧めのドキュメントを見て、補足しながら勉強していったのでそのメモです。 (03/09 21:50) JavaScriptの習熟度を上げるための勉強フローを追加 🍄 [動画] ドットインストールJavaScript入門 JavaScriptを本当に使ったことがない初学者の方にお勧めしたいのがドットインストールの動画。説明が環境構築からスタートしてくれるので、つまずことなく最初の一歩を踏み出すことができます。 😸 [Web] JavaScript基礎文法最速マスタ 『JavaScript基礎文法最速マスター』
Dungeons & Parties の開発的な話 | それなりブログ
使ったライブラリや素材などはクレジットにまとめています。 JSに詳しい人が見るとわかってしまうんですが、超・安定指向です。枯れた技術万歳！ 他、そのために作った自前のライブラリがいくつか。 このブログのサイドバーに置いてある jQuery Plugin と npm のライブラリ群がそれです。 生 Backbone.js のみです。 node で実行できることだけを条件に、あんまり考えないで選定しました。 ゲーム作りのフレームワークとしては、 他のJSフレームワークをたしなむ程度にしか触ったことがないので比較は難しいですが、 無いよりは有ったほうが遥かに良いことだけは確かでした。 この辺は、一言では言えないので、別記事にするかもです。 おそらくですが、Web ページっぽいのを想定して作り込まれている他フレームワーク、 例えば、AngularJS, Knockout.js, Ember.js
Angular.jsでDeferredしたくて頑張ってみたらcss animationが綺麗に書けた - Qiita
Angular.jsでDeferredしたい jQueryを使わずにAngular.jsだけで実装したいけど、 うまいことDeferredできないかなぁ、と思って。 Serviceに$qっていうのがあった A promise/deferred implementation inspired by Kris Kowal's Q. こんな感じで使えるっぽい。 myDeferredA = (state) -> deferred = $q.defer() successMsg = 'Success!' errorMsg = 'Error!' setTimeout( -> $scope.$apply -> if state == 0 deferred.resolve successMsg else deferred.reject errorMsg , 3000) deferred.promise p
YeomanでAngularJSしてCoffeeScriptにしてみた。っていうかGrunt最強って話 - bathtimefish's blog
JavaScript FrameworkならBackboneでしょ。 と勝手に思い込んでそればっか使ってきたボクですが、年初にheavenshellとかどっぺちゃんとで飲んだ時にviewが重くなるよね―とか話してたしかにそれ悩みだよなと思った。 そんときAngularJSってどうなんだろうねーって話にちょっとなって、そんときからangularいつかやってみようと思いつつ仕事で忙殺されてたんだけど、今日何気にSNSで「AngularJSに仮入信してみる」ってつぶやいたらGoogleの人にいいね！してもらってちょっと上がった。 さらに都合のいいことに外出で2時間程度電車に乗ってヒマな時間ができたので、車中でAngularの洗礼を受けてみようとPCを開いた次第。ちなみに途中で酔いました。以前新幹線で思い知ったのだけど懲りてなかった。電車でコーディングは控えましょう。特に自分。 さて、Angula
DevTools Extensions For Web App Developers
March 26, 2013 The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow - if you're like me, this starts with the Chrome DevTools. W
大規模JSでのBackbone.js/CoffeeScript について考えてみた - mizchi log
これ読んでたらr7kamura君にJSのMVCどうするの的な話きかれてたのを思い出したので、自分がBackboneを使う時のパターンをr7kamura君の記事をベースに書きなおしてみた。 > サバクラ両方で動く JavaScript の大規模開発を行うために ― Gist https://gist.github.com/1362110 > client-side javascript - ✘╹◡╹✘ http://r7kamura.hatenablog.com/entry/2012/10/18/023629 以下の様なコードを書いた。かなり冗長だが、複雑なアプリだとこれぐらいの冗長性は必要になる。 (なお概念を伝えるための解説用コードなのでそのままじゃ動かない) Backbone.Model # 名前空間の初期化 App = {} App.View = {} App.Model = {}
Node.js＋CoffeeScript でソースマップを使ってデバッグを楽にする方法
以前、jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話 を書いたけど、Node.js でソースマップする方法を紹介する。 何がうれしいかというと、Node.js で CoffeeScript や TypeScript、JSX なんかを使ったときに、例外に含まれるスタックトレースに変換前の位置を表示できる。 やり方は簡単。source-map-support というモジュールを require() するだけ。 ためしに使ってみた GitHub に動かし方が書いてあるので、その通りにやってみる。 こんな感じの demo.coffee があったとする。 require 'source-map-support' foo = -> bar = -> throw new Error 'this is a demo' bar() foo() npm install sourc
GruntをCoffeeScriptで書いてcompileしてconcatしてminifyしてgzipする【2日目】 | DevelopersIO
Gruntって https://github.com/gruntjs/grunt ビルドツールです。AntとかRakeとかCakeとかそんな感じのやつです。 grunt.jsにコンパイルなどのタスクの設定を定義して実行します。Grunt自体にもある程度のタスクは持っていますが、タスクをプラグイン的に追加できる仕組みがあるので追加タスクのプロジェクトがたくさんあります。テストやCSS周り、ブラウザ起動やGrowl等の便利系などもあり、ひと通りやりたいことはできそうです。 jQuery UIでもGrunt使ってるようですね。参考になります。 CoffeeScriptで書きたい Gruntを動かすにはプロジェクトルートにgrunt.jsファイルを作り設定を書いて実行します。ただ、せっかくCoffeeScriptで書いているのに設定ファイルはJavaScriptで書かなくちゃいけないのが、ちょっと
k0sukey.tumblr (Alloy with CoffeeScript のお誘い)
アルファヒトバシラーな方を除く、CoffeeScript な方々がちっとも Alloy に来なくて寂しいので、CoffeeScript を使って Alloy アプリを書けるようにしたよ！ Alloy with Jade を @kzfm さんへ紹介した時に、どーやってんだろ？とソースを見ていたら、どうやら jmk というものを使っているようです。んで、おもむろに、 $ alloy generate jmk してみると、ProjectDir/app/alloy.jmk ができあがりました。こいつのソースを覗いてみると、ソースをコンパイルする直前と直後に処理を割りこませることができるようです。あ、これは CoffeeScript いけちゃうね、と思ったわけで、CoffeeScript な方々を Alloy に呼び込むためにちょっくら書いてみました。 まずは入っていると思いますが CoffeeSc
Greasemonkey で直接 CoffeeScript を書く方法 - Qiita
（追記1）Firefox 21 以降 E4X がサポートされなくなったため、現行の Firefox では本記事のコードは動きません （追記2）E4X を使わずに記述する方法に変更しました。 //;### // ==UserScript== // @name coffeetest // @namespace http://example.com/coffeetest // @include * // @grant none // @require http://coffeescript.org/extras/coffee-script.js // @version 1 // ==/UserScript== CoffeeScript.eval((function(){/* # coffeescript from here ### class User constructor: -> @name
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
coffee-reactify/README.md at master · jsdf/coffee-reactify
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
