VueQuest #1 【Vue.js/SPA/環境構築/双方向データバインディングとは？】

投稿日 2020年11月30日
更新日 2024年5月21日
著者 Seki Yukihiro
カテゴリー Vue

VueQuestはこんな講座です！

こんにちは。Vue.js / Laravelエンジニアのセキです。

まず、当講座の概要についてご説明します。

当講座をオススメするのは、下記のような方です。

JavaScriptの基礎に触れて、新しいフレームワークを学びたい方
近年主流のSPA（シングル・ページ・アプリケーション）について知りたい方
バックエンドの基礎を学び終えて、技術の幅を広げたい方
LaravelQuestを学んだ後、より発展的な内容を知りたい方
JavaScript を卒業して TypeScript で開発をしたいというモダンな Web開発現場の需要に答えたい方
フリーランスエンジニアになって高単価の案件を獲得したい方

※ 後ほど説明しておりますが、「LaravelQuest」の受講は必須条件ではなく、LaravelQuestを受講されていない方でも、問題なく当講座を受講いただけるようカリキュラムを作成しております。

講座全体の構成として、次ような「全４章」の章立てとなっています。下記で各章の概要を説明します。

※ 講義内で作成するアプリの完成画像も併せて添付しております。

１章　Vue.js基礎

最初にやって頂くのは、Vue.jsの基礎の勉強です。

SPAとVue.jsの仕組みを基礎から理解できるような内容となっています。基礎から丁寧に解説しておりますので、Vue.jsやSPAに初めて触れられる方も安心して受講頂けます。

基礎と言いつつも、学習修了と同時に、こんなアプリを作成できます！

　⬇️　YouTube動画アプリ作成

２章　TypeScript入門　

2章では、Vue.jsをより効率的に扱うため、TypeScriptについて学んでいきます。

２章にて詳しく説明しますが、TypeScriptはJavaScriptの進化版のようなもので、効率的かつ安全なWeb開発を行うために、モダンフロントエンドでは欠かせない存在になってきている言語です。

TypeScriptを学び、モダンで高単価な仕事を取れるエンジニアに近づきましょう！

　⬇️　TODOリスト作成

３章　Vue.js応用

3章では、基礎編で学習した内容を応用的に扱います。

Vue.jsの実務では必須となる、VuexとVueRouterについても深く学びます。VuexとVueRouterを使いこなせれば、優秀なVue.jsエンジニアになることができます！

　⬇️　カレンダーアプリ作成

４章　Vue.js × TypeScript 応用

4章では、今までの総復習として、これまでのVue/TypleScriptの知識を使い、実践形式でアプリを開発していきます。

あえて高度な内容としていますが、この章が理解できれば、実務現場で即戦力となるフロントエンドエンジニアになれることでしょう。

　⬇️　Trello風アプリ作成

講義全体としては、Vue.jsの基礎〜応用を学んで頂くことで、皆さんをVue.jsを現場の実務に近い形で扱えるレベルに引き上げることを目的としています。

本講義では、全てのカリキュラムを、Vue.jsの現役エンジニア２名が監修・作成しており、Vue.jsを現場で扱えることで彼らは実際に高単価を獲得しています。

近年のフロントエンドエンジニアはバックエンドエンジニアと比べても特に人手不足であるがゆえに、Vue.jsエンジニアになれば高単価を獲得することも難しくありません。更にTypeScriptまで身に付けることができれば、モダンフロントエンド領域では鬼に金棒です。

ですので、２名のVue.jsエンジニアの知識を吸収することで、全ての講座を終える頃には、高単価を狙えるエンジニアとなっていることと思います！

Vue.js基礎で学ぶもの

Vue.js基礎部分の講座内容について説明します。

本章は、LaravelQuestという、サーバサイドの講座でつくったアプリと接続して、近年主流となってきているSPA（シングル・ページ・アプリケーション）の作り方について学べる講座になっています。

ただ、サーバ側との接続の難しい内容については触れませんので、Laravelを学ばれていない方もLaravelQuestという別途講座を学ばれていない方も、全く問題なくご参加頂けますので、ご安心下さい！

今回作るアプリは？

この講座では、実際にアプリを作りながら、Vue.jsの基礎を学んでいきます。

アプリケーションとしては、「YouTubeキュレーションサイト（まとめサイト）」を作ります。

アプリの完成版としては、下記のようなものが出来上がります。下記をご覧ください。

