この特集ではReact.js（以下、React）を用いてwebページ制作を行う方法を紹介していきたいと思います。Reactが気になっている方や使ってみたいけど、いまいちよくわかっていない方の参考になれば幸いです。
Reactとは
Reactとは、Facebook社が提供しているJavaScriptのフレームワークです。ライブラリという方もいらっしゃいますが、特に使う上ではどちらの解釈でも構わないと思います。（苺は野菜か果物かみたいなものなので）
UI（ユーザーインタフェース：ヒトとサービスの接地する箇所。画面などを指します。）を表現することに特化したフレームワークになります。特徴としては、コンポーネントやJSXという技術や考えを採用していることと、仮想DOMを採用しているので一つのページ上で様々な表現をレスポンス良く行うことが可能となっています。
FacebookやSlack、Netflixや任天堂のオンラインストアなどで導入されており、昨今はweb上でシームレスな演出がユーザーからも求められていることもあって注目度が上がっているフレームワークになります。
各要素をパーツとして分けて管理しやすくするコンポーネント
コンポーネントとは構成要素を指し、Reactでは各部分ごとにコンポーネントと分けることで、カスタマイズしやすい特徴を持っています。服装で例えると、ワンピースがjQuery、トップスやボトムと別れているのがReactになりますでしょうか。
分けることで、変えたいところだけを変えることが可能になり、サイトの改修や管理がしやすいと言えます。
仮想DOM…気の利く奴のこと
もう一つの特徴として、仮想DOMがあります。DOMとはDocumentObjectModelの略となり、ドキュメント（文字情報）を基に指示することを指します。
プログラミング言語からHTML、CSSで表現する際にはこのDOMという仕組みが採用されている訳です。以下のようなタグの階層構造なども文字として伝達しやすい為の特徴となっていたりします。（そういう作法をとっているくらいの認識で大丈夫だと思います）
Reactでは、自身にて仮想DOMを持っているので、変更する箇所だけを反映させることができるのです。それゆえに、一つのページで素早く多彩な表現ができるんですね。言わなくとも希望通りに出してくれる気の利く奴って感じです。
プログラミングの中でHTMLが書けるJSX
Reactの１番の特徴として、JSX記法があります。こちらはFacebook社が独自に開発した技術で、プログラミングの中でHTMLと同じような書き方で表現ができる手法です。厳密にいうと、”HTMLのような文法で書いているJavaScript”で最終的にはHTMLなどに変換されるのですが、同じように書けるので、HTML側の変更をしなくても良いというのが大きな特徴となります。
このプログラミングの中にHTMLの記載があって、「気持ちが悪い」「違和感がある」という人もいるかもしれません。ただ慣れてくると変更がしやすかったりなど利便性が見えてくるかと思います。
また、これから始めるという人には違和感というのもあまり感じないでしょうから、これからwebサービス制作を始める人にとってはちょうど良いかもしれません。
jQueryとの違いは？
上記の特徴はjQueryとは違う特徴になります。jQueryですと、新しい要素を加えるたびに全体に適用されるので、HTML側にて新しくクラスやIDを付与していく必要がありますが、Reactではそこまで必要ありません。結果、jQueryだと複数のファイルをイジることになるのでコードが汚くなったり、管理が煩雑になりがちます。
なので、一つのページで色んな動きを行う場合はReactが適しています。逆に、シンプルなページでちょっとしたアニメーションを加える、といったものですとjQueyの方が早く制作できると思います。趣味で作っていくなら好きな方で良いですが、取っ付きやすさだとjQuery、将来性だとReactと考えておいた方が良いでしょう。
Reactでは何ができる？何のサービスが向いている？
Reactは基本的には幅広い制作に対応していますが、紹介したような特徴から、一つのページで色んな機能を持つものを作ることに適しています。ボタンを押すとそのページ内にて動きがあるページ制作には適しています。
逆に、複数のページでデータの書き換えが多いようなプロダクトの制作には向いていません。ゲームなどがそれに当たります。
また、簡単なページだと、jQueryで制作した方が早かったりします。以前の記事で作ったようなページだとjQueryの方が早いと言えますね。
ここまでがReactの特徴となります。実際の制作ではReactもjQueryも状況やオーダーによって利用することもあるので、一概には言えないのですが、管理しやすい・編集しやすいのがReactの特徴だとお分りいただけたと思います。次からはReactの実際の使い方を紹介したいと思います！
コメント