### ■  一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-2list.png)

* create 押すと、追加できます。

* create画面で、title, content(本文) を入力

* contentは、MD形式(markdown)を、推奨としています。

* [create]押すと、保存できます

***
### ■ Show/ 詳細ページ

* 一覧の、タイトルのリンクを押すと、詳細画面が開きます。

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-1show.png)

***
### ■ Edit/ 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除 が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-2edit.png)


Memo - 操作手順

### ■ 一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407c-list.png)

* create 押すと、追加できます。

* create画面で、数値 を入力

* [save]押すと、保存できます

* [edit]押すと、編集、削除が可能です。

* 月を移動する場合、月入力欄の左右の。矢印を押すと。先月、次月に移動できます


***
### ■ グラフ表示

* [Chart] を押すと、グラフ画面が」開きます

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407b-chart.png)


***
### ■ xlsx 出力(Excel)

* 一覧の、[xls Export]を押すと、入力した値の、xlsxファイル出力が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407report.png)


Measure - 操作手順

### ■ Todo 一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-2list.png)

* create 押すと、追加できます。

* create画面で、title/タイトル, URL を入力

* contentは、MD形式(markdown)を、推奨としています。

* [create]押すと、保存できます

***
### ■ xlsx 出力(Excel)

* 一覧の、[xls Export]を押すと、入力したtodoの、xlsxファイル出力が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-3.png)

***
### ■ Show/ 詳細ページ

* 一覧の、タイトルのリンクを押すと、詳細画面が開きます。

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-4show.png)

***
### ■ Edit/ 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除、完了登録が可能です

* 完了登録は、[complete]押すと、完了状態になります。

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-1.png)



Todo - 操作手順

# Setup, apollo_sv1

```
npm install
```

* .env:  set password, host , dbname

*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名
```
DATABASE_URL="postgresql://postgres:__PASS__@__HOST__.supabase.co:5432/dbname"
```

* マイグレーション


```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, js_front1

```
npm install
```


***
### Setup , etc

* firebase 設定

* firebase > プロジェクト選択 > プロジェクトの概要 > プロジェクトの設定

* Firebase を初期化の、keyコード をコピーしておきます。

***
* next.config.js , 

* APOLLO_SV_URI : 設置したbackend　ドメインのエンドポイント

* firebase設定

先頭がREACT_APP_FIREBASEの変数を、上記のfirebase画面のコードを埋めます

```
APOLLO_SV_URI: "http://localhost:4000/graphql",

REACT_APP_FIREBASE_API_KEY: "",
REACT_APP_FIREBASE_AUTH_DOMAIN: "",
REACT_APP_FIREBASE_PROJECT_ID: "",
REACT_APP_FIREBASE_STORAGE_BUCKET: "",
REACT_APP_FIREBASE_MESSAGE_SENDER_ID: "",
REACT_APP_FIREBASE_APP_ID: "",

```

***
### Start server
* Start :

```
yarn dev
```

bookmark - 初期設定

### ■ bookmark 一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/ss-bm-0402a3list.png)

* create 押すと、追加できます。

* create画面で、title/タイトル, URL を入力

* cagegoryは指定しない場合は。未入力で問題ありません

* [create]押すと、保存できます

***
### ■ Cagegory

* bookmarkに、categoryを追加できます。

* create 押すと、追加できます。

* create画面で、nameに、カテゴリを入力します

* [create]押すと、保存できます

![img](https://img-static-kuc.netlify.app/img/js-front1/ss-bm-0402a1.png)



bookmark - 操作手順


***
* JSフロント作例の記事を公開しております。
* コンテンツは、追加予定です。


js_front1