はじめに

いきなりですが、Reactの開発環境を用意するのって大変だと思うのです。

  • React, ReactDOMをnpm installする
  • ES6+で書くためにpolyfillを入れる
  • ES6+で書くためにBabelの設定をする
  • JSXを書くためにBabelの設定をする
  • ビルドするためにWebpackの設定をする
  • bundleしたJSを読み込むindexページのHTMLを作成する
  • 作ったものを確認するためにローカルサーバの設定(実装)をする

他にもサーバサイドのことまで含めると更にやることが増えます。知っていれば大した作業ではないのかもしれませんが、セットアップってたまにしかやらないのでやり方を忘れがち、そしてハマりがちです。ちょっとReact触ってみよう、ちょっとコンポーネント試作してみよう、という意欲を消滅させるには十分すぎる障害だと思います。

先日、この問題をコマンド一つで解決してくれる x0 というライブラリを触ってみたので、使い方と使用感をまとめました。

What’s this

x0demo

@compositor/x0 より

Zero-config React development environment and static site generator

設定なしで使えるReact開発環境＆静的サイトジェネレーターとのことです。上述したnpm install・ビルドスクリプトの用意・ローカルサーバの用意などをまとめてやってくれます。これでReactのコンポーネントを書くことのみに専念できますね。

How to use

1. install する

$ npm install -g @compositor/x0

公式ではグローバルに入れて使うことを促していますが、私は作業ディレクトリにdevDependencyでインストールしています。

$ mkdir sample-x0
$ cd sample-x0
$ npm init
$ npm install -D @compositor/x0

2. componentを実装する

今回はこのようなディレクトリ構成にします。

sample-x0
  ├ package.json
  └ components
      ├ HelloWorld.js
      ├ ...
      └ ...(その他コンポーネント)

HelloWorld.js

import React from 'react';

export default () => <h1>Hello World!!</h1>;

3. ビルド＆デプロイする

ビルドしてローカルサーバにデプロイするにはx0 [componentを含むディレクトリ]というコマンドを叩きます。--open (-o)のオプションをつけると、サーバ起動後にデフォルトブラウザを起動してくれます。

グローバルインストールしている場合

$ x0 components --open

devDependencyでインストールしている場合

$ npx x0 components --open

デプロイされるとcomponents以下に配置したコンポーネント名が一覧で表示され、選択するとそのコンポーネントが描画されたページへ遷移します。

4. エントリーポイントをつくる

components以下に配置されたコンポーネントはそれぞれ単体で画面に表示されますが、それらを組み合わせた画面をつくることもできます。components以下にいくつかのコンポーネントとエントリーポイントとなるmain.jsを実装します。

Title.js

import React from 'react';
export default ({ title }) => <h1>{ title }</h1>;

Contents.js

import React from 'react';
export default ({ contents }) => <ul>{contents.map(each => <li>{ each }</li>)}</ul>;

main.js

import React from 'react';
import Title from './Title';
import Contents from './Contents';

export default () => (
  <div>
    <Title title="Fruits Basket" />
    <Contents contents={['apple', 'orange', 'peach']} />
  </div>
);

これでlocalhost:8080/mainに2つのコンポーネントが表示されます。

Feeling

使用感はけっこう良かったです。実際に利用した場面を挙げておきます。

  • 最新バージョンのReactを試す
  • 複雑なロジックを持つコンポーネントを試作する
  • コンポーネントのPlayBookをつくる

最新バージョンのReactを軽く触ろうと思ったとき、本当にシンプルにコンポーネントのロジックのみを実装して動作確認までできたので、お手軽さは100点でした。

また、指定したディレクトリ以下のコンポーネントを一覧表示してくれるので、簡易版のコンポーネントPlayBookとしても利用できました。

その他にも、まだ触っていませんが役立ちそうな機能がいくつかありました。

  • webpackの設定を時前で用意してbundleできる
    • CLIのオプション--webpackでwebpack.config.jsのpathを指定できるので、productionビルド時は自前のビルドスクリプトを通す、等できそう
  • 画面に表示するHTMLを自前で用意して差し替えられる
    • PlayBookのIndexページをリッチにできそう
  • MDXを使える(使ったことはない)

気になる点は公式のドキュメントが薄い点です。かなりのことを自動でやってくれているので、その内部がどうなっているのか、どこをカスタマイズできるのか、についてもう少し簡単に把握できるとより使いやすいと思います。

もう1点気になるのは依存ライブラリがかなり多い点です。これも自動でいろいろしてくれる代償ですが、babelのPluginだけでも相当数依存していました。babel-preset-stage-0まで使うのは個人的にはやり過ぎと感じました。

create-react-appとの使い分け

最後にcreate-react-appとの使い分けについてですが、ローカルで実行する環境の用意やちょっとしたものの開発が目的ならx0で十分という印象です。

逆にproduction用のプロジェクトの簡易セットアップにはcreate-react-appを使うほうが後々カスタマイズしやすいかなと思います(実績の面でも良いかなと)。
create-react-appの使い方についてはReactを秒速で使い始められるcreate-react-appの使い方と使い心地にまとめてありますので併せてどうぞ。

ちなみに、大規模なアプリケーションであったりビルドの仕方やテストなど細かいところまで調整したいときはライブラリに頼らず全部自前で用意しています。適材適所使い分けて幸せな開発ライフを送っていきたいですね。