ジーニー 1Day

React

hooksとは

hooksとはstateなどのReactの機能をクラスを書かずに使うことができる機能のこと
関数コンポーネントで書くことができるので、シンプルで見やすい記述ができる
（例）UseState,UseEffect

クラスコンポーネントと関数コンポーネントとの比較

関数コンポーネントで書くと、thisなどの記述が不要になる
- 変数のスコープについて考えることが減って楽になりそう

UseState

useStateは関数コンポーネントでstateを管理(保持・更新)をするためのhook
- state：画面上に表示されるデータ等、アプリケーションが保持している数値などのこと(=コンポーネントが内部で保持する「状態」)
- props(＝親コンポーネントから橋渡しされる値)異なり、後から変更することが可能
- setStateを呼び出すことでstateの値を更新することができる

UseEffect

関数の実行タイミングをReactのレンダリング後まで遅らせるhook
- useEffectに渡された関数はレンダーの結果が画面に反映された後に実行される
- 副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）を関数コンポーネントで扱うことができる
UseEffectの使い方：
- 第1引数(関数型)：関数を渡す。
- 第2引数(配列型)：関数の実行タイミングを制御するための依存データが入る。省略可能だが、ほとんどしない。
  - 初回レンダリング時のみ実行：空の依存配列[]を代入
  - 特定の変数が変化したときに実行：依存配列の中に変数を代入(例：[count])

UseReducer

useStateと同じようにstateを管理するためのhook
useStateとの違い：
- コードの分量：一般にuseStateの方が少ない。stateの更新方法が同じ場合は使い回しができるuseReducerの方が少なくなる。
- 可読性：useReducerは更新条件(dispatch)と更新方法(reducer)が分離していて読みやすい。
- デバッグ：useReducerはアクションごとにstateの状況を確認できるので、どのタイミングのstateに誤りがあるのかをデバッグしやすい。
- 好み：自由に行き来できるので好きな方を使おうね

サンプル：

//useReducerをimport
import React, {useReducer} from 'react'
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';

//counterの初期値を0に設定
const initialState = 0
//reducer関数を作成
//countStateとactionを渡して、新しいcountStateを返すように実装する
const reducerFunc = (countState, action)=> {
//reducer関数にincrement、increment、reset処理を書く
//どの処理を渡すかはactionを渡すことによって判断する
  switch (action){
    case 'increment':
      return countState + 1
    case 'decrement':
      return countState - 1
    case 'reset':
      return initialState
    default:
      return countState
  }
}
const Counter = () => {
//作成したreducerFunc関数とcountStateをuseReducerに渡す
//useReducerはcountStateとdispatchをペアで返すので、それぞれを分割代入
  const [count, dispatch] = useReducer(reducerFunc, initialState)
//カウント数とそれぞれのactionを実行する<Button/>を設置する
  return (
    <>
      <h2>カウント：{count}</h2>
      <ButtonGroup color="primary" aria-label="outlined primary button group">
        <Button onClick={()=>dispatch('increment')}>increment</Button>
        <Button onClick={()=>dispatch('decrement')}>decrement</Button>
        <Button onClick={()=>dispatch('reset')}>reset</Button>
      </ButtonGroup>
    </>
  )
}

export default Counter

SaaS改善について

SaaSを改善する上で重要なポイント

テナントという概念
迅速なサービス改善を実現するアーキテクチャの検討
セキュリティの強化
拡張性の担保
料金プランと請求方法の確立
データの活用