Vue SPA 基礎編 ~フロントエンドへの一歩~

Vue CLI

環境構築編でも触れましたが、
Vue CLIとは開発支援のためのコマンドラインインターフェース。
アプリケーションのビルドなどの支援をする。
またwebpackに必要なファイルを自動的に作成もする。

webpack

こちらも環境構築編で触れましたが、
複数のJSファイルをモジュール化して、それを組み合わせて表示する。
その際にモジュールをまとめるバンドルツールがwebpack。

クロスドメイン対策
config/index.js

proxyTable: {
  '/api':{
    target: 'http://localhost:8081',
    changeOrigin:true,
    pathRewrite: {
      '^/api':'/dev/api/'
    }
  }
},


本番環境が/apiだが
開発環境では/dev/apiとなる。

単一ファイルコンポーネント

Single File Components 通称「SFC
HTML、CSSJavaScriptを.vueという拡張子のファイルにまとめて記述し管理する。

マークアップ言語やスタイルシート言語の変更
PugSassなどを使用する場合には必要パッケージをインストールして以下のように記述する。
<template lang="sass">



Vue.jsプラグイン

グローバルメソッドのVue.useでVue.jsに登録する。

import Vuex from 'vuex'

Vue.use(Vuex)



プラグイン自作
installという名前の公開されたメソッドを定義し、Vue.useで受け取れる。
インスタンスプロパティを登録する場合は$から始まる名前を使用する。

ES2015(ES6)モジュール

ECMAScript
ES5に比べて運用しやすい。 ただ書き方が少し変わる。

大きな違い
変数宣言
var が let か constになる

functionの省略
hoge : function(){ } -> hoge() { }

Promise
非同期処理を抽象化したオブジェクト、操作する仕組みになっている。
非同期処理の完了をしり、引数にresole(解決)、reject(拒否)のコールバック関数で結果によってどちらを呼び出す。

次回!

Vuexによるアプリケーション状態管理!
さらに便利に効率的に!ここからが面白い!


経営学 基礎編 ~社会で生き残る!~

経営とは

「人・物・金・情報」の4つを組み合わせて、顧客にサービスを提供する。
また株式会社では株主から資金を得て経営し、売り上げを一部を株主に配当金として渡す。
そのお金でさらに企業の株を買い、企業に投資する。


経営学と経済学の違い

1.経営学は「企業中心の考え方」
2.経済学は「日本や世界など全体の考え方」

マクロ経済学ミクロ経済学
1.マクロ経済学は景気向上の為に国のすべきことなど、
国全体の経済のメカニズム(向上する方法)を考える。

2.ミクロ経済学は不景気の状況での
消費者や企業の消費行動の法則(特徴)を考える。


Vue コンポーネントクライマックス編 -第3章- ~Vueマスター!~

スロット

スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で
コンテンツやテンプレートの一部をカスタマイズする際に使用する。

デフォルトスロット

HTML
<parent>埋め込みたいもの</parent>
HTML
<div class="child">
<slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたいもの]がはいる
</div>


名前付きスロット
複数のスロットを使用するときは、親と子のタグにslot=名前で名前をつけて使用する。

スコープ付きスロット
スロットはコンテンツ定義側のスコープが維持されるので、
子側のスコープにアクセスができない。
そんなときはslot-scopeを使い、
コンテンツの定義に必要なデータを子コンポーネントから取得する。


双方向データバインディング コンポーネント

おさらい
双方向データバインディングとは
v-modelでフォームの入力値を同期させて表示させる。
コンポーネント版ではv-modelprops$emitを駆使する。

.sync
.sync修飾子では複数の属性を同期させることが可能。
$emitがトリガとなる。


色んなテンプレートの定義

templateオプション
templateオプションに直接かく。
単一ファイルコンポーネントを使用しない場合に推奨。

単一ファイルコンポーネント
コンポーネント単位でJavaScriptとHTMLとCSSをセットにして.vue拡張子のファイルに書く。
独自フォーマットでビルド環境が必要。 中規模開発以上で推奨。