YouTube Curation アプリ

講座修了後の完成版アプリURL

https://youtube-curation.netlify.app/

機能としては、主に下記が実装されています。

YouTube動画フォーム入力による登録機能
YouTube動画ドラッグ&ドロップによる削除機能
登録時のバリデーション機能

表面は全てVue.jsで作られていて、ブラウザ上で動作しています。

CLICK!ボタンを押したり、動画タイトルをドラッグ&ドロップした瞬間に、Vue.jsがサーバ（Laravel）と通信して、サーバ側の保存・削除処理を実行させます。

当然ながら、これも簡易的なSPAとなっています。

SPAとは？

そもそも、SPA（シングル・ページ・アプリケーション）とは何なのか、見ていきましょう。

シングルページアプリケーション

参考に、下記のページをご覧ください。

h ttps://digitalidentity.co.jp/blog/creative/about-single-page-application

シングル・ページ・アプリケーションの特徴として、主に下記の2点が挙げられます。

動作が快適に行われる
視覚的に出来る範囲が広がる

１点目の動作性について解説します。

従来のサーバーサイドのアプリでは、１つの動作ごとにページの画面全体を書き換える処理が必要となっていましたが、SPAでは、「リクエスト　→　レスポンス」という動作が裏で動いて、必要な箇所の情報のみ「取得　→　書き換え」することができ、アプリケーション全体として、機敏な動作を実現することができます

２点目の視覚的な部分について書きますと、JavaScriptを利用することによって、視覚的にリッチな動きを見せることが可能だったり、できる範囲が広がるということです。今回のアプリでいうと、動画投稿フォームに入力中のエラーメッセージの動きなどを見ていただくと分かりやすいかと思います。

これらの理由によって、フロントエンドとサーバサイドの技術を豊富に混ぜ合わせたSPAが近年の主流なアプリ開発の技術になってきています。

Vue.jsとは？

Vue.jsの特徴

Vue.jsの概要についても確認していきましょう。参考に下記のページをご覧ください。

https://www.gpol.co.jp/blog/15

Vue.jsの特徴として、下記の３点が上げられるかと思います。

学習コストの低さ
単一ファイルコンポーネント
双方向データバインディング

Vue.jsと並んで人気のJavaScriptフレームワークであるReactなどと比較すると、学習コスト＝勉強する労力は低く、比較的学びやすいフレームワークであるということがいわれています。

単一ファイルコンポーネントとは、アプリを構成する部品を意味します。Vue.jsの作りとして、複数の部品（コンポーネント）を組み合わせてアプリを作成することで、同じ部品を再利用能となり、アプリの拡張性が増すという特徴があります。

また、双方向データバインディングについて説明しますと、従来のJavaScriptだと実装するのが大変な「値の連動」が、この双方向の技術により、超簡単に作ることができるというものです。

単一ファイルコンポーネント・双方向データバインディングについては、後ほど詳しく見ていきますので、まずは単語だけでも知っておいてください。

事前準備（MacOSの方は除く）

MacOSの方以外は、下記の事前準備を行いましょう。

Windowsの方

Windowsユーザの方は、下記のページを参考に、Git Bash をインストールしましょう。

Windowsでも、後ほど出てくるLinuxコマンドの一部を打てるようにするためです。

WindowsにGit Bashをインストールする

https://qiita.com/suke_masa/items/404f06309bb32ca6c9c5

AWS Cloud9の方

万一、Windows, Macでも上手く動作しないという場合の対応として、AWS Cloud9を利用するという方法もあります。

下記の操作方法を見ながら、Cloud9上で操作してみて下さい。

AWSアカウントを作成しよう

Cloud9の利用には、まずAWSアカウントが必要です。
下記のページにアクセスして、下記登録手順を参考に、自分のアカウントを作りましょう。

※作成にはクレジットカードが必要ですが、講義で使うCloud9ワークスペース１つなら
　仮に「1年間」毎日フルで使い続けても無料です。

AWS公式ページ　アカウント登録
https://aws.amazon.com/jp/cloud9/

※参考
AWS公式ページ　アカウント登録手順
https://aws.amazon.com/jp/register-flow/

Cloud9 ワークスペースを作成しよう

AWSアカウントが作成できたら、下記サイトを参考に、講義用の「ワークスペース（開発スペース）」を作ってみましょう！

【AWS Cloud9 の使い方】最初に覚えておくべき機能まとめ

