React が面倒な理由

React が面倒な理由

フロントエンドのフレームワークは、React と Vue がよく利用されています。どちらを学習した良いのかを迷う人も沢山いらっしゃいます。基本的に大きな違いはありませんが、React の方がやや面倒な部分があります。この記事では、React が面倒だと思う人が多い理由を紹介します。

基本パッケージのコンセプト

一番の大きな違いは、基本パッケージの考え方です。 簡単に言ってしまうのならば、React は Javascript の中に HTML に近い記述（JSX）を書けるようにしたパッケージという事です。 一方で、Vue の方は、フロントエンドの開発の基本的な仕組みという感じです。

人によって表現の仕方が多少違っていますが、React の場合は、フレームワークというより、「ライブラリ」というような表現をする人がいます。こちらの方が、フレームワーク（仕組み）というより、React の実態に合っているのかもしれません。一方で、Vue の方は、フレームワーク（仕組み）に近いコンセプトになっています。

これでも、まだわかりにくかもしれませんのよね？ もう少し、簡単に言うのならば、Vue は色々な機能が予め詰め込まれています。一方で、React の方は、色々な事をやるのには、外部のパッケージを追加していく必要があるという感じになっています。

大きな違いは何処に？

よく利用する機能で見てみると

＊　データの一括管理（Redux / Vuex)

＊　仮想 URL(React Router / Vue Router)

あたりが違います。データの一括管理は、複数の「部品」でデータを共有する場合に、少し大きなアプリの場合には一箇所でまとめて管理し他方が都合が良い場合が多くなります。そうすることで、部品間でのデータの受け渡しがシンプルになります。Vue の場合も、パッケージをインストールするかは、初期設定で決めるようになっていますが、専用のパッケージが用意されていて、簡単な設定で利用できるようになっています。React の場合は、外部のパッケージを npmのようなパッケージ管理アプリで読み込んで使う形で、Redux と言うパッケージを利用する場合が多いですが、他のパッケージを使うことも可能です。

同じように、フロントエンドで、別の Web ページにのように扱う機能をよく利用しますが、これも同様に Vue の方は予め専用パッケージが用意されているので、組み込むのも簡単です。React の場合は、やはりnpmのパッケージ管理アプリで外部の必要なパッケージを組み込んで使う形になっています。

慣れてしまえば、どちらも大きな差はないのですが、React の場合は、最初は設定するだけで色々調べる必要事が多く、やや面倒と感じる人が多いようです。逆に言うと利用するパッケージの自由度が高く、拡張性が高いと考えることもできます。

初心者に Vue を勧める理由

私が、React か Vue のどちらを学習するかと質問された場合は、初心者には Vue を勧めています。 北米出は、React が利用されるケースの方が多いと思うので、目的によっては React を勧めていますが、特に React を学ぶ理由がない場合には、Vue の方が最初の学習は楽に勧められるので有利と考えています。

特に初めての方の場合、設定に時間を費やす場合は多いので、少しでも簡単な方が学習を先に進められるため効率良く学習が進められます。

もう一つは、React の場合は、「Javascript に HTML を組み込む」と言う方法で、プログラムで Web ブラウザの表示をコントロールするような形になっています。Javascript をある程度学習している場合には、余り大きな問題ではないのですが、初めて Javascript を学習する場合には、混乱しやすい傾向があります。

一方で Vue の方は、HTML、Javascript、CSS を一つのファイルに記述できるようになっていて、独立に記述ができるので、初めて Javascript を勉強する場合でも、混乱しない場合が多いようです。Vue はどちらかというと、「HTML にプログラム要素を取り入れた感じ」です。これで、「データの処理(Javascript)」と「表示の処理（HTML)」を区別しやすいので混乱が少なくなっているのだと思います。

面倒な Redux

React では、データの一括管理を行う場合、「Redux」と言うパッケージを利用するケースが多いかと思います。 実は、初心者には厄介なもので、ここで躓く人は多いと思います。インターネットを検索すると設定のやり方は沢山見つかるのですが、必要な下準備の設定が結構沢山あるので、初心者には躓きやすい部分です。

これも慣れて仕舞えば、やることはほとんどない毎回同じなので、それほど難しいわけではありませんが、最初は、何か訳のわからない感じで混乱の原因になっていると思います。

もう一つ、React で面倒なのは、データを一元管理する場合に注意が必要です。よく言われる「mutable」と「immutable」の違いをよく理解しておく必要があります。例を挙げると、普通のシンプルな変数の場合は問題ないのですが、配列（array）やクラス（class）などの一部のデータを更新する場合には、注意が必要という制約があります。

React でも Vue でも変数の更新を監視していて、変数が変更されると表示も更新されるような仕組みがあります。この変数の更新を正しく認識するための制約があります。

React の場合は、配列などの一部のデータの更新は、変更できないようになっています。（immutable）従って、配列のデータを変えるには、元のデータの複製（コピー）を作成して、コピーのデータを変更して、その後で、配列全体を入れ替えるというちょっと面倒な操作が必要になります。これは、データをどのように扱っているかで変わってきます。これをきちんとしないと、データが正しく更新されないなどの不具合の原因になりますが、知らないと見つけるのが大変な不具合の一つになっています。

Vue の場合は、変更が可能なので余り意識する必要がない分シンプルになっています。

このあたりも、学習が進んで、データをどのように扱っているかが正しく理解できるようになると大きな問題ではないのですが、最初は分かりにくい部分の一つです。

こうした面倒を考えると、まずはシンプルに扱える VUEX を学習して、きちんと理解した上で、Redux を扱うと注意する部分がわかりやすくなります。この辺りも Vue をお勧めする理由です。

（＊）配列は、データの参照（Reference／Pointer）として扱っているのが大きな理由です。つまり、配列のデータの先頭のポインタとしてデータを保持しているので、この参照（Reference／Pointer）が変更されない場合は、配列の個々のデータの変更は検出できないという事です。C 言語などを学習していると、この辺りの理由はわかりやすいかと思います。

まとめ

React と Vue どちらを学習するか迷うことも多いと思いますが、特に React を学習する理由がない場合には、初心者の場合、Vue を学習することを勧めています。

理由は、Vue は予め基本的な機能は、設定しやすいように設計されており、ちょっとした事ですが設定の手間が省けます。設定は、初心者が躓きやすい部分なので、まずは、最小限の設定で、動作するアプリを作れるようになる方が早く先に進む事ができます。

必要ならば、Vue をマスターした上で、React に取り組んだ方が、早く習得できるので、初心者には Vue を勧めています。VUEX のデータの扱いもシンプルなので、バグを作り込む可能性も低くなるのでデバッグも簡単になります。