April 11th, 2020|ReactJSチュートリアル

ReactJSがアメリカで何故今人気なのか？

ReactJSとは何か？

GatsbyJSのチュートリアルを書いていて、ふとReactJSの公式のチュートリアルって分かりにくいなぁ、と思い、ReactJSのチュートリアルもあった方がいいかもしれない、と思いました。それでこちらも同時進行でブログを始めようと思います。アメリカではReactJSデベロッパーの職を得ると年収はエントリーレベルで５００万以上、数年で一千万円を超えると言われていて、とても人気の言語です。ReactJSとはJavascriptのフロントエンドのライブラリーで、似たようなライブラリーは他に二つほどありよく比べられます。AngularJSはグーグルが開発したライブラリーでReactに似ていますが大きなプロジェクト向けで、Reactの方が需要があります。またAngulerのプログラマーがVueJSというライブラリを後から作っていますが、こちらは最近とても人気です。ただReactJSはFacebookが開発し、彼らが実際に使っている為、非常に安定性が高いと言われています。

ReactJSを使う利点とは？

Javascriptだけでフロントエンドを書ける（HTMLに見えるタグはJSXと行って実際にはJS）ので、HTMLとJSをコミュニーケーションさせる為の無駄なコードが省ける
コンポーネントベースであり、レゴとか積み木みたいに一度作ったコンポーネントを別のページで簡単に使いまわせます（変えたい値だけJSの変数の中に納めればいい）
バックエンドの言語をNodeJSと一緒に使うように設計されており、Javascript同士なので面倒な書き換えが必要ない
NodeJSはとても速く、Async（一つのラインの計算結果を待たずに次のラインの計算を始める）設計で、フレキシビリティが高い
CSSのライブラリーもたくさんあり、CSSも能率よく書くことができる

ちなみに普通のJavascriptはVanilla Javascript（バニラジャバスクリプト、味がついてないという感じなんでしょうかね）と呼ばれ、昔はJavascriptを使いやすくするためにJQueryというライブラリを使うのが常でした。

ReactJSを使う欠点とは？

使いこなせるようになるまで時間がかかる
速いペースで仕様が変わるので変化についていく必要がある
Reactだけで書かれていると計算が早すぎるためブラウザがウェブページのコンテンツを把握しきれない（この問題はGatsbyで解消しましょう）
ライブラリの数も豊富ですぐに良いライブラリが出るのでリサーチ上手じゃないと開発スピードについていけない
コマンドプロンプトが使えないとアプリを作れるようにならないので、取得してない人は開発環境に慣れる時間も必要

と欠点もありますが、開発にかかる時間が短くて済むので、スタートアップの会社が新しいアプリを作るという場合にはとても重宝します。ライブラリもどんどん充実しており色々なことが簡単に、直感的に使えるように進化しています。一度使い始めるとReact以外ではフロントエンドは書きたくないなぁと思うくらい便利です。ただ今までJQueryやバニラJSだけを使っていた人にしてみるとちょっと混乱するかもしれません。ウェブ開発をするにあたってJSXだけ知ってるだけではどうしても事足りないので、エンジニアにとってはエクストラで勉強することがどうしても増えたことにはなりますが。フロントエンドを従来の方法で書くと変更があった時に大変能率が悪いので、筆者は日本でももっともっとReactJSが広く使われるべきだ、と思っています。

リアクトが広く使われる理由MERNスタックの豆知識

MERNスタックとはフルスタックのアプリを作る非常に能率の良い、オープンソースのプラットフォームーMongoDB＋Express＋ReactJS＋NodeJSを使ってフルスタックアプリを作るテクノロジーのことです。特にアメリカではスタートアップ（日本で言うベンチャー企業）が素早く、能率良くアプリを使ってビジネスを拡大していくためによく使います。無料で始められ、成功していないベンチャー企業の金銭的負担を減らしているのにも関わらず、ビジネスが成功すればかなりフレキシブルに課金のサービスを使い拡大していくことが出来ます。ちなみに同じような文脈でMEANスタックと言うのがありますが、Reactではなくアンギュラー、AngularJSを使うことを指します。

リアクトってどうやって使うの？

リアクトというとアプリを作るイメージがありますが、使い方は色々ありとてもフレキシブルです。既存のウェブサイトに部分的に挿入したりすることもできます。また、JSX（HTMLのように見えるJavascript）を使わなくても使うことができます。ただ、個人的にはこの使い方から説明されるとわかりにくい気がしています。が、知っておいて損はないこと、またシェルスクリプト（コマンドプロンプト）を使わなくてもリアクトを使えるので、人によっては安心するかもしれません。コマンドプロンプトは慣れです。最初は難しいように見えるかもしれませんが、慣れれば楽しく使えます。

