---
# System prepended metadata

title: Ushiro開発

---

# Ushiro開発

## Ushiroとは

ログイン

レトロスペクティブ(ふりかえり)用のツール
TODOの派生で

|実施日|ボード(リンク)|情報収集|アイデア出し|ふりふり|
|-----|----------|------|---------|------|

メモも登録できる

## Ushiroでできること

タブ選択で振り返り手法の画面切り替えができる

- KPT
- FDL
- タイムライン
- ピザパーティ

どの手法を何回やったかが一覧として表示される

## 振り返りとは

1. 情報収集
2. アイデアだし
3. 「振り返り」の振り返り（ふりふり）

### 情報収集

KPT

### アイデアだし

じゃあどうしますか～

### 「振り返り」の振り返り（ふりふり）

もっと意見出せばよかった～

## 画面イメージ

![](https://i.imgur.com/5BGGlij.png)
![](https://i.imgur.com/qapAq9q.png)

## 学んでほしいこと

- TypeScriptを実践的に書く(重要)
- Reactを書く
- Supabaseを学びたい
- TDDのやり方、モブプロのやり方
- クリーンアーキテクチャの考え方と実装の流れ(重要)
- Vitest

### クリーンアーキテクチャとは

データの方向が一方向になるように実装する。
DB → Gateway(データ整形) → UseCases → Entities

|図の名称|源氏名|
|---|---|
|Devices|Driver|

![](https://camo.githubusercontent.com/03ac594e22a7b1c71c177e4cf8ea727319f4f9762a19e6a932deb280384296f6/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f32383436342f31316431383638392d396139392d356263302d333964632d6534383632336631643131632e6a706567)

## TODO

### Supabaseから行の情報を取得する
- [x] Usecaseのテストを書く
- [x] Usecaseの実装をする
- [x] Gatewayのテストを書く
- [x] Gatewayの実装をする
- [x] Driverの実装をする
    - [x] Supabaseの登録
    - [x] reflection tableの作成
    - [x] テストデータ作成
    - [x] supabase clientの作成
    - [x] reflection tableからのデータ取得

### ログインできるようにする
- [x] Routerを使えるようにする
- [x] ログインページとサインアップとメインページを用意する
- [x] ログインのフロント書く
- [x] ログインの処理を書く
- [x] サインアップのフロントをかく
- [x] サインアップの処理書く

### Supabaseに行の情報を登録する
- [x] テストデータ切り出す
- [x] Github Actions追加
- [x] Usecaseのテストを書く
- [x] Usecaseの実装をする
- [x] Gatewayのテストを書く
- [x] Gatewayの実装をする
- [x] Driverの実装をする

### テーブルに行情報を表示する

### 行情報を登録できるフォーム作成

### 詳細ボタンをおすとモーダルがでる

- [ ] リリース

### Supabaseから手法の一覧を取得する

### タブできりかえができる

### 手法一覧テーブルが表示される

### ログアウト


:::info
### 参考
[daisyui](https://daisyui.com/)
[supabase](https://supabase.com/)
[clean architechture](https://gist.github.com/mpppk/609d592f25cab9312654b39f1b357c60)
[依存性の逆転](https://zenn.dev/naas/articles/c743a3d046fa78)
[DI](https://qiita.com/ritukiii/items/de30b2d944109521298f)
:::

---

driver

データをとって整形しないで返す(とるだけ)
整形はしちゃだめ (ドメインがない世界)
Driverは切替可能 (DBを変えたりが簡単)

gateway

driverを呼び出す
reflection = [
    {
        idea..
        info..
        timestamp
        name
        userId
        ...
    }
]

生のデータをReflection型に整形してあげる
Domainにあてはめる

return [
{
    idea
    info
}
]

usecaseでそれをユーザーに返してあげる

reflection = gateway.getALL()
return reflection

![](https://i.imgur.com/Z6ebFYH.png)
userを取得する関数 -> DBからuserを取得する(MySQL)