[React]挫折しないための基礎知識をおさえる(component,props,state,JSX...etc)
挫折しないためのReact基礎知識
初めに:私の基礎学習に使用した動画について
私はUdemyの以下の2つの動画をベースにReactの学習を進めた。
上段の"基礎から始める挫折しないためのReact入門"を行った上で、
下段の"【2023年最新】React(v18)完全入門ガイド"で学習しました。
（個人的には最初下段のもので学習したが少々難しかったため、
JSの知識もそこまで深くなかった自分にはこの順序が理解しやすかった。）
■ はじめに...
Reactで開発を行う上でのベースとなる知識について(大事な要素について)
今日はここにまとめていきたいと思います。
開発しながらたくさん調べ、記事にしましたが、
抜けていると感じる部分や、補足事項、間違い等あればコメントしていただけると助かります！
よろしくお願いいたします。
理解の助けになった教材等あればそれもコメントで教えていただけると嬉しいです！(^^)
■ 挫折しないために...
上記タブの中で書いた通り、私は
モダンJavaScriptの基礎から始める挫折しないためのReact入門から始めました。
ここで、述べていたことがすごく納得できたので要約します。
興味がありましたら見てください！
"挫折しないために"要約
多くの挫折理由：順序組みができていないこと。
=> JSがわかっていないのか？それともReactがわかっていないのか？
そもそもどこまでがフロントなのか？
そこを踏まえた学習手順
- モダンJavaScriptの概念理解
- JSの機能理解
- Reactで置き換える
- ToDoアプリ作ってみる
[補足：ToDoアプリを作るということ]
これに関しては、私は最初のころなぜエンジニアの先輩方は"ToDoアプリ作ってみた？"というのか、
よくわかっていなかった。笑
ToDoアプリを作成してみることによって、
- CRUD操作
- form処理（GET・POSTリクエスト）
という基本的な機能(必須の技術)を修得が可能だからだった！
React
- ユーザインターフェース構築のための JavaScript ライブラリ.
[Reactの特徴]
以下の特徴について認識すべきと考えています。
- JSX記法について
-
Component指向型のフレームワーク
- import/exportについて
- stateとpropsについて
- 仮想DOMによる高速なレンダリング
- SPAだということ(SPAの概念)
■ JSX記法： "JavaScriptにマークアップを組み込む"
JSX（JavaScript XML）とは、Reactで使用されるJavaScriptの拡張構文。
コンポーネント指向の開発に従っており、ECMAScript（ES6）に基づくJavaScriptを拡張し、
XML / HTMLに似たテキストをJavaScript、Reactコードと共存できるようにしたもの。
JavaScriptの中に、HTML構造やコンポーネントを記述するための記法を提供しており
jsxを使用することにより、レンダリングロジックとコンテンツを同じ場所に保つことができる。
Reactは,(仮想DOMを使用しレンダリングしていく)JavaScriptファイルで構成されているため、
JavaScript内でHTMLを返さなければならないため使用される。
(必ず使用しなければならないものではないが、ほとんどの開発者は使用しているし推奨されている。)
補足：JSXはコンパイルしてJSオブジェクトになり実行される
前述したように、ReactはJavascriptのライブラリだ。
そのためJSXなどのような、Javascriptエンジンやブラウザがサポートされていない言語は
JSオブジェクト(別名：React要素)に変換（コンパイル）されてから使用されることになる。
そしてコンパイルするためにBabelと呼ばれるトランスパイラを使用することが多い。
Babelとは:
ECMAScript 15以降のいわゆるモダンなJavaScriptの構文や機能を活用して書かれたコードを、
それ以前の古いJavaScriptコードに変換してくれる、
JavaScriptコンパイラやトランスパイラと呼ばれるツールです。
実行環境がモダンなJavaScriptをサポートしていなくても、
Babelを用いることで開発環境においてはモダンなJavaScriptの持つさまざまな構文や機能を用いて、
高い生産性で開発を行えるという利点があります。
トランスパイラとは
トランスパイラとは
新しいJavaScriptの記法を古い記法に変換してくれる。
どのブラウザでも動くようにするのが目的。
トランスパイラ（Transpiler）は、一種のコンパイラの一部であり、
一つのプログラミング言語から別のプログラミング言語にソースコードを変換するツール。
トランスパイラは、ソースコードを解析し、元の言語の構文や機能を
別の言語の等価な構文や機能に変換します。
これにより、Reactの仮想DOM（Virtual DOM）が作成され、UIの構築や更新が可能になる。
■ 重要なJSXのルール
1. 常に１つのルート要素を返す
常に1つのルート要素を返すという決まりがあります。
＝ JSXのコードはすべて、一番外側にある1つの要素に収めなければならないということ。
fragmentの使用方法
[Fragment構文]
(https://react.dev/reference/react/Fragment#fragment)
たとえば、
以下のように２つのコードがあったとして、
囲って一つにしなくてはいけないため、divを使用したとする。
const App = () => {
return (
<div>
<h1>こんにちは</h1>
<p>お元気ですか？</p>
</div>
);
};
しかしこれでは、h1とpを表示したいだけなのに、不要な要素までレンダリングされてしまう。
これを解決するのが、fragment
エラー回避のために囲いたいときはfragment！
16.2以降では、<> </>で省略することが可能。
const App = () => {
return (
<>
<h1>こんにちは</h1>
<p>お元気ですか？</p>
</>
);
};
Fragmentは、余分なDOMノードを生成せずにコンポーネントをラップするために使用される。
実際には、Fragmentは仮想DOMには現れず、
単に子要素をラップするための一時的なコンテナとして機能します。
これにより、不要なラップ要素がHTMLの構造に影響を与えず、柔軟性とパフォーマンスの向上が実現する。
Fragmentは主に以下の場面で使用される
- 複数の要素を返す必要があるが、不要な追加のDOMノードを生成したくない場合。
- コンポーネントの戻り値として、複数の要素を含むコンポーネント階層を作成する場合。
- mapやforEachなどの反復処理を行い、複数の要素を動的に生成する場合。
2. classの代わりにclassNameを使用する
HTMLでは、要素のCSSクラスを指定するために、class属性を使用するが、
JSXでは、代わりにclassName属性を使用する必要がある。
3. JavaScriptの式は中括弧を使用する
JSXコードの中にJavaScriptの式を含める必要がある場合、中括弧{}で囲む。
//ex.
**<div>{Variable}</div>**
他にもありますが、ここまでにします(^^)
以下のページに詳しくあります！
■ コンポーネント思考
自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、
これらを組み合わせることで複雑なユーザインターフェイスを構築します。
コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、
様々なデータをアプリケーション内で簡単に取り回すことができ、かつ
DOMに状態を持たせないようにすることができます。
--Docsより
ユーザーインターフェース（UI）を構築するための再利用可能な部品を"コンポーネント"という。
できるだけ部品を小さなコンポーネントに分割することが推奨されている。
その理由としては、以下が挙げられる。
■ コンポーネントが大きくなると、React要素内のネストが深くなるため変更が難しい
■ 部品の再利用性が低くなる。
コンポーネント化の利点
- 再利用性の向上
- 可読性の向上
- 疎結合にできる(バグ減らせる９)
コンポーネントの命名規則,定義方法について
コンポーネントの命名規則,定義について
- 拡張子には.jsx .tsxを使用する。
- パスカルケースを使用する。
- ドメインと機能を表したものにする。
- ファイル名とコンポーネント名を一致させる
function Welcome () {
return <h1>Hello!</h1>;
}
これを他ファイルで呼び出す出す際は、
:
<Welcome />
:
上記タブに、定義方法を示したが、
この後もう一つ、import と exportの記述が必要。
import と export
-
ExportとImportは、両方ともJavaScriptでモジュールを扱うための構文です。
-
JSチュートリアル：ExportとImport
ExportとImportについて知るにあたり、ESモジュールについても知っておきたいところです。
※モジュールがわからない場合はここのページに戻る。
一言で言えば、モジュールは単なる1つのファイルです！！
import
- 他のモジュールから関数や変数を読み込むための構文.
- ex. module.jsで exportした
helloという関数をmain.jsで使用する
import {hello} from "./module.js";
hello();
//hello
- importは複数読み込むとき、基本的に上にまとめて記述すること。
- 同じファイルから複数importする場合は同じ行でまとめて記述可能。
import {hello,〇〇} from "./module.js";
Export
- モジュールから外部に公開する関数や変数を指定。
- 先頭にExportを付けることにより、外部からアクセス可能な関数になる。
複数の書き方がある
ex. 1. 変数の先頭につける方法
export const hello = () => {
console.log("hello!")
};
このようにすると、helloという関数が外部でも使用できるようになる。
ex. 2. objectリテラルとしてあげる
class = User{
constoructor(name){
this.name = name;
}
}
export {User}
上で定義したUserクラスが外部から使用できるようになる。
※arrow関数のルールで、
arrow関数には**thisが存在せず、その代わりに外側のスコープのthisを参> 照**する。とあったと思うがこういうことだ！
■ コンポーネントとprops、stateについて
最初にざっくりな説明書きをすると...
コンポーネントとprops
■ props:コンポーネントに渡す引数のようなもの。
コンポーネントに渡す引数のようなもので、
親コンポーネントから子コンポーネントへ値を渡すための仕組みをいう。
propsは、コンポーネントに情報を渡すために使用されるオブジェクトと言える。
propsは読み取り専用で、子コンポーネント内で変更することはできない。
propsを使用することで、コンポーネントが外部からデータを受け取り、
それに基づいて表示や振る舞いを変更することができる。
補足：
[コンポーネントの親子関係ってどういうこと？？]
親 : コンポーネントを利用する側
子 : コンポーネントを利用される側
state
各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組みのことを"state"という
コンポーネント上でやりとりされる情報、条件によって動的に変わる部分をstate（状態）として管理していく。
stateは可変で、コンポーネント内で変更することができる。
stateの変更は、コンポーネントの再描画をトリガーし、UIの変更を反映する。
useStateを使用していく。
【一般的な構文】
const [state, setState] = useState(initialValue);
上記のコードでは、stateは現在の状態の値を保持する変数であり、
setStateは状態を更新するための関数。
initialValueは状態の初期値を指定する。
ここの使い方だったりは、作成しながら学ぶことがいいと思うため、今回は概念だけで省略します。
■ 仮想DOMによる高速なレンダリング
そもそもDOMとは？
そもそもDOMとは
- Document Object Modelの略称。
- "DOMインターフェース"や"DOM API"とも呼ばれる。
-
Webページの構造やコンテンツを表現するためのプログラミングインターフェイスであり、
JavaScriptなどのプログラムからWebページを動的に変更したり
操作したりするために使用される。
⇒ HTMLやXMLの文書を、プログラムから操作するための仕組み(APIの一種) - JavaScriptからWebページの要素や属性、テキストなどを
アクセスするためのルールや手順を提供している。
レンダリングコスト高・コードが複雑化
仮想DOMとは、
主にReactやVueで採用されているSPAを実現するために使われている技術の1つ.
JavaScriptのオブジェクト上で仮想的に作られたDOM
⇒ いきなりDOM操作せずにJS上で仮想DOMを操作し差分を出してからDOMに反映する。
変更前と変更後のオブジェクトを比較し、差分があったところだけをDOMに反映する。
そして、反映されたリアルDOMをブラウザがレンダリングするという動きになっている。
実際にイメージするのは少々難しいが、実際に開発者が意識しなくてもいいようになっているため、
裏側でこんなことが起きている、くらいでOK!
SPA
■ SPA
Single Page Applicationの略。
単一のHTMLファイルから構成されるWebアプリケーションのこと.
(=> HTMLは１つのみで、JavaScriptで画面を書き換える。)
(モダンJavaScriptは、SPAが基本になっている！)
SPAではこの仮想DOMという技術を使うことで、差分のみを描画することで高いUXを実現している。
"宣言的なView"はこの仮想DOM(VDOM)の実装、及び概念の上に成り立っている。
Docs:宣言的なView
補足："宣言的(Declarative)なView"
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。
アプリケーションの各状態に対応するシンプルな View を設計するだけで、
Reactはデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、
デバッグのしやすいものになります。
Reactにおける「宣言的なview」とは、
UIを記述する際に、
目標の状態を明確に宣言し、Reactがそれを自動的に処理するというアプローチを指す。
例えると...
宣言的なviewは「目的地に到着するための道順を指示する」ことに似ている。
この利点は...コードの読みやすさと保守性の向上だ。
コンポーネントが目標状態に基づいて自動的に再描画されるため、
開発者は手動でDOMを操作する必要がなくなる。
その結果コードはより明確で予測可能になり、バグの発生や予期しない副作用のリスクが低減される。
今日はここまで！
Discussion