Modern Web App LT!(freee x WACUL)で発表した資料です http://connpass.com/event/31305/

Modern Web App LT!(freee x WACUL)で発表した資料です http://connpass.com/event/31305/
ネットショップ運営サービス カラーミーショップで「新カゴプロジェクト」と呼んでいる最高のショッピングカートの開発をしている@tsuchikazuです。 2014年に開発を開始した新カゴプロジェクトではフロントエンドをCoffeeScript + Angularで開発してきました。ES5までの時代にAltJS文化を作り、Class構文やArrow Functionを先取りしていたCoffeeScript。それらはES2015(ES6)の仕様に採用され、一方でCoffeeScript自体の開発は止まり、CoffeeScriptは役割を終えたのではないでしょうか。先月、今後も変化し続けるフロントエンドに追従するためにも、新カゴプロジェクトで200ファイル以上のCoffeeScriptをES2015へ移行しましたので、今回その方法を紹介します。 トランスパイラ 移行方法としてCoffeeScrip
ojgithub.com/ohler55/oj JSONの替わりに使ったOJが速い 高速なJSONパーサ gongithub.com/gazay/gon Railsの変数をJavascript内で使えるようにする RailsからJavaScriptにデータを渡す js-routesgithub.com/railsware/js-routes/ Javascriptの中からnamed routeを使えるよ article_pathとかそういうのがJavascript内で使えるようになる rails-dev-tweaksgithub.com/wavii/rails-dev-tweaks Sass、Compass、Rails 3.1 のアセット パイプライン (翻訳版) 「この gem には Rails の自動読み込み規則を変更する機能があるので、開発中の各要求間の再読み込みが回避されます。既定
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の関数は明示的にreturnするべき | CreativeStyle 本当に遅いのか、それを確かめましょう。 適当にでっちあげたコードです f1 = -> for i in [1, 2, 3] for j in [4, 5, 6] i + j f2 = -> for i in [1, 2, 3] for j in [4, 5, 6] i + j return console.time "f1" for i in [1..100000] then f1() console.timeEnd "f1" console.time "f2" for i in [1..100000] then f2() console.timeEnd "f2" 実行してみます $ coffee hoge.coffee f1: 105ms f2: 4ms 約26倍違う、ということがわかります。
JavaScript FrameworkならBackboneでしょ。 と勝手に思い込んでそればっか使ってきたボクですが、年初にheavenshellとかどっぺちゃんとで飲んだ時にviewが重くなるよね―とか話してたしかにそれ悩みだよなと思った。 そんときAngularJSってどうなんだろうねーって話にちょっとなって、そんときからangularいつかやってみようと思いつつ仕事で忙殺されてたんだけど、今日何気にSNSで「AngularJSに仮入信してみる」ってつぶやいたらGoogleの人にいいね!してもらってちょっと上がった。 さらに都合のいいことに外出で2時間程度電車に乗ってヒマな時間ができたので、車中でAngularの洗礼を受けてみようとPCを開いた次第。ちなみに途中で酔いました。以前新幹線で思い知ったのだけど懲りてなかった。電車でコーディングは控えましょう。特に自分。 さて、Angula
<<前回「CoffeeScriptって何?」へ<< CoffeScriptを3時間で理解するための10のポイントのうち、ポイント1から3までを解説します。ポイント1は「CoffeeScriptはコンパイルで即時関数に変換される」こと、ポイント2は「変数は自動的に宣言される」こと、ポイント3は「リテラルで豊かな表現を可能に」したことです。 POINT1 CoffeeScriptはコンパイルで即時関数に変換される ★「即時関数」でグローバル変数を作らない ★JavaScriptのstrictモードにも対応 CoffeeScriptで記述されたコードをコンパイルすると、JavaScriptのコードは、(function() {...}).call(this);でラップされた状態で出力されます(リスト7)*1。奇異にも見える書き方ですが、実は、JavaScriptの世界では定石とも言える書き方の一
JavaScriptをシンプルに書けるCoffeeScript使ってみた CoffeeScript は JavaScript を Ruby や Python ライクに書けるので、タイプ数が減ったり、コードの見通しが良くなったりといったメリットがあるようです。 この記事では CoffeeScript の基本構文と使い方をご紹介します。 投稿日2012年02月13日 更新日2012年02月13日 変数に var は必要ない では、基本的な構文からみていきましょう。 CoffeeScript num = 3245 console.log num JSなら var num = 3245; と書くところですが「var」も「 ;(セミコロン)」も必要ありません。 2行目の console.log num は console.log (num) とカッコで囲んでも大丈夫です。 これをコンパイルすると次の
前提 会社(Quipper)で今からこういう風にしたい、と宣言した社内ドキュメントを公開する。 枯れてるわけではない。 coffeescript Backbone Backbone.stickit (データバインディング) Chapling.js(は、オマケなのでどうでもいいがサンプルコードはこう) backbone.stickitは安心と信頼のNYT製。(実質Backbone作ってるDocumentCloudと一緒のところ?) backbone.stickit 目的 データバインディングを全面的に使って再描画を最小限にし、コードの見通しをよくしたい。 モデルの役割を明示的にし、MVVMを導入する。 理想的なAPI 擬似コード # ビューモデルの定義 class TopicViewModel extends Model defaults: title: '' # たぶんここでパラメータ名(
というわけでKonachaです。https://github.com/jfirebaugh/konacha なにこれ、粉茶? JavascriptのテスティングフレームワークとしてはJasmineやらMochaあたりがメジャーどころのようだけど、セットアップが難しかったりして「これだ!」というものがなかった。個人的には。 で、今回、よーし、お父さんCoffeeScript書いちゃうぞー!というタイミングにあたって、もう一回いろいろ探してみたところ、これが一番スジがいいっぽかった。 KonachaはRailsでMochaとchaiを使いやすくしたGemらしい。Mochaとchaiは使ったことなかったけど、公式を5秒ほどみたところ、nodeでうごくrspecライクなテスティングフレームワークということでJasmineとかとあんまかわらないんじゃないかと推測。chaiはマッチャーのライブラリのよ
なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtechについて。 いや、本当はこのタイトルにするほど CoffeeScript 推しているわけではないのですが、まあそういう建前で書きます。 CoffeeScript のメリット 簡潔に書ける 簡潔であるということは、ソースコードにおいて、本質ではない部分を書かなくてよいということで、逆に言えば必要なことだけが書かれている状態に近くなります。少し慣れればむしろ読みやすくなる(と思います)。 JavaScript の罠を回避できる var を忘れた変数がグローバル変数になるとか、変数のホイスティングとか、オブジェクトリテラルの最後のカンマとか、 JavaScript の for in は prototype を辿ってしまう問題とか、JavaScript の等価演算子が曖昧すぎて
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場 JavaScriptをデプロイする際には、できるだけ小さくするために余計なスペースや改行を取り除き、さらに関数名なども変換して圧縮することがあります。しかし圧縮後のJavaScriptにバグが見つかるとそのままではデバッグしにくいため、いちいち元のソースコードに戻してデバッグしなければなりません。 Webサイト「HTML5 Rocks」の記事「INTRODUCTION TO JAVASCRIPT SOURCE MAPS」で紹介されたWebブラウザの新技術「Source Maps」は、圧縮状態のコードを実行していても元のソースコードを参照しながらデバッグできるだけでなく、CoffeeScriptのようなJavaScriptへ変換する言語であっても、
CoffeeScript基礎文法最速マスター はじめまして。新人のtek_kocです。 今回は巷で話題のCoffeeScriptの文法をまとめてみました。 1年近く前に流行った基礎文法マスターシリーズにCoffeeScriptがなかったので、勉強も兼ねて同形式で書いてます 。 JavaScriptを使っている方はこれをざっくり眺めてCoffeeScriptへの移行を検討してくれればなと思います。 まだ網羅しきれていないですが、これを読めばCoffeeScriptに乗り換えることができるはずです。 間違いや、足りない箇所などがあれば、是非コメント等で指摘してください! バージョン 現時点で最新の1.0.1を対象にします。 0.概要 CoffeeScriptとはJavaSciprtにコンパイル可能な言語です。 RubyやPythonなどに近い記述が可能で、JavaScriptの開発をより効率的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く