JavaScriptでリアクティブっぽくとにかく短くシンプルにビューが書けるライブラリを作った。 mizchi/horn.js https://github.com/mizchi/horn.js 名前は背骨とか角とかっぽければ何でもよかった。 方針 Angularっぽいユーザー定義のdirective Knockout.js っぽいデータバインド Backbone風の軽量なAPI 依存はjQueryのみ とにかく短くビューのコンポーネントの塊を書けるのを目的とした。UnityとかFlashのコンポーネントに影響を受けている気がする。 HTMLのテンプレートによって、ビューがどういう属性を持つか決定される。それをJavaScriptから使う。 インストール bower install horn 使い方 こんな感じでテンプレートを用意する <div data-template-name="st

宣言するだけしとくか。 一人で同人ゲームをリリースする 一つはWebViewガワアプリ。普通のウェブ技術でRPG作る。 もう一つはUnityで2D作る。Unity2Dは技術的な移行期だし参入するにはちょうどよいタイミングだと思う。Unityはマルチプラットフォーム化が進んでいるのが一番魅力的。 プログラミング言語を作る 一つの目標は、TypedCoffeeScriptをちゃんと作ってどっか大きなプロジェクトで採用されるのを目標にする。しばらく開発が止まってるのは、卒論のやらなきゃならんかったのと、CoffeeScriptRedux本家で大事なフューチャーが入ってないのに気づいたのでそれを待ってるから。Githubで☆1000を目指す。 もう一つはLLVMを使って静的型付言語を作る。実は今、手元に少しだけ作ったものがある。ネイティブに弱いので、勉強かねてC++を使っている。これは作るのだけが

これ facebook/react https://github.com/facebook/react 使ってみる サンプルそぎ落として、最小構成で組んでみた gist8208430 モジュール定義 -> 引数をJavaScriptで受け取って処理 -> renderという流れ。jsxという拡張子はjavascriptにxmlリテラルを追加したものっぽい。(この拡張子かぶりすぎてるので本当にやめてほしい) render毎にDOM構築してるから激しくパフォーマンス悪いのでは…　と思ったら次のような記事があった。 Performance Calendar » React’s diff algorithm http://calendar.perfplanet.com/2013/diff/ どうも毎回innerHTMLで突っ込むんじゃなくて、既にrender済みのものはスキップして最適化している模

大晦日ですが、皆さんいかがお過ごしでしょうか。僕は去年卒論の提出に失敗したので、今年もです。学生って公言すると炎上した時に面倒な人がわいてくるので、隠してました。まあ25歳・フルタイムワーカーの、全くキャンパスいかない大学6年ですが。 というわけで、振り返る時間が無いわけでもないので、今年一年をまとめてみます。ブログ移転したり発表資料だったりQiitaだったり、色んな所で書き散らしてきました。 今年のホッテントリはたぶん18本ぐらい。 1月 状況 仕事でUnity3d/C#やりはじめる 卒論書く時間なくて大学の卒業に失敗する CROSS 2014 | エンジニアサポートCROSS2014 http://www.cross-party.com/ のパネルディスカッションに出た はじめてのイベント登壇経験 記事 地方都市という地獄 あるいは関東圏の「私が住んでるところは田舎だよ(笑」が如何に残

問題 モバイルは回線が不安定なので、ロードの失敗が頻繁に起こります。 開発時は高速なwifi環境で開発しているので、リリース間近になって帯域を圧迫していることに気づいたりします。 解決方法 画像を先読みします var preload = function(src){ var d = $.Deferred(); var img = new Image; img.src= src; img.onload = d.resolve img.onerror = d.reject return d.promise(); }; 何をやっているかというと、空のimgタグをつくってそこに画像を読み込みます。その過程でブラウザキャッシュに画像が保存されます。正確に言うとこの時点ではどこにも紐付いていないのでGC対象ですが、その後すぐDOMに画像をはるなら問題ありません。 並列で先読みする(速い・不安定) va

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倍違う、ということがわかります。

(この記事は闇 Advent Calendar 2013 - Adventar の8日目です。) コンプレックスの話をする。 僕がプログラミングを始めたのは、2008年の夏、大学1年の夏休みだった。大学のサークルの新歓を巡ったはいいが、どこもかしこも絶望的につまらなくて、当時エンジニアとネットウォッチャーしかいなかったTwitterをみていると、彼らがとても楽しそうに見えていた。 だから僕はTwitter漬けになって、一人でプログラミングの勉強をすることにした。大学では最低限の単位を確保しつつ、とりあえずなんでもいいからアプリを作るぞと、はてブで流れてきたホットそうな技術をひたすら手につけてみた。とにかく、新しそうなものをやるという戦略だった。 最初にやったことは、ゲーム用だったWindowsのデスクトップマシンを潰して、ひたすらUbuntu8.04をインストールしては、Railsのサーバ

