こじらせJavaScriptシリーズです。 mizchi/deftypes.js https://github.com/mizchi/deftypes.js 主にcoffee-script用のDSLです。以下すべてcoffee。 ブラウザ <script src="https://raw.github.com/mizchi/deftypes.js/master/deftypes.js"></script> Deftypes(); //provide DSLNode npm install deftypes 概要 型が書けます。残念ながら動的チェックです。 Point = {x: Number, y: Number} p1 = def Point, {x:1, y:2} #=> {x: 1, y:2} p2 = def Point, {x:1, z:2} #=> type error def

仕事でRobotlegsというAS3のフレームワークを使っているのだけど、DI機構がかっこよかったので、Injectorだけ真似て作ってみた。 mizchi/injector.js · GitHub https://github.com/mizchi/injector.js Robotlegs AS3 Micro-Architecture - Home http://www.robotlegs.org/ 使い方 ConstructorClass.inject に {key:InjectedClass} で実体化するインスタンス名と実体化するクラスを登録する。 CoffeeScriptで違和感無いような記法でチューニングしてある。 class UserModel class X_View Injector.register(@) @inject: model: UserModel Injec

孫引きなんだけどちょっと気になった点 404 Blog Not Found:javascript - es2pi はじめました http://blog.livedoor.jp/dankogai/archives/51859796.html 本来の JavaScript の利用方法(Prototype 拡張)に立ち返り、Array.prototype, String.prototype, Number.prototype 等を拡張しています 最近のJSは基本的に肥大化するし、DOMはグローバルな状態であり、またprototypeもどこからでもアクセスできるという点ではグローバルである。 手癖が悪い人はprototype経由で値の受け渡ししはじめる。JSではスコープチェーンなりで値の受け渡しをするように気をつけたい。 経験上、方針を決めずにprototypeを触りまくると遅かれ早かれ破綻する。

