React + Typescript + Hook のプロジェクトテンプレート
自分用に作ったものですが、せっかくなので公開します。
こんな人に向けた記事
- React開発やりたいけど、TypescriptとかLintの設定がイイカンジに設定されてるプロジェクトテンプレートがほしい人
- Redux、Redux-Sagaとか、そろそろいらないんじゃ？ってことでHookで書いたらどうなるのかななめ読みで知りたい人
やったこと
TODOアプリを作った
触れるサンプル:GitHub.io
ソース:GitHub
ポイント解説
useResource
hookを別ファイルに書けます。これにより、JSXとロジックを分割することができます。
非同期処理 async/await
脱Redux-Sagaのため、async/await を利用します。
今回はサンプル実装のため、いろいろ足りていません。業務用などで使うなら、エラーハンドリングなどを共通メソッド化してそちらで集約してアレコレやるといいです。
stateの永続化
今回はlocalStorageを利用しています。
ログイン情報（ログインAPIなどでを外部サーバ化した場合のIDなど）はサーバ側でCookie利用しましょう。ローカルデータはセキュリティがザルってことを忘れてはいけない。
番外編：おすすめしないこと
というか、とある現場で遭遇したバグの愚痴。ある意味で実体験に基づくアンチパターン集
anyだらけ
Typescriptを全否定する攻め？のスタイル。
Lintエラー放置
4桁のエラーがあったりすると、放置しちゃいけないエラーも無視することになる。
でかいソース
目的のコードを探すため、延々とソース追いかけるはめになる。経験則的に600行以上は分割対象。
デフォルト値がtrueを期待するboolean
イラっとします。そんでもって初期化忘れて画面ぐちゃぐちゃ。
useMemoは、基本やめとけ
裏の値と画面表示が一致しないとかの、やべーバグを修正させられるこっちの身にもなって。