Vue.jsの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します

今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、Vue.jsの基礎知識について、できるだけ分かりやすく解説していきます。Vue.js初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。

0. はじめに

ぼっち大学生のみなさんこんにちは！

今回は、プログラミング初心者のぼっち大学生の皆さんと一緒に、Vue.jsの基礎知識について学んでいきたいと思います。

おすすめのVue.js本はこちら

1. Vue.jsとは？

Vue.jsは、インターネット上で使われるWebページを作るための道具の一つです。

画面がきれいに動いたり、色々な情報を表示したりするのに役立ちます。

Vue.jsを使うと、プログラムが簡単で分かりやすくなるので、たくさんの人が使っています。

1-1. Vue.jsの概要と特徴

Vue.jsは、たくさんあるプログラムの道具の中で、とても人気があります。

特に、画面がすぐに変わるようなWebページを作るのに便利です。

Vue.jsの特徴は、使いやすさや学びやすさです。

それに、いろいろな機能が組み込まれていて、簡単にWebページを作れます。

1-1-1. どのようなシーンで使われるのか？

Vue.jsは、色々なWebページで使われています。

例えば、お店のサイトで商品を見るときや、天気の情報を見るサイトなどです。

Vue.jsを使うと、画面がすばやく動いたり、情報が変わったりします。

サンプルコード:

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'こんにちは、Vue.js!'
    }
  })
</script>

1-1-2. Vue.jsの歴史

Vue.jsは、2014年に開発されました。

最初は、小さなプロジェクトで使われていましたが、だんだんと大きなプロジェクトでも使われるようになりました。

今では、世界中のたくさんのWebページで使われています。

おすすめのVue.js本はこちら

1-2. 他のフレームワークとの違い

Vue.jsの他にも、ReactやAngularという道具があります。

これらは、Vue.jsと同じようにWebページを作るための道具ですが、それぞれ違いがあります。

1-2-1. Reactとの違い

Reactは、Vue.jsよりも少し前に開発された道具です。

Reactも人気があり、たくさんのWebページで使われています。

しかし、Vue.jsと比べると、学びにくいという意見もあります。

Vue.jsの方が、分かりやすくて、始めやすいと言われています。

1-2-2. Angularとの違い

Angularは、Googleが開発した道具です。

Angularは、大きなWebページを作るのに向いています。

しかし、Vue.jsやReactと比べると、学ぶのが難しいと言われています。

また、Angularはプログラムが大きくなることが多いので、小さなプロジェクトには向いていないことがあります。

Vue.jsは、小さなプロジェクトから大きなプロジェクトまで、幅広く使えるので、たくさんの人に選ばれています。

おすすめのVue.js本はこちら

2. Vue.jsの環境設定

Vue.jsを使ってWebページを作るためには、まず環境設定を行う必要があります。

これは、道具を使えるようにするための準備です。

2-1. 必要なツールのインストール方法

Vue.jsを使うためには、いくつかのツールをインストールする必要があります。

これらのツールをインストールする方法を説明します。

2-1-1. Node.jsのインストール

まず、Node.jsというツールをインストールしましょう。

Node.jsは、プログラムを書くための基本的な道具です。インストール方法は以下の通りです。

Node.js公式ページにアクセスします。

「LTS」ボタンをクリックして、Node.jsをダウンロードします。

ダウンロードしたファイルを開いて、指示に従ってインストールします。

インストールが完了したら、コマンドプロンプトやターミナルを開いて、次のコマンドを入力して確認しましょう。

node -v

2-1-2. Vue CLIのインストール

次に、Vue CLIというツールをインストールしましょう。

Vue CLIは、Vue.jsのプロジェクトを作るための便利なツールです。

インストールは次のコマンドをコマンドプロンプトやターミナルに入力して行います。

npm install -g @vue/cli

インストールが完了したら、次のコマンドを入力して確認しましょう。

vue --version

おすすめのVue.js本はこちら

2-2. Vue.jsプロジェクトの作成手順

ツールがインストールできたら、Vue.jsのプロジェクトを作成しましょう。

2-2-1. プロジェクトの初期設定

まず、コマンドプロンプトやターミナルで、プロジェクトを作成したいフォルダに移動しましょう。

次に、以下のコマンドを入力してプロジェクトを作成します。

vue create my-first-vue-project

ここで、「my-first-vue-project」の部分は、自分が好きな名前に変更できます。

プロジェクトが作成されたら、そのフォルダに移動してください。

2-2-2. ディレクトリ構造の説明

プロジェクトが作成されると、いくつかのフォルダやファイルが作られます。

これらのフォルダやファイルは、プロジェクトを作るために必要なものです。

以下に、主なフォルダやファイルの説明をします。

