Programmagick

Create React AppでReactをはじめる

ReactはES2015以降やTypeScriptで記述する

前回 Create React App を使い、Reactアプリの雛形を作成するところまで、進めました。今回は前回作成したReactアプリの中身を少し触っていきたいと思います。

Create React App起動画面

実はReactは ES2015以降 やTypeScriptなどの AltJSで記述することが一般的 です。これらのAltJSには現在ブラウザ上で動作するJavaScriptに加えて非常に便利な機能や文法が備わっており、現在の一般的なフロントエンド開発では専らこれらの言語を使うのが主流になっています。今回のケースではTypeScriptを使わず、ES2015以降で記述していきます。

ES2015やES2016などは将来的なJavaScriptの言語仕様として策定されているもので、現状全ての一般的なモダン・ブラウザがこれらの仕様を実装しているわけではありません。Mozilla (Firefox), Microsoft (MS Edge), Apple (Safari) やGoogle (Google Chrome)などのブラウザベンダーはこれらの仕様の策定を受けて、自分達が開発しているブラウザで次期仕様のJavaScriptが動作するように開発していく流れとなっています。

現状では全てのブラウザで新しいJavaScriptを動作させることができないため、ES2017やTypeScriptなどのAltJSで記述したJavaScriptを 現状のブラウザで動作するJavaScriptに変換 (トランスパイル) してあげる必要があります。

ES2015をブラウザで動作するJavaScriptにトランスパイルするツールとしてBabelなどがあります。

Babel ロゴ TypeScript ロゴ

Create React App もこのトランスパイルの仕組みを内部的に備えており、何も意識することなくコマンドをたたけば、トランスパイルが自動で走ることになり、最新の文法でJavaScriptを記述しつつ、開発を進めることができます。

余談ですが、TypeScriptでReactアプリの雛形は下記のコマンドで作成されます。

# Create React AppでTypeScriptの雛形を作成する
# この章では取り扱いません。参考までに
create-react-app my-app --scripts-version=react-scripts-ts

作成したReactアプリの中身を見てみる

それでは Create React App で作成されたReactアプリをエディタで 開いてみましょう。ここでは前回インストールした Visual Studio Codeを使います。

作成されたReactアプリのディレクトリをVisual Studio Codeで開くと下記のような画面が表示されます。

ReactアプリをVisual Studio Codeで開く

※ Create React Appは日々アップデートされており、上図とは実際のディレクトリ構成やファイル名が異なる場合があります。

src というディレクトリの中に入っているファイル群が開発で主に編集するファイルとなります。この中にある index.js というファイルがReactアプリのスタートポイント (エントリーポイント) になります。

index.jsを開く

index.js 内部では public/index.html のidがrootであるdiv要素に App というReactコンポーネントをマウントしています。ES2015以降では import 構文を使って他のファイルから関数や変数・クラスなどをインポートして使うことができます。

/* src/index.js */

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Reactコンポーネントがマウントされる public/index.html です。ReactアプリがレンダリングされるHTML本体に修正をかけたい時にはこのファイルを編集します。

<!-- public/index.html -->

  ...
  <body>
    ...
   <!-- ここにAppというReactコンポーネントがマウント・レンダリングされる。  -->
    <div id="root"></div>
    ...
  </body>

index.js でimportされている App コンポーネントを見てみましょう。シンプルなHTMLを返すコンポーネントになっています。JavaScriptが記載されていて、さらにその中にHTMLが記述されているという、一見すると奇妙な構文に見えるかもしれませんが、これは JSX というReactが提供している構文です。Reactではこの JSX を記述してReactコンポーネントを作成していきます。

index.jsにインポートされているReactコンポーネントが定義されているapp.jsを開く 
/* src/App.js */

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

作成したReactアプリを編集してみる

それではこのCreate React Appで作成したReactアプリを少し編集してみましょう。

このディレクトリの中にターミナル or コマンドプロンプトでこのディレクトリの中に入って、開発用サーバーを立ち上げます。

# my-app という名前でプロジェクトを作成した場合、my-appディレクトリの中に移動
cd my-app

# React開発用サーバーを起動する
npm run start

前回と同じように3000番ポートでReactアプリが立ち上がります。

webpack-dev-serverでReactアプリが起動

src/App.js を編集してみましょう。ここでは、回転しているReactのロゴを何か他の画像に差し替えてみましょう。何の画像でも構いませんが、ここではReactのロゴをGoogleのロゴに差し替えてみました。コードを編集すると即座にアプリがリロードされ、反映されます。

...

class App extends Component {
  render() {
    return (
      ...
        <header className="App-header">
        ...

        {/* ここのsrcを修正します。*/}
          <img
            src={
              "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
            }
            className="App-logo"
            alt="logo"
          />
        </header>
      ...
    );
  }
}

export default App;
ReactのロゴをGoogleのロゴに差し替え

Reactアプリを本番用にビルドする

Reactアプリを開発するときにはローカル開発用コマンド「npm run start」を使用します。実際に本番用にビルドする時には下記のビルドコマンドを叩きます。このコマンドはReactのコード圧縮などの必要な処理を行い、buildディレクトリ以下にプロダクション用のコードを出力します。

npm run build

本番環境としてさくらインターネットなどのレンタルサーバーやFirebase, Netlify などのホスティング機能を持ったサービスにアップロードする時には上記コマンドを使用しましょう。

次はReactの概念や基礎的な概念について紹介していきます。

前の章次の章