JavaScript

【React入門】押さえておきたいJavaScriptの記法10選

こんにちは、アプリ開発者のテルです!

本記事では、React開発で押さえておきたいJavaScriptの記法10選をご紹介します。

どの記法も初学者のために「シンプルで分かりやすい」にこだわって解説しています。

厳選した10選は、Reactを用いたアプリ開発には欠かせない知識になっています。頻出するJavaScriptの記法をしっかりと押さえて開発の幅を広げていきましょう。

テル

本記事ではそんな悩みを解決していきます!

【React入門】JavaScriptの記法10選

アロー関数

  1. 従来のfunction(関数)の定義をより短く記述できる記法のこと

基本的な使い方

// 従来の書き方
function func(num) {
  return num + 1;
}
console.log(func(1));

// アロー関数
const arrowFunc1 = (num) => {
  return num + 1;
};
console.log(arrowFunc1(1));

// 処理が1行の場合は以下のように省略できる
const arrowFunc2 = (num) => num + 1;
console.log(arrowFunc2(1));

Callback関数

  1. 引数に渡された関数のこと

基本的な使い方

// [callback]関数を引数に指定
const func = (callback) => {
  const result = callback(1);
  console.log(result);
}

// 引数に入る関数
const callback = (num) => {
  return num + 1;
}

func(callback);

// 出力結果: 2

イベントリスナー

  1. 「テキスト入力」「クリック」などの動作のこと
  2. 動作が行われた際に実行する内容を指定できる

基本的な使い方

See the Pen Untitled by terupro (@terupro) on CodePen.

モジュール

  1. JavaScriptのファイルを1つの単位にしたもの
  2. ファイルごとに機能を管理できる
// main.jsファイル
// importで、module.jsファイルの内容を取得できる
import { hello } from "./module.js";
hello();

// module.jsファイル
// exportで、ファイルのどこからでも取得できるようにしている
export const hello = () => {
  console.log("hello!");
};

map/filterメソッド

  1. mapメソッド:各要素を1つずつ処理を実行するもの
  2. filterメソッド:各要素を1つずつ順番に判定するもの

基本的な使い方

// 配列を用意
const items = [ 1, 2, 3, 4, 5 ];

// mapメソッド
// itemに配列の始めから終わりまでの値が入ってくる
const newItems1 = items.map((item) => item * 2);
console.log(newItems1);

// 出力結果:[ 2, 4, 6, 8, 10 ]

// filterメソッド
// 条件に合うものをフィルタリングする
const newItems2 = items.filter((item) => item < 3);
console.log(newItems2);

// 出力結果:[ 1, 2 ]

分割代入

  1. 配列やオブジェクトの特定の要素を変数にする方法のこと

基本的な使い方

// オブジェクトを用意
const person = { name: "Teru", age: 20, city: "Tokyo" };

// 各要素を変数として抽出する
const func = ({ name, age, city }) => {
  console.log(`name: ${name}`);
  console.log(`age: ${age}`);
  console.log(`city: ${city}`);
};

func(person);

// 出力結果:"name: Teru", "age: 20", "city: Tokyo"

スプレット演算子

  1. 展開した配列を関数に渡したり、別の配列にコピーできるもの
  2. オブジェクトに対しても使用できる

基本的な使い方

// 配列を用意
const items = [1, 2, 3];

// 配列をコピーして新しい配列を生成
const newItems = [...items];

// newItemsの0番目の値に0を代入
newItems[0] = 0;

console.log(items);
console.log(newItems);

// 出力結果:[1,2,3], [0,2,3]

三項演算子

  1. trueの場合とfalseの場合で条件を分けられるもの
  2. 従来のfor文よりも簡潔に記述できる

基本的な使い方

// 変数を用意
const item = 0;

// 条件式 ? trueの場合 : falseの場合
const getResult = () => {
  return item === 0 ? "true" : "false";
}

console.log(getResult());

// 出力結果: "true"

論理演算子

  1. trueの場合とfalseの場合に限定して処理を記述できるもの
  2. 片方の処理を省きたい場合に使用する

基本的な使い方

// 変数を用意
const item = 0;

// &&演算
// 条件式 && trueの場合
const getResult1 = () => {
  return item === 0 && "true";
}

console.log(getResult1());

// 出力結果: "true"

// ||演算
// 条件式 || falseの場合
const getResult2 = () => { 
  return item === 1 || "false";
}

console.log(getResult2());

// 出力結果: "false"

非同期処理

  1. ある処理の実行中に、他の処理を実行できるもの

基本的な使い方

// 変数を用意
let a = 0;

// async/await (非同期処理をする際に記述するもの)
async function init() {
  // try(正常に読み込めた場合) / catch(正常に読み込めなかった場合)
  try {
    // resolve(正常に読み込めた場合のコールバック関数) / reject(処理が失敗した時に呼ばれるコールバック関数)
    const result = await new Promise((resolve, reject) => {
      a = 1;
      reject(a);
    });
    console.log(result);
  } catch (e) {
    console.log("エラー発生", e);
  }
}

init();

// 出力結果: "エラー発生" 1

まとめ

今回はReact開発で押さえておきたいJavaScriptの記法10選を解説しました。

今回解説したものは全て、React開発において頻出する記法です。しっかりと押さえておくようにしましょう。

Reactの実践的なスキルを身につけたいという方にはUdemyがおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

▶︎【2022年最新】React学習におすすめのUdemy講座3選

最後までご覧いただきありがとうございました。ではまた!

参考文献
Flutter関連の書籍を出版しました!