• public/ : 画像やフォントなどの静的なファイルが入るフォルダです。
• src/ : Webページの中身を書くためのフォルダです。ここにコードが入ります。
• assets/ : 画像やスタイルシートなどが入るフォルダです。
• components/ : 小さな部品を作るためのフォルダです。これらの部品を組み合わせてWebページを作ります。
• App.vue : このファイルが、Webページのメインの部分です。ここで他の部品を組み合わせてWebページを作ります。
• package.json : プロジェクトに関する情報や、使っているツールの情報が書かれているファイルです。

おすすめのVue.js本はこちら

3. Vue.jsの基本概念

Vue.jsを使ってWebページを作るために、まずは基本的な概念を理解しましょう。

ここでは、データバインディング、コンポーネント、ディレクティブ、イベントハンドリングといった重要な概念を説明します。

3-1. データバインディング

データバインディングとは、プログラムのデータとWebページの表示をつなげることです。

これには、双方向データバインディングと単方向データフローがあります。

3-1-1. 双方向データバインディング

双方向データバインディングは、データと表示が互いに影響しあうことです。

例えば、テキストボックスに入力された文字が、プログラムのデータにも反映され、データが変わると表示も変わります。

Vue.jsでは、v-modelディレクティブを使って双方向データバインディングを行います。

<input v-model="message">
<p>入力された文字: {{ message }}</p>

3-1-2. 単方向データフロー

単方向データフローは、データが一方向に流れることです。

Vue.jsでは、親コンポーネントから子コンポーネントへデータを渡すことができますが、逆に子コンポーネントから親コンポーネントへ直接データを渡すことはできません。

これにより、データの流れがわかりやすくなります。

おすすめのVue.js本はこちら

3-2. コンポーネント

コンポーネントとは、Webページの小さな部品のことです。

これらの部品を組み合わせて、Webページ全体を作ります。

3-2-1. コンポーネントの作成方法

Vue.jsでコンポーネントを作る方法は簡単です。

まず、 <script> タグの中に、コンポーネントの定義を書きます。

<script>
Vue.component('my-component', {
  template: '<p>こんにちは、Vue.jsの世界へ！</p>'
});
</script>

次に、HTMLの中で、作成したコンポーネントを使いたい場所に、コンポーネント名を書きます。

<my-component></my-component>

3-2-2. コンポーネント間のデータのやり取り

コンポーネント間でデータをやり取りするには、親コンポーネントから子コンポーネントへデータを渡すことができます。

これを「props」と呼びます。

親コンポーネントでは、子コンポーネントに渡すデータを指定します。

<child-component :message="parentMessage"></child-component>

子コンポーネントでは、 props オプションで受け取るデータを定義します。

Vue.component('child-component', {
  props: ['message'],
  template: '<p>親コンポーネントからのメッセージ: {{ message }}</p>'
});

おすすめのVue.js本はこちら

3-3. ディレクティブ

ディレクティブは、Vue.jsで提供される特別な属性です。

これを使って、HTML要素に動的な振る舞いを追加できます。

3-3-1. v-modelの使い方

v-model ディレクティブは、フォーム要素とデータを双方向にバインドするために使います。

例えば、テキストボックスに入力された文字をデータに反映させることができます。

<input v-model="message">
<p>入力された文字: {{ message }}</p>

3-3-2. v-showとv-ifの使い分け

v-show と v-if は、条件によって要素を表示・非表示にするディレクティブです。

v-show は、要素を隠すだけで、要素自体は残ります。

一方、 v-if は、条件が満たされないときに要素自体が削除されます。

要素の表示・非表示が頻繁に切り替わる場合は v-show を、表示する条件がほとんど変わらない場合は v-if を使いましょう。

<p v-show="isVisible">v-showで表示・非表示を切り替えます</p>
<p v-if="isVisible">v-ifで表示・非表示を切り替えます</p>

3-4. イベントハンドリング

イベントハンドリングは、ユーザーの操作などのイベントに対して、プログラムが反応する仕組みです。

3-4-1. イベントリスナーの登録

イベントリスナーは、イベントが発生したときに実行される関数です。

Vue.jsでは、 v-on ディレクティブを使ってイベントリスナーを登録します。

例えば、ボタンをクリックしたときに sayHello 関数を実行するには、以下のように書きます。

<template>
  <button v-on:click="sayHello">こんにちは！</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('こんにちは！');
    }
  }
}
</script>

3-4-2. イベント修飾子

イベント修飾子は、イベントリスナーの振る舞いを変更するための短い記述です。

例えば、 stop 修飾子を使うと、イベントの伝播を止めることができます。

以下の例では、 outer 要素をクリックしたときには outerClicked 関数が実行されますが、 inner 要素をクリックしたときには、 innerClicked 関数が実行された後、 outerClicked 関数は実行されません。

