React App #1 方針決め

TL;DR

ReactでWebアプリを作ります。
構造とか意識しつつ気になるツールを組み込む予定です。（進捗次第）

私について

• Reactは4年前くらいに触った気がする。記憶のかなた。
• webも数年前から触っていなかったが、最近また調べ始めた。
• 最近アーキテクチャを意識し出した。依存性逆転の原則おもしろい。

開発環境

• Mac OS Catalina
• Node.js
• Yarn

方針（アプリの内容）

名前: Rooms（仮）
概要: 色々な部屋？を見るアプリ
操作: 上下左右にフリックorボタンで移動

部屋は作成もできる（作成だけで別のアプリができる分量になりそう...?最初は簡単な部屋）
他の人の作った部屋を閲覧したい...?

方針（開発）

• SPA
• スマートフォン向け

アーキテクチャ

データは一方通行で流れるべきらしい。
Reactの設計思想がそうなので、その流れを組んでfluxを意識する。
後述のReduxがフレームワークとして勝手に意識してくれそう？

コンポーネントの作り方はAtomic Designを意識する。

• flux
• Atomic Design

サーバーサイド

サービス

Advent Calendarの制約？により、Firebaseだが、最初はローカルの予定なので出番がなさそう。

とりあえずFirebase Hostingで、静的なウェブサイトの構築。
部屋の共有機能などを実装したくなったら、他のサービスも追加していく。

• Firebase Hosting

クライアントサイド

CSS

ReactではCSS-ModulesかCSS-in-JSが良さそう。
後述のAnt Designは競合するのか否か。

• CSS-Modules（仮）
• SCSS

lint系

Prettierを使ったことがないので、使ってみたい。

• Prettier
• ESLint

その他

• Redux（定番そう？）
• Jest + enzyme（テスト書きたい）
• TypeScript（考え中）
• React Hook（使いたい）
• Ant Design（できれば）
• Containerize（できれば）
• GitHub Actionsに載せる（できれば）
• PWA（できれば）
• Clean Architecture（必要そうなら）
• React Native でアプリに（できれば）