この記事は？
Reactを使って簡単なアプリを開発しました。
- 開発の中で感じたことを残すことで、他の人がReactで開発する際のヒントになれば。
- 自身の備忘録のため。
何を作ったのか
商品の金額をxx%offしてくれる計算機
https://nouka.github.io/price-calculator/
ソースコード
なぜ作ったのか
- 身近に困っている人がいた。
- React x TypeScriptの学習のため。
何に配慮したのか
- サーバコストをかけないこと。
- オフラインでも動作すること。
- 設定値を端末に保持しておけること。
利用したライブラリなど
| ライブラリ名 | 説明 | 使用した理由 |
|---|---|---|
| create-react-app | コマンド1つでReactアプリの雛形を作ってくれるツール | Reactのプロジェクト作成時には必須。 オフライン動作するためのServiceWorkerも梱包されている。(利用するか否かは選べる) |
| redux, redux-localstorage | アプリのデータを管理するフレームワーク | redux-localstorageを使うと、Storeをローカルストレージに保存できる。 |
| material-ui | マテリアルデザインに沿ったUIコンポーネントを提供してくれるライブラリ | アプリっぽいデザインにしたかったため。 なるべくデザインに時間をかけたくなかったため。 |
| gh-pages | コマンド1つで特定のファイル/ディレクトリをgh-pagesブランチにpushしてくれるツール | npm run deployでGitHub Pagesに公開するため。 |
Tips
今後、考慮した方が良いと感じたこと
- CSS-in-JSを使ったが、スタイルの量が多くなる場合はCSS-Modulesを使った方が、IDEのサポートが得られるので良いと思った。
- Reducerを1つにしたが、複雑なアプリであれば確実に分けることになるので、この辺りは将来性も考えてどうするか最初に考えた方が良い。
躓いたこと
- 計算の際に小数点の精度の問題が起こるので注意必要。
- inputのvalueをintでキャストすると、入力値を全て削除できなくなる(0が勝手に入る)ため、注意。
- GitHub Pagesでreact-routerを使う場合は、
<Router basename={process.env.PUBLIC_URL}>とする。
よかったと感じたこと
- TypeScript使うとPropTypesから解放される。typeの継承やインポートが使えるので、再利用性が増す。
難しいと感じたこと
- react-reduxのconnectが分かりづらい。dispatchを毎回呼んだ方がわかりやすかった。
- atomic design本当に難しくて、一旦共通のコンポーネントはsharedに入れることに。
開発してみた感想
- 主に嫁しか使っていないが、喜んでいるので良かった。