type Article = {id: string, value: number} type ArticleDraft = {id: string | null, value: number} ORM などで一度保存するまでidが振られない、みたいな時によくある型ですね。 これは簡単な例ですが、フィールドが多くなると同じような型を２つ書くのが面倒くさいし、何よりバグを仕込みそうなので、今回はなんとかして Article 型から ArtcileDraft 型を最小限の手数で生成したい、と思います。 案1: Draft を先に定義して、 extends して絞り込む interface ArticleDraft {id: null | string, value: number} interface Article extends ArticleDraft { id: string }

どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」

注意。実装はまだないです。思考実験的な意味合いが強いです。 持論 Reactやredux/Rxのデータモデリング手法の発達で、ツリー構造の末端に渡すまでのデータモデリングが主戦場になりつつあります。これはロジックを注入する部分と、プレゼンテーショナルなものが明確に分離されてきたことを意味します。 僕は個人的に、 GUI にまつわるものは、本来GUIで設計したい、という気持ちがあります。そう、僕が作りたいと思っているのは、悪名高きホームページビルダーです。 とはいえ、プログラミング抜きでxxxできる！というものではありません。むしろプログラミングとGUIを横断するイメージで、Unity や UnrealEngine のような開発環境を想定しています。 今やりたい理由 ブラウザの仕様が安定してきた 色々と使えるパーツが増えた JS で複雑なツールを作れるようになり、インブラウザな開発ツールが作

