前回、node.jsとVSCodeを導入してひとまずTypeScriptを動かせるようにしてみた→【TypeScript入門】MacのVSCodeで環境構築＆簡単なサンプルを作ってみよう。
TypeScriptが「型が使えるJavaScript」として注目されているのはいいけど、TypeScriptを勉強するだけでは実際に何が作れるのか、どう活かせるのかがイメージしづらい人も多いのではないだろうか（私もその一人だった）。
そこでおすすめしたいのが、「Vue.js（ビュー・ジェイエス）」というフレームワーク。Vue.jsはTypeScriptが使えて、初めての人でも学びやすく、実践に役立ちやすいツールだと思う。今回はVue.jsの概念や周辺部分に触れつつ導入して、実際にブラウザ上で表示させる。
Vue.js（ビュー・ジェイエス）は、WebアプリやWebサイトの見た目＝UIをつくるためのフレームワーク。「フレームワーク」というのは、よく使う機能が最初からまとまっていて、開発が楽になる道具のこととでも言おう。
Vue.jsはJavaScriptで書かれてるが、Vue 3からはTypeScriptとの連携がとても強化されている。今では数多くのプロジェクトがVue + TypeScriptで開発されている。Vue.jsの最大の特徴は、「少しずつ導入できて、最終的には本格的なアプリも作れる」という柔軟性にある。初心者でも1ファイルから始められる一方、Vite を使えば本格的な開発環境も整う。つまり、初心者がちょっと表示させるのも、上級者がスケールアップさせるのも、両方に適応できるのがVue。じゃあVueでいいじゃん！
Vue.jsとReactは、どちらもWebアプリの見た目を作るための人気フレームワーク（※Reactは正確にはライブラリ）。私もどちらから学習していこうか悩んだ。結論から言うと「これから個人で開発を始めたい」「TypeScriptで学びたい」という方にはVueがおすすめかなと思っている。
ReactはFacebook（現Meta）が開発した技術で、プロレベルで非常に広く使われている。自由度が高く、大規模な開発にも向いているが、そのぶん「どのライブラリを組み合わせるか」「どう設計するか」といった判断が多く、初学者には少しハードルが高い面がある気がする。
一方のVue.jsは、始めやすいし学びやすい。HTMLに近いテンプレート構文で、見た目のコードも分かりやすく、Viteで環境構築もスムーズ。さらに、公式が提供する機能（ルーティングや状態管理など）が充実していて、必要なものが最初からそろっている。
また、Vueは「.vueファイル」という形で、1つのファイルにHTML・CSS・JavaScript（TypeScript）をまとめて書ける構造になっているため、小さな部品を組み立てるようにアプリを作ることができるのも特徴の一つ。ReactではJSXという独自の構文に慣れる必要があるようだが、Vueはより直感的に感じた。もちろん、Reactにもたくさんの強みがあると思う。ただ、「これからTypeScriptで何か作ってみたい」「自分ひとりでもアプリを作れるようになりたい」という人にとっては、Vueがいいだろう。簡単なわけではないが、さくっと動いてくれる点が気に入っている。
もっともシンプルなサンプルコード
↓
Vueのサンプル
{{ message }}
上記をたとえばtestTS.htmlとでも名前をつけて保存し、ブラウザで開いてみてほしい。
Windowsでメモ帳、Macでテキストエディットなどを使っている人はご注意を。そのまま上記のコードが表示されるかも。その時はブラウザがテキストファイルとして認識してしまっている。素直にVSCodeとか他のエディタを使い、形式を.htmlで保存してほしい（.txtはダメ）。
「Vue.jsはJavaScriptとどう違うの？」と思う方もいるかもしれなし。Vue.jsは、あくまでJavaScriptをベースにしたフレームワークである。つまり、JavaScriptがあってこそVueは動く。Vueを使うことでJavaScriptだけでは面倒な部分をすばやく、簡潔に、ミスなく書けるようになるというのが嬉しさ。
Vue 3以降では、TypeScriptとの統合が本格化した。
vueファイルの中で上記のように書くだけで、「このスクリプトはTypeScriptで書いてますよ」という宣言になる。
個人でWebアプリを開発してみたい初心者には、Vue.jsのほうがおすすめだと思う。Vueは、ほんの数行のコードとCDN（ネット上の読み込みリンク）だけで動きかせるほど、導入が簡単。いきなり大きな開発環境を用意しなくても、まずは1ページのHTMLファイルを作ってみればいい。ちょっとやってみるか的なノリが通じやすいし、動くものを見られるまでの距離が短い。Vueの書き方はHTMLに非常に近く、テンプレート構文も直感的。コードを見たときに何が起きているのか理解しやすく、1人で設計から実装、デバッグまでこなすときにもごりごりやれる。
他に、最初は小さな表示処理だけに使い、あとから必要に応じてルーティング（ページ遷移）や状態管理（Pinia）などを段階的に追加可能。たとえば、「まずはToDoアプリだけ」「あとでユーザー認証をつけたい」「最終的には複数ページにしたい」といった形で、後出しでも開発を進められるのがVueの強みの一つ。環境構築・設計・UI作り・ロジック実装まで、誤解を恐れずに言うなら、思いつきで構築していける。