はじめに#

この記事は，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 上で公開しているので参考にされたい．