【ぶゅー】

Vue とは?

💡 「HTML感覚」で始められるフロントエンドの優等生
📌 このページのポイント
Vueのコンポーネント構造 App Header Main Footer CardList SearchForm リアクティブシステム データ変更 自動検知 画面更新 ユーザー操作
Vueのコンポーネント構造とリアクティブシステム
ひよこ ひよこ

ペンギン先生、Vueってどんなものなの?

ペンギン先生 ペンギン先生

Webページの画面を作るためのJavaScriptフレームワークだよ。ボタンを押したら数字が増えるとか、入力欄に文字を打ったらリアルタイムに表示が変わるとか、そういう動きのあるページを効率よく作れるんだ。

ひよこ ひよこ

ReactとかSvelteとの違いは何なの?

ペンギン先生 ペンギン先生

一番の特徴は「HTMLに近い書き方ができる」ことだね。Reactだと JSXっていう独特の記法を覚える必要があるけど、Vueのテンプレート構文はほぼHTMLそのままだから、Webの基礎がわかっていればすんなり入れるよ。

ひよこ ひよこ

初心者に優しいんだね!でも簡単ってことは機能が少ないの?

ペンギン先生 ペンギン先生

そんなことはないよ。Vue Router(ページ遷移)、Pinia(状態管理)、Vuetify(UIコンポーネント集)といった公式・準公式のライブラリが揃ってて、小さなサイトから大規模アプリまで対応できるんだ。

ひよこ ひよこ

Nuxtっていうのも聞いたことがあるんだけど…?

ペンギン先生 ペンギン先生

NuxtはVueの上に作られた「メタフレームワーク」だよ。サーバーサイドレンダリングやファイルベースルーティングが最初から使えるから、SEOが大事なサイトやブログを作るときに便利なんだ。ReactにおけるNext.jsと同じポジションだね。

ひよこ ひよこ

どういう会社や国で使われてるの?

ペンギン先生 ペンギン先生

特にアジア圏で人気が高くて、中国ではAlibaba、Baiduなどの大手テック企業が採用してるよ。日本でもLINEやnoteなど多くのサービスで使われてる。作者のEvan Youさんが中国出身なのも影響してるね。

ひよこ ひよこ

へえ!ベテランエンジニアが気にするポイントって何かあるの?

ペンギン先生 ペンギン先生

Vue 2からVue 3への移行がまだ業界全体では完了しきっていないことだね。Options APIとComposition APIという2つの書き方が共存してて、チームでどちらに統一するかの判断が必要なんだ。新規プロジェクトならComposition API一択だけど、既存コードの移行コストは見極めが大事だよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Vue」って出てきたら「HTMLに近い書き方で始められるWeb画面づくりのフレームワーク」と思えればだいたいOK!
📖 おまけ:英語の意味
「Vue.js」 = ビュー(見た目)
💬 フランス語で「視界」を意味する"vue"から。Webの「View(見た目)」を担うフレームワークだからこの名前がついたんだよ
← 用語集にもどる