React開発に必要なJavaScriptの基本文法を紹介
2023.06.12
はじめに
福岡でバックエンドエンジニアをやっています、りっきーです。
最新、社内勉強会にて React コンポーネントを作成したり、プライベートで NextJs + React でポートフォリオ作成などしています。
React 開発では JavaScript を使用するのですが、今回は React を早く理解するために、最低限必要な JavaScript の基本文法を紹介したいと思います。
JavaScript・TypeScriptの基本文法紹介
React開発では JavaScript、TypeScript の様々な記法、ルールを駆使して開発します。
早速ですが、React 開発に必要な JavaScript、TypeScript の基本的な記法・ルールを紹介します。
モダンJavaScriptの記法・ルール
変数宣言
const を使用して上書き・再宣言不可能にすることで、最初に代入した値が変わらないことが担保され、コードの理解が容易になります。React では基本的に const を使用するようです。
1 2 3 4 5 6 7 8 9 10 | // 上書き可能、再宣言可能 var hoge = "var変数1"; hoge = "var変数2"; var hoge = "var変数2"; // 上書き可能、再宣言不可能 let hoge2 = "let変数"; // 上書き、再宣言不可能 const hoge3 = "const変数"; |
アロー関数
ES2015 で取り入れられた関数の記法です。
アロー関数には省略記法がいくつかあります。省略されると、はじめのうちはなんのこっちゃ〜、となっていましたが=>があると関数なんだということを意識すれば次第に慣れてきて便利に感じるようになりました。
1 2 3 4 | //今までの関数 function hogeFunction(value) { return value; }; |
1 2 3 4 | // アロー関数 const hogeFunc = (value) => { return value; }; |
省略記法
1 2 3 4 5 | // 1つ目 // 引数が1つの場合のみ、かっこを省略できる const hogeFunc = value => { return value; }; |
1 2 3 4 | // 2つ目 // return1文のみの場合、{}とreturnを省略できる // 引数をそのままreturn const hogeFunc = value => value; |
オブジェクトの分割代入
オブジェクト名.プロパティ名を使わずにそのまま変数に代入できる。プロパティが多い場合に有用。
1 2 3 4 5 6 7 | const user = { sei: "honda", name: "keisuke", }; // 分割代入 // 各変数に代入できる const { sei, name } = user; |
オブジェクトの省略記法
オブジェクトのプロパティ名と変数名が同じであれば、プロパティ名を省略することができます
1 2 3 4 5 6 7 8 9 10 11 12 13 | const sei = "ホンダ"; const name = "keisuke"; // 通常の定義 const userA = { sei: sei, name: name, }; // 省略できる const userB = { sei, name, }; |
ループ処理(map)
配列の各要素に対してアロー関数を実行して、新しい配列を生成します。従来のfor文よりも簡潔に書けます。
1 2 3 4 | const hogeArray = [1,2]; // ()にアロー関数を記述して、配列の各要素に対して2倍した値の新しい配列を生成する const newArray = hogeArray.map((num) => num * 2); |
TypeScriptの記法・ルール
TypeScript とは Microsoft が開発した JavaScript です。JavaScript で型を扱えるようになりました。TypeScriptは JavaScript のスーパーセットにあたるので、今までの JavaScript 機能もすべて使用することができます。
型定義を使いこなすことで、意図しない値が設定されることを未然に防ぐことができます。また、props に型を定義することで、未然に意図しない値をコンポーネントに渡すことを防いでくれたりもします。React 開発では必ずといっていいほど TypeScript の型定義を利用するので、React 開発する際に必須の知識になります。
基本的な型指定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // コロンで型を指定します // 文字列 const str: string = "honda"; // 数値 const num: number = 10; // 配列 const arry: Array<string> = ["honda","keisuke"]; // 関数の型 // 引数の型、戻り値の型(void) const funcA = (str: string): void => { console.log(str); }; // オブジェクトの型 const obj: { str: string, num: number }; obj = { str: "honda", num: 10, }; |
いろんな型指定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // Union型 // stringとnumberどちらでも代入可能 let hoge: string | number = "honda"; hoge = 10; // 型のエイリアス // 型の定義を変数に入れて使い回すことができる type HogeType1 = { sei: string; name: string; }; type HogeType2 = { // ?をつけることで、実装時に値を省略可能 address?: string; }; // Intersection型 // &で型を指定 // 複数の型をマージできる const hogeConst: HogeType1 & HogeType2 = { sei: "honda", name: "keisuke", address: "earth", }; // addressを省略することもできる const hogeConst: HogeType1 & HogeType2 = { sei: "honda", name: "keisuke", }; |
まとめ
以上、簡単ですが React開発に必要な JavaScript、Typescript の基本文法を紹介させていただきました。はじめはとっつきにくく、難しい印象がありましたが、様々な React コンポーネントを見ていくうちに簡潔に書けるJavaScript が楽しくなってきました。今回紹介した基本文法を知っておくだけでも、React コンポーネントが少しは見やすくなったのではないでしょうか。
ES2015から新たに便利な仕様が多く提供されました。基本文法を学んだ後は、ES2015 の便利な機能を学んでみるといいかもしれません。React 開発では JavaScript、TypeScript は必須になってきますので、本記事が JavaScript を深く学ぶきっかけになれれば幸いです。
最後までご覧頂きましてありがとうございました。
書いた人はこんな人
IT技術5月 11, 2023ISUCONで技術もコミュニケーションもアップ！ISUCON部での楽しい挑戦！- IT技術1月 6, 2023React開発に必要なJavaScriptの基本文法を紹介
- IT技術10月 18, 2022React入門してみた！
- IT技術7月 5, 2022不正アクセス受けてみた話
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
