React 初心者のための 6 つの重要な JavaScript コンセプト
最も人気のあるフロントエンド ライブラリとして、誰もが React を学びたがっています。ReactJS は基本的に JavaScript です。しかし、それは、ReactJS に移行するために JavaScript のすべてを学ばなければならないという意味ではありません。基本的な JavaScript の概念を理解すると、React の概念をより簡単に理解できるようになり、最終的にはプロジェクトでの作業能力が向上します。
ReactJS に移行する前に、JavaScript について知っておくべき重要な概念の概要を説明しましょう。
1. アロー機能
アロー関数は React で広く使用されています。バージョン 16.8 の時点で、React はクラスベースのコンポーネントから機能的なコンポーネントに移行しました。アロー関数を使用すると、より短い構文で関数を作成できます。
次の例でそれを説明しましょう。
通常機能
function greeting() {
return 'hello'
}
console.log(greeting()) //hello
アロー機能
let greeting = () => 'hello'
console.log(greeting()) //hello
上記の 2 つの関数の出力は同じですが、構文は異なります。アロー関数は、通常の関数よりも短く、きれいに見えます。通常、React コンポーネントは次の構造を持っています。
import React from 'react'
const Book = () => {
return (
<div>Book</div>
)
}
export default Book
アロー関数には名前がありません。名前を付けたい場合は、変数に割り当てます。通常のアロー関数との違いは構文だけではありません。Mozilla開発者向けドキュメントでアロー関数の詳細を学んでください。
2. 破壊
分解は、複雑なデータ構造からデータを取得するために使用されます。JavaScript では、配列とオブジェクトに多くの値を格納できます。値を操作して、アプリケーションのさまざまな部分で使用できます。
これらの値を取得するには、変数を分解する必要があります。扱うデータ構造に応じて、ドット (.) 表記またはブラケット表記を使用できます。例えば：
const student = {
'name': 'Mary',
'address': 'South Park, Bethlehem',
'age': 15
}
破壊:
console.log(student.name) // output Mary
上記の例では、ドット表記はキー「name」の値にアクセスします。ReactJS では、破壊の概念を使用して、アプリケーションで値を取得および共有します。構造化を解除すると、繰り返しが回避され、コードが読みやすくなります。
3. 配列メソッド
React プロジェクトで作業しているときに、配列に何度か遭遇します。配列はデータの集まりです。データは配列に格納されるため、必要に応じて再利用できます。
配列メソッドは、主にデータの操作、取得、および表示に使用されます。一般的に使用される配列メソッドには、map()、filter()、およびreduce()があります。各配列メソッドを適用するタイミングを理解するには、配列メソッドに精通している必要があります。
たとえば、map()メソッドは、配列内のすべてのアイテムを反復処理します。配列の各要素に作用して、新しい配列を作成します。
const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6
ReactJS では配列メソッドをよく使用します。それらを使用して、配列を文字列に変換し、結合し、項目を追加し、他の配列から項目を削除します。
4.短い条件文
条件文は、JavaScript がコード内で決定を下すために使用するステートメントです。短い条件には、&& (and)、II (or)、および三項演算子が含まれます。これらは、条件と if/else ステートメントの短い式です。
次の例は、三項演算子の使用方法を示しています。
if/else ステートメントを含むコード:
function openingTime(day) {
if (day == SUNDAY) {
return 12;
}
else {
return 9;
}
}
三項演算子を使用したコード:
function openingTime(day) {
return day == SUNDAY? 12: 9;
}
短い条件に特に焦点を当てて、さまざまなタイプの条件について学びます。これらは React で広く使用されています。
5. テンプレート リテラル
テンプレート リテラルはバックティック (“) を使用して文字列を定義します。テンプレート リテラルを使用すると、文字列データを操作してより動的にすることができます。タグ付きのテンプレート リテラルを使用すると、文字列内で操作を実行できます。これらは、条件と if/else ステートメントの短い式です。
例えば：
let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`; // Welcome Jane Doe!
6.スプレッドオペレーター
Spread 演算子 (…) は、オブジェクトまたは配列の値を別のオブジェクトにコピーします。その構文は、変数の名前が続く 3 つのドットで構成されます。たとえば、(…名前)。2 つの配列またはオブジェクトのプロパティをマージします。
次の例は、スプレッド演算子を使用して、ある変数の値を別の変数にコピーする方法を示しています。
const names = ['Mary', 'Jane'];
const groupMembers = ['Fred',. ..names, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
スプレッド演算子を使用して、さまざまな操作を実行できます。これらには、配列の内容のコピー、別の配列への配列の挿入、ネストされた配列へのアクセス、および引数としての配列の受け渡しが含まれます。ReactJS でスプレッド演算子を使用して、コンポーネントの状態変化を処理できます。
ReactJS を学ぶ理由
ReactJS が人気があるのには正当な理由があります。学習曲線が短く、信頼性が高く、DOM にすばやくレンダリングされます。スタンドアロン コンポーネントをサポートし、優れたデバッグ ツールを備えています。
ReactJS には、ECMAScript 6 (ES6) からの新しい JavaScript の概念が組み込まれています。JavaScript の基本的な概念を学ぶと、ReactJS でのプロジェクトの開発が容易になります。
さらに、ReactJS には、常に新しいアップデートをリリースしている優れたコミュニティがあります。JavaScript ライブラリを学びたい場合は、ReactJS が最適です。Next.js フレームワークは、ReactJS の制限を補完します。この 2 つの組み合わせにより、ReactJS は強力なフロントエンド ライブラリになります。
コメントを残す