【ぶゅー】

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(見た目)」を担うフレームワークだからこの名前がついたんだよ
← 用語集にもどる