<template>
  <div v-on:click="outerClicked" class="outer">
    外側
    <div v-on:click.stop="innerClicked" class="inner">内側</div>
  </div>
</template>

<script>
export default {
  methods: {
    outerClicked() {
      alert('外側がクリックされました！');
    },
    innerClicked() {
      alert('内側がクリックされました！');
    }
  }
}
</script>

他にも、 prevent 修飾子や once 修飾子など、さまざまなイベント修飾子があります。

これらを使って、イベントリスナーの振る舞いを簡単に制御できます。

おすすめのVue.js本はこちら

4. 実践的なVue.jsの使い方

これまでに学んだ基本的な概念を活かして、実際にVue.jsを使ってWebページを作る方法を学びましょう。

ここでは、条件分岐や繰り返し処理、フォームの入力とバリデーション、ページ遷移、状態管理といった実践的な使い方を説明します。

4-1. 条件分岐と繰り返し処理

Vue.jsでは、 v-if や v-for ディレクティブを使って、条件分岐や繰り返し処理を行うことができます。

<!-- 条件分岐 -->
<p v-if="score >= 60">合格です！</p>
<p v-else>残念、不合格です。</p>

<!-- 繰り返し処理 -->
<ul>
  <li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>

おすすめのVue.js本はこちら

4-2. フォームの入力とバリデーション

フォームの入力を受け付ける際に、入力内容が正しいかどうかをチェックすることをバリデーションと言います。

Vue.jsでは、 computed プロパティを使ってバリデーションを行うことができます。

<form @submit.prevent="submitForm">
  <input type="text" v-model="name">
  <p v-if="!isValidName">名前は必須です。</p>
  <button type="submit">送信</button>
</form>

computed: {
  isValidName() {
    return this.name.trim() !== '';
  }
},
methods: {
  submitForm() {
    if (!this.isValidName) {
      alert('名前を入力してください。');
      return;
    }
    // 送信処理
  }
}

おすすめのVue.js本はこちら

4-3. Vue Routerを使ったページ遷移

Vue Routerは、Vue.jsでページ遷移を簡単に実現できるプラグインです。

まず、Vue Routerをインストールして、ルーティングの設定を行います。

import VueRouter from 'vue-router';

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
];

const router = new VueRouter({ routes });

new Vue({
  router
}).$mount('#app');

ページ遷移は、 <router-link> コンポーネントを使って行います。

<router-link to="/">ホーム</router-link>
<router-link to="/about">アバウト</router-link>

おすすめのVue.js本はこちら

4-4. Vuexを使った状態管理

Vuexは、Vue.jsアプリケーションの状態管理を行うためのライブラリです。

複数のコンポーネントで共有するデータや処理を一元的に管理することができます。

まず、Vuexをインストールし、ストアを作成します。

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

new Vue({
  store
}).$mount('#app');

ストアの状態や処理は、コンポーネントで this.$store を使ってアクセスできます。

また、 mapState や mapActions などのヘルパー関数を使って、簡単にコンポーネントにマッピングすることもできます。

<p>{{ count }}</p>
<button @click="increment">カウントアップ</button>

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};

これで、実践的なVue.jsの使い方について学ぶことができました。

これらの概念を理解し、活用することで、効率的にWebアプリケーションを開発することができます。

練習を重ねて、Vue.jsのスキルを磨いていきましょう！

おすすめのVue.js本はこちら

5. Vue.jsプロジェクトのデプロイ

いよいよ、作成したVue.jsプロジェクトをインターネット上に公開しましょう。

この章では、ビルドとデプロイの違いや一般的なデプロイ方法を学びます。

5-1. ビルドとデプロイの違い

ビルドは、開発中のコードを効率的に実行できる形に変換するプロセスです。

デプロイは、ビルドされたコードをインターネット上に公開するプロセスです。

5-1-1. 開発モードと本番モード

開発モードでは、コードの変更がすぐに反映されるように設定されています。

本番モードでは、コードが最適化されて高速に動作するように設定されています。

# 開発モードで実行
npm run serve

# 本番モードでビルド
npm run build

5-1-2. ビルドプロセスの概要

ビルドプロセスでは、コードの最適化や圧縮が行われます。

これにより、Webページの読み込み速度が向上します。

おすすめのVue.js本はこちら

5-2. 一般的なデプロイ方法

いくつかの一般的なデプロイ方法を紹介します。

どれを使うかは、あなたの好みやプロジェクトの要件によって選んでください。

5-2-1. GitHub Pagesを使ったデプロイ

GitHub Pagesは、GitHubリポジトリにある静的ファイルを無料で公開できるサービスです。

gh-pages ブランチにビルドされたコードをプッシュするだけで簡単にデプロイできます。

