React+Reduxで簡単な勉強会イベント検索アプリを作って公開してみる

はじめに

React+Reduxを使用して、簡単な勉強会イベント検索アプリを作ってみる。

プロジェクト作成、ライブラリ追加

事前にここに書いた手順でcreate-react-appコマンドを使えるようにしておく。

プロジェクト作成

create-react-app study-meeting-search

redux追加

npm i --save redux react-redux

jquery追加(Ajax用)

npm i --save jquery@1

moment追加(日付フォーマット処理用)

npm i --save moment

プログラム実装

ソースはここにアップしているので割愛。

ディレクトリ構成は以下。

ディレクトリ構成

study-meeting-search
├── README.md
├── build
├── database.rules.json
├── firebase.json
├── package.json
├── public
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   └── lib
└── src
    ├── App.jsx
    ├── actions
    │   └── index.js
    ├── api
    │   └── index.js
    ├── containers
    │   ├── ResultList.jsx
    │   └── SearchBox.jsx
    ├── index.js
    ├── reducers
    │   ├── condition.js
    │   ├── index.js
    │   └── result.js
    ├── store
    │   └── configureStore.js
    └── util
        └── index.js

package.jsonはこんな感じ。

package.json

{
  "name": "study-meeting-search",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.6.0"
  },
  "dependencies": {
    "jquery": "^1.12.4",
    "moment": "^2.15.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "firebase deploy --project study-meeting-search"
  }
}

ちなみに、CSS Frameworkとしては、今回はHTML KickStartを利用した。

ビルド

以下のコマンドでプロダクションビルドすると、buildフォルダにビルド結果のファイルが生成される。

ビルド

npm run build

公開（ホスティング）

今回はデータベースは使わないけど、ホスティング先にFirebaseを使う。（参考：以前の記事）

Firebaseツールログイン

firebase login

Firebase設定ファイル初期化

firebase init

firebase.json（hosting.publicをディレクトリ構成に合わせて変更）

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build"
  }
}

Firebaseへデプロイ

firebase deploy --project study-meeting-search

所感

・Ajax処理実装ライブラリ
Reactの場合、DOM操作は基本必要ない（というか基本やらないほうがよい）はずで、jQueryはちょっと余分な機能がありすぎなので、SuperAgentやaxiosを使ったほうが軽量。
ただ、JSONPを扱う場合は、superagent-jsonpなどが必要になったり統一感がないのと、ライブラリ自体の品質を考慮して、今回はjQueryを利用した。

・Reduxにおける非同期処理の実装箇所
今回、非同期処理があったが、あえてredux-thunkやredux-promiseは使わなかった。
正直なところ、これらを使うとactionsが汚れるし、それよりも、普通に非同期処理部分はAPIとして分けて作成したほうがソースとしての見通しが良いと思う。

おわりに

今回作ったアプリケーションは以下で公開しています。
https://study-meeting-search.firebaseapp.com
（ソースはここ）

参考

• Redux