archive-com.com » COM » N » NITOYON.COM

Total: 757

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定) - てっく煮ブログ
    Klein で データバインディングを実現するための API を設計し始めた V8 上のブランチでプロトタイプを作成したあと V8 チームに正式版を開発することを認めてもらった さらに Object observe 以下 O o と表記 を ES7 標準に提案しつつ Polymer チームと協力して O o を使ってデータバインディングを実装した 3年後 世界は大きく変わった Ember や Angular といったフレームワークは O o に興味を示したものの 既存のモデルを O o のモデルに発展させるのは難しかった Polymer は 1 0 をリリースするにあたりゼロから書き直されたが そこでは O o は使われなかった さらに React のような データバインディングでミュータブルなものを避けようとする処理モデルが人気を博している 関係者との議論の末 Object observe の提案を TC39 現在 ES 仕様策定のステージ 2 から取り下げることにした また 今年の終わりまでには V8 でのサポートを終了したいと考えている chromestatus com によると Chrome がアクセスしたページのうち 0 0169 でしか O o は利用されていない O o を使っていた開発者は object observe のような polyfill や observe js のようなラッパーライブラリーを使うことを検討してほしい Object observe は他のフレームワークで使われることもなかったし Polymer でも使われなくなってしまったので ECMAScript への提案を取り下げる ということのようだ Polymer 1 0 のデータバインディング実現方法 Polymer が Object observe を使わなくなった理由については Polymer の開発にも関わっている Brian Chin さんから スレッド 内に次のような コメントがでている O o はプロパティーを変更したあと 非同期でコールバックが呼ばれるのがイケてなかった Polymer 1 0 ではプロパティーを変更したら すぐに変更が UI に反映されるので 利用者にも分かりやすくなっている モデルを書きかえた瞬間に UI に反映されるようにしたかった というのがメインの理由のようだ じゃ Polymer は Object observe の代わりに何を使ってるの という質問に対しては 次のような 回答 が出ている getter setter を定義して DOM イベントで伝搬させてるよ 詳しくは polymer project org を見てね たとえば ここ とか ここ だよ ざっと上記のページを見た感じでは 次のような感じでデータバインディングに使うプロパティーを宣言しておくらしい Polymer is custom element properties someProp type String notify true スレッドには 他にも ブラウザーでは使われないかもしれないけど Node js のエコシステムには大きな影響があるかもしれないから そんなに急に削除しないでくれ と Node js の中の人が書き込んでいたり Firefox の Object watch はデバッガーで使われてるからすぐに削除されることはないはず といった書き込みがあったりして興味深い まとめ Object observe は ECMAScript 7 に入ることはなくなったので 他のブラウザーに 実装される可能性はなくなったし Google Chrome でも近い将来 使えなくなるだろう Tweet 2015年11月18日 編集履歴 JavaScript 関連する記事 JavaScript

    Original URL path: http://tech.nitoyon.com/ja/blog/2015/11/18/death-of-oo/ (2016-02-13)
    Open archived version from archive


  • JavaScript フレームワークがデータバインディングを実現する4通りの手法 - てっく煮ブログ
    などをモデルとして扱えるように工夫している この方式を採用するフレームワークが多い 現時点においては この方式を採用するフレームワークが多数派である Backbone jsなどのライブラリのgetter setterがダサい理由と その解消方法 Qiita によると Backbone js Knockout js Ractive js も同じ方式を採用しているらしい Backbone js と Ractive js は get hoge や set hoge value という形式 Knockout js は少しマシで hoge で取得し hoge value で設定する形式 2 力ずく方式 お次は AngularJS が採用しているヤツを説明しよう 英語では dirty check と呼んでいる AngularJS はネイティブな Object や Array をモデルとして渡せるし 独自クラスのオブジェクトだって渡せる たとえば モデルが title てっく煮 だったとしよう モデルはネイティブなオブジェクトなので 変更をプッシュ通知で受け取るのは諦めている そんな前提なので AngularJS は 何かあるごとに title の値が変化したかどうかを自力でチェックする 変化してれば DOM を書き換える オブジェクトの参照が変わってしまうこともあるので 前回の値 はディープコピーして覚えている とても力技なので処理にはオーバーヘッドがある ソースコードも複雑になっている 何かあるごとに はいつか さて さきほど 何かあるごとに と書いたが 前回の値と今の値を比較するタイミングはいつだろうか 正解は AngularJS 経由で JavaScript のコードを実行したとき である たとえば ボタンのクリックイベントに関しては button ng click foo のように書くと AngularJS 経由で foo が呼ばれる setTimeout の処理であれば timeout を使えば AngularJS 経由でコールバックが呼ばれる コールバックを読んだとき モデルの値は変更されるかもしれないし 実際には変更されないかもしれない 変更されたか調べるために 呼び終わったあとに 力ずくで調べるのだ 直接 DOM イベントを監視するようなときには AngularJS を経由させるのは難しい そういうときには scope apply に関数を渡すと 関数を呼んだあとに力ずくの比較処理をやってくれる AngularJS を使う側の視点からすると モデルへの変更を HTML に確実に反映させるには ng click や timeout scope apply など使って AngularJS 経由でモデルを変更する必要がある 力ずく方式のまとめ Object や Array や独自クラスのインスタンスをモデルにできる 比較処理がトリガーされるかどうかを意識する必要がある 比較処理のオーバーヘッドがある 3 モデル書き換え方式 こちらは Vue js が採用している方式である Vue js もネイティブな Object や Array をモデルとして渡せる たとえば オブジェクトのキーの変更を検知するために キーを ECMAScript 5 的な プロパティーに書き換える 配列の変更を検知するために Array prototype を書き換えて push メソッドなどを置き換える AngularJS のように力ずくの比較は行わないので動作は速いのが利点 Vue js のサイトでも 他のフレームワークより速いこと を自慢している 一方の弱点は 次の通り モデルとして受け取ったオブジェクトを書き換えてしまう 完全に変更を検知できない 完全に検知できないので 一部の変更処理については set や add といったメソッドを使う必要がある ラッパー オブジェクト的な要素が残っているといえる 詳しくは Vue js が data に渡した値を激しく書き換える件について に書いたので見てほしい 4 Object observe 方式 現在 ECMAScript には オブジェクトの変更を検知する という機能を持つ Object observe というメソッドが提案されていて 仕様決定に先立って Google Chrome 36 ではデフォルトで有効 になっている ためしに Google Chrome 36 の JavaScript コンソールで使ってみる a foo 1 Object observe a function changes console log changes a foo 3 Object 0 Object name foo object Object foo 3 oldValue 1 type update a bar 10 Object 0 Object name bar object Object bar 10 foo 3 type add まさにデータバインディングで使ってくれといっているようなメソッドである Polymer は Object observe を前提としている さらに 先ほどから紹介していた各種ライブラリーについても AngularJS は 2 0 での対応を 検討している し Vue js は v0 11 x で 対応予定 となっている ECMAScript に Object observe が取り込まれれば ここまで紹介したようなややこしいデータバインディングの仕組みは不要となる まさに データバインディングのための API であるが ECMAScript 6 にも入っておらず すべてのブラウザーで使えるようになるには時間がかかりそうだ

    Original URL path: http://tech.nitoyon.com/ja/blog/2014/07/18/data-binding/ (2016-02-13)
    Open archived version from archive

  • Vue.js が data に渡した値を激しく書き換える件について - てっく煮ブログ
    ちなみに 普通にインスタンス化した猫はこうなってますよ 当たり前だけども bark あります Vue js さんは new Vue の data に渡した値を書き換えてしまうのです 恐ろしい子 なぜにあなたは書き換える Vue js は data に変更が加わったことを検知するために data の値を書き換えているようです たとえば dog name というキーは ECMAScript 5 のプロパティーに置き換えられます get name と set name が定義されてますね このようにすることで dog name が書き換えられた瞬間に set name が呼ばれるので Vue js はデータの書き換えを検知するわけでございます じゃ なんで prototype まで置き換えるのか Displaying a List vue js によると ECMAScript 5 ではキーの追加 削除は検知できないので add と delete を使ってくれ ということのようです ざっくりと日本語訳してみた In ECMAScript 5 there is no way to detect when a new property is added to an Object or when a property is deleted from an Object To counter for that observed objects will be augmented with two methods add key value and delete key These methods can be used to add delete properties from observed objects while triggering the desired View updates ECMAScript 5 では Object に対するプロパティーの追加や削除を検出する方法がないんだぜ だから 監視対象の Object には add key value と delete key の 2 つのメソッドを追加するんだよ このメソッドを使ってプロパティーを追加 削除すると View への反映をトリガーできるんだぜ add と delete を追加するのには そういう理由があったわけですね さて 自作のクラスを渡せないのは明らかにバグっぽいので修正したいところではあります 追記 よくよく公式ドキュメントの Instantiation Options vue js を読んでみると The object must be JSON compliant no circular references data に渡すオブジェクトは JSON の仕様に従っていて 循環参照してないものにしてね とあるので 自作クラスのオブジェクトを渡せないのは仕方ないようです Array も激しく書き換える Vue js が激しく書き換えるのは Object だけではありません 配列も猛烈に書き換えます そのことは ドキュメントの Displaying a List vue js からも伝わってきます 先ほどと同じくざっくりと日本語訳してる Under the hood Vue js intercepts an observed Array s mutating methods push pop shift unshift splice sort and reverse so they will also trigger View updates You should avoid directly setting elements of a data bound Array with indices because those changes will not be picked up by Vue js Instead use the agumented set method 内部的に Vue js は Array の状態を変更するメソッド push pop shift unshift splice sort and reverse の呼び出しを監視して View が更新されるように処理をしてるんだぜ インデックスを指定しての値を変更すると Vue js が検知できないのでやめてほしいよ その代り set メソッドってのを用意したから こっちを使ってほしいんだぜ まぁ こんな感じで 扱うには少し工夫が必要であります data に渡した Object が console log で見にくい問題の対処方法 data に渡した値を console log すると getter setter の山になるわけで 値がどうなっているかを確認しにくいですね これをなんとかするには JSON

    Original URL path: http://tech.nitoyon.com/ja/blog/2014/06/30/vue-js-hook/ (2016-02-13)
    Open archived version from archive

  • Ruby で HTTPS 接続するときの証明書で悩んだ話 - てっく煮ブログ
    接続したときには デフォルトでは証明書を検証しないポリシーになっていた unless ssl context verify mode warn warning peer certificate won t be verified in this SSL session ssl context verify mode OpenSSL SSL VERIFY NONE end https github com ruby ruby blob v1 8 7 lib net http rb L563 566 より デフォルトで証明書検証しないというのは罠なので そのことを教えようとしている warning のようだ 警告を消す方法 上のコードをみたら分かる通り 明示的にポリシーを指定すれば警告は消える 証明書を検証したい場合 https verify mode OpenSSL SSL VERIFY PEER を追加する 証明書を検証したくない場合 https verify mode OpenSSL SSL VERIFY NONE を追加する 1 9 系で変わってる ちなみに デフォルトでは証明書を検証しない という挙動は 1 9 系では 修正されている ルート証明書どうするの問題 証明書を検証する設定にしたら 証明書の検証に失敗したぜ というような例外がでるようになった OpenSSL SSL SSLError SSL connect returned 1 errno 0 state SSLv3 read server certificate B certificate verify failed これはどうも 自分の環境にルート証明書が正しく入ってないっぽい いかんせんレンタルサーバーなので 何ともできない 仕方がないので どこかからルート証明書を取ってくることにした ググると http curl haxx se docs caextract html が有名っぽい cURL の人が mozilla org のデータを PEM 形式に変換してくれているヤツ ここにある cacert pem を拾ってきて ca file に cacert pem のパスを指定すればおしまい require net https https Net HTTP new www google com 443 https use ssl true https verify mode OpenSSL SSL VERIFY PEER https ca file path to cacert pem https start h まとめ 新しい OS を新規セットアップした場合はたぶんまったく問題にならないであろうことに苦しめられつつ 以上の無駄な知見を得た flickr の更新用に使っていた flickraw というライブラリーは verify mode や ca file を指定するオプションがなかったので 追加してね という pull request を投げたらマージしてもらえた めでたし あと Ruby warning peer certificate won t be verified in this SSL session HAPPY

    Original URL path: http://tech.nitoyon.com/ja/blog/2014/05/30/ruby-https-cert/ (2016-02-13)
    Open archived version from archive

  • タグ「Ruby」の記事一覧 - てっく煮ブログ
    を作った 2013年12月09日 作った Windows Perl Ruby Win32 Jekyll で watch の代わりに Grunt を使ってみるテスト 2013年06月25日 Jekyll Ruby Node js Flickr の Set 内の写真一覧を更新する Ruby スクリプトを作った 2012年11月06日 Ruby Ruby の Liquid でテンプレートに値を渡すパターン4つ 2012年10月29日 Ruby Jekyll ブラウザ上で Ruby を試せる IRBWEB を作ってみた 2009年04月06日 Ruby Silverlight ubygems 2008年12月02日 Ruby Ruby で UTF 8 の文字化け部分を取り除く 2008年11月09日 Ruby RubyAmf のシリアライザだけを使う 2008年04月30日 Ruby ActionScript Ruby で Web2 0 笑 2007年12月07日 Ruby Ruby で スイーツ 笑 関数 2007年12月03日 Ruby

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/ruby/ (2016-02-13)
    Open archived version from archive

  • D3.js で自作クラスにイベント発行機能を追加する - てっく煮ブログ
    を実行すれば myclick イベントが発火する 引数はそのままリスナーに渡される Function call を使っているのは リスナー側で this が dispatcher ではなく MyButton にしたいから on の実装 次に MyButton prototype on の実装 こちらは 単純に dispatcher on に中継している MyButton prototype on function return this dispatcher on apply this dispatcher arguments 単純に中継しているだけなので もっと簡略化して書けそうである そう d3 rebind を使えばね function MyButton selector selector on click this onClick bind this this dispatcher d3 dispatch myclick ここが追加 d3 rebind this this dispatcher on コンストラクターに 1 行追加したおかげで MyButton prototype on が不要になった コードは短くなったが d3 rebind の学習コストが増えたので微妙なところではある ちなみに d3 rebind は 11 行の短い関数 上で手で書いたのとだいたい同じ動作になるのが分かるはず d3 rebind function target source var i 1 n arguments length method while i n target method arguments i d3 rebind target source source method return target function d3 rebind target source method return function var value method apply source arguments return value source target value これで目的は完遂 めでたし 完成後の全体のソースコードを貼っておく DOCTYPE html meta charset utf 8 script src http d3js org d3 v3 min js charset utf 8 script body button click me button script function MyButton selector selector on click this onClick bind this this dispatcher d3 dispatch myclick d3 rebind this this dispatcher on MyButton prototype onClick function this dispatcher myclick call this name MyEvent event d3 event var myButton new MyButton d3 select button

    Original URL path: http://tech.nitoyon.com/ja/blog/2014/04/02/d3-event-dispatch/ (2016-02-13)
    Open archived version from archive

  • Git for Windows でレポジトリー上の CR LF を LF に変換する手順 - てっく煮ブログ
    のファイルの 2 つがあるレポジトリーを用意してみた core autocrlf が true な状態で clone すると 両方のファイルが CRLF でチェックアウトされる この状態で上記のコマンドを実行してみると CR LF のほうだけが引っかかる git grep cached I r crlf test txt End of Line Character Test M crlf test txt M crlf test txt Which do you like CR LF or LF M crlf test txt M crlf test txt This file uses CR LF M crlf test txt M crlf test txt Clone me M めでたし レポジトリー上の CR LF を LF に変換したい 万が一 レポジトリー上に CR LF を発見したら LF に統一しよう こちらも core autocrlf が true になっている状態からの手順を示しておく 一時的に core autocrlf を false に設定する git config core autocrlf false LF でチェックアウトするために ワーク ディレクトリーのファイルを全部削除してから チェックアウトする 一度削除しないと反映されないことがあった rm rf git checkout CR LF になっているファイルを何らかのエディターで LF に変換する コミットする git add git commit autocrlf の設定を戻す git config core autocrlf true 実行例 再び https gist github com nitoyon 9808563 で試してみる 作業完了後の diff はこんな感じになる git diff HEAD diff git a crlf test txt b crlf test txt index ad9608a 85a3c62 100644 a crlf test txt b crlf test txt 1 7 1 7 End of Line Character Test Which do you like CR LF or LF This file uses CR LF Clone me End of Line Character Test Which do you like CR LF

    Original URL path: http://tech.nitoyon.com/ja/blog/2014/03/28/git-crlf-to-lf/ (2016-02-13)
    Open archived version from archive

  • タグ「Git」の記事一覧 - てっく煮ブログ
    にパッチを送って取り込まれた話 2013年07月23日 Git Windows でも git difftool dir diff でシンボリックリンクを使う方法 2013年07月09日 Git git difftool dir diff が便利すぎて泣きそうです 2013年07月02日 Git git commit amend を省力化する方法 2013年05月02日 Git SourceTree が Git のグローバルな無視リストを書き換えて困った話 2013年04月05日 Git Git で複数ブランチを同時に扱いたいなら git new workdir が便利 2013年03月29日 Git GitHub で clone するときは SSH じゃなく HTTP を使ったほうが高速 2013年01月11日 Git msysGit 1 7 10 の Git Bash に日本語が入力できない件について少し調べた 2012年04月17日 Git UTF 8 対応の msysGit 1 7 10 リリース いよいよ Windows で

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/git/ (2016-02-13)
    Open archived version from archive



  •