React を始める前に学ぶべき JavaScript の重要な概念

React は、現実世界のアプリケーションを構築するために使用される人気のある Javascript ライブラリです。熟練した React 開発者になるには、JavaScript の基本的な概念を理解することが重要です。多くの人にとって、React の学習は難しいように思えるかもしれませんが、これらの基本概念を理解すれば、学習プロセスが容易になる可能性があります。
この記事では、React を開始する前にすべての開発者が知っておくべき 15 の重要な概念について説明します。各概念は、その重要性を示す例とともに説明されています。
React を始めたばかりの場合、またはライブラリを探索しようとしている場合は、この記事が役に立ちます。

JavaScript の 15 の重要な概念

1.コールバック関数
関数は、コードを反復せずに複数回呼び出すことができるプログラムの構成要素です。
関数のタイプの 1 つは コールバック関数 です。
情報が表示される前にユーザーにブラウザ内の矢印をクリックしてもらいたい場合、または API からのデータの取得が完了した直後にコードを実行したい場合は、コールバックの力を利用できます。
コールバック関数は、関数またはイベントの発生後にタスクを実行し、関数の実行を制御できるようにします。
これは、別の関数に引数として渡される関数であり、非同期操作またはイベントの完了後に何が起こるかを指定するために使用されます。

例

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.アロー関数
Arrow Functions は ES6 で導入され、関数構文をより簡潔に記述できるようになりました。アロー関数はその簡潔さから React で広く使われています。

例

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Array.Map() メソッド
React では、不要なバグやパフォーマンスの問題が発生する可能性があるため、既存の配列を変更することは一般に推奨されません。このため、開発者は配列メソッドを採用します。関数配列メソッドは、元の配列を変更せず、既存の配列から新しい配列を返します。
関数配列メソッドの 1 つは、Array.map() メソッドです。
Array.map() メソッドは、既存の配列をループし、同じ長さの新しい配列を返します。既存の配列に影響を与えることなく、新しい配列に変更を加えることができます。

例

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Array.Filter() メソッド
Array.filter() メソッドは、興味深い論理的な方法で機能します。これらのメソッドを使用すると、true または false の条件に基づいて配列の一部の要素をフィルターで除外できます。
ステートメントが false の場合、そのステートメントは自動的に除外され、true の場合は、配列から不要な要素を削除するための適切なアプローチが維持されます。

例

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

5.Array.reduce() メソッド
名前が示すように、array.reduce() メソッドは配列全体を単一の値に削減します。これは、配列の要素を合計またはグループ化するための最良の方法の 1 つです。

Reduce メソッドの 3 つの重要なキーワード

• 初期値 (オプション): アキュムレータの開始値。指定しない場合、最初の配列要素が初期値として使用され、反復は 2 番目の要素から開始されます。
• アキュムレーター (必須):以前の反復から累積された結果。
• 現在の値(必須): 処理中の現在の要素。

例

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

6.テンプレートリテラル
テンプレート リテラル を使用すると、文字列に Javascript 変数または任意の JavaScript 式を含めることができます。
これは、中括弧 ${} で囲まれたバックティックとドルを使用して、JavaScript で文字列を作成する簡単な方法を提供します。

例

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

7.三項演算子
三項演算子 は、if..else ステートメントを記述するためのシンプルかつ簡潔な方法を提供する条件演算子です。
React は、if..else ステートメントを直接サポートしていません。これは、React に存在する JSX として知られる構文式に適していないためです。
JSX は、JavaScript、CSS、および React コンポーネントを HTML に埋め込むことを可能にする JavaScript の構文拡張です。
React 構文はステートメントというよりも式として考えられており、三項演算子はそれに適した演算子として機能します。

例

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

8.短絡演算子と論理演算子
論理演算子 は、複数の条件を 1 つの式に結合するために使用されます。 JavaScript に存在する主な論理演算子は次のとおりです。

• AND- は両方のオペランドが true の場合にのみ true を返します。
• OR- 少なくとも 1 つのオペランドが true の場合、true を返します。
• NOT- オペランドの真の値を反転します。

ショートサーキット は論理演算子で発生する動作で、式全体の結果は最初のオペランドだけで決まるため、特定の条件下で 2 番目のオペランドが評価されません。

短絡の仕組み

そして (&&)

• 最初のオペランドが false の場合、式全体が false になるため、2 番目のオペランドは評価されません。
• 最初のオペランドが true の場合、2 番目のオペランドが評価されて返される値が決定されます。

または (||)

