1. Vue.js の基本機能とコンポーネント

◆Vue.js のおさらい

Vue.js とは、JavaScript のフレームワークで、Web アプリなどの
UI(ユーザーインターフェース)部分を開発するためのツールです。

Web アプリでは、HTML との連携が必要となります。
Vue.js の考え方として、HTML：テンプレート、
JavaScript：データオブジェクト とみなす事ができます。

Vue.js を使用するに当たり、以下のキーワードが基本となります。

・Vue クラスとインスタンス
・Mastache 構文
・ディレクティブ
・コンポーネント

1 つずつ解説して行きます。


● Vue クラス、インスタンスとは

クラスは設計図、インスタンスは実体に例えられます。
Vue.js を利用する際は、Vue クラスを定義した後に、
変数などを指定したインスタンスを作成します。
後述する new は New 演算子と呼ばれ、クラスを
インスタンス化する際に用いられます。


● Mastache 構文とは

テンプレート(HTML)からデータオブジェクト(Vue.js)にアクセス
する際に参照される {{ }}(二重波括弧)の事を指します。
Vue.js のプロパティや、JavaScript 式が利用可能です。


● ディレクティブとは

CSS の clss 属性のように、html タグに対して記述する属性の事。
「v-」から始まり、用途に応じて分類があります。以下は一例です。
・v-bind：式の値をページに反映させる
・v-on：イベント処理を実装させる
・v-model：フォームからの入力値を取得させる
・v-for, v-if：繰り返し処理や条件分岐を実装させる

上記のキーワードを押さえながら、次の演習を実施しましょう。


演習 1
Vue_web6フォルダ内の各ファイルに、以下のコードを記述して結果を確認しましょう。

[html]

<!--bodyタグ配下に記述 -->
<div id="app1">
  <p>{{ message }}</p>
  <p>{{ 2 + 3 }}</p>
  <p>{{ Date.now() }}</p>
</div>

<div id="app2">
  <a v-bind:href="url">計装エンジニアリング</a>
</div>

<div id="app3">
  <p>名前： {{ name }}</p>
  <p><input type="text" v-model="name" /></p>
</div>

[JavaScript]

let app1 = new Vue({
  el: "#app1",
  data: {
    message: "こんにちは！",
  },
});

let app2 = new Vue({
  el: "#app2",
  data: {
    url: "https://www.keiso.co.jp/",
  },
});

let app = new Vue({
  el: "#app3",
  data: {
    name: "",
  },
});

● コンポーネントとは

部品、成分、構成要素を意味する単語で、Vue.js では
ページを構成する UI 部品の事を指します。コンポーネント
として定義したものは、HTML で要素を記述する事で
繰り返し利用する事が可能です。


演習 2
以下のコードを記述し、コンポーネント化されたボタンを表示させましょう。
※演習1のコードは削除する事

[html]

<!--bodyタグ配下に記述-->
<div id="components">
  <button-counter></button-counter>
  <br /><br />
  <button-counter></button-counter>
  <br /><br />
  <button-counter></button-counter>
</div>

[JavaScript]

// button-counter のコンポーネントを定義
Vue.component("button-counter", {
  data: function () {
    return {
      count: 0,
    };
  },
  template: '<button v-on:click="count++">click {{ count }} !</button>',
});
// id="components"に Vueを適用
new Vue({ el: "#components" });




2. 応用 Vue.js(1)

◆ アニメーションの設定

Vue.js では、テンプレート要素(HTML 要素)に対し、標準で
アニメーション効果を設定できます。第 2 章では、その機能に
ついて学習して行きましょう。


●transition 要素

アニメーションを有効にするためには、transition 要素で
対象の要素を囲みます。この時、対象は単一の要素でなければ
ならない事に注意しましょう。


演習 1
Vue_animationフォルダ内の各ファイルに、次のコードを記述して結果を確認しましょう。

[html]

<!--bodyタグ配下に記述-->
<div id="app">
  <input type="button" value="表示/非表示" v-on:click="onclick" />
  <br /><br />
  <transition>
    <div id="panel" v-show="flag">
      クリックで表示が切り替わります。Vue.jsはこのようにアニメーションを設定する事ができる便利なフレームワークです。
    </div>
  </transition>
</div>

[CSS]

#panel {
  border: 2px solid lime;
  width: 350px;
  overflow: hidden;
}
/*アニメーション実施中の設定*/
.v-enter-active,
.v-leave-active {
  transition: height 0.5s;
}
/*開始状態(表示)*/
.v-enter {
  height: 0px;
}
/*終了状態*/
.v-enter-to {
  height: 70px;
}
/*開始状態(非表示)*/
.v-leave {
  height: 70px;
}
/*終了状態*/
.v-leave-to {
  height: 0px;
}

