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アーキテクチャについてなのかバックエンド・アーキテクチャについてなのか判然とさせないまま、俗語的に用いている） シングルトンという名でごまかした巨大なグローバル神オブジェクトを至る所で

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

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

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

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

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 を生成（Bab

本文書は、プログラミング言語向けのスタイルガイドに向けたスタイルガイドである。 本文書へのフィードバックはQiita上のコメントにて受け付ける。 構造 対象を明確にする そのスタイルガイドがどのような状況のどのような対象に向けたスタイルガイドであるか規定すること。 状況や対象は広すぎてはならない。 理由: 対象はスタイルガイド記述者には自明かもしれないが、似て非なる言語に誤用されたり、特定分野のアプリケーション向けスタイルガイドが他分野のアプリケーションを理不尽に拘束したりすることがある。これを防ぐべきである。 良い例: 「本文書はRuby on Railsアプリケーション向けのスタイルガイドである」 「本スタイルガイドはX社におけるRubyプロジェクトに適用すべきスタイルを規定する」 悪い例: (何も書かない) 「本文書はX社におけるすべての開発に適用される ... 述語メソッドや述語関

@laco0416です。Polymerが案外カジュアルにES6で書けるとの話を聞いたので実際に書いてみました。 追記(2015/08/27) ↓の記事を書いた後にES6との親和性を改善する変更が入ったので次のように書けるようになりました。 beforeRegisterイベントハンドラがdesugar処理の前に処理されるようになったのでここでisやpropertiesなど、今までオブジェクトのプロパティとして定義していたものを初期化できます。また、Polymer(MyElement)のようにclass(実体はFunction)をプロトタイプとして渡すことが可能になりました。 class MyElement { beforeRegister() { this.is = "my-element"; this.properties = { foo: String }; } } Polymer(My

@armorik83です。console.log()はおなじみですがconsole.dir()っていつ使うの？とずっと疑問でした。今回ようやく「便利！」と感じたので共有しておきます。（Chrome 44, Firefox 40, Safari 8にて確認） あまりlogとdirの違いはない var ob = {a: 1, b: 2};を与えるくらいなら、console.log()で十分。 DOM Elementをdirに渡すと見やすい console.log どの描画と対応しているか、mouseoverで色を付けてくれる。これはこれで便利。 console.dir console.logとは異なり、Element内のプロパティがズラズラっと表示される。欲しかったのはこれだよ！ 現場からは以上です。

Help us understand the problem. What is going on with this article?

こんにちは、@armorik83です。ESLint 1.0.0がリリースされました（今朝Twitterで気付いた）。以前.eslintrcを晒したあとあまり面倒を見てなかったので、これを機に動向を追ってみました。 1.0.0新ルールまとめとしましたが、前回の記事以降にリリースされたv0.21.0からv0.24.0も扱います。全ての変更点やBreaking Changeは扱わず、新ルールだけ取り上げます。 v0.21.0 (May 10) https://github.com/eslint/eslint/releases/tag/v0.21.0 dot-location http://eslint.org/docs/rules/dot-location

統計をこれから学ぼうという方にとって、非常に重要な概念ですが理解が難しいものに「標準偏差」があると思います。「平均」くらいまでは馴染みもあるし、「わかるわかるー」という感じと思いますが、突如現れる「標準偏差」 の壁。結構、この辺りで、「数学無理だー」って打ちのめされた方もいるのではないでしょうか。 先にグラフのイメージを掲載すると、下記の赤い線の長さが「標準偏差」です。なぜこの長さが標準偏差なのか、ということも解き明かしていきます。 (code is here) 本記事では数学が得意でない方にもわかるように１から標準偏差とはなにか、を説明してみようという記事です。 数式はわかるけど、イマイチ「標準偏差」の意味わからんという方にも直感的な理解がしてもらえるような説明もしていきますので、ぜひご覧ください。 （※ この記事では標準偏差の分母に $n$を使用しています。$n-1$を使用するケースも

import Parser from 'cw-user-agent'; // もしくは var Parser = require('cw-user-agent'); var parser = new Parser(); parser.setUA('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2450.0 Safari/537.36'); var info = parser.deviceInfo(); console.log( info.userAgent, info.browser, info.engine, info.os, info.device ); APIはこちらを参照。 windowにも他のライブラリにも一切依存していません。

どうも@armorik83です。 周りを見渡すと、ちょうどElixirやってる人やRust始めちゃってる人が居たので、自分もなんかやるかーと思って、Scalaに手を出そうかな。せっかくScala.jsなんていう最高にロックなAltJS(?)があるので、まずはそこを足掛かりにしていく。 ちなみに日本だけだろうが、Scala.jsでググると公式を押しのけてトップに現れるブログがある。イカでいう「もうここも塗られてた」状態である。さすがだ。 Scala.js チュートリアル http://www.scala-js.org/doc/tutorial.html 今回はこのチュートリアルに従っていく。以下の内容は執筆時点のものなので、基本的には上記チュートリアルの最新のコード・コマンドを参照されたい。 sbtインストール http://www.scala-sbt.org/download.html

こんにちは、@armorik83です。5月からng-kyotoってゆうのを立ち上げまして、昨日は初のイベントとして『Angular Meetup Kyoto #1』を開催したんですけど、そん時に紹介したng-kyoto公式サイト、実は全部Angular 2で作ってんのでここで詳しぃ解説します。 京都弁のイントネーションを知らない方には伝わらない文章で始めてみた。改めましてこんにちは、@armorik83です。 本稿の概要 ng-kyotoというコミュニティを設立した Angular Meetup Kyotoというイベントを開催している Angular 2最新情報 Angular 2 alpha.25時点でのハマりどころメモ ng-kyotoサイト構築ではAngular 2のどんな機能を試したか ng-kyoto ng-kyoto とは まずng-kyotoについて紹介します。ありがたいこと

[2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol

「+」という文字の入力はUS配列だと shift+=, JIS配列では shift+;になる。 問題となるのは、ctrl+shift+αという組み合わせがどういうメタキーの組み合わせとして解釈されるか、キーボードの設定次第で変わる。 US配列だとkeyCode: 187 とctrlKey。JIS配列だと186とctrlKeyとshiftKeyになっていた。 window.addEventListener "keydown", (e) => # US / JIS if (e.keyCode is 187 and e.ctrlKey) or (e.keyCode is 186 and e.shiftKey and e.ctrlKey) e.preventDefault() # exec something return false return true この挙動によって何が起こるかというと、