最初に僕のポジションは表明しておくけど、今までbackbone.js, というかそのラッパーであるchaplin.jsべったりの環境で開発してて、今のプロジェクトをゼロから作り直す機会があるので次バージョンのためのライブラリ選定のためにとりあえず比較として angularを試した見た程度の人間なので、深くは理解してない。 Angularのメリット 僕の浅い理解と勉強会での話を総合した感じ レールに乗り切った時の開発効率が半端ない レールがしっかり敷かれているので開発者の能力差が問題にならない HTMLがテンプレートなので意味的な乖離が少ない ビューモデルに対する操作が一貫していてテスタビリティがある 自分もモジュラリティがあるHTML/CSSは幻想だと思っているので、HTMLに直接属性を書くのは別に構わないと思っている。 ただ、集団開発でも開発者の能力差が問題にならない、という発表をしてい

@kozoh氏に直接リプライを送ったのですがブロックされており、タイトルに @kozoh を含むタイトル爆撃も考えたのですが、さすがに攻撃的すぎるアプローチであり、おそらく僕の1favしかないツイートを理由にBANしたであろう@kozoh氏なら、観測範囲に引っかかると信じています。 経緯 今朝方、自分のtwitter @mizchi がはちま禁止によってNGされていることを知りました。 今からfirefoxのアドオン「はちま禁止」に登録されているアカウントを見つけた限り列挙します。アカウントの性質によって区別とかはしませんし、晒してどうこうという意図もありません。ただ、こういうものは公開されるべきだという私の判断です— メガフライゴンくろいK (@JoKuroi) 2013, 11月 26 追記: リスト、公開を希望しないアカウントが意図せずログが残ってしまう恐れがあるで削除しました。 自

最近、この話題について経営者目線の話が多かったので、エンジニアのスキル獲得戦略とその最大化という観点から話をする。 まず目下のウェブエンジニアとして一番の課題は、「35歳定年説をどう乗り切るか」、ということだろう。もちろん、みんな35歳定年説なんてのが、まやかしであるとはわかっている。若い業界だったウェブ業界も成立してからだいぶ経ち、結果として平均年齢が押し上げられ、自然と35歳以上のエンジニアも増えてきた。 問題は、人月という概念によって、できる人間とそうでない人間の区別がされていないことだ。ウェブエンジニアとしての悲哀や業界の歪みはここにあると思う。下手に謙遜したりして話をややこしくする前に言ってしまうと、自分をできる側の人間として話をする。 生産性を測る確固としたメトリクスがないのも事実だと思うが、すくなくとも熟達した人間と未経験者がおなじ1人月というのは、到底ありえない話だと思う。

ロンドンへの飛行機(11時間)で暇だったから書いた文章。 自分でゼロからすべてのコードを書けるときはテストファーストでいいけど、アンドキュメントな実験的なライブラリを利用する際や、巨大なプロジェクトの一部としてコードを書く際は、テストファーストよりもとにかくコードを書きまくって挙動の変化を確かめるほうが有用な時がある。 まあ多分どっかでこういうのはハウツー化してあるんだろうけど、自分ルールが固まってきたので、メモっておく。 目的を設定する トップダウンに読むには、コスパが悪いことが多い。とにかく「アレする」「コレする」という目的を定義して、そのためにその周辺領域からボトムアップに読むことにしよう。 エンドポイントを追う 巨大なプロジェクトに放り込まれた最初の段階では、エンジニアは本当に無力だ。 最初にやることは、自分が処理を挟むべき位置を見つけることだろう。 まずはファイル名や関数名を読ん

今日iPhone5Sを契約してきた。 これで僕の携帯の変遷は、中学生の頃親の目を盗んで購入したプリペイド携帯→Willcomの京ぽん2→ iPhone3G → HTC Magic(Androidのフラッグシップ機) → GalaxyTab → iPhone5s みたいな感じになった。2011から2013はまともに携帯を携帯していなかった。 GalaxyTabはルートとってテザリングするだけのマシンだったので、実質アクセスポイントとしての運用だった。だからモバイルとして扱ったことはあんまりない。iPhone5sは久しぶりにまともなモバイル機器として購入したことになる。 Androidについて Androidはもう飽きた。HTC Magicに夢を見させてもらったけど、カスタムOSをビルドして焼いたり、そもそもAndroidで何かをしようとするのも飽きて、どんどん持ち歩かなくなって、Galaxy

参考: Pragmatic D Tutorial — Pragmatic D Tutorial D、言語仕様見るとどっかでみた機能の集合体にみえる— 性格は糞 (@mizchi) 2013, 10月 24 @mizchi 実用性重視だからね．安全性の伝搬とスレッドローカルを型で保証してるのが手続き型では珍しいくらいかなぁ．— Mr. Fiber (@repeatedly) 2013, 10月 24 @repeatedly 実用性重視の言語ってだいたい他の劣化になりがちなんですが、ネイティブ系の中ではGoとも目指してる場所が違う以上、C++代替目指す中では一番有力にみえてきました、最近。かといっていきなりDはきついんですが…— 性格は糞 (@mizchi) 2013, 10月 24 @mizchi C++はもちろん，Python，Ruby，Rust，Haskellなどなど，色々なところから開

