フロントエンド開発環境 2018年春

動機・この記事について

現在Reactを使用してフロントエンド開発を行なっているが、仕事でVueを使用することとなった。 もちろんReactも並行して使用するが、いい機会なのでVueの開発環境を構築する前に一度Reactについてまとめておきたい。

この記事は開発環境を構築する上での方針や、使用ライブラリ等についてまとめている言わばコラムに近い内容になっていおり、実際に手を動かして環境構築する手順は他の記事に譲ることとする。

背景

私が開発するのは小中規模のWEBアプリケーションが多く、後の技術スタックにReduxやreact-routerが登場しないのは必須ではないからである。なるべく使わない方針で、設計段階にてどうしても必要であれば使うといった具合だ。

また私はチームで開発を行うことはほとんどないため、複数人でコーディングする場合の視点はこの記事にない。

方針

Foolish consistency is the hobgoblin of little minds.

pythonのスタイルガイドPEP 8にも記載のある、思想家ラルフ・ワルド・エマーソンの名言 "愚かな頑固さは、狭い心の表れである"。

日々新たなライブラリが現れるフロントエンド開発。意味のないこだわりは捨て、変化に強い環境とマインドを心がけたい。

KISSの法則

ロジックに集中するためにも、構築手順には時間と労力をなるべくかけたくない。

各ライブラリはなるべくデフォルトの設定に手を加えず、素のまま使う。多少気に入らなくても使っているうちに慣れるし、だいたい「気に入らない」ことに関して明確な理由がなかったりするのだ。

技術スタック

create-react-app

全部入りのReact開発環境である。webpackとかbabelとか諸々のことを考えなくてよくなる。最高。

ejectしない状態では制約があるが、ライブラリの方針に自分を合わせていくスタイルで。

flowtype

型を書かないと、なんとなく不安な気持ちになってしまうほどになった。

eslint

create-react-appにもともと入っているものにルールを足すか、airbnbからルールを引くか悩みどころではあるが、現在は後者。

prettier

ATOMのパッケージを利用して、保存するごとにコードの自動整形を行う。コードの見通しがよくなり、改行やスペースのことを考えなくてよくなる。この快適さは一度使うともう戻ることはできない。

storybook

デザインガイドラインが簡単につくれる。特に機能追加・改修時に有用である。

styled-components

JSXの見通しがよくなる。普通にCSSがかける。flowやlintのサポートもあるが、まだ導入していない。

material-ui

定番のマテリアルデザイン ライブラリ。UIパーツは基本material-uiからimportし、styled-componentsで用途に合わせてcssをオーバーライドして使う。