Skip to content

jQueryしか知らなかったエンジニアがReactを使ってみて感じたこと

先日仕事でちょっとしたSPA(Single Page Application)を作る機会があり、Reactを使ってみました。

それまでのフロントエンド開発と全然違っていてかなり衝撃を受けたので、使ってみて感じたReactのいいところや、難しかったところについてまとめたいと思います。

よかったところ

Reactのよかったところ

手続き的に書くのではなく、宣言的に書ける。

最もメリットを感じた特徴です。

例えば、サーバーサイドでのHTML生成は宣言的です。

GETやPOSTのメソッドで渡された値をもとに必要な処理を実行し、データを取得、整形してHTMLとして出力します。

そこでは、入力される値は決まっていて、出力される結果も入力値によって決定されます。

入力値が変われば、ページをすべて書き直して出力を変更する、という具合です。

一方、jQueryなどを使ってAjaxによるアプリを作成する場合、なんらかのデータのもとに必要な処理を実行し、そのデータを取得、整形したうえで、DOMを操作する命令文を書きます。

この、命令文を書くというのがやっかいで、DOMを間違えないように管理、変更しないといけません。

このとき問題になってくるのは、DOMがどんな状態になっているのかわからないということです。

DOMは、ユーザーの操作やJavaScriptなど、どこからでもアクセス、変更できてしまうので、何らかの処理をしている間に対象のDOMが別の処理によって変更されてしまう可能性があり、それを管理するための実装が非常に複雑なものになりがちです。

jQueryを使った実装に対し、Reactを使った実装では、なんらかのデータをもとにそのデータを整形し、仮想DOMとして出力する、という流れで行うことになります。

仮想DOMを作成したあとの処理はReactがうまいことやってDOMとして表示してくれるので、実装者はDOMの状態を気にすることなく入力値だけに集中して実装することができます。

これが非常に快適で、サーバーサイドでHTMLを生成するときの流れに似ているのかなと感じました。

コンポーネントを自然に分割できる。

Reactでは、UIを複数のコンポーネントを組み合わせることで実装します。

そして、ひとつのコンポーネントには、入力、処理、出力がまとまっているので、コンポーネントごとの独立性を高く保つことができます。

本当に、いくつかのコンポーネントをポンポンと置いていくような感覚でUIを作成することができます。

よくわからなかったところ

Reactのよくわからなかったところ

JSX

JSXは正直よくわかりませんでした。

どうやらReactとは別物のようですが、どこからどう分けられるのか、まだ自分のなかで整理できていません。

祖先コンポーネントのState更新

自分は今回、最上位のコンポーネントにState(状態)をまとめておいて、子孫コンポーネントはそこから渡された値を入力として出力を生成するように実装しました。

これによって、いくつものコンポーネントがStateを保持してこんがらがってしまうことを避けたつもりだったのですが、子孫コンポーネントから親のStateを更新するとき、更新用の関数を毎回引数として渡していかないといけませんでした。

この縛りのおかげで入力→出力という流れを単純に保てているのだろうとも思うのですが、継承のような仕組みがほしいと思うこともありました。

Stateの持ち方のベストプラクティスがあれば知りたいです。

その他まとめ

その他、気になったところ

学習コスト

学習コストは、思っていたよりかなり低かったです。

自分は、Reactを実装するためには黒い画面でいろいろインストールしないといけないという先入観を持っていたのですが、それをしなくてもReactを使うことはできました。

実装に関しては、まず、記述がJavaScript的です。JSXという特殊な記法は出てくるものの、基本的にはJavaScriptを書いている感覚とほとんど変わらずコーディングできました。

また、AngularJSのように「おまじない」的なものがほとんどないので、納得して勉強を進めることができました。

何より、公式のチュートリアルが非常にわかりやすく、簡潔ながら、実装のポイントやReactの概念がしっかりと体験できるものになっていたので、Reactを始めてみようという人にはまずここから取り組むことをオススメします。

他ライブラリとの共存

今回、自分の案件ではグラフを描画する必要があったのでC3.jsを使う予定でした。

Reactは仮想DOMを使っているということで、他ライブラリとの相性が悪いかもしれないと覚悟していたのですが、C3.jsやjQueryも思っていた以上にすんなり使うことができました。

ただ、グラフ再描画のタイミングは実装する必要がありました。

これについては、また改めて紹介できればと思います。

エディタ

自分は普段Atomを使ってコーディングしているのですが、JSXの記法や、Emmetの適用などなかなかうまくエディタをカスタマイズできませんでした。

オススメのプラグインや設定があったら教えてもらえると嬉しいです。

関連記事

【Redux入門】 React + Redux の考え方を理解する

Comments are closed.