Cloud Shell エディタでReact開発 Hello World!! - ITエンジニアの定時退社Tips

Cloud Shell エディタでReact開発してみます。今回の記事では Hello World!! をやってみます。

Cloud Shell エディタ開発のメリット

Cloud Shell エディタを使うと無料でGoogleのマシンリソースを使用して開発することが出来ます。環境構築のために開発ツールをたくさんインストールするのですが、プリインストールが充実しており自分で環境構築する手間が省けてアプリの開発に専念することが出来ます。

Cloud Shell エディタ起動

Cloud Shell エディタに移動します。詳細は次の記事中に記載しています。Cloud Shell エディタには、React開発に必要なnpm、Node.jsなどのツールがプリインストールされており、Cloud Shell エディタを起動するだけで開発の準備が整います。

プロジェクト作成

開発対象ディレクトリに移動して、プロジェクトを作成します。

$ mkdir react-test
$ cd react-test/
$ npx create-react-app quick-react

プロジェクト作成完了したらエディタで親フォルダをOpenします。フォルダ構成はこのようになりました。

サーバー起動

プロジェクトが無事に作成されているか確認します。Shellで親ディレクトリに移動して、サーバーを起動させます。

$ cd quick-react
$ npm start

無事に起動されたか確認します。まずはプレビューポートの番号変更してプレビューします。

Reactのロゴが表示されていました。無事にサーバーが起動された証拠です。

Reactロゴ表示までの流れ

ここまでで Hello World!! と同等の確認は出来ました。Reactロゴ表示までの流れを確認します。

1. index.jsでAppコンポーネント（<App/>要素）が呼び出される

2. App.jsで出力が生成される

3. 出力がindex.htmlの <divid=”root”> に反映される

index.js がアプリを起動するエントリーポイント、App.js がアプリを構成するコンポーネント、index.htmlがトップページですね。

リソース変更

次に変更が反映されるか確認します。変更するのはApp.jsです。

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  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;

上記の次の記述を変更します。

Edit <code>src/App.js</code> and save to reload.

Hello Worldを意味する文言に変更してみます。

React World へ ようこそ！.

ブラウザを確認してみます。

変更されていました。コマンドを何も入力しなくても自動で反映してくれるのは便利ですね。

以上、「Cloud Shell エディタでReact開発 Hello World!!」でした。