STAFF BLOG スタッフブログ

VueのコンポーネントをクラスとJSXで記述する

ReactライクなVueの書き方

VueのコンポーネントをクラスとJSXで記述する

今回は現在のJSフレームワークで2トップであろう Vue と React の特徴と、
Vue で React のメリットを一部再現する方法を紹介します。

この2つのフレームワークの大きな違いは HTML-Centric なのか JavaScript-Centric なのかだと思います。

Vue は HTML-Centric なので、HTMLが主役で
v-model や v-bind などHTMLを拡張したものでHTMLがそのまま使えるので初期の学習コストが少なく
ライトな使い方に向いています。

React は JavaScript-Centric なので、JavaScript が主役で
JavaScriptだけで記述できて次期ES2で追加された機能も柔軟に書けるので実装時の障害になりづらく、
ヘビーな使い方にも対応できます。

コンポーネント例

Vue と React でコンポーネントを作成した例をみてみましょう。
どちらも極力余計なコードを削りシンプルに実装しています。

Vueは単一ファイルコンポーネントで作成したのでtemplate要素、script要素、style要素 をHTMLのように記述します。
ぱっと見た感じ馴染みやすいですね。

React の render() の部分はJSXと言われるものでJavaScript上でHTMLを表現できます。
map() の部分がそうですが純粋なJavaScriptなのでフレームワーク側が対応する必要なく処理を記述できます。

Vue でも React ライクに

Vue でも JavaScript-Centric に記述することが可能です。
CodeSandboxの開発者@CompuIves氏が ReactライクなVueの書き方を紹介していたので、先程と同様のコンポーネントを作成したコードを紹介します。
(この記事で紹介しているコードもCodeSandboxで公開したものを表示しています。)

Vue は標準ではクラスが使えないので、vue-class-component を使用します。
このモジュールを使うことでクラスをそのままコンポーネントとして返せるようになりました。
なお、デコレータを使う場合は transform-decorators-legacy が必要です。

先程の React のコードとJSXの部分は全く同じです。
Vue らしさは無くなってしまいましたが、柔軟に JavaScript が書けるようになりました。
これで例えば Promise を絡めた場合でも余計なモジュールを追加せずに処理が書けるでしょう。

Reactに乗り換えようか迷っている方や、一部の処理が複雑で Vue がサポートしていないような
実装をしたいとき上手く使い分けるといいかもしれませんね。
個人的には純粋に JavaScript が書けるこっちのコードのほうが好きです。

vue-class-component を使ってクラス化すれば TypeScript の型チェックにも対応できるのでそういった方にもおすすめです。

INDEXブログ一覧へ
CONTACTお問い合わせはこちら