「ユメカサゴ」と筆者「深海釣り」というジャンルの釣りがあります。 ざっくり説明すると「船に乗って沖に出て、水深200メートルよりも深いところに釣り糸を垂らして行う釣り」のことです。 （もう少し細かく「水深350mより深いところの魚を釣るのが深海釣り、それより浅いのは中深場釣り」だと主張する方もいます。ほか「超深海釣り」という、水深800m以深を攻める釣りもあります） これらの釣りはいずれも専用の道具、専用の竿、専用の仕掛け、専門の船宿（もしくはプレジャーボートと操船してくれる船長）が必要となります。 時間も手間も、そして少なからぬ費用もかかる深海釣りですが、ここ数年ハマりこんでしまい、機会があるごとに友人のボートオーナーの金魚のフンとなりついて行っています。 なぜそんなものにハマっているのかというと、普段は食べることができない魚たちが手に入るからです。 深海釣りにハマるわけ あらためまして

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

Jun 2017 edit: 3 was just released! The syntax for 3.x is identical to 2.x, which means this article is still up-to-date (if I missed something, please comment!). The version bump was for more behind-the-scenes stuff, but it did add an easy-to-add “Scope Hoisting” plugin that can cut down on your bundle size that’s worth checking out! Jump to the bottom of this article for the “Upgrading to 3” sec

はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の

どうも。WACULでフロントエンジニアをしている @Quramy です。 このエントリはWACUL Advent Calendar 2016の8日目の記事として書いています。 さて、RxDBというデータベースをご存知でしょうか？ 僕もつい先日知ったばかりなのですが、2016年12月になって、急激にGitHubのtrend入りしてきたプロダクトです。 RxDBの概要 RxDBは以下の機能をもった、主にフロントエンド向けのデータベースです。 Reactive (rxjs) Replication / Sync Schemas (jsonschema) Mango-Query (MongoDB) Encryption Level-Adapters Import/Export (.json) MultiWindow-Support データベースといってもRxDB自体が決まったデータストアを持ってい

こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣

みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう

ある要素内の状態による外界への影響を封じ込めて最適化を促す CSS Containment Module で定義される contain プロパティは will-change と同じようにブラウザが処理を最適化するために開発者から提供できるユーザーエージェント向けヒントとして機能します。 ヒントの目的はcontain の対象要素が親兄弟に影響を及ばさない独立した部分木であることを宣言し、各種の影響を contain の対象要素の中に封じ込めることです。 使うときは contain プロパティに既定の値として用意された size | layout | style | paint | content | strict のいずれかを指定します。content と strict は複合指定のエイリアスなので、本文では size layout style paint の4つについて個々の説明をします。

Online diagramming tool for collaborating on wireframes, flowcharts, and more

この記事は2016年に書かれた古い記事です。当時はまだTypeScript2.0も出ていないころで今とは状況がかなり異なっています。参考にする場合注意してください。 はじめに TypeScriptの型システム Declaration space Open-ended ここまでの確認 型定義ファイルを読み書きできるようになるために declare キーワード 既存のオブジェクトの型定義を拡張する グローバルなオブジェクトに対する宣言 module Export Assignments Relative or Non-relative module imports ES2015形式 実際の定義ファイル 既存の定義ファイルを拡張する declare global { } について Typings について おわりに インターン募集中 はじめに こんにちはアプリケーションエンジニアの id:t_k

はじめに これは自分用の関数型プログラミングお勉強ノートです。 Atom や CoffeeScript に少し退屈してきたので別のお勉強をすることにした。 関数型プログラミングを学ぶことにした。 時々、Qiita の記事とかは読んでいたが、ガーッと調べてやりだしたのは半月程前の 2016年の6月の初旬から。 しばらく続けてみようと思う。 調べ物がどんどん拡散して行くので整理の意味でここに dump しておく。 自分が使う用。 自分が読んで良かった or 良さそう、なリンクに絞ってある。 リンク集としては既にとても豊富で、簡単に消化し尽くせないので自分用としてはこれで十分だ。 ちゃんと消化していくには相応の時間がかかるだろう。 同じように関数型プログラミングを初歩から学ぼうとしている人の参考になるかもしない。 俺のプログラミング勉強法は、これまでの経験上、以下の様なパターンがある。 今は 1