いわゆるサーバーレス。 TL;DR すべてのリクエストを Firebase Functions に流して next.js に食わせた結果を返すとSSRになる。最高。 概要 Firebase Hosting は index.html を上げたら動いてくれる静的サイトホスティングだと思っていたが、 全てのルーティングを Firebase functions に全て受けさせる。こともできた GCP知らない人向けに 一応解説しておくと Firebase Function = Google Cloud Function ≒ AWS Lambda そんでもって、React で SSR したいとき、スクラッチでもいいけど、一番簡単なのは next.js。next.js 公式にも exmaples があり、読んでみたら勉強になったので解説してみる。 Firebase Hosting の設定 { "func

About @mizchi Qiita のフロントエンドエンジニア React勝手エヴァンジェリスト 4ヶ月で14kg痩せた (80kg => 66kg) 近況 ビジネスドメインのリファクタが主でアウトプット少ない 泥臭系の知見は溜まってる 会社のメンバーが増えた + 自分以外のフロント系の人が増えたので、設計を明示しないといけない この資料は何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料を加筆したもの 如何にしてReactを「ふつうのウェブアプリ」に導入していくか ふつうのウェブアプリ NOT SPA SPA でなくともReactは使える jQuery に支配された現代のフロントエンドを改善したい => 複雑なモジュールを局所的に解決するのにReactが有用であることを示したい フロントエンドの流れ AJAX以前(~2003)

コンセプト 昔作ったArdaのPubSub部分をDecoratorで表現した。https://github.com/mizchi/arda EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita React の Context を使って Flux を実装する - Qiita この2つを使ってバケツリレーを隠蔽することで、デコレータでPub側とSub側を自然に繋げられるようにした。 hokaccha/react-micro-container: Micro framework for React も多少参考にした。 Example import React from "react"; import {dispatcher, subscriber} from "react-dispatcher-decorator"; // This compone

俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな

http://qiita.com/mizchi/items/3bbb3f466a3b5011b509 で紹介したモダンJSスタックの上に、flowtype を導入して型をボトムアップに追加していくアプローチを紹介します。 なぜflowtypeか、そのゴールは 流行っているライブラリのみを組み合わせて使う場合や、バックエンドとの連携において型が十分に提供される環境なら、正直、flowtypeよりtypescriptでいいと思っています。flowtypeが力を発揮する環境は、既存のJSが大量に存在する環境や、railsなどの動的な型のフレームワーク環境で、静的な定義が抽出できない環境だと思います。 よほど品質が低いライブラリを使わないかぎり、バグはほとんど自分が記述したコードによって発生します。なので、まずは「自分が書いたコードのIFを明確にし、その静的なチェックを行なう」、というのを最初の目

春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ

gulp-typescript で --target es6 から babel に通しつつ Incremental BuildするTypeScriptgulp ivogabe/gulp-typescript 元々typescriptなんてtscを生で叩けばいいじゃん派だったのだが、--target es6 で吐いたのをさらにbabelに通す必要があって、一旦書きだしたものをさらにbabelを通そうとすると、tmpなディレクトリが必要になるし、ファイルIOに負荷がかかるので、gulpのストリームの中で変換したかった。 やりたいこと node / electron で走らせたかったので browserify せずに src -> lib に書き出す。lib は es5 仕様。 ブラウザ用に書き出すときは必要に応じてbrowserifyする。debug中はElectronで走らせることでbrow

$ npm install -g typescript@next $ tsc -v message TS6029: Version 1.6.0-dev.20150907 $ npm install -g babel "use strict"; let wait = function(n: number){ return new Promise(done => setTimeout(() => done(n), n)); }; let main = async function(){ await wait(50); console.log('await done'); } // async promise nomally wait(100).then(() => console.log('promise normally done')); main(); "use strict"; var

coffeeの特にクラス記法などを多用していると、coffeeを辞めたい際にES5へのコンパイルしてから再出発しようとすると、多くの情報が欠損してしまう。なので decaf を使う。 decaf は coffee を ES.next へ書き換えるトランスパイラ。 Issueをみるとわかるが(僕も3件ぐらいバグ報告してるのだが)、完全に動くコードに置き換えることはできない。実際には、変換できるまで何度か手を加えながら試して、変換できたら、今度は実際に動くかまた試して…　というステップを踏むことになる。面倒だが、自分でゼロからやるよりはマシだ。 使い方 いれる。 var glob = require("glob"); var decaf = require("decafjs"); var fs = require("fs"); var path = require("path"); glob.

Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書くNightmareElectron 自分の開発環境では, nodeで単体テストと分離してモデル層を抽出出来たが、e2eほどではないがブラウザ上でテストしたいコードというのは結構ある。モーダル制御とか、ブラウザ上のイベントに依存する奴とか。 それらを Nightmare でテストするアプローチを紹介する。 概要 Nightmare はヘッドレステストランナーとそのDSLを提供する。v2でランナーがphontomjsから Electronになった。 コードはbabel/commonjsで書かれており、本番環境でJSは1つにまとまっているが、Electron の nodeIntegration を有効化して走らせることで、ビルド前のコードを個別にrequireできる。グロ

仕事でgulpを使って僕がよくいじる一部のjsを高速でビルドできるようにしてみたのだが、JSをいじらない人の手元でなにかと差分がおかしくなったり、ビルドするタイミングを伝えないことで問題起きたり、その為に呼ばれて治すのがとにかくめんどくさかったため、思い切ってすべてのビルド工程をbrowserify_railsとbrowserify-incrementalと(そのtransform)に押し込んで、gulpを排除してみた。 そんで、browserify_rails は導入しただけだと嬉しさがあまりないので、スクリプトを書いて一気にcommonjsに置き換えることにした。 browserify_rails に関してはhokacchaさんの記事が便利。 モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ 脇道にそれるが、僕は最初、これをbrowserifyを模した

名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 - Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消 TypeScriptフレンドリー

なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲

ここ最近、 [翻訳] Elixir - 次に来る大物Web言語 - Qiita とか 超高速なJSON APIをElixirフレームワークのPhoenixでビルドしてテストしよう | POSTD を読んで気になっていたので、勉強していた。 前提: 自分はシングルページアプリケーションに特化したフロントエンドエンジニアであり、サーバサイドのプロダクション運用にはそこまで強くない。あとこれはここ2日の勉強した日記でもあり誤解や勘違いも多々あると思う。 リアルタイムウェブアプリケーションのためのサーバー Railsの次の時代、リアルタイムウェブの為のウェブフレームワークがあるとしたら、次のような特長をもつと思う。 HTTP, HTTP/2. WebSocket等のプロトコル対応と抽象化 JSON APIに特化 認証系 キャッシュ管理 Viewに関心がない リアルタイムウェブは、その言葉をどう定義

Reiny, 名前の由来は、一昨日の木曜日に作り始めて、その日雨が降ってたから。 最近react-jadeに不満を持ってて、自分はコンパイラというかプリプロセッサを作るノウハウはあるので、だったら自分で作ればいいじゃん、といった感じで作り始めた。(typed coffee を作り直すためのAST操作の勉強も兼ねてた) 何ができるか 今これが動いてる - let i = () => {}; div(hoge='fuga') { backgroundColor = 'red' } // unicode span( key="--🐑--" ) // ref with & span&foo() // for syntax ul for i in @items li(key=i) = i // if syntax if false a hoge fuga aaa // inline express

僕はIncrements(このQiitaの会社)に入社して以来、KobitoのWindows版を作っていて、その中枢の画面遷移と状態管理をライブラリとして抜き出した。それがArda。 基本的には昨日発表した https://speakerdeck.com/mizchi/real-world-virtual-dom というスライドに書いたとおり。 mizchi/arda Ardaの概要 Ardaの目的はFluxの概念をベースに、画面遷移と状態とシーンをベースにしたヒストリ管理、その際のDispatcherのコンテキスト切り替えを行うことを主な目的としている。 CoffeeScriptでの最小構成だと次のようなコードになる Arda = require 'arda' # Arda.Component extends React.Component class HelloComponent ex

追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative