Udemy & 本 de お勉強

# どのディレクトリに関わらず、sample.txt を除外
sample.memo
# .gitignoreが配置されたディレクトリ内の sample.txt を除外
/sampe.txt
# sample-1 が見つかるパスを除外
sample-1
# sampleDirectory配下のすべてのパスを除外する。
sampleDirectory/
# sample.js や sample.json など　sa から始まるファイルを除外設定
sa*
# すべてのファイルを除外設定
*

  flex-direction: column;
  align-items: flex;

signInWithPopup(auth, provider).then((result) => {});

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/page1" element={<Page1/>}></Route>
        <Route path="/page1" element={<Page2 />}></Route>
        <Route path="/page1" element={<Page2 />}></Route>
      </Routes>
    </Router>
  );
}
export default App;

sample:{
id,
name
}

sample:{
id,
name,
telNo
}

const nowDate = Date.now();
console.log(nowDate);
>>> 1689247600796

const nowDate = Date.now();
console.log(new Date(nowDate));
>>> Thu Jul 13 2023 20:33:44 GMT+0900 (日本標準時)

const nowDate = Date.now();
console.log(new Date(nowDate).toLocaleDateString("ja-JP"));
>>> 2023/07/13

const nowDate = Date.now();
console.log(new Date(nowDate).toLocaleDateString("ja-JP",{
 hour:"2-digit",minute:"2-digit"
}));
>>> 2023/7/13 20:43

<button onClick={onClickHandler()}>ボタン1</button>

<button onClick={() => onClickHandler()}>ボタン2</button>

const saibaiLists=[
  {category:"果物",name:"みかん"},
  {category:"野菜",name:"すいか"},
  {category:"果物",name:"ぶどう"},
  {category:"野菜",name:"いちご"},
]

const kudamonoLists = saibaiLists.filter((saibaiList)  => saibaiList.category === "果物");

const sampleKey1 = "ThisIsKey"
const sampleObj1 = {
[sampleKey1]:"ThisIsValue"
}
const sampleKey2 = "ThisIsKeySecond!!"
const sampleObj2 = {
[sampleKey2]:"ThisIsValue"
}

import { Link } from "react-router-dom";

export const Page404 = () => {
  return (
    <div>
      <h1>ページが見つかりません。</h1>
      <Link to="/">TOPに戻る</Link>
    </div>
  );
};

+      <Route path="*">
+        <Page404 />
+      </Route>

import styled from "styled-components";

export const BaseButton = styled.button`
  color: #fff;
  padding: 6px 24px;
  border: none;
  border-radius: 9999px;
  outline: none;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
`;

import React from "react";
import styled from "styled-components";
+ import { BaseButton } from "./BaseButton";

export const PrimaryButton = (props) => {
  const { children } = props;
  return <SButton>{children}</SButton>;
};

+ const SButton = styled(BaseButton)`
+   background-color: #40514e;
+   }
`;

import React from "react";
import styled from "styled-components";
+ import { BaseButton } from "./BaseButton";

export const SecondaryButton = (props) => {
  const { children } = props;
  return <SButton>{children}</SButton>;
};

+ const SButton = styled(BaseButton)`
+  background-color: #11999e;
+   }
`;

import React, { createContext } from "react";

export const UserContext = createContext({});

export const UserProvider = (props) => {
  const { children } = props;
  const contextName = "名前だよ！！！！";
  return (
    <UserContext.Provider value={{ contextName }}>
      {children}
    </UserContext.Provider>
  );
};

function App() {
  return (
    <UserProvider>
      <Router2 />
    </UserProvider>
  );
}

import React, { useContext } from "react";
const context = useContext(UserContext);
console.log(context)
→ 名前だよ！！！！

export const UserProvider = (props) => {
  const { children } = props;

+  const [userInfo, setUserInfo] = useState(null);
-  const contextName = "名前だよ！！！！";

  return (
+    <UserContext.Provider value={{ userInfo, setUserInfo }}>
-    <UserContext.Provider value={{ contextName }}>
      {children}
    </UserContext.Provider>
  );
};

