DESIGNMAP

  1. TOP
  2. 公開講座
  3. React入門
  4. Hello World — React入門【Vol.1】

Hello World — React入門【Vol.1】

Reactは動的なユーザーインターフェイスをつくる表示に特化したJavaScriptのライブラリです。
Facebookが開発し、オープンソースソフトウェアとして公開しています。

本講座ではJavaScriptの基本知識をもっている方を対象にして解説していきます。

Reactはコンポーネント単位でユーザーインターフェイスをつくっていきます。
コンポーネントとは、ページの「部品」「構成要素」という意味です。アプリケーションを一つの大きなかたまりでつくるのではなく、コンポーネント単位に部品を分けて、組み合わせつくっていいきます。ブロックを組み立てていくようなイメージです。

コンポーネント化することで、部品の再利用化ができるようになり、コードの責任範囲もコンポネーント内に限定することができるので、機能拡張がしやすくなります。

今回はシンプルなコンポーネントをつくり、動作させるサンプルをつくっていきましょう。

Hello World

任意のテキストエディタで下記のコードを書きます。
ReactDOM.render」と「React.DOM.h1」のところの記述がまぎらわしいので注意してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script>

      ReactDOM.render(
        React.DOM.h1(null, "Hello World!"),
        document.getElementById("app")
      );

    </script>
  </body>
</html>

任意の場所に「hello-world.html」として保存します。このHTMLファイルをWebブラウザで開くと「Hello World!」が表示されれば成功です。本講座ではWebブラウザはChromeをつかっていきます。
react1-3

まず、

<script src="https://unpkg.com/react@latest/dist/react.js"></script>

でReact本体のJavaScriptコードを読み込んでいます。

次に

<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>

Webブラウザにコンポーネントを表示するためのコードを読み込んでいます。

Reactは特徴のひとつに「Learn Once, Write Anywhere」を掲げています。これはReactを学ぶと、Webブラウザだけでなく、スマフォなどのネイティブアプリも作れることを意味しています。DOM以外にもコンポーネントを表示することができるために、React本体とはコードをわけています。

React.DOM.h1(null, "Hello World!"),

がコンポネーントを作成している部分です。Hello World!という文字列をh1タグで囲まれたh1要素を作成しています。
第1引数のnullのところは、要素の属性を指定できます。第2引数に要素の内容を指定します。

document.getElementById("app")

はコンポーネントを生成させる場所を指定します。<div id="app"></div>を指しています。

ReactDOM.render(

でコンポーネントを生成して、DOMを描画しています。これでWebブラウザに表示されます。

React.DOM.h1(null, "Hello World!"),

のところはコンビニエンスラッパーと呼ばれ、下記のコードと等価です。

ReactDOM.render(
        React.createElement("h1", null, "Hello World!"),
        document.getElementById('app')
);

React.createElementでHTML要素のコンポーネントを作成しています。

要素の属性を指定したコンポーネントの作成

属性を指定したコードも書いてみましょう。
下記のコードを「hello-world2.html」として保存します。scriptタグの前後のコードは省略しています。

…
…
<script>

      ReactDOM.render(
        React.DOM.h1({
          style: {
            color: "#555555",
            fontFamily: "Impact",
          },
          className: "head",
        },
        "Hello World!"
      ),

        document.getElementById("app")
      );

</script>
…
…

Chromeで開くと下図のように装飾されたHello World!が表示されます。
rect1-1

レンダリングされたDOMを確認しましょう。
Chromeで「Hello World!」を右クリック→[検証]をクリックします。
react1-2

<div id="app"></div>の中に、h1要素が生成されていて、h1のclass属性にhead、style属性にインラインのCSSが定義されています。

React.DOM.h1({
          style: {
            color: '#555555',
            fontFamily: 'Impact',
          },
          className: 'head',
        },        

の記述が難しいです。CSSのプロパティ名やHTMLの属性の名前がJavaScript用に少し変えて書くので、記述を間違いやすいです。CSSの「font-family」は「fontFamily」と書き、HTMLのclass属性は「className」と書きます。

コンポネーントを入れ子にするとさらに複雑な記述になります。Reactでは見やすくコンポーネントを書くために「JSX」という記法を用意しています。JSXは後の回に登場します。

カスタムコンポーネントの作成

最後にカスタムコンポーネントをつくっていきます。
カスタムコンポーネントとは、HTMLの要素ではなく、プログラマーが定義したコンポーネントです。

下記のコードを書きます。「hello-world3.html」として保存します。

<script>

    class HelloWorld extends React.Component {
      render() {
        return React.DOM.h1(null, "Hello World!")
      }
    }

    ReactDOM.render(
      React.createElement(HelloWorld),
      document.getElementById("app")
    );

</script>

Chromeで開くと最初のコードと結果は同じです。コードは長くなりました。
react1-3

React.Componentクラスを継承するHelloWordというカスタムコンポーネントを定義しています。カスタムコンポーネントは、renderメソッドが必須です。renderメソッドの中はh1要素を生成しています。

React.createElement(HelloWorld),

でカスタムコンポーネントを作成しています。

このようにカスタムコンポーネントは定義して、あとで作成するという流れです。

スポンサーリンク

プロフィール

DESIGNMAP
制作ディレクター。
お問い合わせ