はじまる

適当な事を適当に書く

【Web Front End】Vue.js Guide (1)

情報処理

なに

はじめに — Vue.js を観てみた。

HTML

  • 各div要素は、id毎に isolate されている。
<script src="https://unpkg.com/vue"></script>

<!-- 宣言的レンダリング -->
<div id="app">
  <p>{{ message }}</p>
</div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

 <h1>条件分岐とループ</h1>

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

 <!-- ユーザー入力の制御 -->

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

 <!-- コンポーネントによる構成 -->

<div id="app-7">
  <ol>
    <!-- 
      各 todo-item の内容を表す todo オブジェクトを与えます。
      これにより内容は動的に変化します。
      また後述する "key" を各コンポーネントに提供する必要があります。
    -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

JavaScript

//宣言的レンダリング
var app = new Vue({
  el: '#app',
  data: {
    message: 'どどすこすこすこいおいしーわい！'
  }
})

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

//条件分岐とループ
//JavaScript 的に true なら true です...(数値や文字列でもtrue)
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

//ユーザー入力の制御
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

//コンポーネントによる構成
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

AWS 初心者の学習に AWS Quick Start っていうコンテンツがあったんだ

知らなかった。一般的なユースケースについて、参考アーキテクチャおよびそれをデプロイするための Cloudormation Template が提供されている。

AWS クイックスタート | AWS

AWS Quick Start · GitHub

Kubernates Tutorial 1

Minikube をダウンロード＆インストールする

~/H/kubernates-tutorial ❯❯❯ curl -Lo minikube https://storage.googleapis.com/minikube/releases/latest/minikube-darwin-amd64 && \
cmdand>   chmod +x minikube && \
cmdand cmdand>   sudo mv minikube /usr/local/bin/
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 40.5M  100 40.5M    0     0  7278k      0  0:00:05  0:00:05 --:--:-- 9106k
Password:
~/H/kubernates-tutorial ❮❮❮

xhyve をインストールする。ここではやくもエラー。既存の docker-machine コマンドと衝突した。

~/H/kubernates-tutorial ❯❯❯ brew install docker-machine-driver-xhyve
==> Installing dependencies for docker-machine-driver-xhyve: docker-machine, libev
==> Installing docker-machine-driver-xhyve dependency: docker-machine
==> Downloading https://homebrew.bintray.com/bottles/docker-machine-0.14.0.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring docker-machine-0.14.0.high_sierra.bottle.tar.gz
Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink bin/docker-machine
Target /usr/local/bin/docker-machine
already exists. You may want to remove it:
  rm '/usr/local/bin/docker-machine'

To force the link and overwrite all conflicting files:
  brew link --overwrite docker-machine

To list all files that would be deleted:
  brew link --overwrite --dry-run docker-machine

Possible conflicting files are:
/usr/local/bin/docker-machine -> /Applications/Docker.app/Contents/Resources/bin/docker-machine
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions

To have launchd start docker-machine now and restart at login:
  brew services start docker-machine
Or, if you don't want/need a background service you can just run:
  docker-machine start
==> Summary
🍺  /usr/local/Cellar/docker-machine/0.14.0: 11 files, 32.1MB
==> Installing docker-machine-driver-xhyve dependency: libev
==> Downloading https://homebrew.bintray.com/bottles/libev-4.24.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libev-4.24.high_sierra.bottle.tar.gz
🍺  /usr/local/Cellar/libev/4.24: 12 files, 432.8KB
==> Installing docker-machine-driver-xhyve
==> Downloading https://homebrew.bintray.com/bottles/docker-machine-driver-xhyve-0.3.3.high_sierra.bottle.1.tar.gz
######################################################################## 100.0%
==> Pouring docker-machine-driver-xhyve-0.3.3.high_sierra.bottle.1.tar.gz
==> Caveats
This driver requires superuser privileges to access the hypervisor. To
enable, execute
    sudo chown root:wheel /usr/local/opt/docker-machine-driver-xhyve/bin/docker-machine-driver-xhyve
    sudo chmod u+s /usr/local/opt/docker-machine-driver-xhyve/bin/docker-machine-driver-xhyve
==> Summary
🍺  /usr/local/Cellar/docker-machine-driver-xhyve/0.3.3: 3 files, 10.5MB
~/H/kubernates-tutorial ❯❯❯

overwrite するとなにかあるかもなので、中止。

Kubernates Tutorial メモ

はじめに

Docker と Docker Swarm の復習をしたので、今度は Kubernates を調べる。Docker イメージ/コンテナの運用を Swarm でやるの面倒そうだし、Docker イメージ/コンテナの稼働/運用ツールのデファクトスタンダードが Kubernates なので、遅ればせながらやる。

なにをやる

これをやる。

kubernetes.io