TECH FRONTIER
  • Home
  • React入門 - Reactで開発できる環境を整備するまで

React入門 - Reactで開発できる環境を整備するまで

Reactとは何か

そもそも、Reactとは何か復習しておきましょう。ReactはJavaScriptのライブラリで、UI（ユーザーインターフェース）を作るためのものです。 UIとは例えば、ボタンやアコーディオンメニュー、スライダーなどそういったWeb上に存在する部品になります。 以下のように様々なUIコンポーネントがGitHubにオープンソースとして公開されています

スライダー系ライブラリ

カレンダー系ライブラリ

日付選択系ライブラリ

通知系ライブラリ

Reactを使う利点

Reactと同じように、UIを便利に構築するためのライブラリは他にもいくつかあります。VueやSvelteなどのライブラリは有名です。

では、こういったライブラリと比べた時のReactの利点はなんでしょうか？ 以下が挙げられると僕は考えています

  • TypeScriptとの親和性
  • 配布されているライブラリ数

TypeScriptとの親和性

現在、フロントエンドの開発において、純粋なJavaScriptを使うのではなくJavaScriptに型の概念を付け加えた、TypeScriptという言語を代わりに使うことが多いです。 TypeScriptはコンパイルを必要とする言語で、コンパイルされ純粋なJavaScriptに変換されます。 ReactはTypeScript自体が型的にサポートしているJSXという記法を利用しているのでTypeScriptとの親和性は非常にいいです。

配布されているライブラリ数

また、Reactは2021年9月時点で、世界的に一番使われているUIライブラリなので、その分、公開されているReact周りのライブラリは多いです。 ライブラリがないと自分で一からUIを作ったりしないといけないのでとても大変です。

Reactの特徴

Reactでは以下のようなJSXというHTMLのような記法でUIを表現します。最初は気持ち悪く感じるかもしれませんが徐々に慣れてきます。

import { render } from "react-dom"

const List = ({ items, className }) => (
  <nav className={className} style={{ marginTop: "10px" }}>
    <ul className="list">
      {items.map((item) =>
        <li key={item.id} className="item">{item.label}</li>
      )}
    </ul>
  </nav>
)

const items = [{ label: "react", id: "react"}, { label: "vue", id: "vue" }];
render(<List items={items} className="nav" />, document.getElementById('id'));

JSXの書き方

JSXには以下のような特徴があります。

  • タグに対してクラス名をつけるときはclassではなくclassNameを使う
  • 変数を展開する場合は{}で括る
  • style属性をつけるときは文字列ではなくオプジェクトで宣言する
  • 独自タグは純粋な関数で作れる

タグに対してクラス名をつけるときはclassではなくclassNameを使う

navやulタグに注目してください。クラス名の宣言にclassではなく、classNameが使われていることがわかります。 これはJavaScriptではclassが既に予約語になっているので代わりにclassNameを使う形となっています。 その他にもJSXにはlabel要素のfor要素はhtmlForで書くなどのルールがあります。

変数を展開する場合は{}で括る

また、タグ内で属性に対して変数を使いたい時や、タグに囲われた範囲内で変数を展開したい場合は{}に変数を括って表現します。 例えば、以下の例を考えてみましょう。

<nav className={className}>
</nav>

既にclassNameが変数として宣言されていて、そのclassNameにlistが文字列として代入されていたとします。 すると、このnavタグのクラス名はlistになります。

また、タグに対しては文字列であれば、{}で囲わずに代入することができますが、数字などを入れたい場合は変数でなくても必ず{}で囲います。 また、属性にbooleanを表現したい場合、値がtrueであれば、属性の宣言だけでよく属性名={true}を省略することができます。

<Item order={1} className="item" clickable />

style属性をつけるときは文字列ではなくオプジェクトで宣言する

また、JSXではstyle属性は文字列ではなくオプジェクトで宣言します。これはおそらく、オブジェクトの方がJavaScriptの世界で楽に扱えるからだと僕は思っています。

<nav className={className} style={{ marginTop: "10px" }}>
...
</nav>

ここで、{{}}と{が二重で使われているとぱっと見焦るかもしれませんが、最初の{は変数を括るための{です。 文字列以外は基本最初に{で囲うことにご注意ください。 また、今回の例で、もう一つお伝えしておくポイントとしてmargin-topではなくmarginTopと記述されていることです。 オブジェクトなので、文字列でない限りはハイフンは使えません。ですので、ハイフンを外して次の文字列を大文字に変換してstyleを書くようにしてください。

独自タグは純粋な関数で作れる

以下のようにReactではオリジナルのタグを関数で作ることができます。 JSXを返す関数をいくつも積み上げていって一つのアプリケーションを作っていくのがReactの特徴です。

const List = ({ items, className }) => (
  <nav className={className} style={{ marginTop: "10px" }}>
    <ul className="list">
      {items.map((item) =>
        <li key={item.id} className="item">{item.label}</li>
      )}
    </ul>
  </nav>
)

const Main = () => {
  const items = [{ label: "react", id: "react"}, { label: "vue", id: "vue" }];
  return (<div className="main">
    <List className="nav" items={items} />
  </div>)
}

ここで注意したいのが、独自タグを作る際は、その関数名の最初の文字は必ず大文字にしてください。 例えば先ほどの例で言うと、listではなくListにしてください。 小文字にすると、独自タグではなく、HTML上に本当にlist要素が存在するものとして扱われてしまいます。

Reactを使ってみよう

基本的なJSXの使い方に触れたところで、いよいよReactを使ってみましょう。 Reactを使うにはNode.jsというツールが必要です。 Node.jsはそもそもサーバーサイドで動作するJavaScriptとして活躍していたのですが、Node.jsの中にパッケージを管理するnpmというツールがあり、 それがとても使い勝手が良かったことから、そのパッケージ管理ツールがフロントエンドでも使われるようになり、さらにTypeScriptなどをコンパイルする手段にもNode.jsが使われますから、 モダンな開発にはフロントエンドの開発にもNode.jsは必須になっています。

Node.jsは以下のリンクからダウンロードできます。 https://nodejs.org/ja/

Node.jsはnodenvなどのバージョン管理ツールで管理する方法もありますがそれはまた別の記事で紹介します。

Node.jsのインストールが無事に完了したら、次はターミナルに以下のようなコマンドを入力します。

npx create-react-app my-app

すると簡単にReactを実行できる環境が整備されます。

TypeScriptで環境を用意したい場合は以下のように入力してください。

npx create-react-app my-app --template typescript

その後、出来上がったプロジェクトに移動し、実行します。

cd my-app
npm start

無事に実行できると以下のような画面が表示されます。

次回は、Reactを理解するのに必要なReact Hooksについて学習していきましょう。

前のレッスン

TypeScript入門 - ジェネリクス入門

次のレッスン

Reactが動作するレポジトリをGitHubに作ろう

Author

rapan

ReactやOSSが大好きなソフトウェアエンジニア

あわせて読みたい

React入門 - React Hooksを理解しよう

2021.09.25

学習状況

ログインすることで学習状況を確認できます