React開発によく使うプロパティやメソッド等

今回は、自分がReactでの開発をしていて感じた、よく使うプロパティやメソッドなどをまとめてみたいと思います。一個一個詳しく書いていたら長くなるので、簡単にまとめていきます。

クラス

これは必須の知識です。Reactはコンポーネント指向のライブラリなので、複数のコンポーネントを作成していきますが、その一つ一つのコンポーネントをクラスとして作成しています（昨今の開発ではまた別の形でのコンポーネントがありますが、それは後述）。Reactに入る前にまず、クラスの知識を身につけておくと学習しやすいかと思います。

クラスとは

簡単に言うと、同じような機能を使いまわすためにまとめたひな形です。
例えば、人物の名前と年齢の情報をもとに、自己紹介する関数を作成するとします。この操作を複数人に対して一個一個同じ記述を書いていては冗長です。そのようなときに、ひな形を作成して使いまわすことで、コードを簡単にまとめることができるのと同時に、他者が読むときに読みやすくなります。

記述例

class Member {
  constructor(name = "", age = 0;) {
    this.name = name;
    this.age = age;
  }

  introduction() {
    console.log(`私は${this.name}、${this.age}歳です。よろしくお願いします！`)
  }
}

let taro = new Member("山田太郎", 15)
let hanako = new Member("佐藤花子", 20)

taro.introduction()  // 私は山田太郎、15歳です。よろしくお願いします！
hanako.introduction()　// 私は佐藤花子、20歳です。よろしくお願いします！

記述の仕方

①　'class クラス名' で定義します。このとき、クラス名の1文字目は大文字にします。
②　'constructor' はクラスを複製（インスタンスといいます）して使用するときに初期化を行う関数です。インスタンス化のタイミングで渡された値を受け取り、インスタンスにその値を割り当てます。
③　クラスの中には自由に変数やメソッドを定義できます。今回の例でいうと、name, age, introduction の3つをMemberクラスに与えています。このとき、クラス内で定義した変数などを参照する際は 'this' をつけて参照します。
④　作成されたクラスを使う場合は、'new' をもちいてインスタンスを生成します。引数には、constructorに渡すための値を入力します。ここで入力した値を新しいクラスで用いるわけです。

アロー関数

こちらもほぼ必須のものです。Reactでは上記のクラスでコンポーネントを作成していくものと言いましたが、記述が冗長になりやすいため実際は関数を用いてコンポーネントを作成してくことが基本となります。そこで使用するのがアロー関数です。

アロー関数とは

別名無名関数といわれるものです。名前の通りfunctionキーワードを書かずに使用できる関数です。関数名と関数本体を、' => '（アロー）でつなぐためアロー関数といいます。

記述例

const foo = () => {
  console.log('アロー関数の使い方です。')
}

const rectangleArea = (base, height) => {
  const result = base * height
  console.log(result)
}

foo()  // アロー関数の使い方です。
rectangleArea(2,4)　// 8

記述の仕方

①　（）の中に引数（引数は無しも可）、｛｝の中に処理内容を記述し、それらを ' => ' でつないで記述します。

mapメソッド

Reactではレンダリングが頻繁に行われます。その際に処理が重くならないように再レンダリング時に更新が必要な部分のみを更新してレンダリングします（仮想DOMを採用しているため）。そのためループ構文などで配列処理を行うと再レンダリングで更新する箇所が多くなるので処理が重くなってしまいます。mapメソッドは処理をう際に配列の各要素にkeyを対応させることができるので、再レンダリング時にkeyが同じものは更新する必要がないため処理を軽くすることができます。

mapメソッドとは

配列の各要素に対して同じ処理をしたいという場面はよく出てきます。簡単に思いつく処理としてfor文を用いた処理があります。forはループ回数のインデックスに対して処理を渡すのに対し。mapは配列の各要素に対して処理を行い、新しい配列を作成することができるのでより柔軟な処理を簡単にできます。

記述例

const nameList = ["山田", "佐藤", "田中"]

const allProfile = nameList.map((name, index) => {
　const profile = index + ": 私の名前は" + name + "です。" 
  console.log(profile)
})

//  1: 私の名前は山田です。
//  2: 私の名前は佐藤です。
//  3: 私の名前は田中です。

記述の仕方

①配列に対して、".map" をつけて書き始めます。
②引数には順に、("配列の要素", "インデックス番号", "元の配列") が渡されます。引数は空でも動きますが、基本は配列の要素に対して処理を行いたい場合に使うので、基本は引数を記述すると良いと思います。

まとめ

上記のもの以外にもよく使うものはたくさんありますが、特によく使うを思ったものを簡単にまとめてみました。
最近あるwebアプリの試作をしていたので、そこでは上記のものを多く活用しました。何かの参考になれば幸いです。
最後までご愛読ありがとうございました。