3/2Last

• プロジェクト/settings.py
  • INSTALLED_APPS
    • プロジェクトの設定情報を記述したファイル
      • rest_frameworkなどの外部のアプリ
      • 自作したアプリケーションを登録できる
        • manage.pyがある階層を原点として「/」の代わりに「.」で区切る。アプリの中のクラスについても指定できる
• アプリ/models.py
  • モデルを作成(DBに登録するやつ) 
  • class Task(models.Model):
    • title=models.CharField(max_length=50)
    • created_at=models.DateTimeField(auto_now_add=True)
    • updated_at=models.DateTimeField(auto_now=True)
    • def ___str__(self):
      • return self.title
• アプリ/admi.py
  • adminダッシュボードでモデルを閲覧できるようにするため
  • from .models import Task
  • adimin.site.register(Tasl)

• makemigration
  • git で言うステージング
  • 設定内容をmigrationファイルに格納

  • docker-compose exec backend python manage.py makemigrations

• migrate
  • gitで言うプッシュ
  • DBに登録 

  • docker-compose exec backend python manage.py migrate

• superuserの登録
  • adminダッシュボードに入るために必要

  • docker-compose exec backend python manage.py createsuperuser      

• adminダッシュボードに入る

  • http://localhost:8000/admin/

3/2-3 備考

今更ながらDockerとライブラリについて

• Dockerが共有できるのは環境だけ
• ライブラリなどはGitHubでソースコードを共有することに意味がある？

Dockerと本番環境

• 開発で使っていく
• AWSでは本番環境でdockerをうごかせるらしい…

3/2-1

combineReducers

• reducerが複数ある場合に困る
  • reducerが複数あるのは別々の減り方をするときなど

reduxをインストールする

• npm install reduc react-redux

ファイル構成

• src
  • reducers
    • index.js
    • actionTypes.js
    • reducerMeat.js
    • reducerVegetable.js

• index.js
  • combinereducersを用いて幾つかのreducerをまとめる
• actiontypes
  • デバックの簡素化のためにここで状態を定義しておく
• reducerMeat.js
  • 肉の減り方（状態）を管理するreducerを定義する
• reducerVegetable.js
  • 野菜の減りかた（状態）を管理するreducerを定義する

• うまく使えそうな機能なのでテンプレート化しておくのは良いかもしれない

■

useMemo

• 不要な再計算をスキップする
• useEffectは非同期に向いてる。
• 基本的にuseMemoの方が良い

useMemoの使用

1. useMemoをimport
2. useMemo()で囲う
3. 第2引数にuseMemoを使わない（再計算するStateを入れる）

• useMemoをimport
  • import{useMemo} from 'react';
• useMemoで囲う
  • const isOdduse=Memo(処理return(),[第2引数]);
• useMemoを使うと必要となる結果は変数となる

propsの書き方

• メイン関数の引数にpropsとかく
• メイン関数の引数に{}で囲って継承したい属性を列記する

React.memo()

• useCallbackと組み合わせて使う。不要なレンダリングを防ぐ
• ただし関数のレンダリングは防げない

React.memo()の使い方

• コンポーネントのexport場所をReact.memo()で囲う
  • export default React.memo(CountDisplay)

useCallback

• 不要なレンダリングを防ぐ
• React.memoと組み合わせて使う
• 関数の不要なレンダリングを防ぐ

useCallbackの使い方

1. useCallbackをimportする
2. useCallBackで関数を囲う
3. 第2引数を（空）にすると初回のみレンダリングをする

• useCallbackをimportする
  • import {useCallback} from 'react'
• useCallbackで関数を囲う
  • const AddCount1=useCallback(()=>{

    setCount1(prevCount1=>prevCount1+1);

    },);
• 第2引数を[]（空）にすると初回のみレンダリングをする
  • useStateの変数を入れるとその変数が変更された時だけレンダリングをする

3/1-5

useRducerとuseContextを組み合わせる

• useReducerの状態管理は同一コンポーネントだけ
• useContextを使えば状態管理をグローバルにできる

親コンポーネントに処理を書く

• TypeScriptでは型を明示する必要があることに注意(今回は使用しない)
• useContextのcontextファイルは特に変える必要なし
• 値を渡すときは下の階層でも使えるようにわかりやすく命名しなおす。
• 渡された値を処理する

• 値を渡すときは下の階層でも使えるようにわかりやすく命名しなおす。
  • value{{countProvided:count,dispatchProvided:dispatch)}
    • 新名:現在のコンポーネンツ内での名前
    • 複数ある時は{{}}
• 渡された値を処理する
  • const {diipatchProvided}=useContext(AppContext)
    • 渡された値は{}で囲う
    • useContextの構文に入れて使う
  • それ以降はdispatchProvidedとして扱う

3/1-4

useReducer

• 状態遷移を管理する
• currentStateとactionをもとにreducerが新しいStateを返す

useReducerの使い方

1. useRedcerをimportする
2. initialStateを定義する
3. reducer関数を定義する
4. useReducerを定義する
5. dispatch関数に値を送る
6. countに値が返ってくる

• useRedcerをimportする
  • import {useReducer} from 'react':
• initialStateを定義する
  • メイン関数外で定義する
  • 普通の変数のように定義する
    • const intialState=0;
• reducer関数を定義する
  • メイン関数外で定義する
    • const reducer=(currentState,acttion)=>{処理} 
      • 処理のreturnがuserReducerのcount（第一要素）になる
• useReducerを定義する(構文)
  • const [count,dispatch]=useReducer(reducer,initialstate);
• dispatch関数に値を送る
  • onClicke={()=>dispatch(値)}
    • 値をreducer関数に渡す
• counteに値が返ってくる
  • reducer関数で処理された値がcount（第一要素）に入る
    • {count}のように使う

3/1-3

文字列の中に変数を埋め込む

• `URL/${id}`

useContext

• propsDrilling問題propsのために途中通過点を経由しなければならない
  • useContext+useReducerで解決する

useContextを使う

1. src/contextsを作成
2. AppContext.jsを作成
3. AppContext.jsを記述
4. App.tsxでimport
5. <AppContext.Provider value={"value from App.js"}>タグで要素を囲う

• AppContext.jsを記述
  • import {createContext} from"react";
    • CreateContextをインポート
  • createContextの構文
    • const AppContext=createContext();
  • export default AppContext;
    • AppContext.jsを他のファイルから読み込めるようにする
• App.tsxでimport
  • import AppContext from './contexts/AppContext';
• <AppContext.Provider >タグで要素を囲う
  • value={"value from App.js"}を付け加えるこれを孫コンポーネントでprops無しで読み込む

孫コンポーネントでProviderタグ内の変数(value)（親コンポーネント）を読み込む

• 孫コンポーネントでuseContextをimport
• 孫コンポーネントでAppContextをimport
• useContext構文
  • const value=useContext(AppContext)
• タグ内で{value}として読み込める