Tanabebe Blog Environment

Goやりたい願望強め

CodeSandboxを使って必要最小限なReactコンポーネントを作成する

以前社内システムにてReactを使用する機会があり、その際、勉強がてらではありますが、自由に遊んで良い砂場として使用していました。 個人的にReactは始めてからも始める前もそこそこ障壁が高いと考えていますが、CodeSandboxを使うと簡単に始める事が出来るので紹介したいと思います。

CodeSandBoxとは?

Webアプリケーションプロジェクトの作成が可能なオンラインコードエディタです。簡単な登録をすましたらすぐに開始が可能で、GitHub連携やURLの共有なども出来るのでかなり強力です。無料枠だけで30個ほどのプロジェクトを作成が可能です。

codesandbox.io

私の場合ですと、業務上の関係でReactとは別で複数のnode versionを管理する必要がありました。versionを切り替えを忘れていた状態でnpm installした時に時間を潰してしまっていたり、非常に面倒でした…
PCの環境に依存しないでとにかくReactを触りたいという考えにマッチするモノはないかと探していた時にCodeSandboxに辿り着きました。私のケースとは別で実際にReactを始めるにあたって以下のように障壁の高さを感じた人もいるのではないでしょうか。

Reactを始める上での障壁の高さ

環境面

  • Node.jsのインストール
  • npm によるパッケージのインストール
  • BabelによるJSX 等の JavaScript へのトランスコンパイル

また、環境面とは別でReact自体の障壁の高さも以下にあげてみます。

React自体

  • 動かしてから内容を理解するまでにそれなりの努力を要する
  • 社内システムを作るにあたってReactを採用したが、失敗した
  • babelとかwebpackやら覚える事がやたらと多い
  • 数年前にフューチャーされてたjqueryと比べると段違いにシステマチック
  • そもそもJavaScriptの仕様を理解する必要がある などなど…

CodeSandboxの世界へ入る

環境面で躓いてReactまで辿り着かないとなってはストレスもかかりますし、場合によっては数日かかるかもしれないです。CodeSandboxを使い、Reactの事だけを考えられるようスタートしていきましょう。

Create Sandboxでミニマムスタートを切る!

CodeSandBoxへアクセスしCreate Sandboxを選択して次画面へ進みます。 f:id:tanabebe:20190912103122p:plain プリセットを見ると選択肢が多く、非常に強力な事が見て取れます。ここではReactを選択します。 f:id:tanabebe:20190912103148p:plain すると自動でプロジェクトが生成されます!(内部的にcreate-react-appとかしてくれているとのことです) f:id:tanabebe:20190912103154p:plain

最小限のclass componentを作成する

index.jsの中身を以下に書き換えます。

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Tanabebe!!",
      word: "Hello!!"
    };
  }

  render() {
    return (
      <div>
        <h2>
          {this.state.word} {this.state.name}
        </h2>
      </div>
    );
  }
}

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

ホットリロードも自動で走るので書き換えると以下が表示され完成です。 f:id:tanabebe:20190912105743p:plain

まとめ

CodeSandboxを使う事でReactの開発開始時に必要なものをCodeSandBoxが提供してくれるので、素早くReact 開発を始めることが出来ます。通常であれば慣れていない方にとっては環境構築は難易度が高いと思うので、このハードルを取り除く事が出来ます。Reactに限らず、フロントエンドの開発フレームワークのサポートも多いのでとても魅力的で強力なツールです。環境構築で躓いた方はこれを気にこの砂場で遊んでみてはいかがでしょうか。

おまけ

CodeSandbox上からReactを使用し、Task追加アプリを作成しました。こちらはCodeSandbox上から作成したモノとなります。

デモ

f:id:tanabebe:20190912112552g:plain