React入門～その１

f:id:f-a24:20200528175704p:plain

こんにちは。フロントエンドエンジニアの藤澤(@f_a24_)です。

前回の記事でこれからはReact・TypeScriptを推し進めていくと言いましたが、今回の記事ではその中からReactについて紹介出来たらと思います。

JavaScriptはある程度分かるけどReactってﾅﾆｿﾚｵｲｼｲﾉ？って方や聞いたことあるけどjQueryぐらいしか使ったことないって方へ向けての記事になります。

Reactとは？
始め方
まとめ

Reactとは？

ja.reactjs.org

ReactはFacebookがOSSとして公開しているユーザインターフェースを構築するためのJavaScriptライブラリです。
と言われても「ユーザインターフェースを構築するため？」となってしまうかもしれませんが、HTMLを部品（コンポーネント）化してWebアプリケーションやWebサイトを作っていくものとイメージすれば分かりやすいかと思います。

では、実際にどのように記述していくのか見ていきます。
まずは下記のようなHTMLがあるとします。

<body>
  <header>
    <h1>Title</h1>
  </header>
  <menu>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ul>
  </menu>
  <main>contents</main>
  <footer>
    <p>© digitalstage Inc.</p>
  </footer>
</body>

このようなHTMLをReactで作ると以下のような記述になります。

// ヘッダー
function Header() {
  return (<header>
    <h1>Title</h1>
  </header>);
}

// メニュー
function Menu() {
  return (<menu>
  <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
    <li>menu5</li>
  </ul>
</menu>)
}

// メイン
function Main() {
  return <main>contents</main>;
}

// フッター
function Footer() {
  return (<footer>
    <p>© digitalstage Inc.</p>
  </footer>);
}

// 部品（コンポーネント）を一つにまとめる部品（コンポーネント）
function App() {
  // 部品（コンポーネント）は一つのタグで返す必要があるため、
  // 実際にHTMLには描画されない空タグ（<></>）を使用
  return (<>
    <Header />
    <Menu />
    <Main />
    <Footer />  
  </>);
}

// Appをbody直下に描画する
ReactDOM.render(<App />, document.querySelector('body'));

JavaScriptの関数を使ってHTMLを部品（コンポーネント）化して最後にまとめて、起点となるタグ（今回はbody）直下に描画するといった仕組みです。

一見、「あれ、普通にHTML書いた方が記述量も少なくて楽じゃない？」と思われるかもしれませんがこのようにするメリットもあります。

1. 部品（コンポーネント）ごとにファイル分割することができる

上記ぐらいの記述量であれば1ファイルでも見れるかと思いますが、何千行何万行と記述量が膨大になるとどの部分に何が記述されているのか把握するのが大変になってきます。そうなった場合、部品（コンポーネント）ごとにファイル分割することで管理するのが楽になります。

2. 部品（コンポーネント）を使いまわしできる

部品（コンポーネント）化することで同じような部品（コンポーネント）は使いまわしできるので、記述量を減らすことができます。Webアプリケーションで言うとボタンやチェックボックスなどのフォーム部品を共通化することと思えばイメージしやすいかもしれません。

3. 部品（コンポーネント）という範囲があることで、意図しないミスを減らすことができる

HTMLに対してCSSやJavaScriptで装飾や処理をした場合、単純なものだとなかなか起こりにくいですがより複雑になってくるとこの部分を変えたら別の部分も変わって表示が崩れたや動作がおかしくなったといったことが起こりがちです。こういったミスを部品（コンポーネント）という範囲を設けることで防ぎやすくなります。

4. 部品（コンポーネント）内で表示と処理がまとめられる

これに関しては人によって差があるかと思いますが、部品（コンポーネント）ごとにHTML・CSS・JavaScriptがまとまっているので分かりやすいです。個人的にHTMLファイルからidやclassを探して、CSSやJavaScriptファイルの該当する部分を探すみたいな作業はファイルを行ったり来たりするのが面倒だと感じているので、部品（コンポーネント）ごとのファイルで作業が済む点は気に入っています。

また、JavaScriptの機能を使うことでより簡潔にHTMLを構成することが出来る点も魅力だと思います。
上記のメニューを例にすると、JavaScriptの配列を使って以下のように記述することができます。

// メニュー
function Menu() {
  const no = [1, 2, 3, 4, 5];
  // {}で囲うことでJavaScriptの変数や関数を埋め込むこと出来る
  return (<menu>
  <ul>
    {no.map(function(n) {
      return <li>menu{n}</li>;
    })}
  </ul>
</menu>)
}

始め方

Reactを使う方法は色々ありますが、もっとも手軽に始められるのは下記のようなオンラインエディタだと思います。

CodePen

CodePenの場合はJS設定を下記のようにする必要があります。

JavaScript PreprocessorをBabelにする（JavaScriptでHTMLタグなどを扱えるようになる）
Add External Scripts/Pensでreactとreact-domを追加

CodeSandbox

CodeSandboxの場合はReactのテンプレートが用意されているのでそちらを使用します。

ローカル環境で始めたい方はこちらのHTMLをダウンロードして始めることも可能です。 https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

まとめ

今回の記事ではまず触りだけを紹介しましたが、Reactの機能はまだまだあります。
Reactは複雑なWebアプリケーションを構築する際に力を発揮しますが、慣れてくるとその書き心地の良さからシンプルなWebサイトなどもReactで作る方が楽だと感じます。
そういった点も含めて、次回以降の記事で他の機能や魅力を少しずつ紹介出来たらと思います。

Atsushi Fujisawa カテゴリーの記事一覧 -

DS INSiDE

creators blog

React入門～その１

Reactとは？

始め方

まとめ