バックエンドエンジニアがフロントエンドを書く① 〜React、storybookのセットアップ〜

現プロジェクトでバックエンドを実装しているJPです。ですが、フロントエンドのReactとstorybookを使った開発に興味を惹かれたため、自分でReactプロジェクトを作成してみたいと思います。

筆者の経験：CLIツールなどもあまり触ったことがない、フロントエンドの初心者
環境　　　：macOS Sierra

Reactとは

facebook が開発した素晴らしい描画ライブラリだということしか知りません。
申し訳ありませんが、説明は端折らせていただきます。

簡単に言うと、React で作成したコンポーネントを1つづつ見ることができるカタログのようなもののようです。
github.com

ホームディレクトリで以下のコマンドを実行

brew install node
node -v
npm -v

特に理由はありませんが、フロントチームが使っていたので、yarnを使ってみます。
npmみたいなツールのようです。
GitHub - yarnpkg/yarn: 📦🐈 Fast, reliable, and secure dependency management.

npm i -g yarn@0.19.1

npm i -g @storybook/cli

Reactプロジェクトを自動で作成してくれるCLIツールです。
eslintやbabelなどの推奨されるライブラリも自動で落としてくれるようです。

npm install -g create-react-app

これで準備は完了です。

cd プロジェクトを作成するディレクトリ

create-react-app my-app

こんな感じのフォルダができました。
依存ライブラリは my-app/node_modules 以下にあります。
f:id:j-itoh:20170615192836p:plain

cd my-app
yarn start

こんな画面が表示されます。これだけでアプリケーションとして動くようです。 f:id:j-itoh:20170615193839p:plain

my-app直下で以下のコマンドを実行

getstorybook
yarn run storybook

http://localhost:9009/にアクセスすると、以下のページが表示されます。 f:id:j-itoh:20170615200240p:plain

以上で storybook が起動するところまで完了です。
最初に React プロジェクトを作成しなければならないこと以外は割りとスムーズにできました。
ここまで自動化されているとありがたいです。

次回は以下の内容について書きたいと思います。