(タイトル修正 DOMを高速に操作 => DOMの値を高速に更新 at Sat Mar 09 2013 15:30:09 GMT+0900 (JST)) (Skin#inject実装したのでタイトル元に戻した at Mar 09 2013 18:10:04 GMT+0900 (JST)) 若手の会で、JavaScript Hell on Earth というテーマで話してきました。 js_hell_on_earth http://www.rvl.io/mizchi/js_hell_on_earth というわけでDOM抽象ラッパーつくりました。 mizchi/skin.js · GitHub https://github.com/mizchi/skin.js 目的 クライアントサイドJSでは一回書いたら終わり、ではありません。ゲームなどのリッチなユーザー体験を提供する際、高頻度でDOMを書き換

自分の思考を整理する意味でも、件のアレについて考えたことを書いてみる。 変数に型がないということの利点について考える - サンプルコードによるPerl入門 http://d.hatena.ne.jp/perlcodesample/20130227/1361928810 この件に触れることはプログラマとしての中二病である。恥ずかしい。マジレス乙だ。 でも気づいたら5000文字も書いてしまったし、公開して酒のんで寝る。 型のフローは機械のためだけでなく、人間に対するものでもある 最近TypeScriptを書いている。こいつを使って、二次元座標上で二点間を求める関数、getDistanceを定義してみよう。 interface IPoint { x: Number; y: Number; } var getDistance = (a:IPoint, b:IPoint): Number => Ma

やっぱ鮮度が命だとおもってFirefoxOSのアプリをいじってた。その過程。 シミュレータのインストール Firefoxで入れる。 Firefox OS Simulator :: Add-ons for Firefox https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ ダッシュボードからStoppedのところを押して起動(わかりにくい) サンプルアプリの起動 nodeのインストールは前提。それからvoloを入れます。 $ npm install -g volo # nodeアプリなので本来ならここで npm install したほうがいい >|| mozilla系のビルドツールらしいということしか知らない。 >|| $ git clone git@github.com:darkwing/firefoxos-q

ほんとに10個だと思った？（無意味に煽っていくスタイル） 最近JSだけのリポジトリで無益なゲームを大量に作っては破棄しているのだけど、割とストレスなく出来上がってきたので書く。 長々と書くが、要は次のリポジトリに概要が詰まってる。 mizchi/mizchi_client_boilerplate · GitHub https://github.com/mizchi/mizchi_client_boilerplate 前提として、最近はCSJSでもnodeのインストールを前提とする環境が多い。必須といってもいい。 grunt gruntjs/grunt · GitHub https://github.com/gruntjs/grunt ビルドタスクを簡単に作れる。make、rake、などに相当するが、node製らしくファイルシステムの監視でアクションを作れるのが特長。$ grunt serv

最近のゲームエンジンの流行はC#(Mono)で Macでも使えて損はないので、Unityが内包してるとはいっても手軽に動かしたいじゃないですか mono Download - Mono http://www.go-mono.com/mono-downloads/download.html MDKいれる 動かす 対話インタプリタがある $ csharp Mono C# Shell, type "help;" for help Enter statements below. csharp> var x = 3; csharp> x 3// hoge.cs var s = "Hello C#"; Console.WriteLine(s);$ csharp hoge.cs Hello C# ir でironrubyらしいけど動かない $ ir Cannot open assembly '/Libr

今回は個人的な話が多いので、あまり理解されるとは思わずに書いた。 早い話、小学生の頃から中二病の生意気なマセガキだった。ということに尽きる話なのだけど… 関連 都心住まいの価値とは何か - よそ行きの妄想 http://d.hatena.ne.jp/chnpk/20130115/1358204323 地方都市という地獄　あるいは関東圏の「私が住んでるところは田舎だよ(笑」が如何に残酷かについて - mizchi log http://d.hatena.ne.jp/mizchi/20130115/1358216244 都会と田舎の比較の話が出るととりあえず絡みつく - ２４時間残念営業 http://lkhjkljkljdkljl.hatenablog.com/entry/2013/01/15/143959 大阪「・・・・・。」 http://anond.hatelabo.jp/201301

この前の続き。相変わらず思いつきでつらつら書いてて図とかまともなサンプルとかない。 JSのモデルには二種類ある フロントエンドである以上本質的にすべてビューだとも言える。 であるがゆえにあやふやにしないほうがいい。 ビューモデル UIの状態を示す属性。選択しているタブとか、開いているダイアログとか、そういうものの状態をDOMから読むのではなく、JSとして一度確定し、その結果をビューに反映すべきだ。激しく画面を組み替える場合はビューというグローバル変数はどこからも汚染される可能性がある。 データベースのローカルキャッシュ たとえば、a地点からb地点の距離をユークリッド距離を求めるのに、わざわざサーバーに問い合わせるのは無駄。普通に三平方の定理で計算すればいい。アクション性が高いものほど、ここの振る舞いは分厚くなる。いわゆるHTML5アプリはここを重点的にやるほどサーバーの負担が減り、サーバー

これ読んでたら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 = {}

とはいっても関数1つだけど。 ここしばらくずっとtypescript書いてる。 typescriptのmoduleをコンパイルされたコードみてたら、名前空間がなかったら作る、あったら何もしない。と、それだけの実装だったので普通の関数として実装してみた。 root = if window? then window else if global? then global else this root._module_ = (ns, f) => context = root hist = [] for name in ns.split('.') unless context[name]? context[name] = {} context = context[name] hist.push context f.apply context, hist ドットで区切られた名前空間ごとの参照は、引数

Aiming study#6pdf from Koutaro Chikuba なにがHTML5だ

ちょっと酔ったまま書いてるので色々アレですが何も書かないよりマシだと思ったので書きます。 オブラブ 収穫祭 〜若手エンジニア、実りの秋 http://esminc.doorkeeper.jp/events/1746 ウェブ業界の新卒(そんなものが存在するのか)が集まって、どんな業態で新卒がどんなふうに働いてるか発表する勉強会があると聞いて、一応ウェブ業界の新人枠で働いてる自分としては、冷やかしのつもりで行ってみた。そしたら適度に砕けてて適度に意識高かったのでよかった。 勉強会とその後の飲み会ではえらく意識高まったのだけど、個別の発表について感想書こうと思ったけどお酒入ってしまったせいで全然覚えてないし、お疲れ様回の後に飲み会の後 @ainame と @r7kamura (いずれも某社と某社の新卒) とまどまぎ後編見て感動したので、細かいことが吹き飛んでしまい覚えてない。 登壇していた企業は

mizchi/enchant-with-typescript https://github.com/mizchi/enchant-with-typescript coffeescriptで書いた時と同じく、interfaceを書いて継承してモジュール定義、という流れ src/types/enchant.d.tsが定義ファイル。プロパティを網羅できてないが、typescriptでenchant.jsやりたい人には便利だと思う。 感想 HaXeでやったときよりすんなりいった印象。 ただ、割とどうしようもない部分でへんなことしないといけなくて、例えば interface Window { enchant: Function; } window.enchant(); enchantをmoduleにしてしまったせいで、関数としてcallできない事に気づいた。 かわりにwindow:Window のe

主に自分が一番使っているcoffee-scriptとの比較 underscoreのは練習がてら作ってGithubにおいた mizchi/underscore.d.ts https://github.com/mizchi/underscore.d.ts 書き味 構文の硬さがJavaが10 Python6 Rubyが3という記事をどっかで見たけど、同じように当てはめると、JS8 typescript6 coffee2という感じ。 coffee-scriptの超ゆるふわスタイルに慣れてると結構辛い感じはあるが、自分多分Coffeeについてある程度極まってる感じなので、あんまり比較しないほうがよさそう。 高階関数(後述)が簡単に定義できるのでJS特有のパラダイムには素直に応えられる。 """ multiline text """ がない デフォルト引数がない 最初にunderscoreの型定義ファ

IE8は死に、get, set 使わずに値を出し入れできて、ちゃんとchangeイベント発火します。 こういうのかっこいいしプロダクトで使おうよと言ったんですが、@SubaruG に大反対されて悔しいのでブログに載せておきます！！！！！！！！！！！ 使っていいよ！！！！

適当に書いた奴をGithubにあげておいた。 mizchi/haxe-try https://github.com/mizchi/haxe-try enchant.jsもHaXeから触ってみた。nodeとenchant.js、enchantの型アノテーションは haXeでenchant.jsする利点 - mitamex4uの日記 http://d.hatena.ne.jp/mitamex4u/20111230/1325248577 を使わせていただきました。 とりあえずクイックソート 配列操作系のユーティリティはあんまりなさそう。 undescore.jsクローンのUndescore.hxってのはあった。が、名前空間がほんとにUnderscore.mapとかで冗長な気が… HaXeを使う指針 何よりも気に入ったのが型がオプショナルであるという点。Dynamic型にすればそれ以下のプロパティ

陣取り戦争ゲーで、iPhoneのUnity版からの移植です。 ロードオブナイツ - Yahoo!モバゲー http://yahoo-mbga.jp/game/12011436/detail PC(Chrome/Firefox/IE9以上)とスマホ(Webkit)で同じ物が動きます。ヤバゲーとモバゲーでアカウントは共有してるので、どっちからでも入れます。 HTML版としては既存コードとか一切なかったんで、JSに関してはフルスクラッチです。というか全部CoffeeScriptです。 ある日会社で楽しくHaskellでKPI計算モジュール書いてたら、 「UnityのネイティブのゲームをHTML5に移植したい」 みたいな話が降ってきたので、移植しました。3ヶ月ぐらいで。 プラットフォームはモバゲー(スマホ) + ヤバゲーです。HTML5なのは、スマホとブラウザゲーで開発リソースを共通化したかったか

知られてない機能ってのは大抵公式リファレンスにのってない奴なんですが、結構便利なのがあるので紹介しておこうと思います。 ハッシュ値を取り出す方法 {abs, sin, cos} = Math引数値でもパターンマッチ的に使うことができる。 次のコードが $.get "/json", {}, (data) -> console.log data.a, data.b, data.cこのように書き換えられる。 $.get "/json", {}, ({a, b, c}) -> console.log a, b, cすべてのオブジェクトがハッシュで表現されるJS、その拡張ならではの略記ですね なお、展開後の変数にデフォルト引数は付けられなかったです。残念。 引数オブジェクト展開 arguments... で引数オブジェクトを展開することができます。 f = -> console.log argume