https://26gram.com/how-to-use-cloud9

※参照：初心者向け完全無料プログラミング入門

プラットフォームのタイプ（OS）を選択する際は、下記の画像の通り、「 Amazon Linux 2 」ではなく、「Amazon Linux」を選択しましょう。

Cloud9のNode.jsのバージョンを上げる

ワークスペースの作成が完了しましたら、次に、下記の記事を参考にNode.jsのバージョンアップを行ってください。

https://qiita.com/kutarou197/items/6c52988f2795e37476e5

次に、下記Vue.js環境構築を実行して下さい。

devServerの設定

vue.config.jsをVue.jsのプロジェクト直下に作成して、中身に下記のように書いてください。

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

その後、下記コマンドでサーバを立ち上げ、

$ npm run serve

ツールバーの「Preview」→「Preview Running Application」でプレビューを確認して、Vue.jsのトップページが表示されれば、準備完了です。

事前準備 VScode

MacとWindows環境で開発をされる方はVScodeで開発をしていきたいと思います。

まだVScodeが入っていない方は公式ページからインストールをお願いします。

https://code.visualstudio.com/

Vue.js環境構築をしよう

Node.jsをインストール

まず、ご自分のPCにNode.jsがインストールされているかを確認して下さい。

下記コマンドで確認いただけます。

Node.jsのインストールの確認

$ node -v
$ npm -v

上記のコマンドで、それぞれのバージョンが表示されればOKです。基本的に、Node.jsがインストールされていれば、NPMもインストールされているはずです。

まだインストールされていない方は、下記の記事を参考にインストールしましょう。

インストールする際のバージョンは、Node.js公式の推奨版でOKです。

Node.jsがインストールされていない方はこちらから

Node.jsのインストール（macOSの方）

https://prog-8.com/docs/nodejs-env

