ClojureやHaskellのような不変データ構造体のJS実装です。facebook製。 不変データ構造の特徴として、元のデータ構造は不変です。 Immutable = require 'immutable' map1 = Immutable.Map a: 1, b: 2 # => Map {a: 1, b: 2} map2 = map1.set a: 3 #=> Map {a: 3, b: 2} map3 = map1.update (val) -> {foo: val.a} #=> Map {foo: 1} Mapの他に、List, OrderedMap, Set, OrederedSet, Seq, Range, Record, Stack等があります。内部的にはトライ木になっています。 面白いのはSeqやRangeで、filter関数やmap関数を与えても、getで呼ばれるまで遅

http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない　すまんな　他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指し

追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative

この記事は VirtualDOM Advent Calendar 2014 - Qiita のネタが切れた時にどこからか指定されるやつです。中の人なんであんまり行儀悪いことすると怒られるんだけどな！ やりたいこと UXとSEOのためにイニシャルビューはサーバーサイドで生成し、再描画時にクライアントで同じテンプレートから生成するも、一旦画面を捨てて再構築するのを避けたい。 具体的には、サーバーサイドで何かしらの方法(nodeやreact-railsを想定)で実行して生成されたReactのId付きのDOM React.renderToString(Component({})) して生成したreactId付きHTMLに対して、再描画せずにReactを適用できるようにする(イベント注入含む) 手法 reactのid付きDOMはこんなもの。 > React.renderToString(React.

前々から出すよ出すよ詐欺してたflowがやっと出た。大雑把にはfacebook製のTypeScriptだと思っていれば良いです。 まだnpmで提供されてなくて、 Flow | Getting started with Flow で実行バイナリが配られてる。 npmで提供されてない理由は、たぶんocamlで書かれてるから。Future Planにjs_of_ocamlでコンパイルされたものが提供されると書いてあった。 DLして適当なパス通った場所に置いてつかう。 TypeScriptとの比較 思想はTypeScriptと同じなので、大枠は一緒だといってよい。 ぱっと見気になったのは、Nullableの書式が違うのとかあるけど、もっと大きな違いもたくさんある。 FlowとTypeScriptにあるもの declareキーワードによるアノテーション ES6 classes Generics ここ

JavaScriptで作られたエディタCodeMirrorで、こんな風に補完をしたい。 準備 まず以下のjsとcssを読み込む codemirror/lib/codemirror.js codemirror/lib/codemirror.css codemirror/addon/hint/show-hint.js codemirror/addon/hint/show-hint.css 同期的に補完候補を表示する 以下coffeescript elはなんか適当なDOMTextAreaELement渡してください。 {Pos} = CodeMirror autocomplete = (cm) -> CodeMirror.showHint cm, -> cur = cm.getCursor() token = cm.getTokenAt(cur) start = token.start end

某アプリでストレージどうしようかなーという感じだったので適当に探してて、昨日echo.jsで偶然紹介されてたライブラリ、試してみたらチョット便利だったので紹介。 Lightweight javascript in-memory database: LokiJS 注意: 自分はnode環境下で試したので、以下のサンプルはnode用です。ブラウザでも動くはずです。 特長 Mongo風API。 var DB_PATH = process.env.HOME + '/.loki.json' var db = new Loki(DB_PATH); var items = db.addCollection('items'); items.insert({a: 1, b: 2}); items.insert({a: 2, b: 3}); obj = items.findOne({a: 1}) // sea

概要 Nightmare segment.io社の「俺が考えた最強のe2e API」を備えたphantom.jsラッパー。スクレイパーにも使える。 casper.jsみたいなもん。試してみた。 インストール お使いのプロジェクトで npm install nightmare してください URLを開く Nightmare = require 'nightmare' new Nightmare() .goto 'http://localhost:3000' .evaluate (-> location.href), (url) -> console.log url .run() .evalueate は第一引数関数でクライアントでevalした結果を、第二引数のコールバックとしてもらってくる。 mochaのテストならこんな感じ test/nightmare_example.coffee Nig

JavaScriptわかる - YES 型がほしい - YES Flash/ActionScript3が青春だった - YES Haxe - NO DeNAに勤めている - YES JSX - NO TypeScript - NO Ruby or Python が好き - YES coffee-script - NO クラスはほしい - YES EcmaScript6(Traceur Compiler) or CoffeeScript - NO JavaScriptの文法に不満がある - YES https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS - NO JavaScript書けよ - NO 関数型わかる - YES 自分の好きな言語に深く精通している - YES 好きな言

(正確にはjQueryが監視するイベントはloadではなくDOMContentLoadedですが) 関数型言語のアプローチで書き比べてみる なぜ関数型AltJSで比較するか、それは、個人的な言語設計的な興味と、実用を志向するとどうなるのかが同時にわかっておいしい。関数型言語、副作用を意識してないのと、JSに型がないのでゆるふわな状態をどう管理するかが肝になります。 (僕のAltJSに対する興味は実用JavaScriptの為でもありますが、言語設計的な観点でもあるので) 比較対象 clojure-script clojure/clojurescript ClojureのAltJS。他の言語のとの大きな違いは、Clojureプロジェクトの一環として開発されており、そこそこ枯れています。 wisp Gozala/wisp 個人的に昔から気になってたLispのAltJSで、最近使ってみたらかわいか

最近、ClojureScriptに手を出してる。coffeeは手に馴染みすぎて飽きたし、TypeScriptはただのJS+ただの静的型付けで驚きがなくて刺激が足りない。 clojure-scriptが凄いのは、clojureプロジェクトとして開発されているということだ。clojureのコードが基本的にはそのまま動く。厳密にはまったく同じではないのだが、clojureサブセットだと思えば問題ない。 JVMが実装してあるわけではないので、clojure-scriptコンパイラはclojure-script -> javascriptの変換をしているわけだ。 僕は仕事で一番最初に使ったサーバー言語は実はclojureで、それなりに思い入れがあるのだが、とはいえちょっとの期間だったし、Lispに造詣が深いとも言えない。なので、勉強しながら使っている。 で、やってみたら色々問題があって、core.a

SPAなサイトを作ってると、ディレクトリのほとんどがソースコードで、public/ だか dist/ だけ公開したいケースがあると思います。 そういうときはgit subtree コマンドで特定ディレクトリだけを新しいブランチとして切り出してpushします

何がしたいか ゲームループがループごとにイベントを複数生成するのだが、それを時系列に沿って順番に捌きたい でもオブザーバでグローバルなイベント投げまくるとすぐクソコード化する どうにかしてピュアなモデルからビューとの待ち合わせ(オブザーバー含む)を切り離したい。なんでもしますから！ というわけでちゃんと設計練って書いてみたら結構いいんじゃねとなったので、解説書く。 設計の概要 EventSource#createEvents() は Eventの配列を生成する 実際にはここがユーザーが記述する部分になる EventRunner はループ毎にEventSource#createEvents()を呼び、上から順に処理する event.eventType毎に処理の仕方を記述する この例ではEvent間の時間を100msとなるよ]うにしてるが、実際なんでもいい。 コード CoffeeScriptで

<input type='file'/> で画像を選択させる input.onchange が発火するのでコールバックをとる File APIがあれば input.files[0] にFileオブジェクトが入ってるの抜き取る FileReader の FileReader#readAsDataURL に Fileオブジェクトを渡す FileRead#onload が発火するのでevent.target.result に Data uri が入ってる imgのsrcにData uri ぶち込む <img class='image-preview'/> <input type='file' class='file-selector'>upload</input> $preview = $('img.image-preview') $file = $('input.file-selector')