はじめに

はじめまして！ガク@Necono_Engineerと申します。
プログラミングスクールRUNTEQで、現在RubyとRuby on Railsを中心に学んでいます。この度フロントエンドの技術Reactについて学びましたので、その知識をシェアしたいと思います!

↑ ( アイコンカッコよくて好きです...)

概要

今回、ちょっと勇気を出して新しい分野、Reactに手を出してみることにしました。その大きなきっかけは、ポートフォリオ作成です。僕にとってReactは未知の領域です。RUNTEQでの学びは、RubyとRuby on Railsが中心になります。それでも、現在のウェブ開発のトレンドを見逃すわけにはいかないと思い、ポートフォリオをより引き立てるためには、Reactの知識が必要だと感じました。
この記事では、React初心者がゼロから少しずつ学んだことを共有していきたいと思います。

プログラミング初学者のため、内容に誤りがある可能性がございます。
もし間違いがあればご指摘いただけると幸いです。

初めてのReact

Reactはシングルページアプリケーション（SPA）の開発によく使われるJavaScriptライブラリです。React自体はRuby on Railsのようなフレームワークではありません。あくまでもUIを構築するだけのライブラリです。

ライブラリって？

ライブラリとは再利用可能なプログラムを1つのファイルにまとめたものです。
「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができるツールセットのようなものです。

SPAって？(Single Page Application)

ReactはSPA(Single Page Application)で作成されています。
SPAはその名の通り(1つのページのアプリケーション)基本的にHTMLファイルは1つのみでJavaScriptで画面を書き換えることで画面遷移などの動きを実現しています。

従来のWebシステム


従来のWebシステムの場合、ページ遷移の度にサーバー側にリクエストが送られます。この場合、サーバー側からHTMLファイルを返却するためページ遷移の際に少しだけラグがあります。

SPAの場合

1️⃣ユーザーが「Webページ見せて~」とリクエストを送るとHTMLファイルを返却してくれます(ここまでは従来と一緒）
2️⃣その後、画面表示を変更したい場合はHTMLはそのまま変更することなく、JavaScriptでDOMを書き換えてデータを画面に反映、遷移を実現します。

データのみの取得であれば非同期で実行できるため、ラグがなく快適な閲覧が可能になります!

DOM(Document Object Model)とは？

ドキュメントオブジェクトモデルという名前の通り、DOMはWebページを構成するHTMLタグやテキスト、属性などの情報を一つ一つの「オブジェクト」として管理する方法です。

イメージとしては、Webページを一つの大きな「ツリー」のように考えます。
そのツリーにはたくさんの「枝」と「葉」がついていると想像してみてください。

この「ツリー」全体がDOMであり、それぞれの「枝」や「葉」がWebページの要素（例えば、ヘッダー、画像、テキストなど）を表しています。

仮想DOM

Reactには仮想DOMを構築する機能が備わっています。

たとえばウェブページに何か変更があったとき、通常だとページ全体をリロードして更新する必要があります。

しかし、それだと時間もかかりますし、ユーザーにストレスをかけてしまいます。

(この画面でイライラした記憶...)

そこで仮想DOMの登場です。
仮想DOMはDOMのコピーを作成し、そこに変更を加えたものになります。

そして、変更が必要な部分だけをピンポイントで更新します。
変更差分だけを素早く描画することができるので、ウェブページの表示が速くなります。

コンポーネント指向とは？

Web開発を部品単位(コンポーネント)に小さく分けて進める考え方のことです。
例）UIを構成する部品(ボタン、入力フォーム、モーダル、タブ）など
コンポーネントとはそれらを再利用できる単位で切り出したJavaScriptの関数のことを言います。
JavaScript（特にReactなどのフレームワーク）では、これらのコンポーネントは関数として定義されます。これを「関数コンポーネント」と呼びます。

(いろんな部品(コンポーネント)を作って再利用しやすくする)

関数コンポーネントの定義方法

関数コンポーネントは以下のように定義します。

function コンポーネント名( 引数 ) {
return ...JSXによる表示...;
}

JSX(JavaScript XML)とは？

Reactの要素を生成するJavaScriptの拡張構文です。
ReactではJSX記法と呼ばれる書き方を使用します。JavaScriptのファイル内に直接、HTMLと似たようなタグの記述ができます。

HTMLとJSXの違いについて

<button class="post" >投稿する</button>

<button className="post" >投稿する</button>

CSSを適用する場合、JSXではclassではなくclassNameと記述します。
JSXのルールとしてreturn内は1つのタグで囲われている必要があります。

const App = () => {
return (
  <> 
  <h1>こんにちは</h1>
  </>
 );
};

<>空のタグで囲んであげることで1つの要素として扱われるようになります。(Fragmentなど他にも1つのタグで囲む方法はありますが今回は割愛します）

import/exportについて

Reactはjsxファイル(コンポーネント:部品）をimportすることでコンポーネントをレンダリングします。
export const ファイル名
import { ファイル名 } from “./ディレクトリ名
上記のようにexportすればimportすることで他のファイルの内容をimportしたファイルで使用可能になります。

export const Square = () => {
return ( ~内容
 );
};

import { Square } from "./components/Square"

Reactの醍醐味

作成したコンポーネント(部品）をLEGOのように組み合わせて

大きなアプリを作ることができます！

まとめ

今回は初歩の部分だけの紹介になりましたが、Reactには他にもState、Props、React Hooks、再レンダリングなど覚えることがたくさんあります。まだまだ道のりは長いですが記事を書くことでReactのことをもっと知っていきたいと思えました！

【React】って何だ？