0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ke-tan(k- ta)

React

0
Posted at

※現在、途中経過の記事です

学習教材・環境

教材
・React完全入門ガイド CodeMafia - Udemy

質問
・ChatGPT
特定のエラーや機能、メソッドを解説させるのに便利。自分のレベルに合わせてかみ砕いて解説してくれるため、記事で長文を読む必要がない。記事は詳しく書いてくれている人が多いが、初学者には難解で長文であることが多いため最初のうちはAIにかみ砕いて解説してもらうほうが吸収しやすいと思った。
確実に正しい情報という保証はないためそこは注意しなければいけない点である。ただ個人的にプログラミング関連の情報は整合性が高いほうだと思う。

エディタ
・Cursor

学習内容

  • コマンド
  • import&export
  • JSX特有の記述法
  • コンポーネントの概念
  • props
  • イベント処理
  • useState
  • フォームの制御
  • Reactでのスタイリング
  • createPortal
  • useRef
  • forwardRef & useImperativeHandle
  • useReducer
  • useContext

コマンド

Reactを触るにあたりnode.jsにてコマンドを打つことがあるため基礎的なものを記述

<# 一連の流れ #>
npm create vite@latest
npm install
npm run dev

<# nodeのバージョン管理・確認 #>
nvm list available
nvm install インストールするバージョン
nvm use 使うバージョン
node -v

<# styled-componentsのインストール #>
npm install styled-components

import&export

Reactの設計思想上ファイル間でやり取りをすることが多いのでよく使う

Pear.jsx
/* エクスポートデフォルトの場合は{}なし */
import Child from "../conponents/Child" ;
const Pear = () => {
  <Chil / >
}
Chil.jsx
/* 普通ののインポートの場合は{}を付ける */
import {str} from "./OtherChil"
const Chil = () => {
  return(
    <p>{str}</p>
  );
}

/* エクスポートデフォルトの場合は新しく名前を付けられる */
export default Chil;
OtherChil.jsx
export const str = "子供です";

JSX特有の記法

JS記述は{}内に行う
フラグメントタグ...実際は存在しないタグ。JSX内では最上階のタグは一つしか記述してはいけない。

Example.jsx
const Example = () => {
const text = "JSの記述をしています";

  /*<></>はHTMLに出力される際にはないものとして扱う*/
  <>
    <h2>h2とh3を同じコンポーネントの同じ階層に書きたい</h2>
    <h3>けどdivはいらない</h3>
    /*JSのコードをJSX内で記述するときは↓のように{}で囲む*/
    <h4>{text}</h4>
  </>
}

コンポーネントの概念

再利用再編集を容易にするためのReactの設計思想

Pear.jsx
const Pear = () => {
  return(
    <div>
      <Child />
    </div>
  )
}
Child.jsx
const Child = () => {
  return(
    <p>私は子供です</p>
  )
}

props

親から子に渡す引数型の情報。最初につまづいた点。ファイル間を行き来することで混乱しやすい。

Parent.jsx
const fruit = "Banana";

const Fruit = () => {
  return(
    <ChangeFruit fruit={fruit} />
  )
Children.jsx
const ChangeFuit = ({fruit}) => {
  return(
    <p>{fruit === "Banana" ? "Yes Banana" : "Oh my god, Please me Banana"}</p>
  )
  /*fruitがBananaなら「Yes Banana」を、Bananaでなければ「Oh my god, Please me Banana」を表示させる*/

イベント処理

こちらはWebサイト制作の際にDOM操作を学習していたためあまり違和感なく進めた
onClick / onChange / onBlur / onFocus / onMouseEnter / onMouseLeave 等

useState

stateは変数、setStateは次にstateに格納される予約された変数。
setStateの一つ前の値は第一引数のprevに格納されている。
propsの次につまづいた点。
setstateを理解するのが難しかった

Exsample.jsx
import {useState} from "react";

const [state, setState] = useState(false);

const judge = () => {
  return(
    <buttion onClick=(() => setState(prev => !prev))>{state ? "active" : "sleep"}</button>
  )
  /*trueならボタンの文字をactiveに、falseならsleepにする*/
}

フォームの制御

Webサイト制作でHTMLを触っていたからイケると思っていたがそうでもなかった。ここでkeyについても触れた

Reactでのスタイリング

styled-componentsを使用してのスタイリングを学習。コンポーネント間でのクラスの重複を気にしなくていいのが便利だと感じた。
疑似要素や疑似クラス、メディアクエリも使える。

Example.jsx
import styled from "styled-components";

const Example = () => {
  const StyledButton = styled.button`
    width: 120px;
    height: 60px;
    margin: auto;
    border: none;
    border-radius: 9999px;
    font-weight: bold;
    cursor: pointer;

    /*条件分岐の記述もできる*/
    background: ${({isSelected}) => isSelected ? "pink" : ""};
  `;

  const [state, setState] = useState(false);

  return(
    <StyledButton 
    isSelected={isSelected}
    onClick={() => setState(prev => !prev)};
    >
    ボタン
    </StyledButton>
  )
}

creatPortal

z-indexやover-flowの影響を受けずモーダルなどを実装できる。

Exsample.jsx
import {createPortal} from "react-dom";

const Modal = () => {
  <div>
    <h2>モーダルウィンドウ</h2>
    <button>閉じる<button>
  </div>
}

const PortalModal = ({children}) => {
  const target = document.querySelector(".pear");
  return portal(children, target);
}

const Exsample = () => {
  <div className="pear"></div>
  /*クラスpearを親要素にしてModalを子要素にする*/
  <PortalModal>
    <Modal>
  </PortalModal>
}

useRef

useStateと違い再レンダリングが起きない。再レンダリングされても情報が保持される。
参照先の指定を行える。（例）DOM要素、URL、パス等
currentプロパティ.メソッドで参照先の操作を行う。

Example.jsx
import {useRef} from "react";

const Example () => {
  const inputRef = useRef();

  return(
    <input ref={inputRef}>
    /*ボタンを押すとinputRefを使用したinputにカーソルが選択される*/
    <button onClick={inputRef.current.focus()}>ボタン</button>
  )
}

forwardRef & useImperativeHandle

useRef使う時にとりあえず使うらしい
2つでハッピーセット

Example.jsx
import {useRef, fowardRef, useImperativeHandle} from "react";

const Input = forwardRef((props,ref)) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current.focus();
  }
  }))

  return <input type="text" ref={inputRef} />
}

