todo-with-chat

チャットアプリと連携した TODO アプリ

環境構築

.env.sampleを参考に.envを作成してください。

コンテナ

基本的に環境構築周りのコマンドは Makefile でまとめてあります

• make build-local でローカル環境でビルド
• make up でコンテナを立ち上げる
• make logs でコンテナのログを表示、Ctrl + C で終了
• make down でコンテナを落とす
• make migrate でマイグレーションを実行
• make help その他のコマンドはこちらで確認できます

フロントエンドに関するコマンドは以下の通りです。

• make front-start で react のサーバーを立ち上げる (1 つのターミナルが占有されます)
• make front-exec でフロントエンドコンテナのシェルに入る
• make front-install で react の npm パッケージをインストールする

バックエンド

ホットリロード

make upでコンテナを立ち上げるとairと呼ばれるホットリロード環境が立ち上がります。なのでソースコードに変更を加えてもビルドし直す必要はありません。立ち上げている間は/tmp内にコンパイル済みのバイナリが生成されています。.gitignoreには追加しているので問題はないはずですが、もし git 上で競合が起きた場合はtmpファイルを削除してください。

データベース

データベースは MySQL を使用します。compose.ymlの記述によって、コンテナが立ち上がると同時にテーブルとテストデータが作成されます。環境をリセットしたい場合はmake downでコンテナを落としてください。 また必要に応じて、マイグレーションツールとして sqldef を使用できます。sqldef は go install でインストールできます。

$ go install github.com/k0kubun/sqldef/cmd/mysqldef@latest

go 言語のパスが通っていない場合は、go envでGOPATHを確認してください。 参考: https://zenn.dev/awonosuke/articles/47336619a4f039

フロントエンド

概要

TypeScript + React で実装します。 React のプロジェクトは create-react-app を使用して作成しました。

コンテナを立ち上げただけでは React のサーバーは立ち上がらないので、make front-start を実行して React App をスタートさせてください。立ち上げ後、ブラウザで localhost:3000 にアクセスするとアプリケーションの動作を確認することができます。

他のメンバーがパッケージを追加インストールした後など、ローカルに不足するパッケージが存在してエラーが発生する場合には、make front-install を実行してください。

定数の扱い

タスクの状態（e.g., 未着手, 完了）や優先度 (e.g., 高, 中, 低) など、アプリケーションを通じて同じ値を扱う場合、その値は src/constants.ts で定義します。