[JavaScript]

new Vue({
  el: "#app",
  data: {
    flag: true,
  },
  methods: {
    onclick: function () {
      this.flag = !this.flag;
    },
  },
});

コードの解説

● input type="button" value="表示/非表示" v-on:click="onclick" /

この記述は、以下の内容を設定しています。

・「表示/非表示」のラベルがついたボタンフォーム作成
・イベントハンドラーの v-on ディレクティブに click イベントを設定
・v-on:click に対し、onclick メソッドを紐づけ
→ クリックすると Vue クラスに記述した onclick メソッドを実行する。


● div id="panel" v-show="flag"

この記述は、以下の内容を設定しています。

・CSS の panel セレクタに記述されたプロパティの対象化。
・transition で囲む事で、アニメーションの対象化。
・値の true/false で要素の表示/非表示を指定する
v-show ディレクティブに、変数 flag を指定。
→Vue の onclick メソッドで指定される flag の値で、アニメーション効果の切替えを実行する。


● .v-enter-active, .v-leave-active

この記述は、以下の内容を設定しています。

・v-enter は要素が追加(表示)される時、v-leave は要素が破棄(非表示)される時の設定
・.v-enter-active は、v-enter(開始)から v-enter-to(終了)までの設定
・.v-leave-active は、v-leave(開始)から v-leave-to(終了)までの設定


● data: { flag:true }

この記述は、以下の内容を設定しています。

・data オブジェクトにプロパティを設定
・flag プロパティに値：true を指定


● methods: { onclick:function() { this.flag = !this.flag; } }

この記述は、以下の内容を設定しています。

・onclick メソッドに function() を定義
・this で Vue インスタンスを指定
・flag の値(true/false)を変換
→ クリックで flag の真偽値が切り替わるメソッドを作成


演習 2
演習1の CSSコードを以下の記述に書き換えて、結果を確認しましょう。
/*アニメーション実施中の設定*/
.v-enter-active,
.v-leave-active {
  transition: opacity 2s;
}
/*開始状態(表示)*/
.v-enter {
  opacity: 0;
}
/*終了状態*/
.v-enter-to {
  opacity: 1;
}
/*開始状態(非表示)*/
.v-leave {
  opacity: 1;
}
/*終了状態*/
.v-leave-to {
  opacity: 0;
}




3. 応用 Vue.js(2)

◆Vuetify の使い方

introduction

●Vuetify とは

Vue.js 用のマテリアルデザイン・コンポーネント・フレームワークの事です。
マテリアルデザインとは、Google が提唱している UI デザインで、パッと見で
操作方法が分かるようなデザインの事を指します。
(詳細はこちらを参照下さい)

Vuetify には、マテリアルデザイン化されたヘッダーやボタン、
グリッドレイアウトが用意されているため、Vue.js に導入する事で
簡単にデザイン出来るようになります。また、Vuetify 専用の
ディレクティブが用意されているため、新たに覚える必要があります。


● 準備

Vuetify は UI フレームワークのため、利用するにはインストールが
必要です。今回は CDN を記述して、利用出来るようにします。また、
Vuetify 専用のディレクティブもあるため、こちらについても学習
して行きましょう。


演習 1
jsフォルダ内の「Vuetifyフォルダ」をデスクトップへ移動させましょう。
また、Vuetifyフォルダ内のjsファイルに以下のコードを記述しましょう。

[JavaScript]

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    drawer: null,
  }),
});

● ヘッダーの作成

まずはヘッダーを作成します。次の演習はヘッダーの基本
構成となるコードを記載していますので、まずは記述して
行きましょう。

演習 2
以下のコードを htmlファイルの bodyタグ配下に記述しましょう。

[html]

<div id="app">
  <v-app>
    <div>
      <v-app-bar color="gray accent-4" dark>
        <!--ヘッダー記述箇所 ↓-->
        <!--ヘッダー記述箇所 ↑-->
      </v-app-bar>
    </div>
  </v-app>
</div>

● v-app-bar の解説

v-app-bar は、サイトナビゲーションの主要なコンポーネントを作成します。
color で色を指定し、dark でテーマの色合いを設定しています。


● ヘッダー内のコンテンツ

続いて、ヘッダー内のコンテンツを記述して行きます。
今回は左側にメニューアイコンとタイトル、右側にアイコンを 3 つ並べます。
また、右端のアイコンにはアコーディオンメニューを設置し、5 つのリンクを
対応させます。


演習 3
以下のコードを htmlファイルに記述しましょう。(コピー&ペースト)

[html]

<!--ヘッダー記述箇所 ↓-->
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
  <v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
  <v-icon>mdi-magnify</v-icon>
