リリース・改善中
Framework · 2014年公開
Vue.js は宣言的なコンポーネントで UI を作るプログレッシブな JavaScript フレームワークで、Nuxt はルーティング・サーバーレンダリング・サーバー API を加えます。
Vue.js は Evan You が開発し、2014 年に初めて公開されたオープンソースの JavaScript フレームワークで、ユーザーインターフェースの構築に使われます。HTML ベースのテンプレートとリアクティブな状態を組み合わせ、データが変わると画面が自動的に更新されます。基本単位は、テンプレート・スクリプト・スタイルを 1 つのファイルにまとめる単一ファイルコンポーネント(.vue)です。Nuxt は Vue の上に作られたフルスタックフレームワークで、ファイルベースルーティング、自動インポート、サーバーサイドレンダリング、Nitro エンジンによるサーバー API を標準で備えています。
Vue は、既存ページの一部に script タグ 1 つで組み込む軽い使い方から、Vite でビルドする本格的なシングルページアプリケーションまで、必要に応じて段階的に導入できます。管理画面、ダッシュボード、社内ツールのように操作の多い画面に特に向いています。検索エンジンでの見え方や初回表示の速さが重要な場合や、画面と API を 1 つのプロジェクトで扱いたい場合は、Nuxt がサーバーレンダリング、静的生成、サーバールートをまとめて提供し、Node.js サーバーや静的ホスティングなどさまざまな環境にデプロイできます。
初めて学ぶなら、Node.js をインストールしてから公式サイトのインタラクティブなチュートリアルとガイドに沿って、リアクティビティ、コンポーネント、テンプレート構文を身につけるのがおすすめです。次に npm create vue@latest で Vite ベースのプロジェクトを作って実際の画面を作り、ルーティングの規約やサーバーレンダリングが必要になったら Nuxt に進みましょう。状態管理には Pinia、ユニットテストには Vitest が公式に推奨されています。
ref、reactive、computed で宣言した状態は依存関係を追跡するため、値が変わるとそれを使う部分だけが効率よく再描画されます。
テンプレート、スクリプト、スタイルを 1 つの .vue ファイルにまとめ、スコープ付きスタイルや TypeScript をすぐに使えます。
関連するロジックを関数単位でまとめ、composable として再利用できるので、大きなコンポーネントも機能ごとに整理しやすくなります。
ファイルベースルーティング、自動インポート、サーバーレンダリング、静的生成、server フォルダーの API ルートを追加設定なしで使えます。
Vue と Nuxt のツールは Node.js 上で動きます。nodejs.org から LTS 版をインストールし、node と npm のバージョンが表示されることを確認します。
node --version && npm --version公式のプロジェクト作成ツール create-vue を実行すると、TypeScript、Vue Router、Pinia、Vitest などを使うかを順に尋ねられます。作成されたフォルダーで npm install と npm run dev を実行すると Vite の開発サーバーが起動します。
npm create vue@latestNuxt を使う場合は nuxi で新しいプロジェクトを作ります。作成されたフォルダーに移動して npm run dev を実行すると、開発サーバーが既定で http://localhost:3000 で起動します。
npx nuxi@latest init my-nuxt-appsrc/App.vue は create-vue プロジェクトのルートコンポーネントです。script setup ブロックで ref(0) によりリアクティブな count を作り、テンプレートでは二重波括弧で値を表示し、@click でクリックのたびに 1 ずつ増やします。count が変わると、Vue はそれに依存する部分だけを再描画します。npm run dev を実行したままファイルを保存すると、変更がすぐにブラウザーに反映されます。
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run devインストールから Vue.js · Nuxt の中心となる考え方まで、6 章で順を追って学びます。
Vue.js · Nuxt について質問し、経験を共有し、意見を交わす場所です。
まだディスカッションはありません。最初の話題を始めましょう。
コメント 0件
ログイン · ログインするとコメントできます。
最初のコメントを書いてみましょう。