変数

export default function Acompornent(){
    // 再描画時には、x:100 y:100 にいちいち初期化されて変更内容が失われる
    let windowPos = {
        x: 100,
        y: 100
    } 

    // こちらは再描画時には内容は失われない
    const [style,setStyle] = useState({
        top:0,
        left:0
    })

    // このようなコードを書くと windowPos は setStyle されたあと再描画で内容が初期値に戻ってしまう
    addEventListener("mousemove",(event:MouseEvent) => {
        // 何かしらのコード

        windowPos.x = event.screenX
        windowPos.y = event.screenY

        // 何かしらのコード

        setStyle({
            top: windowPos.x,
            left: windowPos.y
        })
    })

    return　<div style={style} className="fixed">This is styled text.</div>
}

import { useState } from "react"

// useState の中身はいろんなデータ型が入る。特定の boolean 型しか使えないとかそういうことはないようである。
const [visible,setVisible] = useState(true) 
// 厳密に型を指定することもできるようである。
const [visible,setVisible] = useState<boolean>(true) 
// 初期値が null の例
const [visible,setVisible] = useState<boolean | null>(null) 

const [data,setData] = useState({
    someItem: "itemname",
    nest:{
        "howComplexItIs":"butShowExampleForNow",
        "nestitem":["nestdata","nestdata1"]
    }
})

console.log(visible)

console.log(data)
console.log(data.someItem)
console.log(data.nest.howComplexItIs)

setVisible(true)
setVisible(false)

// すべてを更新する
setData({
    someItem: "aaa",
    nest:{
        "howComplexItIs":"aa",
        "nestitem":["sss,sss"]
    }
})
// 部分的に更新し、その他は元の値を保持する
setData({
    ...data,
    nest:{
        ...data.nest,
        "nestitem":[...data.nest.nestitem,"newItem"]
    }
})
// 部分的に更新し、その他は元の値を保持する
setData((state) => ({
    ...state,
    nest:{
        ...state.nest,
        "nestitem":[...state.nest.nestitem,"newItem"]
    }
}))

import { useRef } from "react"

// useState と同様に自由にいろんな型のデータを設定できる
let windowPos = useRef({
    x:100,
    y:100
})

let onMove = useRef<boolean>(false)
let onMove = useRef(false)

console.log(windowPos.current.x)

console.log(onMove.current)

windowPos.current.y = 2342

onMove.current = false
onMove.current = true

import { useEffect } from "react"

import { useEffect, useState } from "react"
import { create } from "zustand";

// useEffect の前座 -------------------------------
// useEffect の前座 -------------------------------
type DatabaseState = {
  websocket: WebSocket | null;
  serverIP: string | null;
  changeServer: (ip: string) => void;
  closeConnection: () => void;
  getWebsocket: () => WebSocket | null;
};

export const useDatabaseStore = create<DatabaseState>((set, get) => ({
  websocket: null,
  serverIP: "ws://localhost:50097",

  changeServer: (ip: string) => {
    set({ serverIP: ip });
  },

  closeConnection: () => {
    const ws = get().websocket;
    ws?.close();
    set({ websocket: null });
  },

  getWebsocket: () => get().websocket,
}));
// useEffect の前座 -------------------------------
// useEffect の前座 -------------------------------

// ここからが useEffect の例 ----------------------------
// ここからが useEffect の例 ----------------------------
export function useDatabaseEffects() {
  const serverIP = useDatabaseStore((s) => s.serverIP);
  const setWebsocket = useDatabaseStore.setState;

  // serverIP setWebsocket などの変数のデータの変更（状態）を監視する useEffect
  useEffect(() => {
    if (!serverIP) return;

    const ws = new WebSocket(serverIP);
    setWebsocket({ websocket: ws });

    // このコードでは、一時的切っているが、return として関数を書いておくと、再描画時かuseEffectの次回実行時に、クリーンアップなど、やらせたい処理が書けるらしい？ まだここはよくわかっていない。
    // return () => {
    //   ws.close();
    // };
  }, [serverIP, setWebsocket]); // 監視する状態変数のリスト
}
// ここまでが useEffect の例 ----------------------------
// ここまでが useEffect の例 ----------------------------