筆者はあまり部分的に入れてるプロジェクトはみたことがありません。開発したFacebookは部分的にしか使ってないはずなんですけどね。

ということで、まずは既存のウェブページにリアクトを挿入するやり方を解説します。

まず簡単なHTMLとCSSを書きましょう。

<html>
  <head>
    <style>
      body {
        background-color: antique;
      }
      .container{
        text-align: center;
        margin: 0 auto;
      }

      #like_button_container > button{
        background-color: hotpink;
        padding: 10px;
        width: 100px;
        border-radius: 0.5rem;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>ReactJSを始めよう!</h1>
      <div id="like_button_container"></div>
    </div>
  </body>
</html>

次にReactJSのライブラリをリンクしましょう。先ほどのコードのbodyタグの閉じるタグの手前に挿入します。まだ作成してませんが、これから書くリアクトのファイル、like.jsも同じように挿入します。

<html>
  <head>
    <style>
      body {
        background-color: antique;
      }
      .container{
        text-align: center;
        margin: 0 auto;
      }

      #like_button_container > button{
        background-color: hotpink;
        padding: 10px;
        width: 100px;
        border-radius: 0.5rem;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>ReactJSを始めよう!</h1>
      <div id="like_button_container"></div>
    </div>

  <!-- Load React. -->
  <!-- Note: デプロイの際には "development.js" を "production.min.js"　に変えましょうね。 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like.js"></script>
  </body>
</html>

では実際にリアクトの例をみてみましょう。リアクトはコンポーネントを使ってレゴブロックや積木のようにウェブサイトを構築するツールだと思ってください。まずそのコンポーネントを書いてみましょう。ここではクラシックと言われてるオリジナルのクラス構文で書きます。このシンタックスを使う理由は一番古いのでわからなくなった時にウェブで検索すると結構問題解決策がたくさん見つかります。
まずはJSXを使わずにリアクトのエレメントを作ります。

const buttonElement = React.createElement

ここではリアクトでHTMLエレメントを作りますよ、と宣言しています。

次にコンポーネントを作ります。細かい説明は省きますが、Propsとは'properties'の略で便利にコンポーネント間で変数をパスしていく入れ物のようなものだと考えてください。stateとはコンポーネント内で使えるローカル変数です。ここではlikedはブーリアン変数ですので、最初の設定をfalseにしてあります。このstateに変数を設定しておくと、setStateというメソッドを使って変数を変えられます。

class LikeBtn extends React.Component{
  constructor(props){
    super(props)
    this.state={
      liked: false;
    }
  }
  render(){
    if(this.state.liked){
      return 'You liked it!'
    }
    return buttonElement(
      //ボタンのエレメントをリターン
    )
  }
}

リアクト・エレメントのシンタックスは下記のようになります。私はこれを最初に見た時はさっぱりでした。

React.createElement(
  type,
  [props],
  [...children]
)

この使い方ですがは下記です。

type: HTMLのエレメントの名前をストリングで書きます。例えば'div', 'h1'等々。ここでは'button'エレメントを使います。
propsはタグの中に挿入したい物を書く、と言ったところです。ここではonClickを使います。
childrenタグとタグの中に書かれるもの。ここではボタンの中に指定したいテキストを書きます。

なので、下記のHTMLエレメントを書くのに

<button onclick="myFunction()">クリック</button>

createElementは既にbuttonElementと宣言してあるので

buttonElement(
  'button',
  { onClick: () => this.setState({liked: true}) },
  'クリック'
)

のようになります。この場合はファンクションに名前を付けない、諾名のファンクションを使っているので、上記の直訳ではないです。

それではこれをどのようにHTMLに挿入させるか、というと下記のように。

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(buttonElement(LikeButton), domContainer);

上記の指示は

リアクトDOMでbuttonElementというエレメントをレンダリングしてね。
エレメントの指示はリアクトコンポーネントのLikeBtnに書いてあるよ。

これまでのコートを全てつなぎ合わせると下記のようになります。ちなみに最初に'use strict'を書いてある理由はシンタックスを制限するようです。今のところはあまり気にせず。

'use strict'

const buttonElement = React.createElement

class LikeBtn extends React.Component{
  constructor(props){
    super(props)
    this.state={
      liked: false;
    }
  }
  render(){
    if(this.state.liked){
      return 'You liked it!'
    }
    return buttonElement(
      'button',
      {onClick: ()=> this.setState({liked: true})}
    )
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(buttonElement(LikeButton), domContainer);

これだけ見るとHTMLに無理やりJSの機能を追加できるようにした、という感じに見えますが、これがJSXで書き始めるともっと楽になります。

サンドボックス-Code Penでのデモはこちらをクリックしてみてください。

*Flamingod NewsはアメリカITの最新のニュースを日本語で紹介します。

...