描画関数
正確にはテンプレートではないが、DOMを構築するための方法。
仮想DOMについて深く理解する必要がある。 難易度が高め。


コンポーネントの色々

関数型コンポーネント
ライフサイクルや監視が行われないためパフォーマンスを最適化できる。
functionalオプションを付与することで、状態とインスタンスを持たない。
propsを使えるためデータは使えないが有効になる。

動的コンポーネント
コンポーネントの切り替えができる。
属性isを使用する。

Mixin
複数のコンポーネントの同一処理を行なっている場合、
オプションを抜き出して共通処理を行う。

コンポーネントのライフサイクル
要素が切り替わるタイミングでインスタンスが破棄され、初期化されるので注意。

keep-alive

組み込みコンポーネント<keep-alive>を使用すると、
破棄されず、コンポーネントと状態を維持される。


Vue コンポーネント親子関係編 -第2章- ~関係を制覇しろ!~

親子関係(親子コンポーネント)

テンプレートで他のコンポーネントを使用すると親子関係になる。
propsカスタムイベントを使用する。

コンポーネント→子コンポーネント

データバインディングで親のデータを子コンポーネントが使用できる。
props downというデータフロー

親
<child v-bind:val="test">
子
Vue.component('child'.,{
  props:['val']
})


注意
propsで受け取った値を子コンポーネント側から変更することはできない。
もし変更した場合は、算出プロパティを使用して新たなデータとして定義する。
また子コンポーネント側から元のデータ自体に変更する場合は$emitを使用することができる。

受け取りデータの指定
propsでは受け取り型(Stringなど)の指定が推奨されており、指定の型以外の場合は警告をだす。
またデフォルト値や必須項目を定義できる。

コンポーネント→親コンポーネント

コンポーネントから親コンポーネントに変更をする場合や、
データを渡す場合は カスタムイベントと、インスタンスメソッドの$emitを使用する。
event upというデータフロー

親
<child v-on:test-event="method"> ->test-eventが発生したらmethodを呼び出す。
子
this.$emit('test-event')


親が子コンポーネントのイベントを認識する
1.v-onディレクティブ(@で省略可能)で子のイベントをハンドルする。
2.$emitでトリガーする。


親子コンポーネントの色々

非親子コンポーネント
親子以外のコンポーネント間ではVueインスタンスイベントバスとして使用する。
ただ複雑化した場合、Vuexの導入を検討した方が良い。

var bus_test = new Vue()
bus_test.$emit('bus_test')
bus_test.$on('test-event',function(){
 //test-eventが発火した際の処理
//thisはbus_testのインスタンス
})



コンポーネントを参照する
親が子のメソッドを使用したい場合に$refsを使用する。

次回

コンポーネントの制覇! SPAの足がかり!

Vue コンポーネント基礎編 -第1章- ~コンポーネントは核である!~

コンポーネント

テンプレート(html)とJavaScriptをセットにして、 機能ごとに分割して管理できるようにする仕組み。
例:headerのセット,mainのセットとして最終的に組み合わせる。

コンポーネントの定義
Vue.componentメソッドでグローバルに登録しすべてのコンポーネントから使用できる。
テンプレート内ではケバブケース<test-component>で記述。
またコンポーネントはルートインスタンスnew Vue()する前に定義する。

ローカルの定義
ローカルとしてコンポーネントのスコープ内だけで使用するには
コンポーネントの定義を特定のコンポーネントcomponentsオプションに定義する。

コンポーネントのオプション
1.データやメソッドを定義できる。
2.dataはオブジェクトを返す関数にする必要がある。
3.テンプレートのルート要素は単一にする必要がある。
4.コンポーネントを複数使用した場合、別々のインスタンスになる。


コンポーネント間の通信

コンポーネントインスタンスはスコープがあり、
スコープ内のデータやメソッドは、thisでアクセスできる。

スコープ外のアクセス、コンポーネント間の連携
1.propsとカスタムイベントを使う(親子間の通信)
2.イベントバスを使う(非親子間)
3.Vuexの状態管理

