まずFluxとはなんだろうか。Fluxの解説はすでに多数掲載されているが、ここでは「データフローを一方向としたアーキテクチャ」と定義したい。 そもそも、FluxというのはObserverパターンにちょっとした規則を設けて、かっこいい名前を与えたに過ぎないのだが、現代のフロントエンドはこのFluxを見事に受け容れた。なぜか。それは開発者が秩序を求めたからである。 これは、拡大し続けるフロントエンド・サイドの開発規模に対して、従来のMVC、正確には複数のViewと複数のControllerが相互にデータを受け渡し合うアーキテクチャがスケールしなくなったことに起因する。（ここではMVCを厳密に定義していない。GUIアーキテクチャについてなのかバックエンド・アーキテクチャについてなのか判然とさせないまま、俗語的に用いている） シングルトンという名でごまかした巨大なグローバル神オブジェクトを至る所で

おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i

暇というか日常的にやってること https://news.ycombinator.com/ と http://www.echojs.com/ と http://b.hatena.ne.jp/efcl/ をフィードリーダーに突っ込んでいて、面白そうなのをメモっておく 暇なとき 日頃メモってたライブラリの試し切りをする 面白かったら紹介記事を書く 多少やる気リソースが多めだと新しい言語(最近はRustかElixir)の勉強を進める http://codepen.io/ で面白い動きするやつのコードを探してコード読む とくにCodePenがオススメで、割とゲラゲラ笑いながら読めるやつが多いので楽しい。CodePenのテクニックはそのまま自分の業務に持ち込むと悪目立ちするので控えているが、Webでもこういう演出ができる、と頭の片隅にいれておくことで、いずれ何かに役立ったりする。たとえば昨日読んだ奴

Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点

こんにちは。そしてみなさん初めまして、フロントエンドエンジニアの奥野です。 Twitterなどでは@armorik83として活動しており、Qiitaにて『AngularJSモダンプラクティス』を掲載したところ、とてもご好評頂きました。また、京都市出身でng-kyotoというAngularJSユーザグループの代表も務めています。 そんな私ですが、この度弊社の@kyo_agoと知り合った縁がきっかけで9月より入社と決まり、すぐさま京都から引っ越しフロントエンドエンジニアとして配属されました。 第60回HTML5とか勉強会 －ECMAScript 2015 & 2016－にて登壇 入社して間もないころ、突然「HTML5とか勉強会」への登壇オファーが舞い込んできました。HTML5とか勉強会とは、HTML5を中心に取り扱うコミュニティhtml5jが定期的に開催する勉強会で、今回のテーマはJavaSc

async/await は ES7 の機能で、非同期処理を記述する上で非常に便利な機能である（仕様は安定していないと思う） まだ実装している処理系はないと思うが、babel などの transpiler をつかうと利用できる async/await をつかうと非同期処理を以下のように書くことができる function a() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('hello, ') }, 0) }) } async function b() { var value = await a() return value + 'world' } async function c() { var value = await b() console.log(value) ret

prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5

#niku_sushiでMarkdownで書く電子書籍開発環境について発表してきました。 #niku_sushi - Togetterまとめ 今日のメニュー #niku_sushi pic.twitter.com/S6rnCrunGB — Jxck (@Jxck_) September 27, 2015 WebRTC - kyo_ago WebRTCでは大人数に同時に対応できているサービスは殆どない 大抵は8人-12人以下というところになっている 人数が多くなると安定したものが難しい 名もなき馬刺し #niku_sushi pic.twitter.com/7Q6FiIeYMF — Yosuke FURUKAWA (@yosuke_furukawa) September 27, 2015 WebRTCはパテントの世界 コーデックもパテントの問題 馬刺しユッケ #niku_sushi pic.

iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。

ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch

**Babel 5 から 6 の間に API が大きく変わっています。Babel 6 のプラグインには Babel plugin handbook をおすすめします。**thejameskyle さんは Babel のメンテナの一人です。 ES2015 や JSX を ES5 にトランスパイルする Babel。日常的に使っている方も多いかと思います。 そのままでも便利な Babel ですが、プラグインを使うことで独自のソースコード変換ルールを追加することができます。私もちょっと前から Angular 2 アプリを Babel で作るためのプラグインを書いたりしていました。結構簡単に作れるので、Babel 5.x でプラグインを作る方法を紹介してみたいと思います。 Babel の仕組み ざっくり言うと Babel は以下のような仕組みで動いています。 ソースコードをパースして AST を生成

2015年現在、関数型言語が勃興しつつあります。エンタープライズ分野で関数型言語が次世代のプログラミング言語マーケットの覇権を握ることとなるのだとしたら、いつどのように握るのか、それはどの関数型言語なのか、その動向が大いに気になるところです。 ・ 関数型言語の行く末を見定めるにおいて、過去のプログラミング言語興隆の歴史はどうだったのか、エンタープライズにおける主たるプラットフォーム・アーキテクチャーの変遷に絡めつつ振り返ってみます。 今から40〜50年程前のメインフレームの時代、そのメインフレームをターゲットとしたプログラミング言語、COBOLが覇権を握っていました。 時代を下って20数年前程になるとWindowsを始めとするGUIそしてクライアント／サーバー・システム開発用として、次にはC++が覇権を握ることとなります。そしてJavaが登場しました。Javaは当初Microsoft社のW

OSS開発における合意形成にJavaScriptで参加し、変化を起こす / front-end-lounge-1

requestIdleCallback() Cooperative Scheduling of Background Tasks This document defines an API that web page authors can use to cooperatively schedule background tasks such that they do not introduce delays to other high priority tasks that share the same event loop, such as input processing, animations and frame compositing. The user agent is in a better position to determine when background tasks