🎇
「React vs Vue.js：コンポーネントの構造とファイル形式の違い」
Vue.jsとReactには様々な違いがありますが、今回はコンポーネント構造について比較してみたいと思います。
コンポーネントの構造
まずはじめにそれぞれのフレームワークにおいて、典型的なコンポーネントを見ていただきます。
上記の画像ではなんとなく構造が違うことがわかりますが、この中でざっくり要素を分けてみる以下のようになります。
Reactでは、要素としてマークアップとロジックしか持っていない一方で、Vue.jsではマークアップとロジックに加えスタイルも要素も備えています。
この違いは両フレームワークで使用されるファイル形式の違いによるものです。
ファイル形式の違い
Reactの場合
Reactでは、ファイル形式にJSX（JavaScript XML）が採用されています。
JSXはHTMLのようなタグ記法でコンポーネントを定義することができ、JavaScriptのコードとマークアップが混在することで、コンポーネントを直感的に理解しやすく、開発効率が向上するというメリットがあります。
JSXには、スタイルの記述は含めることができないため、Reactではスタイルを別ファイルで管理しています。
Vue.jsの場合
一方、Vue.jsでは、SFC（単一ファイルコンポーネント）が採用されています。
SFCは、HTML、JavaScript、CSSのコードを1つのファイルにまとめた形式で、Vue.jsのコンポーネントを定義することができます。
Discussion