プログラミング技術

本サイトはプロモーションが含まれています。

React入門（TypeScript版）

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

このような疑問をお持ちの方に向けて書いています。

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

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

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

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

関連記事
【ES6(ES2015)】React／Vueを学習する前に必要な知識

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

React前に理解するTypeScriptの基本

react-typescript

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

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

TypeScriptとは

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

TypeScriptとJavaScriptの違い

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

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

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

PHP, Ruby, Pythonなど

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

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

TypeScriptの使用される型

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)でTSXにデータの表示をする

react画面カスタマイズ

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

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

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

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

React Hooks（フック）の種類

reactフックの種類

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

React Hooks（フック）とは

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

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

React Hooks（フック）は10種類

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

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

基本のフックは3種類

  • useState
  • useEffect
  • useContext

追加のフックは7種類

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

覚えておく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という感じです。

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

-プログラミング技術