FluxとMVC 以前、@mizchiさんのなぜ仮想DOMという概念が俺達の魂を震えさせるのかとか、id:saneyuki_sさんFluxアーキテクチャの覚え書きを書いたのを読んでて、いろいろ思うことがあったので纏めます。 Fluxは一方通行だから良い? まず一つあるのが、この節です。 この資料は「そもそもMVCを誤解している」という批判も多いのですが、大事なのは「常に一方向にデータが流れる」という点にあります。 MVCも、もともと一方通行ですよ? いや、まず言いたいのは、MVCも、もともと「一方通行」ですよっていうことなんですよね。 その前に、MVCについて誤解が無いように説明しますけど Smalltalkの設計指針などの、GUIを構築するためのMVC Webアプリケーションのサーバサイド処理をするためMVC の2つがあります。ここでは、GUIのMVCについてです。 また、MVCとかMV

この記事は 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.

VirtualDOM Advent Calendar 2014 - Qiitaの6日目です。 前回、チラッと紹介したdeku、どんなもんかそこまで詳しく知らなかったのでコード読んでみた。 segmentio/deku Dekuの特徴 APIはほぼReactと一緒 render/renderToString/setState/shouldUpdate 小さい 手元でビルドしたのが23kb(Reactが90kb) 公式が9kb謳ってるのは、昔の名残かな…？gzipかもしれないけど diff即生DOM操作なんでヘッドレスで動くような構造ではない duo.jsに依存して書かれてる まあsegment.io製だし デクだけにシンプル。小さいのが特徴。 アルゴリズムとしての本質はここみればわかる deku/diff.js at master · segmentio/deku dekuを参考に自分で仮想

今回はReact.jsのVirtualDOMの実装での工夫について書きたいと思います。 Version control for the DOM React.jsのVirtualDOMの実態はJavaScriptのオブジェクトであり、rerenderする際に前後の状態を比較して最小限の変更だけを実際のDOMに反映させる仕組みになっています。 つまり、バージョン管理されていてdiffだけをpatchとして実際のDOMに適用する感じですね。 Level by level 単純にVirtualDOMのtreeを比較すると計算量が多くなってしまうので、React.jsでは計算量を減らすための工夫がされています。 その1つがVirtualDOM treeの同階層同士でしか比較しないということです。WebアプリケーションのDOM構造で異なる階層に要素が移動するケースは珍しいという理由でこのようになってい

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.

(訳) 残念ながらReactではES6 class向けにmixinをサポートするつもりはありません。これはJavaScriptの文法的なコンセプトの目的を台無しにしたくないからです。 (訳注: JavaScriptでは)普遍的なmixinの実現方法がありません。実際、いくつかのmixinをサポートする方法が、今のES6の仕様からはドロップしています。いろんなライブラリが様々なセマンティクスを持っています。私達はES6のクラスにmixinを実装するためにはあなたができることは一つだけであるべきだと考えています。Reactは、(訳注: 他のライブラリと違って)なにもしないことを決めました。 React v0.13.0 Beta 1 | React http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

@armorik83 さんの記事を受けて Fluxフレームワーク Arda が気になる10の理由 - Qiita 設計思想とか指針とか残しておきます。 mizchi/arda Arda - MetaFluxなフレームワークを作った - Qiita Ardaは実践的なものを目指した 他のフレームワークは思想から入って実装されたものかもしれませんが、ArdaはFluxを意識しつつも実際のアプリで使われている画面遷移の機構を抽象化する点から開発がスタートしています。 またKobitoという比較的寿命が長い(ことを予定している)アプリの基盤にすることで長くメンテされる予定です。なのでKobitoはちゃんと使ってもらえるようなものにしたい、と思って開発しています。(この記事が宣伝兼ねてないとは言いませんが。) (自分の開発したものにしては)ドキュメントが充実していることについて 開発者の今回の様子に

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由 破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっています。

やや自己流含む。 getXxx/fetchXxx getXxxは同期、fetchXxxはPromiseということにしている。とくに非同期の取得系はfetchということに決め打ってる。 GETリクエストであることを明示したいときにややこしいという問題はあるが、そのケースは少なく、JS内で同期/非同期を明示したいことの方が多い。 例: 非同期の副作用系はput/post/sync/send/uploadとかそのあたりを適当に使う。 Promise( (done, reject) => {..}) 恐らく仕様的に正しいワードは fulfill, reject なのだが、fulfillはタイプ数が妙に多いのと、llが多くタイポしやすく、またタイポが発見しづらいので、自分は慣習的にdoneを使っている。 追記: fulfillよりもresolveの方が仕様に沿ってるっぽいhttp://people.