# ビルド
npm run build

# GitHub Pagesにデプロイ
git subtree push --prefix dist origin gh-pages

5-2-2. Firebase Hostingを使ったデプロイ

Firebase Hostingは、Googleが提供するWebホスティングサービスです。

まず、Firebase CLIをインストールしてプロジェクトを初期化します。

その後、ビルドされたコードをデプロイします。

# Firebase CLIのインストール
npm install -g firebase-tools

# プロジェクトの初期化
firebase init

# ビルド
npm run build

# Firebase Hostingにデプロイ
firebase deploy

5-2-3. Netlifyを使ったデプロイ

Netlifyは、Webアプリケーションを簡単にデプロイできるサービスです。

GitHub、GitLab、Bitbucketといったリポジトリと連携し、自動的にビルドとデプロイを行ってくれます。

5-2-3-1. Netlifyアカウントの作成

まず、NetlifyのWebサイトでアカウントを作成してください。その後、リポジトリと連携させます。

5-2-3-2. ビルド設定

プロジェクトの設定画面で、ビルドコマンドや公開ディレクトリを指定してください。

Vue.jsプロジェクトの場合、ビルドコマンドは npm run build 、公開ディレクトリは dist です。

5-2-3-3. 自動デプロイ

設定が完了したら、リポジトリにプッシュするだけで自動的にビルドとデプロイが行われます。

WebサイトのURLは、プロジェクトの設定画面で確認できます。

これで、Vue.jsプロジェクトのデプロイ方法について学ぶことができました。

いろいろなデプロイ方法があるので、プロジェクトに合った方法を選んで、インターネット上に公開してみましょうね。

おすすめのVue.js本はこちら

6. プログラミング初心者のぼっち大学生におすすめしたいVue.js本を紹介します

まとめに入る前に、Vue.js初心者のぼっち大学生のみなさんに、現役エンジニアの僕がおすすめしたい書籍を何冊か紹介しておきたいと思います。

6-1. Vue.js3超入門

© 秀和システム

実のところ、僕は今回紹介したVue.jsを実務でもよく使います。

そんな僕がVue.jsの2系が出たころに、入門書として最初に手に取ったのが、掌田津耶乃さんの「Vue.js & Nuxt.js超入門」という書籍でした。

そして、今回ぼっち大学生のみなさんに紹介する本が、その掌田津耶乃さんがVue.jsの最新バージョンである3系に対応した解説書として執筆された、「Vue.js3超入門」になります。

Node.jsの解説記事でも言及した通り、「Vue.js3超入門」をはじめとした掌田津耶乃さんの書籍は、全くの初心者から既に他の技術を学んでいる経験者まで、読む人を選ばない分かりやすさが最大の特徴。

この「Vue.js3超入門」は、これからVue.jsを学んでWebサイト制作やWebアプリケーション開発に活用したいというぼっち大学生に、真っ先におすすめしたい書籍となっております。

7. まとめ

今回は、プログラミング初心者のぼっち大学生向けに、Vue.jsの基礎知識を解説させていただきました。

今回紹介したVue.jsのスキルは、近年のWebフロントエンドの開発現場において、求められる機会が非常に多い技術のひとつ。

かくいう僕も、エージェント経由の案件を探すときに、Vue.jsやVue.js製フレームワークであるNuxt.jsのスキルが、毎回大いに役立っています。

また、先ほども言及しましたが、このVue.jsは学習のしやすさに定評があるので、以前解説したJavaScriptやTypeScriptについて、ある程度学習の経験を積まれたぼっち大学生のみなさんに、ぜひ最初に学んでいただきたいJSフレームワークです。

© SAMURAI TERAKOYA

Vue.jsは、あらゆる学習プラットフォームや書籍、Webサイトなどで、初心者向けの学習コンテンツが多数提供されているフレームワークの1つ。

例えば、ぼっち大学生のみなさんが独学でVue.jsを学ぶような場合も、学習のためのリソースに困ることはまず無いでしょう。

しかし、ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、Vue.jsをより効率的かつ確実に学ぶことが可能です。

SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で解説していますが、

• 40種類以上に及ぶ学び放題の教材
• 平均回答スピード30分以内のQ&A掲示板
• 月1回〜の現役エンジニアとのオンラインレッスン
• プログラミング学習を継続できる学習ログ

を、月額2,980円〜という破格の料金で利用することができます。

Vue.jsの学習に興味があり、プログラミングスクールで学ぶことも視野に入れていたが、費用面がネックとなり、なかなか学習に手を付けられなかったというぼっち大学生のみなさんは、ぜひ一度このSAMURAI TERAKOYA（侍テラコヤ）に無料で相談してみてはいかがでしょうか？

SAMURAI TERAKOYAに無料で相談する