Update!!前回に引き続きVue.jsとReactの違いを比較していきたいと思います。今回はテンプレート上での処理についてみていきます。Vue.jsもReactも処理に合わせてDOMを動的に切り替えることが多々あるのですが、その場合には処理の結果やコンポーネント内のステートによってDOMが変わりますので、テンプレート側でも何らかの処理が加える必要があります。前回までの記事も合わせてご参考ください。これまでに引き続きサンプルとしてあげているアプリケーションのコードになります。今回はテンプレート上の処理をメインにしているので、テンプレート部分に関係するところだけを抜粋しています。Vue.jsではよりHTMLに近い形で、独自構文が使われているのが確認できます。対するReactではJSX記法でHTMLの文字列を出力している形になりますね。</>)では上記のコードでも記述されている、コンポーネントのテンプレート上で行われる処理の部分を比較していきます。変数展開(テンプレートリテラル)処理の中で使われる、ステートなどの変数や、算出プロパティはテンプレート上に値として出力することができます。Vue.jsではマスタッシュ記法と呼ばれ、波括弧を二重にして囲み、その中で変数名や関数名を記述します。}}</div></template>Reactでも同じ要領でテンプレート上に変数を展開できます。二重ではなく波括弧は1つだけになります。波括弧の中では変数だけではなくJavaScriptの処理が書けるようになります。v-if(条件付きレンダリング)HTMLを特定の条件の時に出力したい、切り分けたいなどの時に、Vue.jsでは「v-if」という独自のディレクティブを使うことで簡単に条件分岐ができるようになります。HTMLの属性のように扱われ、条件式をそのまま入力します。</div></template>Reactではそのような独自構文が存在しないため、単純にif文や三項演算子などで条件分岐を行う必要がありますが、このように「&&」の論理演算子を使うとシンプルに記述ができます。v-for(リストレンダリング)配列やオブジェクトに合わせて、HTMLを繰り返し出力したいこともよくあります。そんな場合にはVue.jsでは「v-for」のディレクティブを使ってループさせることができます。ループの中では配列の値やオプジェクトのキーを指定することで呼び出した値をHTML上に出力することができます。その際にはkey属性でユニークな値を割り振っておく必要があります。</ul></template>Reactでは自前で繰り返し処理をする必要があります。配列をmap()メソッドでHTMLの値としてループで出力していきます。配列やオブジェクトの値の展開や、key属性の指定などはVue.jsと同様になりますね。v-html(HTML文字列の挿入)変数として扱われる動的なHTMLの文字列の出力をしたい時には、Vue.jsでは「v-html」というのが使われます。v-html="htmlStrings"></div></template>Reactの場合ですと「dangerouslySetInnerHTML」属性を使います。「__html」のキーがついたオブジェクトの形で指定する点だけ注意します。ref(DOM参照)テンプレート内の要素をDOMとして操作したい場合には「ref」属性を指定することで、処理側では「$refs」の中でDOMを呼び出すことができます。}</script>Reactでは「useRef」フックを使うことで同様のことが実現できます。「current」キーを指定することで指定したDOMを参照することができます。)}テンプレート内の処理を行う場合には、Vue.jsでは独自の構文が用意されているのに対して、Reactでは自前で処理を書いていく必要があります。Vue.jsで独自構文を覚える学習コストはあるものの、記述は楽になりますが、ReactではVanillaJSに近い形で書けるのでJavaScriptに慣れている方ですとこちらの方が自然に見えるのかもしれませんね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。