• 最初のオペランドが true の場合、式全体が true になるため、2 番目のオペランドは評価されません。
• オペランドが false の場合、2 番目のオペランドが評価されて、返される値が決定されます。

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

9.RestSpread 演算子
新しいプロパティを既存の配列に追加する場合、または既存の配列のグループをマージする場合、スプレッド演算子が頼りになる演算子です。
Spread Operator (...) 3 つのドットで示され、配列を個々の要素に展開し、配列の先頭で使用されます。次の用途に使用されます:

• 配列を結合する

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• 配列のコピー

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

• 既存の配列に新しいプロパティを追加します

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

• 関数に引数を渡す

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Rest Operator(...) も 3 つのドットで示されますが、配列の最後に書き込まれます。構造化されていないオブジェクト/配列から複数のプロパティを収集するために使用されます。

例

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

10.オプションのチェーン
オプションのチェーンは、null または未定義の値を簡単な方法で処理します。これは、チェーン内で null または未定義であると思われるプロパティまたは中間プロパティにアクセスするために使用されます。自動的に短絡され、未定義になります。理想的には、オプションのチェーンがないと、エラーが返されます。
場合によっては、すべての値がオブジェクト内に存在するかどうかわからない場合があります。オプションのチェーンは、null 値と未定義の値をチェックする構文であるため、使用することを検討してください。

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

11.配列の構造化
配列から複数のプロパティを一度に呼び出す必要がある場合、コードが煩雑になる可能性があります。構造化を使用すると、これを防ぐことができます。
構造を分割すると、配列の値を個別の変数に組み立てることができます。
分割は次の目的で使用できます

• 要素をスキップします
• ネスト要素
• デフォルト値を設定します。

React を始める前に無視すべきではない重要な概念は、構造化です。

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

12.不変配列の操作
JavaScript では配列を変更できます。つまり、配列内のプロパティを追加、削除、更新できます。
ただし、React では、状態の整合性を保持し、React が変更を確実に検出できるようにするために、不変性が優先されることがよくあります。 React で不変の配列を操作するには、元の配列を変更せずに配列内の項目を追加、削除、更新するために、マップ、フィルター、スプレッド演算子のようなメソッドがよく使用されます。

例

• アイテムの追加

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

• アイテムを削除するには

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• アイテムを更新するには

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

13.非同期/待機関数
非同期 JavaScript は、完了までに時間がかかるタスクの実行方法を制御します。 JavaScript は同期言語です。つまり、単一スレッドでコードを次々に実行します。
データベースからデータをフェッチする場合、フェッチが完了する前に一部のコードをロードする必要がある場合があります。
非同期関数を使用すると、操作の完了を待たずにコードを実行できるため、ユーザー エクスペリエンスと全体的なパフォーマンスが向上します。
React では、アプリケーション プログラミング インターフェイス (API) を頻繁に操作することになるため、この関数がどのように機能するかを理解しておくことが重要です。

例

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

14.約束
Promise は、非同期操作の最終的な完了または失敗を表す組み込みオブジェクトを指します。
Promise は、次の 3 つの状態のいずれかで存在します。

• 保留中: 満たされても拒否されていない初期状態。
• 完了: 操作は正常に完了しました
• 拒否: 操作でエラーが発生しました。

Promise は JavaScript で重要な役割を果たしているため、学習することが重要な概念です。これにより、よりクリーンなコードを作成し、体系的にエラーを処理し、全体的なパフォーマンスを向上させることができます。

15.try.catch.finally を使用したエラー処理
データの取得中にエラーが発生し、これらのバグを見つけたり修正したりする方法について考え悩むことがあります。
キーワードを使用すると、データの取得がより構造化された方法で処理されます。
Try..catch..finally ブロックは、JavaScript の強力なエラー処理構造であり、エラーが発生したかどうかに関係なく、潜在的なエラーを正常に処理し、特定のコードを実行できるようにします。
コード内の特定のエラーを見つけるには時間がかかる場合があります。これらのブロックを活用すると簡単になります。

• Try- エラーをスローする可能性のあるコードを囲みます。
• Catch - try ブロック内でエラーがスローされた場合に実行します。エラーオブジェクトを引数として受け取ります。
• 最後に - エラーが発生するかどうかに関係なく実行します。

例

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

結論

上で説明した JavaScript の重要な概念についての洞察を得ることで、学習プロセスが容易になり、熟練した React 開発者になることができます。これらの概念をまだ学習していない場合は、学習するように努めてください。コメントセクションでお気軽にご提案を共有してください!

以上がReact を始める前に学ぶべき JavaScript の重要な概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。