React.jsの基礎　SPA、ライフサイクルとは何か

こんにちは。LiSMOtech株式会社の大石です。今回はフロントエンド開発で人気のReact.jsについての記事を書こうと思います。

React.jsの基礎、SPA、ライフサイクルについて説明を主に記載します、わかりにくい用語などはなるべく補足説明を書きたいと思いますが、自分でも調べてみると覚えやすいと思います！！

React.jsとは

React.jsとはFacebookが開発したJavaScriptのライブラリであり、主にUIを構築するために使用されます。

UI（User Interface）とは、ユーザーが直接操作することができるシステムやアプリケーションの外観や操作方法のことを指します。

Reactを使用することで、コンポーネントベースの開発、多数のライブラリ、フレームワーク、ツールの使用、仮想DOMを使用することでの高速で効率的なレンダリングを実現しています。

その他にもさまざまなメリットがあるため、人気のあるJavaScriptフレームワークの一つとなっています。

Reactの特徴

・JSX記法

・宣言的なView

・コンポーネント指向

・一度学習すれば幅広く使える

・必要な部分だけが更新される仮想DOM

SPAとは

SPAとは、Single Page Applicationの略で１つのHTMLファイル内でJavaScriptなどの技術を使ってページの内容を変化させるアプリケーションのこと。

従来は各ページごとにHTMLファイルを作成し、画面遷移を行なっていたのでページ遷移のたびにヘッダーやフッターなども全て読み込む必要がありました。

SPAでは最初にHTML、CSS、JavaScriptなどのファイルを読み込み、その後の画面遷移は差分のデータだけを取得して表示させることが出来ます。SPAにすることで、差分のデータのみを読み込むので、利用中の通信量が減るためアプリ使用時の待ち時間を短縮できるようになりました。

SPAのデメリット　

最初のローディングに時間がかかる。

JSX記法とは

JSX記法ではJavaScriptの識別子の命名規則に従っているため、HTMLの属性名をキャメルケース（小文字で始まり、単語の区切りに大文字を使用する）で書く必要があります。

また、一部属性の名前が違ったりするので気をつけてください。

「class」の代わりに「classsName」、

「for」の代わりに「htmlFor」を使用する。

僕自身、「htmlFor」の所を「for」と間違えて書いてしまう事があります…笑

ライフサイクルについて

Reactのライフサイクルは、Reactコンポーネントが生成、更新、削除されるときに発生するメソッドのことであり、これらのメソッドを使用することで、コンポーネントの動作をカスタマイズすることが出来ます。

ライフサイクルには３つの段階があります。

・マウント（Mounting）

・更新（Updating）

・アンマウント（Unmounting）

マウント（Mounting）とは、Reactのコンポーネントが作られて、Webページに表示されるときの状態のこと。

更新（Updating）とは、コンポーネントが状態を変えたときのこと。

アンマウント（Unmounting）とは、コンポーネントがWebページから消えるときのこと。

クラスコンポーネントと関数コンポーネントでカスタマイズ方法が変わり、クラスコンポーネントではメソッドを使用し、関数コンポーネントではフックを使用します。

他のサイトなどを調べるとメソッドを使用した解説が多かったので、この記事では関数コンポーネントの場合を記載します。

よく使用するフックなどで解説するのでイメージしやすいと思います。

関数コンポーネントでライフサイクルに関連するフック

マウント（Mounting）

・useState: コンポーネントの状態を管理するためのフックでコンポーネントがマウントされるときに呼び出されます。

・useEffect: コンポーネントがマウントされた後に実行する処理を指定するためのフック。

更新（Updating）

・useState

・useEffect:更新された後に処理を実行できる。

アンマウント（Unmounting）

・useEffect:コンポーネントがアンマウントされる前に実行する処理を指定できる。

流れとしてはこんな感じです。

今回の記事は以上になります、自分でも調べて見ると理解が深まるのでおすすめです！

今後もReact.js、JavaScript関連の技術や知識などのついて発信していきますので一緒に勉強しましょう！！