Node.jsのインストール(Windowsの方）

https://prog-8.com/docs/nodejs-env-win

Node.js公式（※こちらから推奨版をインストールしましょう）

https://nodejs.org/ja/

Vue CLI のインストール

今回は、Vueを利用するために、VueCLIというものを使っていきます。

VueCLIとは、Vueを使うための便利な機能がパッケージされているツール群です。実務でよく使われるということもあり、今回はVueCLIを利用していきます。

下記コマンドでPC全体でVueコマンドが利用できるようになります。今回は皆さんと環境を近づけるため、バージョン4.4.6で実行していきたいと思います。

$ npm install -g @vue/cli@4.4.6

パーミッションエラーが発生したら、下記のコマンドで再実行してください。

パーミッションエラーが出る場合

$ sudo npm install -g @vue/cli@4.4.6

インストールが完了したら、下記できちんとインストールできているか、バージョン確認を行いましょう。

$ vue --version

これで、インストールしたVueCLIのバージョンが表示されれば、インストール完了です。

Vueプロジェクト作成

では続いて、Vueの新規プロジェクトをつくっていきましょう！

まず、Vueプロジェクトファイルを作りたいディレクトリに移動してから、下記のコマンドを実行します。

$ vue create vue-quest

インストール時、質問されるので、下記を選択ください。

? Please pick a preset: default (babel, eslint)

Babelとは、Vueで利用される新しい記述を古い記述に変換してくれるツールです。例えばWindowsのインターネットエクスプローラーというブラウザは、新しい記述を正しく認識してくれないため、古い記述方法に変換する必要があり、その変換の役割を担ってくれるのがBabelです。

ESLintとは、コード検証ツールで、皆さんが書いたコードの誤りを指摘してくれる優れものです。

無事プロジェクト作成できたら、下記コマンドでプロジェクトの存在を確認→vue-questディレクトリに移動してから、サーバを起動しましょう。

$ ls
$ cd vue-quest
$ ls
$ npm run serve

起動を確認したら、http://localhost:8080/ にアクセスして、Vue.jsのトップページが表示されることを確認してください。

下記のような画面が表示されれば、問題ありません。

Vuetifyの導入

次に、Vuetifyを導入していきます。

Vuetifyとは、Vue.jsで使えるコンポーネント（アプリを構成する部品）をあらかじめ用意してくれるライブラリです。つまり、自分で部品を作らなくても、Vuetifyが綺麗なパーツを提供してくれるということです。

導入を進めていきましょう。

サーバが立ち上がっているターミナルのウインドウは、そのまま残しておきましょう。別途もう一つターミナルを立ち上げ、vue-questディレクトリに移動してください。

そして、次のコマンドを打ちます。

$ vue add vuetify

インストール時、複数質問されるので、下記を選択ください。

※下記の通り実行しないと、動作が上手くいかない場合がありますので、お気をつけください。

? Still proceed? Yes
? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? Yes
? Use custom properties (CSS variables)? Yes
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale (Use arrow keys) English

主要な選択肢の解説

pre-made template → Vueプロジェクトのトップページを書き換えるかどうか
custom theme → プロジェクトのテーマ色などを変更するかどうか
icon → 使うアイコンの種類を選択
babel/polyfill → コードの記法・関数・ライブラリの変換を行うツールを使うかどうか
locale → 言語を選択

インストール後、http://localhost:8080/　のトップページが、下記画像のようにVuetify仕様に変わっていることを確認して下さい。

ホットモジュールリプレースメント（ブラウザの更新を行わなくても自動的にコード変更を検知してくれる便利な処理）が効いていれば、自動で下記の画面に切り替わるはずです。

ディレクトリ解説

開発に移る前に、VueCLIプロジェクトのディレクトリ構成を学んでいきましょう。

node_modules

パッケージをインストールした際に、パッケージ群が入ってくる場所。原則自分では触らないと覚えておきましょう

src

開発中に、主に書き換えたり、書き加えたりしていくファイル群をいれておく場所。効率的な読み込み処理を行うため、デプロイする際には、srcディレクトリの中のファイルは圧縮（ミニファイ化）されます。

src > main.js

このファイルが、下記で登場するindex.htmlに埋め込まれる形となります。

public

srcディレクトリとは対照的に、このディレクトリの下に置かれたファイルは圧縮（ミニファイ化）されません。画像ファイルなど圧縮したくないファイルを入れておく場所です。

public > index.html

プロジェクトの読み込みの起点となるファイル。

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

デプロイ時には、このdivタグの下に、srcディレクトリの中身のファイル群が入ってくる形となります。

babel.config.js

新しい記法のコードを古い記法に書き換えるツールを利用するための、設定ファイルです。

package-lock.json package.json

プロジェクトの設計書となるようなファイル。どんなパッケージがインストールされているか、ご自身のプロジェクトのパッケージ情報を確認することができます。

単一ファイルコンポーネントについて

ひとつのファイルで、下記の機能をすべて混ぜ合わせた部品として扱うことが可能です。上記でも書いた通り、ひとつのファイルを何度も再利用できるのが特徴です。

HTML
JavaScript
CSS

単一ファイルコンポーネントの構成は、下記のような３つのブロック構成になり、HTMLから順番に記述していく、シンプルな形です。

Vue.jsの基本的なファイル構成

<template>
  <!-- ここに、HTMLを記述します -->
</template>
<script>
  // ここに、JavaScriptを記述します
</script>
<style>
  /* ここに、CSSを記述します */
</style>

ヘッダー・フッターの作成

まず、src直下にある下記のファイルを開いて、変更してきましょう。

App.vueの変更

下記を参考に、コードを書き換えて下さい。

<template>
    <v-app>
        <v-toolbar
          dark
          src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
          max-height="60"
        >
          <v-toolbar-title>YouTube Curation</v-toolbar-title>
        </v-toolbar>
        <v-toolbar
          dark
          src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
        >
          <v-spacer />
          <p>@QuestAcademia</p>
        </v-toolbar>
    </v-app>
</template>

v-から始まるタグは、vuetifyが作ってくれている既存のコンポーネントを呼び出すタグを示します。vuetifyを利用すると、簡単にヘッダーやフッターを作ることができます。

vuetifyのコンポーネントを使えば、属性（上記のdarkなどが属性。props【プロパティ】ともいう）を書き加えるだけで、見た目や機能が変化します。

vuetifyについて詳しく知りたい方は、下記を参考にして学んでみましょう。

Vuetify公式

https://vuetifyjs.com/ja/

双方向データバインディングについて

src > components ディレクトリの直下に、下記のファイルを新規に作っていきましょう。

Top.vueの作成

下記を参考に、新しくファイルを作成下さい。

<template>
 　　<v-container>
　　　　　　　　<v-card
　　　　　　　　　　 class="my-10"
　　　　　　　　　　 elevation="10"
　　　　　　　　　　 rounded="xl"
　　　　　　　　　　 width="100%"
　　　　　　　　>
　　　　　　　　　　 <v-container class="mx-10 text-center" >
 　　　　　　　　　　　　　　<v-form> 　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　<v-text-field
 　　　　　　　　　　　　　　　　　　　　　　label="YouTube動画ID"
　　　　　　　　　　　　　　　　　　　　　　　　v-model="movieUrl"
　　　　　　　　　　　　　　　　　　　　　　　　placeholder="動画URLの【v= 】の後に続く英数字"
　　　　　　　　　　　　　　　　　　　　　　 style="width: 300px"
　　　　　　　　　　　　　　 　　　　/>
　　　　　　　　　　　　　　　　　　　　{{ movieUrl }}
　　　　　　　　　　　　 　　</v-form>
　　　　　　　　　　　　</v-container>
　　　　　　　　</v-card>
　　　　</v-container>
</template>
<script>
　　　　export default {
　　　　　　 name: 'Top',
　　　　　　 data () {
　　　　　　　　　　 return {
　　　　　　　　　　　　　　 movieUrl: "",
　　　　　　　　　　 }
 　　　　　　}
 　　}
</script>

カード（v-card）領域の中に、入力フォームを作成しており、elevationやroundedで影の大きさ・角の丸みを設定しています。

双方向データバインディングについて解説します。

まず、双方向データバインディングの際に使うdataは、関数の形式で、return で値を返す書き方をしますので、この記述方法を覚えましょう。

<template>の中に記述された「v-model=”movieUrl”」と <script>のdataの中に記述された「movieUrl」が双方向データバインディングによって結び付くことで、フォームに入力した文字列を変更すると、その値がリアルタイムで {{ movieUrl }} の部分に反映されます。

やって頂けると分かるのですが、非常に簡単に値を連動させることができたと思います。素のJavaScriptやjQueryを利用したアプリ開発だと、このように値を連動させるのが難しく、「入力されたら、値の変化をinputイベントで拾って、変数に代入して・・・」などの実装の手間が掛かってしまうのですが、これをとても簡単に実現してくれるのがVue.jsの双方向データバインディングです。

なお、App.vueを変更しないと、Top.vueは表示されませんので、動作確認をするためにも、下記の変更も合わせて行いましょう。

App.vueの変更

下記を参考に、コードを書き換えて下さい。

<template>
    <v-app>
        <v-toolbar
          dark
          src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
          max-height="60"
        >
          <v-toolbar-title>YouTube Curation</v-toolbar-title>
        </v-toolbar>
        <top />
        <v-toolbar
          dark
          src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
        >
          <v-spacer />
          <p>@QuestAcademia</p>
        </v-toolbar>
    </v-app>
</template>
<script>
    import Top from './components/Top.vue'
    export default {
      name: 'App',
      components: {
        Top,
      }
    }
</script>

importで上記で記述したTop.vueファイルを呼び出し、exportによって呼び出されたファイルを出力しているようなイメージです。

次回#2はこちら

今回の講義は以上となります。

次は、今回学んだ双方向データバインディングを利用して、入力フォームにバリデーション機能を実装していきます。

https://prog.quest-academia.com/vue-quest-2

VueQuestはこんな講座です！

１章 Vue.js基礎

２章 TypeScript入門

３章 Vue.js応用

４章 Vue.js × TypeScript 応用

Vue.js基礎で学ぶもの

今回作るアプリは？

SPAとは？

シングルページアプリケーション

Vue.jsとは？

Vue.jsの特徴

事前準備（MacOSの方は除く）

Windowsの方

AWS Cloud9の方

AWSアカウントを作成しよう

Cloud9 ワークスペースを作成しよう

Cloud9のNode.jsのバージョンを上げる

devServerの設定

事前準備 VScode

Vue.js環境構築をしよう

Node.jsをインストール

Node.jsがインストールされていない方はこちらから

Vue CLI のインストール

Vueプロジェクト作成

Vuetifyの導入

主要な選択肢の解説

ディレクトリ解説

node_modules

src

src > main.js

public

public > index.html

babel.config.js

package-lock.json package.json

単一ファイルコンポーネントについて

ヘッダー・フッターの作成

App.vueの変更

双方向データバインディングについて

Top.vueの作成

App.vueの変更

次回#2はこちら

１章　Vue.js基礎

２章　TypeScript入門　

３章　Vue.js応用

４章　Vue.js × TypeScript 応用