import { atom } from "recoil";

export const userState = atom({
  key: "userState",
  default: { isAdmin: false },
});

import {  RecoilRoot } from "recoil";
function App() {
  return (
+    <RecoilRoot>
      <UserProvider>
        <Router2 />
      </UserProvider>
+    </RecoilRoot>
  );
}

export default App;

+ import { useRecoilState } from "recoil";

export const Users = () => {
+  const [userInfo, setUserInfo] = useRecoilState(userState);
-  const { userInfo, setUserInfo } = useContext(UserContext);

  const onClickSwith = () => {
    setUserInfo({ isAdmin: !userInfo.isAdmin });
  };

  return (
    <SContainer>
      <h2>ユーザー一覧</h2>
      <SearchInput />
      <br />
      <SecondaryButton onClick={onClickSwith}>切り替え</SecondaryButton>
      <SUserArea>
        {users.map((user) => (
          <UserCard key={user.id} user={user} />
        ))}
      </SUserArea>
    </SContainer>
  );
};

+ import { useRecoilValue } from "recoil";

+  const userInfo = useRecoilValue(userState)
-  const { userInfo } = useContext(UserContext);

+ import { useSetRecoilState } from "recoil";
+ const setUserInfo = useSetRecoilState(userState);
- const { setUserInfo } = useContext(UserContext);

export type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

export const Todo = (
+  props: Pick<TodoType, "userId" | "title" | "completed">
) => {
  const { title, userId, completed = false } = props;
  const completeMark = completed ? "[完]" : "[未]";
  return <p>{`${completeMark} ${title}(ユーザー:${userId})`}</p>;
};

+ export const Todo = (props: Omit<TodoType, "id">) => {
  const { title, userId, completed = false } = props;
  const completeMark = completed ? "[完]" : "[未]";
  return <p>{`${completeMark} ${title}(ユーザー:${userId})`}</p>;
};

+ import { FC } from "react";

type Props = {
  color: string;
  fontSize: string;
};

+ export const Text: FC<Props> = (props) => {
  const { color, fontSize } = props;
  return <p style={{ color, fontSize }}>テキストです</p>;
};

import { VFC } from "react";

type Props = {
  color: string;
  fontSize: string;
};

export const Text: VFC<Props> = (props) => {
  const { color, fontSize } = props;
  return <p style={{ color, fontSize }}>テキストです</p>;
};

export const UserProfile: VFC<Props> = (props) => {
  const { user } = props;
  return (
    <dl>
      <dt>名前</dt>
      <dd>{user.name}</dd>
      <dt>趣味</dt>
      <dd>{user.hobbies.join(" / ")}</dd>
    </dl>
  );
};

const user: User = {
  name: "namae",
  hobbies: ["映画", "散歩"],
};

const user: User = {
  name: "namae",
-  hobbies: ["映画", "散歩"],
};

export const UserProfile: VFC<Props> = (props) => {
  const { user } = props;
  return (
    <dl>
      <dt>名前</dt>
      <dd>{user.name}</dd>
      <dt>趣味</dt>
+      <dd>{user.hobbies?.join(" / ")}</dd>
-      <dd>{user.hobbies.join(" / ")}</dd>
    </dl>
  );
};

let i = 0;
const array = {
 [`element${++i}`]: '○○ ○○',
 [`element${++i}`]: '性別',
 [`element${++i}`]: '年齢',
};

console.log(array);

const originalList = [10,20,30];
const [x, y, z] = originalList;
console.log(x,y,z);
→(結果) 10 20 30

const [a,b] = originalList;
console.log(a,b);
→(結果) 10 20

const [c,e,f,g] = originalList;
console.log(c,e,f,g)
→(結果) 10 20 30 undefined

const [h, ,j] = originalList;
console.log(h,j);
→(結果) 10 30

const teamMember ={
 fullName: '○○　太郎',
 gen:'male',
 age: 30
};
let fullName, gen, memo;

