この記事はなに？

react-native (react) を素早く実装する方法に気づいたのでその共有をする記事です。

結論

一言で言うと、できるだけ分割されていないファイルや関数を作ったのち、各種概念に整理すると素早く実装できる となります。

理由は、実装時に記述の分離を頭から切り離すことができ、作業中の考える内容を減らすことができる（よりシングルタスクに近づけることができる）からです。

現在筆者は個人開発でreact-nativeを使っています。

そして、概念を深く理解しつつ品質も高められるようにNext.jsは使わずディレクトリパターン（ページビュールーティング+コンポーネント指向+HooksAPI）を再現しながら実装を進めています。

当初は以下のようなボトムアップで実装をしていました。

ボトムアップの実装手順

やりたいことを決める
      ↓
アーキテクチャ設計（viewとstateの概念の分離やcomponent単位での切出しなど）の理論に基づいてuseDataStateやTestScreenなど単一責任の部品を作成する
      ↓
部品を組み合わせる
      ↓
動作確認をする

ところが、部品を組み合わせる時や新しいコンポーネントを作成する時に「それぞれの粒度があっているか」や「テストが組みやすくできているか（疎結合にできているか）」といった点が気になってしまい、意味もなく同じファイルを行ったり来たりしてしまいました。

その結果、何が作りたかったか分からなくなってしまいモチベーションは下がり、作業スピードも遅くなってしまいました。

それでも根性で開発は進めていました。

そしてある時、新しいコンポーネントを作成するためにいつものように v0 からデザインをもらい、何気なくそのソースコードを見て違和感を覚えました。

「なぜ同じ内容を実装しているのに、こんなに簡単なソースコードに思えるのだろうか？」と。

その理由を深掘りして最終的に出た結論が、上記でも書いた「頭の使い方をシングルタスクに近い状態にして実装（理解）ができるから」でした。

ボトムアップ実装が悪いわけではないので誤解しないようご注意ください。

当初はボトムアップの良さの説明のためウォータフォールに関する内容も記事にしていたのですが、長すぎたので削除しました。

精度が求められる場合（開発コストをかけられる場合）はウォータフォール開発で設計書をしっかり準備してボトムアップ実装の方がより良いので、本記事はあくまでアジャイル開発の場合の記事としてご理解ください。