はじめに#

この記事は，HERPにおけるWebフロントエンド開発の概観を，世間の開発者に—特に潜在的・顕在的な候補者の方に—知ってもらうことを目的として書かれた．HERPでは現在Webフロントエンドエンジニアを積極的に募集しているが，仮に入社したとしてどのような仕事をすることになるかのイメージが付いた方が，検討の候補に入れてもらいやすいのではないかという目論見による．また，採用している技術スタックにも珍しいものがあるため，単純に読み物として楽しめるかもしれない．なお，開発の実情について知ってもらうのが目的であり，実装の良し悪しについて議論することは目的としていない．

もう1ヶ月ちょっと前の話になるが，effect system勉強会でCycle.jsの話をしてきた．

発表資料はこちら．

当日のTwitterの様子をまとめたmomentはこちら．

cycle-ink-driverというライブラリをリリースした．このライブラリを用いると，Cycle.jsとInkを用いてインタラクティヴなコマンドライン・アプリケーションを作ることができる．

数日前，@staltz氏からCycle Reactのリリースがアナウンスされた．

@cycle/reactを含む一連のライブラリ群は，React componentをCycle.jsの中で用いることを可能にし，Cycle.jsのcomponentをReactの中で用いることを可能にする．

Cycle.jsとDOM DriverでWebアプリケーションを書く際に，sinkに流す仮想DOMをJSXで記述したい．公式を読むと普通にやり方が書いてあったが，ググって解決しようとしていると，古い手順に当たってしまい，少し引っかかってしまった．加えて，「最近のフロントエンドのエコシステムはこういう感じなのか」と思うところもあったので，同じような立場の人のために記録を残しておくことにする．なお，同じ轍を踏まぬよう，読者諸賢におかれましては，あくまで2017年1月30日現在の情報であることにご注意願いたい．

以下では，Cycle.js (w/ xstream)でウェブアプリケーションを構築する．また，アセットのバンドルにはWebpackを用い，babel-loaderを通じてES2015+およびJSXのトランスパイルを行うこととする．

なお，今回のプロジェクトはGitHub上で公開しているので参考にされたい．