Vueが2021年時点で最も優れたフレームワークだと感じる理由をVue/Reactエンジニアがまとめます！技術選定を悩んでいるなら必見です
2021.08.04
こんにちは！
社内で新しいサービスを開発する際や、既存サービスのフロントエンドの改修などで JS フレームワークの選定について調査・検討する場面があるかと思います。
数年前までは Vue / React / Angular の3つが代表的になってましたが、最近では参考文献・コミュニティの活発さなどから考えて Vue / Reactの2強になりつつあります。
中でも私は VueJS が2021年時点で最も優れたフレームワークだと考えており、今回は Vue のどのような点が優れているか解説したいと思います！
はじめに
本記事では VueJS を選ぶメリットなどについてまとめており、
ReactJS や Svelte などの他のフレームワークの特徴については本記事では触れません。
想定する読者
- Vue/React のどちらを採用すればよいか迷ってるヒト
- JS のフレームワークを用いた実装の経験がないヒト
VueJS について
VueJS は2014年に元 Google の Evan You 氏によって開発された、”ユーザーインターフェースを構築するためのプログレッシブフレームワーク”な JavaScript フレームワークです。
VueJS が採用されているプロダクトと各プロダクトへの採用理由
VueJS は国内外の有名なプロダクトで採用されており、今回は2つのプロダクトについてご紹介します。
新型コロナウイルス感染症対策サイト
こちらは2020年3月に Code for Japan によって開発された 新型コロナウイルスの感染動向などが可視化されたオープンソースのプロダクトです。
NuxtJS ベースで静的ホスティングに Netlify を採用しており、 オープンソースであることから誰でも改善提案できるプロダクトで Web エンジニアの間で注目を集めました。
こちらの記事にあるように、VueJS や NuxtJS の技術コミュニティが発展していることもあり VueJS が採用されたとのことです。
note
こちらはクリエイターが文章、漫画、写真や音声などを投稿し、ユーザーがそのコンテンツを楽しんで応援できるメディアプラットフォームです。
プロダクトリリース時は AngularJS を採用していたとのことですが、2018年時点で VueJS/NuxtJS への移行が完了。現在は ReactJS/Next.js への移行中とのことですが、2021年7月時点では TOP ページや記事詳細などのメイン箇所については VueJS/NuxtJS で作られております。
こちらのスライド内で、以下の要因から VueJS/NuxtJS が採用されたと紹介されています。
- 実行速度と開発効率の両立
- 学習コストの低さと親しみやすさ
- ドキュメントの充実度
- 国内コミュニティの活発度
- VueJS のエキスパートがコンサル
VueJs/NuxtJS で作られたサイト
企業のオウンドメディアやホームページなどの一般的な Web サイトでも多数導入されています。ハイパフォーマンスかつページ遷移やアニメーションなどのリッチな表現にも対応しているのが VueJS の魅力です。
下記は VueJS/NuxtJS で作られている Web サイトです。
ここからは VueJs が優れている点について説明したいと思います。
VueJS が優れている点
導入が手軽
VueJS は導入が手軽で開発を素早く始めることができます。HTML/CSS/JavaScript の基本的な知識がある方だと、コードを素早く理解することができると思います。
直感的なマークアップ
VueJS は SFC（単一コンポーネント）という特徴を持っており、1つのファイルでコンポーネントごとに HTML/CSS/JavaScript を記述することができます。 コンポーネントごとにまとまっているため、サイトのここの部分とコードのここの部分が対応しているといった関係性が掴みやすいと思います。
簡単な例ですが、
VueJS の場合の HTML/CSS 部分についてはほぼ普通のマークアップと同様の形式で記載することができます。
<template>
<h1>Hello, {{ getName }}</h1>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class SampleComponent extends Vue {
private name: string = 'hoge'
get getName() {
return this.name
}
}
</script><style scoped>
h1 {
font-size: 3.2rem;
}
</style>※ React の場合は、JSX と呼ばれる JavaScript の中に HTML のタグを組み込んでいく記法で、これまでマークアップだけをやられた方にとっては少々慣れが必要だと思います。
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}また、VueJS では JSX もサポートされております。
詳しい書き方はこちら
グローバルにコンフリクトしない CSS 実装にデフォルトで対応
Web サイト制作などで、普段 BEM などで CSS 設計を行いマークアップをされている方は特に恩恵を受けると思います。
CSS 設計は重複を起こさないための命名規則や CSS クラスの定義ルールによって、 CSS クラスの影響範囲を最小限に留めることを目的としてます。
ですが、CSS クラスの命名や定義ルールについてはエンジニアごとに癖があり、社内外で複数の作業者で1つのサイトをマークアップする際はある程度重複を考慮しなければいけません。
VueJS では、Scoped CSS がデフォルトで対応しているため、コンポーネントごとにユニーク属性が付加されます。 クラスセレクタを利用する限りは他コンポーネントの命名重複などを考える必要がなくなり、コンポーネント内の重複のみ気をつければ良いという事になります。
統合のしやすさ
VueJS はプログレッシブフレームワークの概念のもとに設計されているため、様々な規模の Web アプリケーションに対応することができます。
プログレッシブフレームワークとは、開発者の Evan You 氏によって提唱された、どのような規模や段階の Web アプリケーションにも対応できるフレームワークの概念です。他の一般的なフレームワークとは異なり、段階的にプロジェクトに適用できるように設計されています。
一般的なプロジェクト開発の場合、フレームワークを用いて開発しますが、 プロジェクトの進行に伴い様々な要件追加や回収を実施していくにつれアプリケーションの規模が大きくなると思います。
その度にフレームワークが要件に合わなくなったり乗り換えを検討する場合もあるかと思いますが、プログレッシブフレームワークは、アプリケーションの規模に応じて拡張しやすいように設計されています。
Web サイトでの利用や大規模なアプリケーションまで幅広く段階的に利用することが可能なフレームワークになっております。
コアとなるライブラリは View 層にのみ焦点が当てられているため、他のライブラリや既存のプロジェクトへの統合が簡単に対応できます。
以下の公式ライブラリをプロジェクトの規模や要件に合わせ段階的に導入することができます。
- Vue Router … クライアントサイドのルーティング管理
- Vuex … 状態管理
- Vue Test Utils … ユニットテスト
- vue-devtools … デバッグようのブラウザ拡張
- Vue CLI … プラグイン管理などのプロジェクトの環境整備
VueJS のコアライブラリのドキュメントが豊富なのは先ほど説明しましたが、上記の公式ライブラリについてもドキュメントが豊富なので実装に迷った際はまずそちらを活用していただくと良いと思います。
活動が頻繁な VueJS の日本コミュニティ
JS フレームワークの中でも、VueJSの日本コミュニティは活発です。
1年に1度のカンファレンスや定期的に VueJS ユーザーによる勉強会などが開催されており、VueJS/NuxtJS の公式ドキュメントの日本語翻訳なども頻繁に更新されています。
VueJS の公式 Slack は2021年7月時点で約4700人が参加しており、 Vue Forumと呼ばれる VueJS の Q&A サイトには日本人向けのサイトもあります。
NuxtJS で SSR 対応が柔軟・簡単に実現可能
NuxtJS は VueJS が View ライブラリとなって構築されるフロントエンドアプリケーションのフレームワークで、
Vue をプロジェクトで採用する際によく使われると思います。
VueJS の2系から単体で SSR のシステムを内蔵しており、VueJS 単体でも SSR の実現は可能になりましたが、NuxtJS を導入することでより柔軟に、より簡単にSSR の対応が可能になりました。
NuxtJS は webpack や Vuex、Vue router などが標準で入っており、自動的なルーティングやプリコンパイルが可能になっています。
公式サイトでのSSRのライフサイクルが非常に丁寧にまとめられており、このような面でも VueJS/NuxtJS はプロダクトに導入しやすいと思います。
NuxtJS は VueJS と同様の SPA にも対応しており、また SSG といった静的サイトジェネレーターでの静的サイトの配信も可能です。
SSR/SPA/SSG のモード切り替えについても設定ファイルの一部を変更するだけで実現可能です。
変更方法についても公式サイトで解説してます。
Vue3 で大規模に強い TypeScript 開発が可能
VueJS は型推論が考慮されずに設計されたフレームワークで、TypeScript と相性が良くないなどと言われてきました。
Vue3 では、Vue2.x での書き方と異なる Vue Composition API が標準化されました。
こちらの記事で詳しくまとめられてますが、以下の大きな特徴があります。
- setup 関数内部のみで完結できるのでネイティブ JS を書くような感覚
- 従来の VueJS の暗黙的部分が排除され、Typescript の恩恵を享受できる
- VueJS 内部の処理のオーバーヘッドが減少しレンダリングのパフォーマンスが大幅に向上
- Component 内の State のリアクティブが明示的なので状態を追いやすく、状態変化の見通しが良い
- 大規模化してもソースコードの見通しが良い
開発環境には Vue CLI が代表的で使われがちですが、 最近では Vue3 向けに開発が進められている Vite と呼ばれるビルドツールが登場し速度面で注目されつつあります。
コミュニティが活発なこともあり、 今後は Vue3 × Vite での開発が主流になっていくのではないかと考えております。
高速なビルドツール Vite で開発効率を向上
Vite（ヴィート）は VueJS の開発者である Evan You 氏が開発したノーバンドルなビルドツールです。
React や Svelte などにもサポートしており、より速く・より無駄のない開発環境を提供することを目的としてます。
こちらの記事では、Vue CLI では3秒近くかかっていたプロジェクトが Vite では0.5秒とかなり早くなったとあり開発効率が格段に上がると言えます。
上記の理由などから考えても活動が頻繁なビルドツールとなっております。
まとめ
今回は VueJS が優れている点についてご紹介しました。
この記事を読んでみて VueJS を採用したいと考えていただいた場合は、ぜひ私たちの他の記事についてもご覧いただければと思います！
また個人的な見解ですが、
VueJS は JS で加工した結果を HTML で出力、 ReactJS は JSX で加工しながら結果を出力するイメージです。
そのため、以下のような開発チーム事情の場合は、VueJS は力を発揮するかと思います。
- フロントエンドの経験が少ないエンジニア
- HTML/CSS/jQuery でサイト制作をしてきたマークアップエンジニア/デザイナー
- JSX よりはシンプルな HTML の記法のほうが好み
JavaScript をたくさん書いてきた方は React、HTML/CSS/jQuery でサイトを作ってこられた方は VueJS のほうが学習・実装しやすいと思います。
VueJS/NuxtJS でのフロントエンドの開発のご相談は、ぜひお気軽にお問い合わせください。
AWSの開発依頼・UI.UXデザインは、
お気軽にお問い合わせください。