概要 WEB+DB PRESS vol.86 に「Docker実戦投入」という特集記事を書かせていただきました Docker 特集以外だと、チーム開発の心得、Atom エディタ、React.js、Ruby コーディングアンチパターンと面白そうな記事が並んでます 2015年04月23日発売です。 Docker 特集の内容紹介 記事は 34 ページで、目次は以下です。 第1章：Docker入門 成り立ちから学ぶ基本と全体像 第2章：Dockerを活かすための原則 実戦投入に向けて押さえておきたい勘所 第3章：ビルド環境の構築とDockerイメージのビルド 本番運用を見据えたイメージの作り方 第4章：本番環境の構築とDockerコンテナのデプロイ Capistrano，Swarmによるオーケストレーションの実践 第5章：Docker運用ノウハウ CI，モニタリング，ログ管理，メンテナンス 対象読

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる

IE8 対応が必要な JavaScript に Babel (+ webpack) を使っているんだけど、素直に書くと動かないところがあったのでメモ。 とある事情により Polyfill も叶わない環境を想定している。 大体これと同じ内容: Caveats · Babel class を使うためには・・・ class を使ったコードを Babel に変換させると Object.defineProperties を使って class 相当を実現させようとする。しかし、IE8 以下の古い IE には Object.defineProperties が無いため、エラーになる。 IE8 でも class が使いたいときは、loose mode の es6.classes を使う:

gulp.jsを使っていて、デバッグが必要になるケースは次の2つですが、やることはあまり変わりありません。粛々と、方法1〜3を試して行きましょう。 gulpfileが動かない 自作/他作のプラグインの挙動がおかしい 基本的にはNode.jsのデバッグそのものですが、(gulp.jsのユーザには) Node.js自体に不慣れな場合もあるかと思いますので、参考まで。 方法0: npm install デバッグの前に、何はともあれ。 方法1: gulp-debug まずは気楽にデバッグする方法から。gulp-debugを使えば、プラグインをパイプして行く途中で、ファイル(正しくはvinyl)がどういう状態か見ることができます。 方法2: console.log 邪道感が溢れてますが、どこがおかしいか当たりが付いている場合は、ログを吐かせるのが早いです。gulpfile内に問題がある場合は、ほぼこ

この記事の内容はいささか、古くなってしまっているようです。投稿からしばらくして、AngularもCommonJS対応を強化して、以前よりはrequireとの相性が改善しています。ただ、筆者自身はもうAngularから離れてしまったのでキャッチアップしきれていません。 うっかりこの記事にたどり着いてしまった方は、@armorik83さんによる詳説「AngularJSモダンプラクティス」にあるCommonJS + Browserifyスタイルを好む方はの項を参照することをお勧めします。 AngularJSとBrowserify、この二人の関係、かなり微妙です。もうどうしてくれようかってくらい。例えるなら宗教の違う恋人のようなものです(適当)。CommonJSに慣れた人には、AngularのDIが正直お邪魔。かといって、Angularの根幹に関わる部分なので使わないわけにもいかないし、と距離感に

Streams 雑感 WHATWG Streams の仕様を読みました。 雑感です。 第1印象は「常識に囚われてはいけないのですね!」でした。 仕様は ES6 で実装してから書いてるようで、既に動く実装があります。 ES6 Classes を使って書かれており、主要なクラスはReadableStream, ReadableStreamReader, WritableStreamの3つ。 Promise まず特筆すべき事は、 Streams はイベントを一切持たないという点です。 ワオ。 従来の JavaScript はイベント駆動です。DOM も XHR も WebSockets も EventSource もイベントを通知します。しかし、この新しい Streams はaddEventListenerを持っていません。代わりに、Promiseをイベントのように使っています。 これにはちゃん

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

JKとおっさんの間で、個人情報を一切漏らすことなく円滑なコミュニケーションが行えるように工夫したプロトコルです。現在は次の二つのプロトコルがありますが、ニーズに合わせてもっと色々考えたいと思っています。 高校生判定プロトコル 登場人物 ここには次のような登場人物がいると仮定します。 JK 自分が高校生であることを証明したいが名前や住所、所属する学校などは保護したい おっさん ある人間について、その人間の性別や年齢といった個人情報はどうでもいいが、高校生であるということは確定させたい このような仮定があるので、例えばJKが、JKの所属する学校の発行する学生証を用いておっさんに身分を示すということは、学校名などといった個人情報が流出するので使うことはできません。 概要 次のような構成になります。 おっさんは自分が 信頼できる カラオケ・理髪店・映画館をいくつかピックアップして、そのリストをJK

タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、

はじめに 2014年12月頃、SlackのHubot Integrationの仕様が変わりまして、Slack上でhubotが動いているURLを設定する必要がなくなりました。このおかげで、RaspberryPi上のhubotも簡単にSlackと連携させることができます。 というわけで、世の中のIoTブームに乗っかってSlackを現実世界とつなげてみましょう。 作ったもの 今回実装したのは、Slackのあるコマンドに反応してRasPiが写真を撮影、自動アップロードするという機能です。 なぜこれを実装したかと言うと、これが欲しかったんです。画像データを自動で飛ばしてくれるホワイトボード。でもお高いですよね。普通はこんなお高いやつを何台も買えないので、ミーティングのときにはiPhoneで写真を撮って、Slackにアップロードして共有しています。 これ、自動化できればお高いホワイトボード買わなくてい