Help us understand the problem. What is going on with this article? @armorik83です。Angular用ライブラリ"Walts"を公開したところ、想像以上にフィードバックを数多く頂いたので、その中で疑問に思われがちな点、補足できていなかった点などをこの記事で紹介します。 関連記事 拙記事 どうしてWaltsを開発したのか - そして昨今のFlux Walts - Angular 2向けFluxライブラリを作った Waltsを使ってくださった方による記事 Angular2系向けFluxライブラリのWaltsを使ってみた Waltsは何か これまでに書いた記事はポエム調だったため、改めて具体的にWaltsは何であるか紹介します。 WaltsはAngular(>=2.0.0)向けのライブラリです RxJSを用いておりFlu

この度、Waltsというライブラリを開発した。ウォルツとも読めるが、ここはワルツと呼んでもらいたい。View -> Action -> Store、この三角の動きを三拍子に見立てて名付けたものだ。 crescware/walts 数々の検証や他のライブラリの知見を経て開発に着手したのが、Angular 2用を意識して設計したFluxライブラリ"Walts"である。他のライブラリの知見や昨今のFlux事情については前日の記事にて綴ってある。 これは2016年4月に開発を始めており、それまでに私が経験してきたフロントエンドの難点や当時の案件の問題点、反省点などを数多く活かしたものとなっている。Almin.jsとも開発時期が近いようだが、全くあずかり知らぬところで開発しており、結果的にはAlmin.js側が先出しになったのでそちらも参考にしている。 DDD, CQRS, Redux, RxJS,

まず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

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

Illustratorの楕円ツールで書く円は、本当は円（wikipedia:円 (数学)）ではなくて、近似値なんです。つまり、円としてはわずかに歪んでいるわけ。これはベジェ曲線（wikipedia:ベジェ曲線）というものを使う以上、そういう仕様なのですね。 ……ということを、いちおう知識として知ってはいたのですけど、「実際のところ、どれくらいの歪みがあるんだろ？」ってちょっと気になりませんか。 「でも、Illustrator内で正しい円が用意できないってことは、歪んだ円と比較も出来ないということではないの？」……そんなふうに考えていた時期が、自分にもありました。 でもでもですね、ちょっとした操作でその歪みを実感することは可能なのです。 ▼まず、楕円ツールで円を作ります。 ▼複製コピーして、片方を45度傾けます。色も変えましょう。 ▼2つの円を重ねます（整列を使うといいです）。 ▼ちなみに円

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

■なにをしたの スプラトゥーンのナワバリバトル中にどのような通信が行われているのか確認しました。ARPスプーフィングによって、Wii Uから自宅ゲートウェイへ送られるパケットを覗いてみました。使用したツールは下記の2つです。 nighthawk: ARPスプーフィングします Wireshark: パケットキャプチャします ■通信内容 ソフト起動後に、Amazon Web ServicesとSSLで通信していました。Miiverseと、ランク・ウデマエなどの戦績を、AWSとWii U本体間で同期していると思います。AWS導入事例で書かれているところの、「DataStore機能」と「Miiverse」ですかね。 ロビーに入ると、シリコンスタジオ株式会社のサーバーとUDPで定期的に通信していました。フレンドのオンライン状況を定期的にとりにいっているようです。マッチングについては、シリコンスタジオ

東京に引っ越した@armorik83です。 引っ越してから長らくデスクが整っていなかったので、こういった記事を書く気力が無かったんだが、やっと整ったのでその勢いで。 今回のテーマは、Scala.js学習の一環としてscalajs-reactのサンプルを読んでみたというもの。JavaScriptエンジニア目線でのScalaとして扱う。学習ノートで進めた順序通りに記事も執筆しているため多少構造が散漫になっていることは了承いただきたい。 どこから読めばいいか ルートはここ。 https://github.com/tastejs/todomvc/tree/24b83cdbd7d888540640bf3b64cf0f0348aa50d3/examples/scalajs-react ./project/Build.scala こういうのは勘で、とりあえずビルドツールであるsbt周りから。 https

一つの言語について、複数のツールが提供されているものもありますが、ここでは、代表的なJava、Ruby、JavaScriptのものについて簡単に紹介します。 Java：MavenとIvyとGroovy Mavenは、モジュール管理を含めたビルドツールで、MavenリポジトリはJavaで利用するモジュールのリポジトリとして既に標準的なものとなっています。 一方、開発現場では、ビルドツールとしてMavenより歴史が古いAntを利用しているプロジェクトも多いですが、IvyはAntからMavenリポジトリのモジュールを利用できるようにするAntのプラグインです。 Mavenは、「pom」と呼ばれるXMLファイルでビルドスクリプトやモジュールの依存関係を記述します。Gradleは、JVM上で動く言語の一つであるGroovy言語を利用して、プログラマーにとって、より直感的にビルドスクリプトとモジュール

スドケンとビズリーチ丹野氏で「プロダクトマネージャー」を語るセミナー 2015年10月9日（金）19:00＠ビズリーチ本社（渋谷） http://jp-blog.kaizenplatform.com/20151009_product_manager

Monadic Programmingのススメ - Functional Reactive ProgrammingへのアプローチTomoharu ASAMI

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

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

昨日、クラスメソッドさん主催の勉強会『iOS 9 週連続 Bootcamp！2週目』にて登壇させていただきました。 Core Image Tips & Tricks in iOS 9 from Shuichi Tsutsumi タイトルにある "Tips&Tricks" はWWDCのセッション名でもたびたび使われている用語で、Tricksというのは「コツ」とか「うまいやり方」みたいな意味らしいです。 こういうタイトルにしたのは、（資料冒頭にもある通り、）新しく追加されたフィルタを紹介したところで *1、カメラアプリとかつくってる人でもないとあまり使う機会がないわけで、定員150名という大きい勉強会で話す内容じゃないよなぁ。。と悩み、なるべく多くのアプリ開発において普遍的に役立つような内容を、とアレコレ考えた結果、次のような切り口で話すことにした次第です。 Apple も UI で多用する「