はじめに

この記事について

本記事は、以下のReact公式サイトにある「REACTを学ぶ」で学習したことを、個人的な学習記録としてアウトプットしていくものです。
REACTを学ぶ
Reactについて何も知らなかった頃の自分に説明するつもりで作成をしています。
今回は
・初めてのコンポーネント
・コンポーネントのインポートとエクスポート
・JSXでマークアップを記述する
の内容について少しずつ触れています。

前提知識

完全なプログラミング初心者向けを意図したものではありません。
HTML、CSS、JavaScriptについてある程度知っている、書いたことがあることが前提になっています。

HTML、CSSは「Webページを作るもの」くらいの理解であれば十分です。

JavaScriptについては、関数、ラムダ式、import/export、分割代入くらいがわかっていれば良いかと思います。

環境構築について

実際にReactを書いて動かしてみようとなった場合、そのための準備（環境構築）が必要です。
しかし、この記事では環境構築については触れません。
（いつか別枠でやってみる気はありますが）

詳細な方法については先人たちがさまざま残してくれていますので、調べてみてください。

個人的には以下の記事がとても参考になりました。
（VS Code、およびDockerを導入している必要があります。）
Qiita - VSCode の Remote Container で React開発環境を構築する

React概要

Reactとは

端的にいうと、Webページやアプリなどの見た目（UI）を表示させるためのJavaScriptライブラリです。
私はJavaScriptについて、画面上で動きをつけたり、入力フォームの制御をしたりする言語だと思っていたので、UIまで作れるというところがかなり衝撃的でした。

Reactのメリット

一番大きいメリットは「『コンポーネント』として部品をまとめ、再利用できること」のように思いました。

Reactにおいては、普段見るWebページのボタンやテキスト、入力欄などの部品を「コンポーネント」という単位でまとめられます。
これらの「コンポーネント」は組み合わせたり、ネストさせたりすることができ、使いまわすことが可能です。

そのため、一度部品として用意しておけばそれらを組み合わせるだけで、簡単にページ作成ができる、ということのようです。

「コンポーネント」については後ほど詳しくみていくこととします。

React実践

まずは書いてみる

環境構築が適切に完了していれば、以下のような画面を表示させるところまではできているはずです。
※create-react-appで作成している想定です。

create-react-appは現在非推奨のようですが、便宜上使用しています。

では、この表示を書き換えていきましょう。まずは、App.jsというファイルを探します。
このApp.jsが上記のページを形成しているファイルです。

だいたいは
my-app > src > App.js
というディレクトリ構造になっているかと思いますが、構成や拡張子等が異なっている場合があります。

App.jsについて、以下の通り書き換えます。

App.js(書き換え後)

import logo from './logo.svg';
import './App.css';

function App() {
  return (
-    {/* 元々の記載 */}
+    <h1>Hello World!</h1>
  );
}

export default App;

return文内の元々の記載をすべて削除し、代わりにh1タグを書きましょう。
ファイルを保存すると、先ほど確認した画面に「Hello World!」が出力されます。

これでお試しの書き換えは完了です。
※更新されない場合はブラウザをリロードしてください。

編集したのはJavaScriptのファイルのみですが、画面表示を書き換えることができました。
ReactがUIを表示するものであることがなんとなく理解できたかと思います。

では、その中身について詳しくみていきます。

何が起きているか

先ほどはJavaScriptを修正しただけで、UIを変更することができました。
上記の書き換えで注目すべきことは2つあります。

1. return文内にhtmlのような記載がある

returnの丸かっこ内に記載されているhtmlのような記載は JSX というものです。
見た目はhtmlのようですが、裏ではJavaScriptのオブジェクトとして扱われます。
JSXにはいくつかルールがありますが、本記事では一旦割愛します。（次回の記事で説明します）

2. 関数がexportされている

Appという関数が定義され、それがexportされています。
これが、Reactにおける「コンポーネント」に該当します。
他のファイルでApp.jsをimportすることで、Appコンポーネントを利用することができます。
なお、関数を定義する際には間数名は大文字で始める必要があります。

次はコンポーネントの利用についてみていきます。

コンポーネントの利用

どのようにコンポーネントを使うのかを確認していきます。
まずはApp.jsと同じディレクトリに適当なファイルを作成してみましょう

今回はTestComponent.jsを作成しています。

そして、以下の通り記載します。

TestComponent.js

function TestComponent() {
    return (
        <div>
            <p>Fruits</p>
            <ol>
                <li>apple</li>
                <li>banana</li>
                <li>orange</li>
            </ol>
        </div>
    );
}

export default TestComponent;

これでTestComonentというコンポーネントが作成できました。
・JSXがreturnで返却されている
・関数名が大文字で始まっている
この2点を確認しておきます。

では、次はApp.jsを編集します。

App.js

import logo from './logo.svg';
import './App.css';
+import TestComponent from './TestComponent.js';

function App() {
  return (
+    <div>
      <h1>Hello World!</h1>
+      <TestComponent />
+      <TestComponent />
+    </div>
  );
}

export default App;

まずは、先ほどexportしたTestComponentをimportします。
今回は2つ分追加をしています。

divタグ、h1タグ、TestComponentタグの3種類のタグで構成されていることがわかるかと思います。
では、保存したあとの画面を見てみましょう

フルーツの箇条書きリストが二つ分出力されていることが確認できます。

このように、コンポーネントを繰り返し利用すれば同じ記載を簡単に増やすことができます。
また、リストの中身を増やす場合、htmlであれば2つのリストそれぞれを修正する必要がありますが、Reactであれば元となっているコンポーネントのjsファイルを1箇所修正すれば済みます。

まとめ

今回はPart1ということで、Reactの概要と簡単な画面表示に絞って記載しました。
ざっくりReactがどんなものか、というのが感覚的に理解できたかと思います。
次回、JSXについての詳細やコンポーネントについてより深く掘り下げます。

Part2はこちら

参考にしたサイト

Reactを学ぶ UI の記述
【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
※Udemyの講座です。