React入門(TypeScript版)

プログラミング

ReactをTypeScriptで開発することが増えているね。学習してみようかな

ここでは、React(TypeScript)の基本的な部分を学習していきます。

この記事で理解できる点は、以下になります。

  1. TypeScriptの基本
  2. Reactの基本

▼ES6(ES2015)あたりも事前に理解しておくといいです。

この記事は個人開発の備忘録となっています。



目次

  1. React前に理解するTypeScriptの基本
    • TypeScriptとは
    • TypeScriptとJavaScriptの違い
    • TypeScriptの使用される型
  2. React(TypeScript)で画面の変更
    • React.FCで書き換える
    • TSXにデータの表示をする
  3. React Hooks(フック)の種類
    • React Hooks(フック)とは
    • React Hooks(フック)は10種類
    • 覚えておく3つのフック
  4. まとめ

React前に理解するTypeScriptの基本

react-typescript

フロントのフレームワークが流行りTypeScriptが採用されることで、注目されています。

ここではReactをTypeScriptで書く前に必要な点をまとめておきます。

01TypeScriptとは

TypeScriptはMicrosoft社によって作られたプログラム言語です。TypeScripはコンパイルするとJavaScriptのコードに変換されるという特徴があります。

02TypeScriptとJavaScriptの違い

大きな違いは、型に関する部分です。

  • JavaScriptは動的型付け言語
  • TypeScriptは静的型付け言語

JavaScriptのような動的型付け言語は

PHP, Ruby, Pythonなど

TypeScriptのような静的型付け言語は

Java, Go, C#, C++など

03TypeScriptの使用される型

TypeScriptは明示的に型を指定する静的型付け言語です。指定する型には次のようなものがあります。

数値 number
文字列 string
真偽値 boolean
オブジェクト object
すべて any

実際にTypeScriptでどのように使われるのか、例を書きます。

数値

const num: number = 2

文字列

const str: string = '文字列'

真偽値

const bool: boolean = false

オブジェクト

const obj: object = {id: 1, name: 'めがね'}

すべて

let all: any = 2
all = '2'
all = false
all = {id: 2, name: 'めがね'}

React(TypeScript)で画面の変更

react画面カスタマイズ

TyepScriptを使いながらReactのトップページをカスタマイズしてみます。

Reactでは、最初にsrc/index.tsxが読み込まれますが、その中でApp.tsxが読み込まれていて、

01React.FCで書き換える

App.tsxは初期状態で以下のコードが書かれています。

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Reactには関数コンポーネントというものがあります。React.FCはReact.FunctionComponentの略です。

上記のコードをReact.FCで書くと次のようになります。

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

02TSXにデータの表示をする

変数の表示には波括弧{}を使います。

const App: React.FC = () => {
  const num: number = 1
  const str: string = 'めがね'
  return (
    <div>
      <p>{ num }</p>
      <p>{ str }</p>
    </div>
  )
}

React Hooks(フック)の種類

reactフックの種類

React Hooks(フック)はReact16.8から追加された新機能。

01React Hooks(フック)とは

Reactの公式ではクラスコンポーネントよりも関数コンポーネントを使うことをすすめています。

フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。フックは React をクラスなしに使うための機能ですので、クラス内では機能しません。今すぐに既存のコンポーネントを書き換えることはお勧めしませんが、新しく書くコンポーネントで使いたければフックを利用し始めることができます。
引用元: React公式

02React Hooks(フック)は10種類

準備されているReact Hooks(フック)は10種類です。最初からすべて理解しなくても、使いながら学ぶでOKですね。

フックは全部useなんちゃらという形になっていますね。

基本のフックは3種類

  • useState
  • useEffect
  • useContext

追加のフックは7種類

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

03覚えておく3つのフック

初心者は3つのフックを理解して、後は慣れてから使うで問題なし。

useState

useStateは状態を管理、更新できるフック

const [state, setState] = useState(initialState);
// state: 状態を管理する変数
// setState: 状態を変更・更新をする関数
// useState(initialState): 分割代入する(イメージ)、initialStateは初期値

useEffect

useEffectは、レンダリングの後に処理を動作させることができるフックです。

useEffect(didUpdate);
// didUpdate: useEffect に渡された関数(didUpdate)はレンダーの結果が画面に反映された後に動作

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [],
);
// 第二引数に空の配列を渡すと、初回のみ実行

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.sourc],
);
// 第二引数に引数が変更されると、毎回実行

useContext

親コンポーネントから子コンポーネント、さらに孫コンポーネントとデータを渡す場合はpropsを何度も使い、コードが複雑になります。

useContextを使うことでデータを共有することができ、簡単に孫コンポーネントにデータを渡すことができます。

親コンポーネント

const UserCount = React.createContext()
// createContext()で初期化

<UserCount.Provider value={100}>
// Providerを使い値をセット

孫コンポーネント

import { UserCount } from '../親コンポーネント'

const count = useContext(UserCount)
// useContext(UserCount)を使い孫コンポーネントで値を受け取る

まとめ

今回は、Reactの入門編についての備忘録でした。最初はこのあたりを理解して次に進む感じかと思います。

僕個人の感覚では、Reactの難易度は、Vue < React < Anglarという感じです。

フロントエンドを学習中の人は一緒に頑張りましょう。


当サイト申し込みが多いプログラミングスクール

人気があるプログラミングスクールには、理由があります。

気になった方は候補に含めてみてください。