「Scala関数型デザイン&プログラミング ―Scalazコントリビューターによる関数型徹底ガイド」（以下、 FP in Scala）という本を読んでいます。 ところどころプログラミングの演習問題が出てきて、これを解いていかないとちゃんと理解できなさそうなのですが、 Scala で書くのも当たり前すぎてつまらない（？）ので、 JavaScript (TypeScript) で書いてみようと思いました。 今回は第5章に出てくる遅延評価を取り上げます（次回があるかどうかは分かりません）。 コードは以下に公開しています。 https://github.com/kimamula/fp-in-javascript/tree/master/lazy-array 遅延評価とは 「実際に必要になるまで、値の評価を遅延させる」ことです。 Haskell はデフォルトで遅延評価ですし、 Scala でも明示的

The simple example of calculating and formatting a bill for a video store opened my refactoring book in 1999. If done in modern JavaScript, there are several directions you could take the refactoring. I explore four here: refactoring to top level functions, to a nested function with a dispatcher, using classes, and transformation using an intermediate data structure. 18 May 2016 Many years ago, wh

Apr 27, 2016 本日、多くのエキサイティングな改善と新しい機能を盛り込んだ、 Vue.js 2.0 の最初のパブリックプレビュー (public preview) を発表してゾクゾクしています。何が起こっているのかのぞいてみましょう！ さらにスリム、さらに高速Vue.js は軽くて速いままでいることに常に焦点を当てて来ましたが、2.0 はさらにそれを推し進めます。レンダリングレイヤは、現在軽量な仮想 DOM 実装 (Snabbdom) に基づいており、初期レンダリング速度とメモリ消費量は大抵のシナリオにおいて 2 〜 4 倍まで改善します(これらのベンチマークを調べてみてください)。テンプレートから仮想 DOM にするコンパイラとランタイムは分離することができ、そのため、テンプレートをプリコンパイルしたり、ランタイムだけによるあなたのアプリケーションを提供できます。min+gzi

There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team at Kaliop. It works well for our needs, which include: Content and communication websites, often based on big CMSes, rather than full-JS web apps. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context

私が関数型プログラミングについて度々耳にするようになったのは、数カ月前からです。でも当時は、それが何なのか見当もつかず、単なるバズワードだと思っていました。皆さんの中にも、そのような方は多いでしょう。それ以来、私は関数型プログラミングについて深く学び、この言葉を日々聞いてはいるものの内容を理解していない初心者の方のために、分かりやすく説明しようと思い立ちました。 関数型プログラミング言語の話になると、「 Haskell と Lisp は どちらが優れているのか 」という 議論 が 白熱する 傾向にあります。HaskellとLispはどちらも関数型言語ですが、実際には大きな違いがあって、それぞれに長所と短所があります。その具体的な内容については、この記事を読み終える頃には深く理解していただけると思います。この2つの言語には、それぞれから派生した言語があります。その中で恐らく皆さんが耳にしたこ

はじめに DIコンテナ自体は特に目新しい技術ではありません。JavaScript界隈ではAngularJS 1.xやRequireJS(AMD)等はそれ自体がDIの仕組みを内包したライブラリです。 しかし、これらのDIは若干無理やりな実装方法を取っていた感があります12。これはJavaScriptでメタデータやAOPを適切に扱う機能が不足していたことが背景にあると考えているのですが、ここ1, 2年で言語側の状況も変化してきています。 具体的にはTypeScript 1.5からDecoratorsがサポートされたり、ES 2015にてリフレクションの仕様が追加されたりと、よりスマートなDIコンテナを実装するための基盤が整いつつあります。 そこで今日はInversifyJSという軽量JavaScript DIコンテナについて触れるとともに、最新のDI事情を見ていきたいと思います。 Invers