nodeでスクリプト書いてもいいけど、絶対コマンドあるはずだと思ってbrew search watch したらそれらしきものがあった。 alandipert/fswatch https://github.com/alandipert/fswatch 公式サンプルより ./fswatch /some/dir "echo changed" 自分はこんな感じで使ってる。 fswatch . "./bin/coffee scratch.coffee" なにかのモジュールのファイルを変更したら scratch.coffeeっていうデバッグコードの状態をdumpする。 TypedCoffeeScriptの開発で, gruntで監視対象を書いてもいいけど、なんか最近のgrunt妙にヘヴィだし、見たいデータがその都度違うので、さっくりみれるのは大事。

今リリース前にしてはタスクがあんまりないのでブログ書いてみる。 Quipperに入社してから一ヶ月半ほど経過した。それで感じたことをあれこれ書いてみようと思う。 あんまり熱心に書くと前の会社に入ったばかりのことを思い出して恥ずかしくなったりするので、ほどほどにする。 エンジニア文化の共有 会社に入ってまず最初にやることは、エンジニアが文化を共有することだと思う。 どんなマインドかは、僕より Quipper のスピード感 - @kyanny's blog とかを読んだ方が伝わるはず。 QuipperはOSS文化というかRuby文化的なものを強く志向している感じがあって、そこらへん馴染みやすかった。 入社してからやったこと まず前提として、ベンチャーなので整った教育制度などはない。(そもそも自分も研修など期待していない)。 エンジニアとしての文化を共有しているから、最初からすぐ仕事に入れた。具

たぶん僕は人類の怠惰を極めたようなcoffee-scriptの文法が好きすぎるのだけど、その結果型を書けるcoffee-scriptを作り始めてしまった。 Fork元はCoffeeScriptRedux mizchi/CoffeeScriptRedux https://github.com/mizchi/CoffeeScriptRedux/tree/type とりあえず今の版だと次のコードが通る。 目標 x :: Number = 3 y :: String = "hello" z :: Boolean = false # z :: String = 4 #=> Error # y = x #=> Error a :: Any = 3 a = 'fadfa' b = 'a' fn :: Function = -> x = 3 n = -> i = '' f2 :: Function = (

小学生の時、自分が女の子殴ったとかそんな理由で学級会開かれて(実際は意図せず箒の柄があたっただけなんだけど)、バカらしくなって自分では仏頂面決め込んだつもりでいたら、ニヤニヤしてんなふざけんな！って言われて教師に思いっきりぶん殴られたことある— 性格は糞 (@mizchi) 2013, 10月 9 意図せず箒の柄があたったのを被害妄想で殴られたと思ってしまういじめられがちな女子と、意図せず当たったという主張が認められない程度には教師に信頼されてない生徒だったので、学級会悲惨だった— 性格は糞 (@mizchi) 2013, 10月 9 素行が悪いのは事実だったけど仏頂面のつもりが笑ってるつもりに見えるのはだいぶ面倒アレだなと思ったけどたぶん25になっても何か考えてる時は常にニヤニヤしてるらしいので全く直ってない— 性格は糞 (@mizchi) 2013, 10月 9 教師に対する不信、小6

昨日の記事で、抽象的なまま書きまくった反省もあるのだけど、それと同時に残念な気持ちになったので、すごく当たり前のことを書く。 オンラインゲームでクライアントに状態を持ったらメモリ操作されて危険っていうブコメが多かった。それは正直、古典的なウェブアーキテクチャから脱却できない残念な感じだと思ってる。 原則 クライアントはサーバーのキャッシュを作って、サーバーと同じロジックを持って、計算し、次の行動を決定する。 が、サーバーはクライアントから送られてくる情報を信用しない。 大事なことなのでもう一度言う。サーバーは、クライアントから送られてくる情報を信用しない。 対応 モデルの状態を受け取るのではなく、モデルのトランザクションを受け取る。 実装例 AからBに攻撃したい。この時にattackEnemyというAPIを作るとする。 ここでのクライアント目的では、手元のデータで対象に攻撃可能かどうかを判

2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし

ふとTwitterで投げたらリプライたくさんきた これ素朴な質問なんだけど、ソースコードで英語でコメント書くとき、守護はIなのかWeなのかコードそのもので受動態で書くのか、どっちなの— 性格は糞 (@mizchi) 2013, 9月 23 @mizchi 一行目は主語無し（命令形）、長い説明をつける場合は 1.言い訳がましいコメントは I を主語に 2. 誰かと合意済みの事柄は We を主語に 3. 仕様に沿う振る舞いに変更する場合は It should be ~ などコード自体が主語であるように、と書いてる— Kensuke Nagae (@kyanny) 2013, 9月 23 @mizchi "add …": このコードは…を足します、"added …" このコードは…で足されました、"adding …" このコードは…を足しています— 中村氏 (@r7kamura) 2013, 9