次回

親子間通信を学ぶ! Vueの利便性をめちゃくちゃ高めます!

Vue 算出プロパティとトランジション編 ~自由なデザインを!~

算出プロパティ

算出プロパティとは処理を含めることができるデータのこと。

ゲッター(取得) セッター(代入)
算出プロパティへの代入を行う場合エラーになる。
しかし、getで値を取得し、setでプロパティに代入することで対応できる。

キャッシュ機能
算出プロパティとメソッドの違いは、 算出プロパティは結果をキャッシュするため、トリガがリアクティブなデータのみ(元のデータ)になる。
なので、元のデータが変わらない限り結果に変更はない。

算出プロパティの色々

ウォッチャ (watch)
データや算出プロパティに変化が起こった場合に処理を実行する。
ただウォッチャ自体がデータを返すことはない。

フィルタ(|パイプ)
テキストベースの変換処理を実行する機能。
(文字や数字などの) ただthisへのアクセスはできない。

カスタムディレクティブ
ディレクティブの自作を行う。(v-○○)
ただ描画の最適化はされない。
データバインディングだけでできない場合のみ使用。

nextTick
nextTickはDOMの更新後にアクセスするために更新を待つ機能。
グローバルメソッドのVue.nextTickインスタンスメソッドthis.$nextTick(thisが使える)をコールバック関数として定義する。
ただウェブフォントや画像が含まれたら更新は待たない。

トランジション

基本
VueがCSSトランジション/アニメーション(フェードイン、フェードアウトなど) のためのクラスを付与して使いやすくした機能。

トランジションの色々

単一要素トランジション
タグ内に1つ存在する要素に対して
条件による描画状態の切り替えや 動的コンポーネントなどの場合に使用する。
Enterは対象要素がDOMに追加されたとき(表示)
Leaveは対象要素がDOMから削除されたとき(非表示)

リストトランジション
<transition-group>を使用して複数の要素をグループ化して移動のアニメーションを行う。(追加、削除含む) ユニークキーの指定が必要。

SVGトランジション
SVGの要素やSVG自体もコンポーネント化可能。

トランジションフック
JavaScriptを用いたトランジション操作を可能にする。

Vue 基本バインディング編 ~UI革命~

リアクティブシステム

リアクティブシステムとは
Vueの内部の核となるシステムで 同期や最適化などを行う。
データバインディングはその機能の内の1つである。
リアクティブシステム中のデータをリアクティブデータという。


クラスのデータバインディング

HTML

<div id = ''one">
<h1 v-bind:class="{'test': test1}">test</h1>
<h1 v-bind:style="{color:textColor}">test</h1>
</div>

JavaScript

new Vue({
  el: '#one',
  data:{
    test1:true,
    textColor:'red'
}
})



$elと$refs

$elと$refsはDOMを直接参照する。
画面上の位置などで必要となる。

$elの使用法
Vueのライフサイクルでmounted以降で使用でき、 ルート要素が参照できる。

mounted : function(){
  console.log(this.$el) //ルート要素 -> <p>aaa</p>
}


$refsの使用法
ルート以外の要素で対象要素にref属性で名前をつけて使用する。

mounted : function(){
  console.log(this.$refs.test) //<p ref="test"></p>のDOM
}


注意 描画処理の最適化をしないためDOMの更新に使用するには向いていない。


双方向データバインディング

データバインディングとは
ユーザの入力値をデータと同期させ、 v-modelディレクティブを使用する。

処理
1.要素のvalue属性の更新。(データバインディング) 2.更新後、valueデータを描画(イベントハンドリング)
使用法は要素によって異なるため要確認。


知識

修飾子(.○○)についてはイベントやv-modelなどで覚えきれないほどあるのでその都度調べる必要がある。
dataオプション直下のプロパティは追加ができないため、初期値で定義する必要がある。
データ内容の確認には{{ $data }}でJSON形式で画面に表示できる。{{}}はMustache(マスタッシュ)記法。