Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Reactの基本を学ぼう~コンポーネントの仕組みと作り方

基礎からはじめるReact Native入門 第3回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/08/23 11:00

 React Nativeでは、ReactというJavaScript向けのUI状態管理ライブラリを使用します。Reactを用いることで、ブラウザ向けのアプリもモバイル向けのアプリも作ることができますが、その使い方はほとんど同じです。今回は、一度使い方を覚えてしまえばさまざまなプラットフォームに向けてUIを書くことができる、Reactの基本について学んでいきましょう。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

Reactの特徴

 React(リアクト)は、UI(ユーザーインターフェース)を構築するためのJavaScriptライブラリです。

 上記の公式サイトでは、次の3点が特徴として挙げられています。

  • 宣言的なView
  • コンポーネントベース
  • 一度学習すれば、どこでも使える

 宣言的なViewとは、XMLライクな文法を用いて構造を定義する(宣言する)ことで、アプリケーションの表示(≒ビュー)を構築できるといった特徴を表しています。また、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新するといった特徴も表しています。この特徴については、本記事の「JSX」の節で解説します。

 コンポーネントベースとは、レイアウト構造とスタイル定義と状態管理をまとめたコンポーネント(タグ)を定義し、これを組み合わせることで複雑なUIを構築できる特徴を表しています。この特徴については、本記事の「コンポーネントとProps」の節で解説します。

 一度学習すれば、どこでも使えるとは、Reactがブラウザ向けのアプリケーションを作るためだけでなく、React Nativeを通じた、モバイル向けのアプリケーションの作成や、Node.jsサーバー上でのHTMLレンダリングにも利用でき、Reactについて学習したことが多くの場所で再利用できるという特徴を表しています。また、UIの構築に特化したライブラリであるため、組み合わせるフレームワークを問わないといった特徴も表しています。

 本記事では、これらの魅力的な特徴について、具体的な使い方を交えて紹介しながら、Reactとの付き合い方について解説していきます。

JSX

 Reactを使ってUIを記述するにあたっては、多くの部分でJavaScriptの構文や式をそのまま利用します。そのため、JavaScriptに親しい人がReactを使い始める場合に、追加で覚える文法はさほど多くありません。

 そんな中でも、唯一、Reactが扱う特異な文法としてJSX(ジェーエスエックス)があります。ReactでUIを記述するということは、JSXを書くということとほぼ同義です。まずは、この文法について解説します。

 JSXとは、JavaScriptコードの中にツリー上のデータ構造を定義するための、XMLライクな文法で、Facebook社が独自に仕様を策定しました。次のWebサイトで仕様が公開されています。

 本節では、JSXがJavaScriptの中でどういった立場で扱われるものなのかを明確にします。

JSXは式

 前述した、JSXの仕様についてのWebサイトでは、リスト1のコードが例示されています(少しだけ改変しています)。

[リスト1]JSXは式として扱われる
// Using JSX to express UI components.
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem color="red">Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

 ここで注目したいのは、<Dropdown>...</Dropdown>で定義された要素を、dropdown変数に代入しているところです。代入の右辺に置くことができるということは、JSXはJavaScriptにとって式として認識されていることが伺えます。

JSXは関数の実行

 JSXはJavaScriptの文法ではないので、ブラウザ上で実行しても、文法エラーになります。そのため、ブラウザ上で実行できる形に変換する必要があります。

 文法の変換といえば、近年のJavaScript文化圏では、プログラマが記述するソースコードをできるだけ新しい文法にしておき、実際にブラウザ上で動かす際には古めの文法に変換することで、コーディング体験と動作環境のバランスを取る手法が一般的になってきました。こういった用途で広く使われるようになったのが、 Babelなどの、JavaScriptのためのコンパイラ(トランスパイラ)です。

 当初のBabelはECMAScript201x仕様で記述されたコードをECMAScript5仕様のコードに変換するツールとして使われていましたが、Reactの普及に伴い、JSXをJavaScriptに変換する機能がプラグインとして用意されました。このプラグインを導入することで、リスト1はリスト2のように変換されます。

[リスト2]JSXは関数の実行
var dropdown =
  React.createElement(Dropdown, null,
    "A dropdown list",
    React.createElement(Menu, null,
      React.createElement(MenuItem, {color: "red"}, "Do Something"),
      React.createElement(MenuItem, null, "Do Something Fun!"),
      React.createElement(MenuItem, null, "Do Something Else")
    )
  );

render(dropdown);

 JSXが、JavaScriptとして一般的な文法を組み合わせただけの、関数呼び出しになりました。これはもちろん、式として有効です。

 実際にReactを用いたアプリケーション開発をしていく際に、リスト2の形を意識することはほとんどありません。しかし、JSXが謎の魔法ではなく、最終的に私たちがよく知るJavaScriptに変換されて実行されていると理解しておくことは、トラブルシューティング等の面で有益です。内部でこういった仕組みが動いているということを、覚えておいてください。

 JSX内での細かい表現については、本記事の中で随時解説していきます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact Native入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5