1. HOME
  2. ブログ
  3. IT技術
  4. React開発に必要なJavaScriptの基本文法を紹介

React開発に必要なJavaScriptの基本文法を紹介

はじめに

福岡でバックエンドエンジニアをやっています、りっきーです。

最新、社内勉強会にて React コンポーネントを作成したり、プライベートで NextJs + React でポートフォリオ作成などしています。

React 開発では JavaScript を使用するのですが、今回は React を早く理解するために、最低限必要な JavaScript の基本文法を紹介したいと思います。

JavaScript・TypeScriptの基本文法紹介

React開発では JavaScript、TypeScript の様々な記法、ルールを駆使して開発します。

早速ですが、React 開発に必要な JavaScript、TypeScript の基本的な記法・ルールを紹介します。

モダンJavaScriptの記法・ルール

変数宣言

const を使用して上書き・再宣言不可能にすることで、最初に代入した値が変わらないことが担保され、コードの理解が容易になります。React では基本的に const を使用するようです。

アロー関数

ES2015 で取り入れられた関数の記法です。

アロー関数には省略記法がいくつかあります。省略されると、はじめのうちはなんのこっちゃ〜、となっていましたが=>があると関数なんだということを意識すれば次第に慣れてきて便利に感じるようになりました。

省略記法

オブジェクトの分割代入

オブジェクト名.プロパティ名を使わずにそのまま変数に代入できる。プロパティが多い場合に有用。

オブジェクトの省略記法

オブジェクトのプロパティ名と変数名が同じであれば、プロパティ名を省略することができます

ループ処理(map)

配列の各要素に対してアロー関数を実行して、新しい配列を生成します。従来のfor文よりも簡潔に書けます。

TypeScriptの記法・ルール

TypeScript とは Microsoft が開発した JavaScript です。JavaScript で型を扱えるようになりました。TypeScriptは JavaScript のスーパーセットにあたるので、今までの JavaScript 機能もすべて使用することができます。

型定義を使いこなすことで、意図しない値が設定されることを未然に防ぐことができます。また、props に型を定義することで、未然に意図しない値をコンポーネントに渡すことを防いでくれたりもします。React 開発では必ずといっていいほど TypeScript の型定義を利用するので、React 開発する際に必須の知識になります。

基本的な型指定

いろんな型指定

まとめ

以上、簡単ですが React開発に必要な JavaScript、Typescript の基本文法を紹介させていただきました。はじめはとっつきにくく、難しい印象がありましたが、様々な React コンポーネントを見ていくうちに簡潔に書けるJavaScript が楽しくなってきました。今回紹介した基本文法を知っておくだけでも、React コンポーネントが少しは見やすくなったのではないでしょうか。

ES2015から新たに便利な仕様が多く提供されました。基本文法を学んだ後は、ES2015 の便利な機能を学んでみるといいかもしれません。React 開発では JavaScript、TypeScript は必須になってきますので、本記事が JavaScript を深く学ぶきっかけになれれば幸いです。

最後までご覧頂きましてありがとうございました。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア