Go to Qiita Advent Calendar 2024 Top
LoginSignup
2092
2179

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@rgbkids(RGB (VTeacher Certified User))inVTeacher

出来る限り短く説明するReactJS入門

Last updated at Posted at 2015-06-21

VTeacher 所属の Masaki Suzuki です。
※各項目をできるだけ3行以内にまとめています

デザイナーさんやフロントのエンジニアさん向けのReact.js（リアクトジェーエス）入門です。
「最近、『リアクト』と聞くけど、つまり何？」ってひとが対象です。

React.jsとは

React.jsはUIのパーツ（構成部品）を作るためのライブラリです。
FacebookがOSSとして公開しています。

初回投稿日：2015年06月21日

この投稿はReactが話題になり始めた頃（6年前のv0.1の頃）、整理した記事です。

最新情報はこちら

React.jsはどのようなケースに使うのか？

例えば、下記のように、idに'dentaku'を指定すると
「電卓フォームが表示され、ボタンを押すと、ちゃんと計算もできる」
というような部品を作るときに向いています。

sample.html
<html>
  <body>
    <div id='dentaku'></div>
    ...
  </body>
</html>

すでに世界中のデベロッパーがReact.jsによるUIパーツ作りに取り組んでいます

Date Pickerの例
ElementalUIのサイトをご覧ください。
http://elemental-ui.com/

デザイナーさん、エンジニアさん向けアドバイス

React.jsの良さが活きるのは、ボタン（<input type='button'>...）やテキスト（<input type='text'>...）などがいっぱいあって、入力した値を即座に表示するような画面です。
デスクトップアプリのUI/UX設計のイメージです。
コーダーさんならReact.jsの書き方に見慣れておく必要があると思います（少々独特のため）。
React.jsは、jQueryのようにアニメーションが得意なわけではなく、見せ方・表現などの利用には向いていません。
（アニメーションはReact次期開発の課題として挙げられているとのことです）

実際にReact.jsが動いているものを見たい

