✍️

TypeScript入門書の執筆にあたってフロントエンド章にVueを採用した理由

2025/01/26に公開

こんにちは、西山と申します。2019年に新卒入社した企業でTypeScriptを書き始めてから、もうすぐ7年目になります。
去年の夏、筆者が現在所属している株式会社Helpfeelのスポンサー活動をきっかけに執筆のお声がけをいただき、『TECHNICAL MASTER はじめてのTypeScript エンジニア入門編』という本を書きました。来月上旬に発売されます。

本書は秀和システムによる「TECHNICAL MASTER」シリーズのひとつで、これから開発者を目指す人を読者のメインターゲットにしています。
この記事ではそのパート3、Node.jsとフロントエンドフレームワークを使ってWebアプリケーションを構築する章において、ReactでもSvelteでもなくVue.jsを採用した理由について説明します。

1. テンプレートという発想がおなじみ

まず一つ目は、Vueがドキュメントの構造を記述するのにHTMLベースのテンプレート構文(template syntax)を採用していることです。
本書はWebアプリといった特定の開発領域ではなく、TypeScriptプログラミングを通して開発過程そのものを学ぶ本である以上、その内容は応用できる範囲が広いものであるべきだと考えました。
たとえば、Ruby on Railsで開発経験のあるエンジニアは、それを通じてWebサーバーやデータベースの知識を身につけていることから、他の言語やWebフレームワークでもすんなり開発に入れるでしょう。
その意味でVueが導入しているテンプレートという概念は、Ruby on RailsやPHP Laravel、JavaのBladeといったWebフレームワークでも「テンプレートエンジン」といった名称で機能の一部となっているものです。

<% provide(:title, 'All users') %>
<h1>All users</h1>

<ul class="users">
  <% @users.each do |user| %>
    <li>
      <%= gravatar_for user, size: 52 %>
      <%= link_to user.name, user %>
    </li>
  <% end %>
</ul>

Vueのテンプレート構文において動的な値をテキスト展開するには、二重中括弧 {{ }} でプロパティを囲みます。この特徴的なマスタッシュ構文(mustache syntax)は、直接的にはAngularJS、より遠くはMustacheやそのJavaScript実装であるHandlebars.jsに由来するものです。

<li v-for="item in items">
  {{ item.message }}
</li>

筆者が最初の職場でVueとTypeScriptを書くようになった2019年ごろ、Vueはいわゆるフロンドエンド以外の領域から支持を集めていました。
(驚いたことにこの状況は現在もあまり変わっていないようで、先日東京で開催されたVue Fes Japan 2024に参加した際も、サーバーサイドエンジニアやデザイナーが参加者の中に多かったことが印象的でした。)
2010年後半当時はフロントエンドという開発領域がまだ確立しておらず、NuxtやNext.jsのようなメタフレームワークも今ほど積極的には採用されていませんでした。
現在でもRailsやLaravelといったフレームワークのフロントエンドとしてVueを併用する事例が多く存在します。これらはビュー層にテンプレートエンジンを採用しており、そのリプレイス先としてその名もずばりVueが重宝されたという事情があったのでしょう。

対してReactではドキュメント構造を記述するのにJSXが採用されています。JSXはPreactやSolidJSなど、限られたフレームワークでしか利用されていません。
フロントエンドという枠組みだけで見ればReactのシェアが現在は圧倒的ですが、より広くWebアプリケーション開発を見渡せば、JSXが利用されているシーンはごく一部に過ぎないのです。
また、要素をレンダリング関数として記述するというReactの考え方は、抽象度においてレベルが高いです。筆者自身も業務ではReactを書いており、この記事を読んでいる開発者の多くもその難しさを忘れていると思いますが、TSXを初学者がいきなり書くのは正直厳しいと思います。
副作用やメモ化など、Reactそのものが求める知識も多いです。TypeScriptプログラミングを身につけるために、Reactについて詳しくならないといけないというのは本末転倒なことから、本書ではReactおよびJSXを題材からは外しました。

2. 機能の一貫性が安定している

二つ目は、Vueが機能の一貫性において非常に安定(stable)していることです。
Vue 2からの経緯をご存知の方には、このことは意外に思われるかもしれません。実際、Vueはバージョン3のリリース以降に大規模な機能変更をしておらず、今後も破壊的変更はしないとのことです。
かつてVueはバージョン2からメジャーアップデートする際に、Composition APIの導入を含めた大きな変更を行いました。しかしライブラリ開発者が最新バージョンについていけず、エコシステムとの乖離が生じる状況となってしまいました。現在ではNuxt 3をはじめ、多くの関連ライブラリがVue 3に対応したものになっています。
こうした過去の経験を踏まえ、Vueのコアチームは現在では機能の一貫性を非常に重要視しているように思われます。