const Example = () => {
  const ref = useRef();
  
  return(
    <Input ref={ref} />
    <button onClicK={() => ref.current.focus()}>
      Inputをフォーカス
    </button>
  )
}

useReducer

useStateと違い更新の管理まで行う。stateと一緒に更新用の処理を保持している。設計思想が深いuseStateのようなもの。大規模な開発になった場合はこちらを使ったほうが良いが、なれるまでは無理に使わずuseStateを使ったほうが良いかも。
分割代入時の第一はuseStateと同じ変数、第二はdispatch。
useReducerの第一引数は基本処理とaction、第二引数に初期値。
条件分岐にはswitch文が多く用いられる。
dispatchには基本オブジェクト形式で値を渡す。

Example.jsx
const Example () => {
  const [rCount, dispatch] = useReducer((prev, action) => {
    switch(action) {
      case '+':
        return ++prev;
      case '-':
        return --prev;
      default:
        throw new Error('不適切なアクションです');
    }
  },0);

  const countUp = () => {
    dispatch({type: '+'});
  }

  const countDown = () => {
    dispatch({type: '-'});
  }

  <div>
    <p>{rCount}</p>
    <button onClick={countUp}>+</button>
    <button onClick={countDown}>-</button>
  </div>
}

useContext

グローバルな値をコンポーネント間で渡す方法。propsのバケツリレーをしなくて済む。
createContextの引数には初期値が入るが、Proveiderの値が実質の初期値になる。

Example.jsx
import { createContext, useState } from "react";
import Child from "./components/Child";
import OtherChild from "./components/OtherChild";

import { createContext, useState } from "react";
import Child from "./components/Child";
import GrandChild from "./components/GrandChild";

export const MyContext = createContext("Provideのvalueが読み込まれなかった場合の初期値");

const Example = () => {
  const [value, setState] = useState(0);

  return (
    <MyContext.Provider value={[value, setState]}>
      <Child />
      <GrandChild />
    </MyContext.Provider>
  );
};

export default Example;
Child.jsx
import GrandChild from "./GrandChild";
const Child = () => (
  <div>
    <h3>子コンポーネント</h3>
    <GrandChild />
  </div>
);
export default Child;
GrandChild.jsx
import { useContext } from "react";
import { MyContext } from "../Example";
const GrandChild = () => {
  const [value, setValue] = useContext(MyContext);

  const clickHandler = (e) => {
    setValue((prev) => prev + 1);
  };
  
  return (
    <div>
      <h3>孫コンポーネント</h3>
      {value}
      <button onClick={clickHandler}>+</button>
    </div>
  );
};
export default GrandChild;

まとめ

Reactの基礎を学習してみて感じたことは直感的な記述ができること。JSX記法によって視認的にわかりやすく、HTMLタグをJSで簡単に生成できることだと思った。
あとはコンポーネントの設計思想で分割して記述するため管理がしやすいこと。
またReactを1周してとりあえず何か簡単な制作物を作ろうとしたとき、個人的に使おうと思える機能を以下にまとめた。逆に設計思想が強いものや頭の混乱を引き起こしそうなものは初学者にとって大きな壁となるため、そういった類のものは以下では書くのを避けた。初学者なのであくまで便利で使いやすいものを基準にまとめてある。

useState
Reactの代表格で基礎となる機能なのかなと思った。簡単な実装やuseReducerに慣れるまではこっちを使おうと思った。JSライクなコーディングだと思う。

createPortal
z-indexやover-flowを意識せずにモーダルウィンドウなどを実装できるため便利。

styled-compornents
HTML＆CSSからコーディングを学んだ身としては、ファイル間でクラス名が重複しないのにものすごく恩恵を感じた。

useContext
propsのバケツリレーから脱却できるのは頭の混乱を抑えるのに非常に助かる。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?