{ fullName, gen, memo =  'none' } = teamMember;
→(結果) Uncaught SyntaxError: Unexpected token '='

({ fullName, gen, memo =  'none' } = teamMember);
→(結果) {fullName: '○○　太郎', gen: 'male', age: 30}

function sum(...hikisu){
 let result = 0;
 for (const val of hikisu){
  result += val;
 }
return result;
}
console.log(sum(10,11,12));
→(結果) 33
console.log(sum(1,2,3,4,5,6,7,8,9,10));
→(結果) 55

×: function badFunction(...kahenHikisu, hikisu){};
○: function goodFunction(hikisu,...kahenHikisu){};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import logo from "./logo.svg";
import "./App.css";

// Appコンポーネントを定義
function App() {
// 戻り値
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          こんにちは、 React！
        </a>
      </header>
    </div>
  );
}

// Appコンポーネントをエクスポート
export default App;

// import は省略
// AppClassコンポーネントを定義
class AppClass extends React.Component{
// 描画する内容
render(){
 return(
  <div className="App">
   // 関数コンポーネントと同じ内容のため省略  
  </div>
 )
}
}

//AppClassコンポーネントをエクスポート
export default AppClass;

<div>{"Guri &amp; Gura"}</div>
→(結果) Guri &amp; Gura
<div>Guri &amp; Gura</div>
→(結果) Guri & Gura

// エスケープシーケンス
<div>{'Guri \u0026 Gura'}</div>
→(結果) Guri & Gura

export default function MySamplePorps(props) {
  return <div>これがmyPropsの値だよ→ {props.myProps}</div>;
}

export default function MySamplePorps({ myProps }) {
  return <div>これがmyPropsの値だよ→ {myProps}</div>;
}

<MySamplePorps myName="分割代入を使ってないよ！" />
<MySamplePorps myName="分割代入を使っているよ！" />

export default function MySamplePorps({ myProps = 'これは規定値だよ！' }) {
  return <div>これがmyPropsの値だよ→ {myProps}</div>;
}

<MySamplePorps />

{
 datas.map((data,index) => (
  <React.Fragment key={index}>
    <dt>(略)</dt>
    <dt>{data.summary}</dt> 
  </React.Fragment>
  )
 )
}

import classNames from 'classnames;

export default function ClassNameStyles({hikisu}){
return(
 <div className={classNames('box', hikisu === 'light' ? 'light' : 'dark')}>
  内容だよ！！！
 </div>
);
}

<SelectStyle hikisu='light' />

<div className={hikisu === 'light' ? 'light' : 'dark'}>
(省略)
</div>

