タグ

ブックマーク / mizchi.hatenablog.com (11)

  • JavaScript で クラスベースの設計より関数指向の実装を薦める理由 + GraphQL について - mizchi's blog

    最初に: 「Functional Programming 最高!」という話ではないです JSは通信やストレージに保存するデータの扱いの関係で、JSONにシリアライズできることが至上命題になるケースが多いので、クラスベースの設計で自身に副作用を起こすメソッドより、イミュータブルな T => T なstatic methodとして切り離しておくと扱いやすいケースが多い— 現場の声 (@mizchi) 2016年9月6日 複雑なオブジェクトのシリアライズは簡単だけど、逆にシリアライズされたオブジェクトからビルダを構築するのが難しいので、JSONの構造体自身とは別に独立して独立したメソッドとしてビルダが切り離されている方が扱いやすい— 現場の声 (@mizchi) 2016年9月6日 一応コンストラクタ名を保存してシリアライズ/復元する方法はあって、RPGツクールMVのコードを読むとそういう感じに

    JavaScript で クラスベースの設計より関数指向の実装を薦める理由 + GraphQL について - mizchi's blog
  • 本を書くためのアウトラインエディタを作ってる - mizchi's blog

    少し前からアウトラインエディタを作ってる。 こんなの (画面は開発中のものです) ファイルツリー 複数シート同時編集 ファイルツリーUIというのをスクラッチで初めて作ってみたんだけど、「当然こう動いて欲しいよな」というヒューリスティックな挙動をたくさん作るハメになってて学びがある。 なぜ作ったか 技術書を書いて Kindle Direct Publishing で販売しようと思って、Macで売れてるアウトラインエディタを一通り試したんだけど、惜しい物が多くて、個人的にしっくり馴染むものがなかった。なので、技術書を書く前に、自分がを書くために必要なツールを作るところから始めることにした。 作家・藤井太洋に聞く 「小説を書くためのツール、Scrivener」 - DOTPLACE を読んで、その辺のアプリに対する感覚を自分でも意識して作ってる。Scrivener は wysysig なんで自

    本を書くためのアウトラインエディタを作ってる - mizchi's blog
    KenichiroMurata
    KenichiroMurata 2016/08/23
    おぉー。出たら買いたいです。
  • なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog

    http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの

    なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
  • Reactのprops/stateとFluxのStore - mizchi's blog

    的に、ReactのpropsはImmutable, stateはmutableという扱いです。 storeはストレージ抽象じゃない— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 rootComponent以外のComponentで参照するプロパティは基的に全てpropsになるしstoreからの関数読み出しみたいな動的な状態決定は行わない— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 そもそもViewを論理的に分割しても人間のよくわからん都合でしっぺ返しらうだけなんでコンポーネントが独立して稼働するなんて状態になりにくくて、一意な状態を作るのに一旦一箇所に集約した上で各コンポーネントに発散するのがいい— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 @r7kamura 親が正しいprops持ってれば、結果として正しいpr

    Reactのprops/stateとFluxのStore - mizchi's blog
  • エンジニア Mac アプリ 環境 おすすめ - mizchi's blog

    Macで捗るオススメのアプリひたすら書いてくわ : IT速報 が余りにも消化不良だったので書く。 (タイトル考えるの面倒臭かったのでワードサラダ風) homebrew入れる brewfileをつくる brew bundle おわり 以下、最近作った ~/brewfile です。デスクトップアプリもbrew caskから突っ込む。 もういろんなサイト巡ってアプリを入れて回る時代は終わったんだよ、爺さん tap phinze/homebrew-cask || true tap homebrew/versions|| true update || true install brew-cask || true install git || true install hg || true install ag || true install gist || true install gibo ||

    エンジニア Mac アプリ 環境 おすすめ - mizchi's blog
  • データバインディングについてVue.jsと Backbone.stickitを比較する - mizchi's blog

    これは会社でvue.jsを採用を説得するための資料なのでstickitを罵倒する vue.js http://vuejs.org/ backbone.stickit http://nytimes.github.io/backbone.stickit/ Backbone.stickitVue.jsの比較 「#menuを押したら右に100px動く」みたいなコードを書いてみるとする。 template関数はJadeテンプレートを展開する関数だと思ってほしい Backbone.stickit の場合 class MenuView extends Backbone.View initialize: -> @model = new Backbone.Model() @render() render: -> @$el.html template(""" #menu.js-open """) @stic

    データバインディングについてVue.jsと Backbone.stickitを比較する - mizchi's blog
  • 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog

    Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'

    軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
  • クライアントJavaScriptのテストにはmocha-phantomjsを使え - mizchi's blog

    mocha-phantomjsは、その名前の通りmochaとphantomjsを使ってクライアントJSのテストができるヘッドレステストランナー。長く使ってるけど特に不満はないので使えばいいと思う。 metaskills/mocha-phantomjs https://github.com/metaskills/mocha-phantomjs スケルトンを作った クライアントJSのテスト書かれない理由として、環境構築の難しさがあると思う。 そこで怠惰な人たちの為にGruntでプロジェクト用スケルトンを作った。ごじゆうにおつかいください 使い方 git clone git@github.com:mizchi/client-app-skeleton.git cd client-app-skeleton npm install bower install grunt test 結果 Running

    クライアントJavaScriptのテストにはmocha-phantomjsを使え - mizchi's blog
  • より簡単にカスタムディレクティブが定義できるようになった Horn.js v0.1 リリース - mizchi's blog

    卒論の息抜きに色々いじった。 カスタムディレクティブの機能を追加 自分でも作ってても面倒くさかったので、こんな風に簡単にした。下は data-click のサンプル。 Horn.addDirectiveByEachElement "data-click", (view, $el, val) -> $el.on 'click', (view[val].bind view) data-click付けたエレメントごとにコールバックでリスナーつけている。他にも Horn.addDirectiveByEachValue があるが使い方はソース参照としか言えない。まだドキュメント書く気分ではない。 data-view, data-list-view ディレクティブの追加でより宣言的に というわけで自分が欲しかったdirectiveを追加する。 テンプレートに外部ビューを植え付ける data-view,

    より簡単にカスタムディレクティブが定義できるようになった Horn.js v0.1 リリース - mizchi's blog
  • とにかくシンプルで簡単で高速なViewのコンポーネントを作れるHorn.jsを作った - mizchi's blog

    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

    とにかくシンプルで簡単で高速なViewのコンポーネントを作れるHorn.jsを作った - mizchi's blog
  • BackboneマンがAngular勉強会いってきたけどそんなに好きになれなかった話 #ng_jp - mizchi's blog

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

    BackboneマンがAngular勉強会いってきたけどそんなに好きになれなかった話 #ng_jp - mizchi's blog
    KenichiroMurata
    KenichiroMurata 2013/12/05
    Backboneの方が分かりやすくて小回りが効くから好きです。Angularは強力で生産性高そうだけれど、ロックイン度が強すぎると感じてしまう。
  • 1