この講座について

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

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

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

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

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

  • JavaScriptの基礎に触れて、新しいフレームワークを学びたい方
  • 近年主流のSPA(シングル・ページ・アプリケーション)について知りたい方
  • バックエンドの基礎を学び終えて、技術の幅を広げたい方
  • LaravelQuestを学び、より発展的な内容を知りたい方

今回作るアプリは?

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

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

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

YouTube Curation アプリ

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

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

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

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

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

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

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

SPAとは?

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

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

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

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

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

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

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

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

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

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

Vue.jsとは?

Vue.jsの特徴

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

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

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

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

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つなら
 仮に「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

単一ファイルコンポーネントの構成は、下記のような3つのブロック構成になり、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://yu-nocode.com/vue-quest-2

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事