Reactにも実は似たような経緯があります。一つはClass ComponentからFunctional Componentへの転換であり、もう一つはReact Hooksの導入です。
それ自体が破壊的変更でなかったはといえ、ベストプラクティスが別物になってしまうため、多くの開発者がより新しいコードへの書き換えを余儀なくされたことは事実でしょう。

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

React周辺のエコシステムにも目を移してみると、近年の新機能リリースで更新内容が目立つのはやはりNext.jsです。
現在はWebホスティングサービスを提供するVercelによって開発されていますが、Server ComponentsおよびApp Routerに代表される近年の「サーバーサイドフレームワーク」化は、「PHPを書いているようだ」と揶揄されることもあります。

'use server'
import { db } from '@/lib/db' // Your database client
 
export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

そしていま、かつてのVueと同じ道を行こうとしているのがSvelteです。
Svelteはバージョン5でRunesの導入を予告し、その後2024年10月に正式リリースしました。これはリアクティビティの宣言などにそれまで使われていた単体でのドル記号 $ に代わり、より明示的な $state$effect などのコンパイラーマクロを利用するものです。

let { width, height } = $props(); // instead of `export let`

const area = $derived(width * height);

$effect(() => {
  console.log(area);
});

コンパイル性能を向上させるためというのが変更の主な理由ですが、コードを簡潔に短く書けるというSvelteの持ち味が失われることに対しては当初より賛否両論があります。Runesという名称に反してマジカルさが減っているという意見すら存在します。
こうした事情から、現在Svelteは大きな転換期にあり、機能の一貫性という面でVueに遅れをとることから、本書での採用を見送りました。

3. コミュニティに好感が持てる

最後に、Vueとそのコミュニティに筆者が単純に好感を持っていることを挙げたいと思います。
OSSが健全な開発を続けることにおいて、コミュニティが友好的であることは重要な要素です。プログラミング言語Rubyは日本人のまつもとゆきひろ(Matz)さんによって開発されましたが、コアメンバーには現在でも日本出身の開発者が一定数おり、毎年日本の各都市で開催されるRubyKaigiは世界のプログラマー同士の活発な交流の場となっています。

Reactはどうでしょうか? MetaやVercelのエンジニアによって遠くシリコンバレーで開発されたものを、我々は天下り的に受け入れてきたわけではないと果たして言い切れるでしょうか。
ReactやSvelteの開発に日本のプログラマーが貢献したとか、あるいは特定の意見がフィードバックされたといった例を、筆者はこれまで聞いたことがありません(あったら筆者の不勉強なのでご教示ください)。

Vueのコアチームは、どういうわけか日本に大きな関心を寄せているようです。Vueはバージョン3以降のリリースごとに日本のアニメ作品からタイトルを取っており、3.0はOne Piece、直近の3.5では天元突破グレンラガンでした。

去年のVue Fes Japan 2024でVueのメンバーの何人かと話す機会があったのですが、日本のアニメ作品が好きだとか、本物の寿司を食べることができて感動しているといった話を聞くことができました。
Vueのコアメンバーの一員にして、VitestやSlidevなどを世に送り出した新進気鋭の開発者であるAnthony Fuさんは、日本も生活拠点の一つとしながら現在日本語を勉強中とのことです。
Anthony's Road to Open Source - Yak Shavingと題された氏の講演は、Vueを通して得られた自身のキャリアを「贈り物」としてのOSS活動として総括するもので、非常に心を打つものがありました。

Image from Gyazo

筆者もまた、こうしたオープンで友好的なコミュニティの発展を応援したいですし、願わくばその一員でありたいと思います。
みんなが使っているから、仕事をするのに役立つからという理由でReactやその他のフレームワークを選ぶこともできましたが、筆者はそうしませんでした。
本書を通してTypeScriptプログラミングを学ぶ読者もまた、技術採用などの実利的な判断を超えて、開発することの喜びや「プログラミングのよさ」を感じてほしいと思います。
そして将来、ひょっとするとVueなどのOSSへのコントリビューターが生まれることを期待しています。

おわりに

本書はこれからエンジニアを目指す人のために書かれた本ですが、本記事での見方に関しては開発者としてすでに活躍されているみなさんの声も聞いてみたいです。
賛同のコメント等寄せていただけると励みになります。ここまで読んでいただきありがとうございます。

Discussion