初心者のための Vue.js 入門

Vue.js は、ユーザーインターフェイスやシングルページアプリケーションを構築するための人気の JavaScript フレームワークです。シンプルさ、柔軟性、他のライブラリやプロジェクトとの統合のしやすさで知られています。Vue.js は、最小限の労力で動的な Web アプリケーションを構築したい初心者と経験豊富な開発者の両方にとって最適な選択肢です。

最初の Vue.js プロジェクトの設定

Vue.js を使い始めるには、開発環境をセットアップする必要があります。最も簡単な方法は、Vue CLI (コマンドラインインターフェイス) を使用することです。Vue CLI は、Vue.js プロジェクトの作成と管理に役立ちます。最初の Vue.js プロジェクトをセットアップするには、次の手順に従ってください。

Node.js と npm をインストールします: Vue.js を使用するには、システムに Node.js と npm (Node Package Manager) がインストールされている必要があります。これらは、公式 Node.js ウェブサイトからダウンロードしてインストールできます。
Vue CLI をインストールします: Node.js と npm がインストールされたら、ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行して Vue CLI をグローバルにインストールします。

npm install -g @vue/cli

新しい Vue プロジェクトを作成する: Vue CLI をインストールした後、次のコマンドを実行して新しい Vue.js プロジェクトを作成します。

vue create my-vue-app

プリセットを選択するように求められます。初心者の場合は、Enter を押してデフォルトのプリセットを選択します。Vue CLI は my-vue-app という名前の新しいフォルダーを作成し、プロジェクト構造を設定します。

プロジェクトフォルダーに移動します: 次のコマンドを実行してプロジェクトフォルダーに移動します:

cd my-vue-app

開発サーバーを実行する: ローカル開発サーバーを起動し、新しい Vue.js アプリケーションを表示するには、次のコマンドを実行します。

npm run serve

このコマンドは、http://localhost:8080 (または別の使用可能なポート) で開発サーバーを起動します。ブラウザを開いてこの URL に移動し、Vue.js アプリケーションが動作している様子を確認してください。

Vue.js プロジェクト構造を理解する

新しく作成された Vue.js プロジェクトには、整理された構造が備わっています。最も重要なファイルとフォルダーの概要を以下に示します。

src: このフォルダーには、アプリケーションのソースコードが含まれています。すべての Vue コンポーネント、スタイル、およびその他のリソースはここに配置されます。
public: このフォルダーには、画像、フォント、index.html ファイルなどの静的アセットが含まれています。index.html ファイルは、アプリケーションのエントリポイントとして機能します。
src/main.js: このファイルは、Vue.js アプリケーションのエントリポイントです。Vue インスタンスを初期化し、DOM にマウントします。
src/App.vue: これはアプリケーションのルートコンポーネントです。このファイルをカスタマイズして、アプリのメインレイアウトを作成できます。
src/components: このフォルダーには、HelloWorld.vue などのサンプル Vue コンポーネントが含まれています。このフォルダーに新しいコンポーネントを作成し、アプリケーションにインポートできます。

最初の Vue.js コンポーネントを作成する

Vue.js はコンポーネントベースのフレームワークです。つまり、アプリケーションは再利用可能で自己完結型のコンポーネントを使用して構築されます。挨拶メッセージを表示する簡単な Vue.js コンポーネントを作成しましょう。

新しいコンポーネントを作成します: src/components フォルダーに、Greeting.vue という名前の新しいファイルを作成し、次のコードを追加します。

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

コンポーネントは、HTML マークアップ用の '<template>'、JavaScript ロジック用の '<script>'、スコープ付き CSS スタイル用の '<style>' の 3 つのセクションに分かれています。

コンポーネントをインポートして使用する: src/App.vue を開き、新しい Greeting コンポーネントをインポートして使用するように変更します。

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>

変更を保存すると、開発サーバーが自動的にリロードされます。ページに「Hello, Vue.js!」という挨拶メッセージが表示されます。

結論

Vue.js 開発環境を正常にセットアップし、新しいプロジェクトを作成し、最初のコンポーネントを構築しました。Vue.js は、動的でインタラクティブな Web アプリケーションを迅速に作成できる強力で柔軟なフレームワークです。学習を続けると、Vue Router、Vuex、Composition API などのより高度な機能を発見し、さらに堅牢なアプリケーションを構築できるようになります。

今すぐ Vue.js を使って構築を始めて、最新の Web 開発の可能性を最大限に引き出しましょう。

vuejs セットアップコンポーネント cli インストールプロジェクトテンプレートスクリプトスタイルインポートモジュールビルドデプロイスコープ