</v-btn>
<v-menu left bottom>
  <template v-slot:activator="{ on }">
    <v-btn icon v-on="on">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>

  <v-list>
    <v-list-item v-for="n in 5" :key="n" @click="() => {}">
      <v-list-item-title>Option {{ n }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>
<!--ヘッダー記述箇所 ↑-->

● コードの解説

・v-app-bar-nav-icon：ナビアイコン表示を設定
・v-toolbar-title：タイトル文字を設定
・.flex-grow-1：flexbox のコンテナ内のアイテム伸び率を 1 に指定
(詳細はこちらを参照下さい)
・v-btn：ボタンを作成
・v-icon：アイコンの指定 ・template：開閉ボタン
・v-slot:activator 属性：v-on と on の紐付け
・v-list：リストメニュー
・v-list-item：変数 n を v-for でループ
・v-list-item-title：文字列 Option の表示
・{{ n }} ：v-for の値を参照して枝番号化。






4. 応用 Vue.js(3)

3 章に続き、Vuetify で利用可能な UI コンポーネントを学習します。
今回は詳細な解説は行わず、よく使われる UI の作成を体験しましょう。


● フッター


演習 4
以下のコードを記述(コピー&ペースト)して、フッターを作成しましょう。

[html]

<!--コンテンツのタグ-->
<v-content>
  <v-container></v-container>
</v-content>

<!--フッターの作成-->
<v-footer>
  <div class="flex-grow-1"></div>
  <div>&copy; 2019 - {{ new Date().getFullYear() }} 第6回Web勉強会</div>
</v-footer>

● パンくずリスト


演習 1
以下のコードを記述(コピー&ペースト)して、パンくずリストを作成しましょう。

[html]

<div>
  <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
</div>

[JavaScript]

//drawer: null,の下に記述
items: [
    {
        text: 'TOP',
        disabled: false,
        href: '#',
    },
    {
        text: '会社概要',
        disabled: false,
        href: '#',
    },
    {
        text: 'イベント',
        disabled: false,
        href: '#',
    },
    {
        text: '勉強会',
        disabled: false,
        href: '#',
    },
    {
        text: '第6回 Web系勉強会',
        disabled: true,
        href: '#',
    },
],

● スライダー(カルーセル)


演習 2
以下のコードを記述(コピー&ペースト)して、スライダーを作成しましょう。

[html]

<v-carousel>
  <v-carousel-item v-for="(color, i) in colors" :key="color">
    <v-sheet :color="color" height="100%" tile>
      <v-row class="fill-height" align="center" justify="center">
        <div class="display-3">スライド {{ i + 1 }}</div>
      </v-row>
    </v-sheet>
  </v-carousel-item>
</v-carousel>

[JavaScript]

colors: [
    'primary',
    'secondary',
    'yellow darken-2',
    'red',
    'orange',
],

◆ おまけ

Web 系勉強会の午後の部、お疲れ様でした。
全 6 回を通して、JavaScript の基礎から応用まで学習して来ました。
全体像やキーワードを学べるよう、テキスト作成に努めて
参りましたが、まだまだ学習量としては物足りない状態です。

そのため、今後も JavaScript の学習を進める際の有用なサイトや、
学習方法を紹介して終わりたいと思います。


● 学習方針

★ MDN web docs

・リファレンスサイトである「MDN」を体系的にまとめた記事。
・JavaScript チュートリアル（完全な初心者向け）から読み進める。
・内容は堅いが、基礎の理解に繋がる。
▶リンク

▶現代の JavaScript チュートリアル

▶はてな教科書 JavaScript 編

▶JavaScript Primer


● 学習サイト ※HTML/CSS の内容と同じ

★ Progate

・解説のスライドとオンラインエディタでコードを学習する。
・環境設定が一切不要。 ・初心者向けに丁寧に作られている。
・無料と有料のコンテンツがあり、有料会員は 月額 980 円
▶リンク

★ ドットインストール

・動画学習サイト。
・1 コース当たり 10 ～ 20 程度の動画で構成(1 本あたり 2 ～ 3 分)
・基礎的な部分は把握している前提の解説が多い。
・言語やフレームワークなど、コンテンツの幅が広い。
・無料と有料のコンテンツがあり、有料会員は 月額 980 円
▶リンク

★ Udemy

・有料の動画学習サイト。 ・上記 2 サイトとは異なり、コース毎に購入する。
・1 つのテーマに集中して学習したい場合に向いている。
・90% OFF セールが頻発するので、それを待って購入するように。
▶リンク


● Vue.js 参考サイト

▶Vue.js リファレンス

▶Vue.js を習得するためにやった事 まとめ

▶カバの樹

▶REFFECT



以上で JavaScript のテキストは終了です。
お疲れ様でした！