2019-10-07

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を用いたトランジション操作を可能にする。

2019-10-06

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

Vue

リアクティブシステム

リアクティブシステムとは
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(マスタッシュ)記法。

2019-10-06

Vue 基礎知識編 ~幸福のSPA！~

Vue

用語

データバインディング データと描画を同期させる。
コンポーネント 機能ごとに分離して開発できるようにする仕組み。
ディレクティブ (v-で始まる) データ用オブジェクトのプロパティ
フック あらかじめ決めたタイミングで処理を行わせること。

<div v-○○:○○></div>

参考にできるサイト

Awesome Vue GitHub

GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

Vue Curated

Element

Element - The world's most popular Vue UI framework

Onsen UI

Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI

オプションの構成

1. el 紐付けるセレクタ
2. data アプリの使用データ
3. computed 関数でのデータ
4. cerated(ライフサイクルフック)
一連の処理(使用が限られている)
またDOMが構築前の実行のためgetElementByClassなどはアクセスできない。

5. methods メソッドで細かい実装。

2019-10-05

Vue 環境構築編 ~最初だからこそ！~

Vue

更新

新しく更新しました。
こちらの方がいいかもしれないです。 taitoajiki.hatenablog.com

前提

OSに合わせてnpmのインストールが必要

vue-cliインストール

開発環境をセットアップなどをする公式のコマンドラインツール

npm install -g vue-cli

Webpack

Webpackはモジュールを束ねるツール。

vue init webpack プロジェクト名

実行

cd プロジェクト名

実行

npm run dev

公式

jp.vuejs.org

2019-09-30

Kubernetes 基礎編 ~より高い世界へ~

Kubernetes

Kubernetesは

Google社が開発したコンテナオーケストレーションシステム。 Compose/Stack/Swarm/を統合して、もっと高度に管理できる。

Nodeとは

Kubernetes クラスタ内でコンテナを配置するためのサーバで、マシンのスペックによってコンテナの数は変わる。

Namespaceとは

Kubernetes内に作る仮想的なクラスタ。開発者にそれぞれの Namespaceを用意して操作権限を設定する。

Podとは

コンテナの集合体。 Nodeに配置され、Podを一括りにしてデプロイする。

Serviceとは

Kubernetes クラスタ内でPodの集合体に対する経路を提供する。対象のPodはServiceで定義するラベルセレクタによって決定する。

2019-09-25

Docker DataVolume編 ~データは大事~

Docker

永続化データ

新しいバージョンのコンテナがデプロイされても以前のバージョンのコンテナで利用していたファイル・ディレクトリをそのまま継続して利用できるためにData Volumeが利用される。

Data Volume

コンテナ内のディレクトリをディスクに永続化するための仕組みで、ホスト・コンテナ間でのディレクトリの共有・再利用が可能になる。イメージの更新や、コンテナを破棄してもディスクに保持されるのでステートフル(状態保持)なアプリケーションを実行するために使用。

docker container run [options] -v ホスト側ディレクトリ:コンテナ側ディレクトリ リポジトリ名[:タグ] [コマンド] [コマンド引数]

Data Volumeコンテナ(*推奨)

Data Volumeコンテナはデータだけを持つためのコンテナでコンテナ間でディレクトリを共有する。 VolumeはDockerの管理領域であるホスト側の/var/lib/docker/volume/以下に配属されている。 DataVolumeコンテナによって操作がカプセル化される。

データのエクスポートとリストア

Data Volumeコンテナは、同一のDockerホスト内でのみ有効である。
データを他のDockerホストにもリストア(復旧)したい場合はデータをファイルとして取り出す必要がある。

手順

手順は、新たにコンテナを実行し、Data Volumeコンテナを指定する。コンテナの中でtarコマンドでアーカイブを行い、出力先にマウントする。別のホストにリストアする場合は、アーカイブを展開したData Volumeコンテナを作成する。

その他

docker image save はDockerイメージをファイルとしてアーカイブする機能のため Data Volumeには適用されないので注意。
ただDockerは複数ホストをまたいだポータビリティには課題があるので、 Netshare pluginなどのVolume Pluginが開発されている。

2019-09-24

Docker compose編 ~複数のコンテナ使用法！~

Docker

基礎

docker-composeとは

複数のコンテナ実行を一括で管理できる。ファイルはyaml形式で設定。

記法

versionはファイルフォーマットのバージョン。
service要素下の定義はコンテナの名前の定義であり、さらにその一つ下の階層が実行するコンテナの定義。
image要素はdockerイメージ、portsではポートフォワーディングを指定している。
build属性はDockerfileが存在するディレクトリの相対パスを指定する。
volumesはホスト・コンテナ間でファイルがコピーされるのではなく、共有される仕組み。

コマンド

docker-compose up

で実行。

docker-compose down

でdocker-compose.ymlに定義しているコンテナを全て停止・削除できる。

docker-compose up -d --build -d

がビルドを省略して実行する。
--buildがDockerイメージのビルドをさせることができる。

Master/Slave

Master/Slaveとは

複数の機器を一つが制御する側、他が制御される側、という役割を行う方式。
制御する側を「マスター」、される側を「スレーブ」。
一言で言うと複数で管理しよう方式。

例:データベースを別のデータベースに複製して同期(レプリケーション)してデータのバックアップをしたりなど。
今後もっと詳しくやりたいと思います。

Master/Slaveの設定

そしてSlaveコンテナ内では鍵の取得や設定は出来るだけ行わずに、外から環境変数として渡す。

接続先の示し方 Composeではmasterに対してslaveのlinksを設定する。linksは他のservices群にある他のコンテナと通信できる。
そのためmasterからslaveの名前で解決できる。