Posted at

Reactアプリケーションの開発ツールRekit

More than 1 year has passed since last update.

大規模なReactアプリケーションを構築できるというRekitを使ってみたので、その紹介記事です。(記事執筆時のバージョンは2.2.0)

https://github.com/supnate/rekit

まず最初に、以下のようなケースはRekitが向いていないと思いますので、興味がなければサヨウナラしてください。


  • 小規模(ReduxやReact-Routerが不要)なアプリケーションを作りたい

  • 既存のアプリケーションに導入したい

  • ソースコードのディレクトリ構造は垂直分散がいい


開発の準備


インストール

まずはRekitのCLIをインストールします。npm v3以上とNode v6以上が必要だそうです。

$ npm install -g rekit


アプリケーションの作成

$ rekit create <app-name>


  • デフォルトではCSSのトランスパイラとしてlessが使用されますが、--sassオプションを付けるとsassに変更できます。

  • デフォルトではサンプルコードも一緒に作成されますが、--cleanオプションを付けるとサンプルコードなしにできます。(今回はサンプルコードありで試してみました)

ちなみに .gitignoreも一緒に作成されているので、このタイミングで git init および 初回コミットをするといいかもしれません。


アプリケーションの起動

指定したアプリケーション名のディレクトリが作成されるので、cdしてinstall&startすれば準備は完了です。

$ cd <app-name>

$ npm install
$ npm start

開発時には主に以下の2つを使うことになると思います。6077ポートでもビルド結果の確認用サーバが動作していますが、それについては後述します。

(ポート番号はデフォルトのものであり、package.jsonの rekit.devPort , rekit.studioPort でそれぞれ変更できます)



  • http://localhost:6075 でアプリケーションが動作しています。(webpack dev server)


  • http://localhost:6076 でIDEが動作しています。(Rekit Studio)

IDEが提供されていてブラウザ上でソースの編集を行えますが、使用は必須ではありません。普段使いのエディタ等でソースを編集してもwebアプリケーションおよびIDEにホットに反映されます。


IDE(Rekit Studio)でできること


1. ダッシュボードの表示

画像のようなダッシュボードが表示されます。見にくいですがパイチャートはコンポーネント間の依存を表しています。たとえばどのコンポーネントがどのactionを使用しているかなど。

(雰囲気は出ますが、個人的にはあまり要らないかなぁと思います)

ss-dashboard.png

左上の「...」メニューから以下の各種操作が行なえます。


2. Featureの追加(actionまたはcomponetのみの追加も可能)

メニューのAdd featureでcomponent, route, action, reducer, css, test等の一式の雛形が作成されます。

ちなみにディレクトリ構造は水平分散でFeature毎のディレクトリにcomponent, route, action, reducer等一式があるタイプです。

よくある垂直分散のcomponents, actions, reducers等のディレクトリに別れているタイプではありません。


3. ソースコードの編集

左ペインにツリー表示されるので、対象のファイルを選択しブラウザ上で編集することができます。(ツリー表示と実際のディレクトリ構造は異なります)

プロダクションコードとテストコードがワンセット(Componentの場合はCSSも)で表示されるので、なかなか開発しやすそうです。

ss-editor.png

ただショートカットキーはまだ弱いので、ガッツリ編集するときは別のエディタを使うことになりそうです。


4. テストの実行

メニューのRun testsでテストが実行され結果が表示されます。ターミナルから npm run test でも実行できます。

カバレッジはメニューのTest coverageから確認することができます。ちなみに要約版がダッシュボードに表示されます。

ss-test.png

ss-test-coverage.png


5. ビルド

メニューのBuildを押下すると本番用にビルドされたファイルがbuildディレクトリ配下に作成されます。ターミナルから npm run build でも実行できます。

http://localhost:6077 ではビルドされたファイルが使用されている(webpack dev serverを介さない)ので、本番デプロイ前の動作確認が行えます。

また、build/static/report.htmlに webpack-bundle-analyzerの結果が出力されているので、ブラウザで開いて依存モジュールやサイズの確認が行なえます。

ss-build.png

ss-analyzer.png