React.jsはFacebookが作っていますので、Facebookの画面（UI）が参考になると思います。
最近注目のエディターGitHubのATOM（ https://atom.io/ ）もそうです。
上で紹介した ElementalUI ( http://elemental-ui.com/ ) も参考になると思います。

どこの企業が導入してるの？

開発を行っているFacebookやInstagramはもちろん、YahooやAirbnb、
GitHubのATOM（ https://atom.io/ ）など。

React.jsはライブラリ？フレームワーク？

React.jsはM-V-C（M-V-MV）で言うところのViewの一部の機能を提供するライブラリ（コンポーネント＝UIの部品）です。
ですので、比較対象として挙げられるBackbone.jsやAngular.jsとも併用できます。

React.jsを導入するメリットは？

  • パフォーマンスが良い（仮想DOMが高速）！
    【参考】リアルなDOMは遅い、仮想DOM（React.js）は速い
    http://steps.dodgson.org/b/2014/12/11/why-is-real-dom-slow/

  • 規模が大きくなっても管理しやすい！
    jQueryやBackbone.js、Angular.jsは規模が大きくなったときに管理するのが難しい。
    逆に、React.jsは小さいアプリケーションを高速に開発するためのライブラリではないと言われています。

どの環境でも導入できるの？

ブラウザがhtml5に対応していることが条件。いわゆるモダンブラウザなら動きます。
IE8以下など、古いブラウザはhtml5shiv.jsなどを導入し、html5相応の機能を持たせて対応（Polyfills）。
公式サイトに対応ブラウザのことが書かれています。
http://facebook.github.io/react/docs/working-with-the-browser.html

実際に書いてみたい

facebookのReact.jsファイルを読み込む（6/21時点の最新バージョンは0.13.3）

sample.html
<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

これで最低限の準備完了です。

fb.me（Facebook）のjsを直接指定しないといけないの？

公式サイトからスターターキットをダウンロードしてReact.jsファイルを入手する方法もあります。
https://facebook.github.io/react/

JSXについて

React.jsは通常JSX（Facebookが開発した独自タグの技術）を使用するため、プリコンパイルが必要ですが、開発者は意識する必要はありません。JSXTransfomerが自動でやってくれます。
しかし、それなりのアプリケーションになりますと、自動コンパイルの時間がかかるので、あらかじめ手動でのビルドが推奨されます。

react-toolsによるJSXのビルド（任意）

Node.js,npmをインストールし
$npm install -g react-tools
srcのjsxファイルを変換しdestに保存
$jsx -x jsx --watch src/ dest/

一番簡単なサンプルコード

sample.html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app"></div><!-- ←ここに埋め込まれる -->
    
    <!-- 以下、Reactのプログラム -->
    <!-- (jsxを使っているのでtext/jsxと書く) -->
    <script type="text/jsx">
     var HelloWorld = React.createClass({
       // <HelloWorld />をレンダリング（表示）
       render: function() {
         return (
           <p>Hello!World!</p>
         );
       }
     });
     
     // id='app'に<HelloWorld />を埋め込む（マウント）
     var m = React.render(<HelloWorld />, document.getElementById('app'));
    </script>
  </body>
</html>

See the Pen react-sample1 by rgb(suzuki) (@rgbkids-the-decoder) on CodePen.

入力フォームを使ったサンプルコード（Web+DB vol.86改）

sample2.html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/jsx">

     // 親：<Parent />の定義
     var Parent = React.createClass({
       // State（※状態は親が管理）
       // この値はブラウザを閉じたり、リロードするまでは保持される
       getInitialState: function () {
         return {
           textVal: "",
           children: []
         };
       },

       // State(textVal)を変更
       setStateTextVal: function(textVal) {
         this.setState({ textVal: textVal }); 
       },

       // State(children)を変更
       setStateChildren: function(textVal) {
         var textVals = this.state.children.concat(textVal);
         this.setState({ children: textVals });
       },

       // <Parent />の表示
       // ここで子となる<ChildInput />と<Child />を記述
       render: function() {
         return (
           <div>
             <p>入力してEnterキーを押す</p>
             <ChildInput onChange={this.setStateTextVal} onSave={this.setStateChildren} />
             <Child textVal={this.state.textVal} children={this.state.children} />
           </div>
         );
       }
     });

     // 子1：<ChildInput />の定義（※props経由で親を参照できる）
     var ChildInput = React.createClass({
       _onChange: function (e) {
         this.props.onChange(e.target.value);
       },

       _onKeyDown: function (e) {
         if (e.keyCode === 13) { // Enterキー
           this.props.onSave(e.target.value);
           e.target.value = "";
         }
       },

       // <ChildInput />の表示
       render: function() {
         return <input type="text" onChange={this._onChange} onKeyDown={this._onKeyDown} />;
       }
     });

     // 子2：<Child />の定義（※props経由で親を参照できる）
     var Child = React.createClass({
       // <Child />の表示
       render: function() {
         var key = 0;
         var textVals = this.props.children.map(function (textVal) {
           // 時間が同じ。つまり、キーが押されるごとに、まとめて再描画されていることに注目
           //（サーバーサイドっぽいと言われる所以）
           var date = new Date().toString();
           return <li key={key++}>{key}.{textVal}({date})</li>;
         });
         
         return (
           <div>
             <p>{this.props.textVal}</p>
             <ul>{textVals}</ul>
           </div>
         );
       }
     });

     // id='app' に <Parent />を表示する（マウント）
     var m = React.render(<Parent />, document.getElementById('app'));
    </script>
  </body>
</html>

See the Pen react-sample2 by rgb(suzuki) (@rgbkids-the-decoder) on CodePen.

ブラウザから簡単にコードを試すこともできます。

注目を浴びる理由

  • Facebook産
  • フロントエンドの考え方を根本的に覆す
  • Virtual DOM
  • コンポーネント指向
  • リアクティブプログラミング
  • 関数型言語（プログラミング）

リアクティブ（Reactive）プログラミング

Reactの名前の由来にもなっていると思われます。
リアクティブプログラミングとは、「反応する側」と「認識する側」を分けて考え、反応に対して自動的に対応するという考え方です。
React.jsの説明では、必ずツリー構造の図が出てきます。ある要素が変更されたら、一方向の流れで、関係する要素も変更されるというものを表しています。

なぜ今、関数型言語（プログラミング）が注目されているのか

関数型言語の代表はLisp。JavaScriptやScalaは、関数型言語っぽく書ける言語と言ったほうが正しいかもしれません。
関数型っぽく書くと、ほぼ純粋な関数（式）の集合体になるため、疎結合となり、ステート（状態）の管理が簡単になります。サーバー側の処理の場合、並列処理（マルチスレッド）が書きやすくなるなどのメリットもあります。

React.js の仲間たち

  • Flux
  • Jest
  • Immutable.js

どこのサイトが勉強になる？（随時更新）

補足

いとうなおやさんの言う「サーバーサイドっぽい」とは「アクションが起きたらとりあえず窓口へ行って、変更点以外もまとめてHTML更新」という点が似ているとのことだと思います。
※上記の【入力フォームを使ったサンプルコード】を実行すると表示時間が同じになります。つまり、キーが押されるごとに、追加された要素だけでなく、全要素まとめて再描画されていることに注目してください。

※VTeacherでサブスクやっています
VTeacherの「サブスク加入者のページ」から閲覧できます。
https://apps.apple.com/app/vteacher/id1435002381

2092
2179
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2092
2179

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?