export default function ListSampleTemplate({src,children}){
 return(
  <dl>
   {src.map(data => (
     <React.Fragment key={data.keyValue}>
      {children}
     </React.Fragment>
   }
  </dl>
 );
}

(省略)
<ListSampleTemplate src={sampleArray}>
 <dt>
  <p>{data.firstName} {data.lastName}</p>
 </dt>
</ListSampleTemplate>

export default function ListSampleTemplate({src,children}){
 return(
  <dl>
   {src.map(data => (
     <React.Fragment key={data.keyValue}>
      {children(elem)}
     </React.Fragment>
   }
  </dl>
 );
}

(省略)
<ListSampleTemplate src={sampleArray}>
 {
  <>
    <dt>
      <p>{data.firstName} {data.lastName}</p>
    </dt>
  </>
 }
</ListSampleTemplate>

setCnt(cnt + 1); // 11
setCnt(cnt + 1); // 11
(結果) 11

setCnt(cnt => cnt  + 1); // 11
setCnt(cnt => cnt  cnt + 1); // 12
(結果) 12

(import は省略)
export default function ParentComponent() {
  // count初期化
  const [count, setCount] = useState(0);
  // update関数を準備
  const update = (addValue) => setCount((cnt) => cnt + step);
  return (
    // update関数子コンポーネントへ渡す
    <>
      <p>合計カウント:{count}</p>
      <StateCounter addValue={1} onUpdate={update} />
      <StateCounter addValue={10} onUpdate={update} />
      <StateCounter addValue={-1} onUpdate={update} />
    </>
  );
}

export default function StateCounter({ addValue, onUpdate }) {
  // State(count)に加算
  const handleClick = () => onUpdate(step);
  return (
    <button className="cnt" onClick={handleClick}>
      <span>{addValue}</span>
    </button>
  );
}

export default function EventHelp() {
  // ctr + h でヘルプ表示
  const handlreKey = (e) => {
    if (e.ctrlKey && e.key === "h") {
      alert("ヘルプメッセージの内容だよ");
    }
  };

  return (
    <form>
      <label>
        ラベル:
        <input type="text" size="20" onKeyDown={handlreKey} />
      </label>
    </form>
  );
}

<EventKey />

export default function EventSample() {
  // 独自の引数を追加したイベントハンドラー
  const current = (e, type) => {
    const d = new Date();

    switch (type) {
      case "date":
        console.log(d.toLocaleDateString());
        break;
      case "time":
        console.log(d.toLocaleTimeString());
        break;
      default:
        console.log(d.toLocaleString());
    }
  };
  return (
    <div>
      {/* アロー関数経由でハンドラー呼び出し。 */}
      <button id="dt" onClick={(e) => current(e, "datetime")}>
        日時
      </button>
      <button id="date" onClick={(e) => current(e, "date")}>
        日付
      </button>
      <button id="time" onClick={(e) => current(e, "time")}>
        時刻
      </button>
    </div>
  );
}

<EventSample />

useRef(初期値)

const firstName = useRef(null)

return(
 <intput id="firstName" ref={firstName} />
)

console.log(`value: ${firstName.current.value}`)

Array.splice([開始インデックス])
Array.splice([開始インデックス],削除する要素数)
Array.splice([開始インデックス],削除する要素数,追加要素・・・)

  const [form, setForm] = useState({
    animal: ["dog", "bigCat"],
  });

  // Stateに反映
  const handleFormFukusuCheck = (e) => {
    const fa = form.animal;

    if (e.target.checked) {
      fa.push(e.target.value);
    } else {
      fa.splice(fa.indexOf(e.target.value), 1);
    }

    // 編集済みの配列をStateに反映
    setForm({
      ...form,
      [e.target.name]: fa,
    });
  };

  const show = () => {
    console.log(`動物: ${form.animal}`);
  };

return (
    <form>
      <legend>好きな動物:</legend>
      <label htmlFor="animal_dog">犬</label>
      <input
        id="animal_dog"
        name="animal"
        type="checkbox"
        value="dog"
        checked={form.animal.includes("dog")}
        onChange={handleFormFukusuCheck }
      />
      <br />
      <label htmlFor="animal_normalCat">猫</label>
      <input
        id="animal_normal_cat"
        name="animal"
        type="checkbox"
        value="normalCat"
        checked={form.animal.includes("normalCat")}
        onChange={handleFormFukusuCheck }
      />
      <br />
      <label htmlFor="animal_bard">小さい猫</label>
      <input
        id="animal_small_cat"
        name="animal"
        type="checkbox"
        value="smallCat"
        checked={form.animal.includes("smallCat")}
        onChange={handleFormFukusuCheck }
      />
      <br />
      <button type="button" onClick={show}>
        送信
      </button>
    </form>
  );

  // ファイル入力ボックスへの参照
  const file = useRef(null);

  // ファイル情報をログ出力
  function show() {
    const fs = file.current.files;
    // 取得したファイル群を順に出力
    for (const f of fs) {
      console.log(`ファイル名: ${f.name}`);
      console.log(`種類: ${f.type}`);
    }
  }

  return (
    <form>
      <input type="file" ref={file} multiple />
      <button type="button" onClick={show}>
        送信
      </button>
    </form>
  );

setState({
 ...state,
[e.target.name]: e.target.value
})

const sampleObj = { a:'Aだよ', b:'Bだよ'}
const copyObj = {...sampleObj}