【入門】React.jsさわってみた。スタッフブログ【入門】React.jsさわってみた。12,967viewsこんにちは制作担当の奥田です。2016年冬アニメ圧倒的イチオシは「僕だけがいない街」です。前期の「すべてがFになる」もそうでしたが、ノイタミナ枠は毎回面白いですね。気になる方はぜひご覧ください。アニメの話はさておき(冒頭がアニメの話ばっかりですねw)最近はJavaScript界隈がとても活発ですね。今回は現在人気沸騰中のライブラリ「React.js」をさわってみました。僕も触り始めたばかりなので超入門編といったところでしょうか。contentsReact.jsとはgulpで環境を構築するとりあえず動かしてみるPropsとState最後に参考にさせていただいた記事React.jsとはReact.jsとはFacebookが作ったライブラリで、MVCフレームワーク(Model,View,Controller)のViewの部分をComponentとして作っていくライブラリです。素のJavascriptでも書けるのですが、JSXというXML形式で書ける言語を使用するパターンが主流です。DeNAによって開発されたウェブアプリケーション向けのプログラミング言語である。4から影響を受けた構文を持ち、静的型付けなのが特徴。ウェブブラウザ組み込みのスクリプト言語であるJavaScriptのデメリットを解消することを目的に作られている。Reactで使うJSXは正しくはFacebook製のライブラリだそうです。http://facebook.github.io/jsx/gulpで環境を構築するまずは環境の構築です。公式ではCDNを使った方法も書いてあるんですが、npmとしてインストールしておくとBrowserify(JavaScriptをrequireできる)やBabel(jsxをJavaScriptにしたりES6をES5へトランスパイルしてくれる)などのNodeモジュールと一緒に使えるので便利です。React.jsNode.jsやgulpが入っていないという方はこの辺をご覧ください。コーディングを10倍速くする環境を作る方法まとめまずは作業ディレクトリへ移動します。(ない方は作りましょう。~/workspaceでは必要なパッケージをインストールします。6からpresetを指定しないといけなくなったので必要なプリセットも入れておきます。babel-preset-es2015次に実際にreactのテストをするディレクトリを作成します。react-testgulpfile.jsを作成し、以下のように記述します。gulp.task("default",['watch']);パスなどはお好きな環境に合わせてください。今回は[common/js/jsx/*.js]をwatchし変更があれば[common/js/jsx/app.jsx]をトランスパイルし、[common/js/bundle.js]に書き出し、さらにコンパイルして[common/js/min/bundle.js]に書き出すという流れです。app.jsxはそれぞれのコンポーネントをrequireする感じで使うと煩雑にならずいい感じだと思います。動かしてみるではcommon/js/jsx/app.jsxを作成し、コンポーネントを作成してみます。document.getElementById('container'));まず、ReactとReactDOMをimportします。React.Componentという感じです。“ファイル名”;と書きます。最後にコンポーネントを#containerにレンダリングしています。注意すべき点は、render()で返す要素はwrapしている必要があります。2つ以上の要素が入っているとトランスパイルエラーになります。/>などの閉じタグがない要素やスラッシュが省略できる要素もスラッシュがないとエラーになってしまいます。index.htmlに実際に表示してみたいと思います。src="common/js/min/bundle.js"></script>gulpを実行。gulpこのファイルにアクセスするとReactが実際に動いているのがわかると思います。Demo.01PropsとState先ほどのデモではただ、静的なものを表示したにすぎません。ReactではApiなどからjsonで取得した値をコンポーネントに渡して表示したり、変更したりということが行えます。実際にデータを表示してみます。Reactのデータの種類にはPropsとStateの2種類があります。Propsは変更しない値、Stateは変更する値を入れるということですね。Propsを指定してみます。app.jsx上部に以下のように書き、コンポーネントにdata={data}のようにアトリビュートとして値を渡します。document.getElementById('container'));コンポーネントに渡した値はthis.props.[データ名]で取得できます。(<div>こんにちは、{this.props.data.name}さん</div>);}}Demo.02今度はStateを使ってボタンクリックで数値をカウントするロジックを書いてみます。onClick={this._onClick.bind(this)}>click</button></div></div>);}}まず、コンストラクターでおまじないのようなsuper(props);を呼びます。ここでthis.stateに初期値を代入することでstateを指定できます。Propsを入れることもできます。_count;という記述方法は推奨されていません。setState()を呼ぶようにしてください。これでボタンをクリックするたびに数字がカウントされていくロジックがかけました。Demo.03最後に「長ったらしいな・・・」と思った方がいると思います。そのとおり、Reactは少しのことでロジックが長くなってしまいます。イベントをどこに書いているのか、何をしているのかが明瞭に書けます。jQueryなどでイベントをバインドする際、ロジックをどこにでも書けるので大規模になってきた場合に修正が大変困難です。(実際自分でもソースを追っかけないといけないことがあります。)Reactは大規模になってもコンポーネントを量産していくだけなのでロジックが分散することはありません。ルールをしっかり決める事で開発がとてもしやすくなると思います。今回は本当に触り程度しかご説明していませんが、Reactはもっとさまざまなことができます。若干名ですが、WEBディレクターを募集しています。TopBlog【入門】React.jsさわってみた。menuWorksBlogInformation。