まずはじめに
もともとAWSとかバックエンドを中心に触っていたんですが、
会社にてJavaScriptでもろもろのサービスを作るところをやることになりました。
雰囲気JavaScriptをなんとなく程度で理解しているくらいだったので
一から徹底的にやるのも時間がもったいないなと思ったので
今回はいきなり諸々をすっとばして、Reactをいちからさわりながら、
WEB上で簡単なSPAを作るまでの過程で得られた知見とTipsをまとめてみました。
なので、
- JavaScriptを一から基礎をみっちりやってやってReactでSPAを作りたい人
- React-Nativeを考慮してReactでSPAを作りたい人
- Reactのライフサイクルとか動作原理とかを詳しく理解してアプリを作りたい人
って人にはあまりこの記事は向いていないかもしれません。
どちらかというとウェブフレームワークで認証ができてAPIを叩いてDBにアクセスして
データをひっぱったり更新したりするようなチュートリアルくらいの内容でSPAができるといいなーくらいな気持ちで、実際仕事上仕様を決める際に設計であれこれ試行錯誤したところをまとめてみたつもりです。
node.jsまわりの環境調整
https://github.com/creationix/nvm
公式を参考にコマンドを実行して整備しておく
# コマンド実行
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
# .bash_profileに保存
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
だいたい以下を覚えておけば環境整備には困らない。
下記コマンドを駆使してnpmのバージョンをコントロールして使ってくれれば大丈夫なはず。
nvm ls-remote
nvm ls
nvm use {vから始まるバージョン}
nvm install {vから始まるバージョン}
今回はv6.11.2を使うことにします。
create-react-app
crete-react-appをインストール
npm install -g create-react-app
インストール完了後、create-react-appで実行
create-react-app {プロジェクト名}
ちゃんと動いてくれるかどうかを確かかめる
cd {プロジェクト名}
npm start
ブラウザでhttps://localhost:3000 にアクセスしてみると
下記のような感じでデフォルトでsrc/に用意されているスクリプトが動く。
ちなみに、サンプルアプリまで動かしてみて、「とりあえず動いた」って感じになったと思うんですが、
実際何故localhost:3000にアクセスしたらうごくのかいまいち腑に落ちない。
そんな人は、サンプルアプリを実行した後下記も実行してみて、
npm run eject
実行すると、defaultで用意されたディレクトリとは別のconfig, scriptsが形成されている。これがnpm startで実行された時に動作する処理の構成要素になる。時間ある人はこのあたりも読んでみると、概ねnpm startで何してくれているのか理解できかもしれません。（本稿の主題ではないので自力で読んでみてください。）
必要なライブラリ
下記を揃えておけば概ねこまらないはずです。
今回UIにはreact-bootstrapを採用します。（今時はMaterial-UIを採用するのが最善ではありますが）
本稿で使ってないライブラリとかは一旦おいときつつ、とりあえず入れておけばいい、って感じで別のライブラリもいれておきます。
npm install react-bootstrap react-redux react-redux-form react-router redux-thunk redux-logger prop-types react-router-dom axios --save
src配下の構成
- web, nativeで同じ要素はもたせてみてもいいかも
- webを先につくるが、ゆくゆくはnativeにもうまく対応させたい
- UIの構成要素をちゃんと分割しておきたい
みたいなことくらいは考えておいて、nativeのことはさておき、一旦こういう形にきればなんとかなると思います。だいたいの役割関係はこんな感じ
├── actions ## actionに該当、returnだけする、通常api配下のいくつかのモジュールをimportして連携することが多い
├── api ## 外部通信してデータをとりにいったりする、などなどのモジュール
├── constants ## action, APIなどでも使う定数の置き場所
├── store ## あらゆる状態を一元管理する場所
│ └── reducers ##各状態の変化を設定するためのモジュールを置く場所
├── index.js ## webのRoot config/paths.jsのappIndexJsにこのファイルを指定してあげると、このindex.jsを呼び出してくれる
├── components ## presentaional componentの役目、レンダリング周りのモジュールを書く
├── containers ## connectsと各componentをつなぎ合わせるためのモジュール置き場、大抵componentとcontainerは基本1:1でファイルが存在する
レイアウト構成
いわゆるwebページ上のヘッダー部分、フッター部分、メニューやエラーのポップ、複数データの１レコード分の表示部分などのパーツは、わかりやすくcomponents/common等で固めておいた方がわかりやすいとは思いますが、個人のセンスの問題なのでそこは自由にまとめればいいかと思います。
一方container側は必ずしもcommonが存在する必要はないです。
つづく
本稿ではcreate-react-appからReactプロダクトを作り、
Mockで動くところまでを作りました。
そのあと、構成の概要を説明し、作りの大枠の一例を示しました。
次回は本格的にReduxを中心にimportしてきたライブラリを駆使してAWS API Gateway, Cognitoを用いて、認証の作りとAPIを叩くところを整備できるものにします。