ためすう

JavaScript でスプレッド構文を使う

2019-11-09

やったこと

スプレッド構文 を使ってみます。

調査

var t = ["x", "y", "z"]
function concat(a1, a2, a3) { return a1 + a2 + a3; }
console.log(concat(...t))
"xyz"

参考

npm install を使ってみる

2019-11-07

やったこと

npm install を使ってみます。

確認環境

$ npm --version
6.12.1

調査

グローバルインストール

$ npm install -g @babel/core @babel/cli

~/.npm-global/lib/node_modules/ へインストールされます。

ローカルインストール

$ npm install @babel/core @babel/cli --save-dev

–save-dev: Package will appear in your devDependencies.

package.json の devDependencies に依存します。

/path/to/node_modules へインストールされます。

参考

$ npm help install

Vuex を使ってみる

2019-11-05

やったこと

Vuex を使ってみます。

確認環境

Console Log

Vue.version
2.6.10

Vuex.version
3.1.1

調査

構成要素

  • ステート (state)
  • ゲッター (getter)
  • ミューテーション (mutation)
  • アクション (action)

処理は下記の流れで行われます。

アクション -> ミューテーション -> ステート -> ゲッター

実装例

sample.vue

<template>
  <p>template</p>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // ステート
  state: {
    count: 1
  },

  // ミューテーション
  mutations: {
    double (state) {
      state.count *= 2
    },
    minus (state) {
      state.count *= -1
    }
  },

  // ゲッター
  getters: {
    mycount (state) {
      return state.count
    }
  },

  // アクション
  actions: {
    minusAction (ctx) {
      // ミューテーション呼び出し
      ctx.commit('double')
      ctx.commit('minus')
    }
  }
})

console.log('init')
console.log(store.getters.mycount)
store.dispatch('minusAction')
console.log(store.getters.mycount)

export default {
  // エラーが出ないように記述
  data () {
    return {}
  }
}
/* eslint-enable */
</script>

起動

$ vue serve sample.vue --open

出力結果

init
1
-2

参考

Vue.js の単一コンポーネント

2019-11-04

やったこと

Vue.js で component を指定するとき html の id 属性を利用して指定します。

確認環境

$ vue info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 62.0
    Safari: 13.0.3
  npmGlobalPackages:
    @vue/cli: 4.0.5

調査

構成要素

template

HTML でコンポーネントを定義します。

script

UIコンポーネントの振る舞いを制御します。

css

コンポーネントの装飾をします。

実装準備

$ npm install -g @vue/cli-service-global

実装例

sample.vue

<template>
  <p class="message">{{ msg }}</p>
</template>

<script>
export default {
  data () {
    return { msg: 'Hello' }
  }
}
</script>

<style scoped>
.message { color: red; }
</style>

起動

$ vue serve sample.vue --open

css は head タグの中に挿入されます。

参考

Vue.js で component を id 指定する

2019-11-04

やったこと

Vue.js で component を指定するとき html の id 属性を利用して指定します。

確認環境

Console Log

Vue.version
"2.5.17"

調査

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <hoge></hoge>
    </div>
    <script src="https://unpkg.com/vue@2.5.17"></script>

    <script type="text/x-template" id="hoge">
      <p>hogehoge</p>
    </script>
    <script>
      Vue.component('hoge', {
        template: '#hoge'
      })
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

参考

Vue で ルーティングを設定する

2019-11-04

やったこと

Vue.js でルーティングを設定します。

確認環境

Console Log

Vue.version
"2.5.17"
VueRouter.version
"3.0.1"

調査

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <router-link to="/sample1">sample1</router-link>
      <router-link to="/sample2">sample2</router-link>
      <router-view></router-view>
    </div>
    <script src="https://unpkg.com/vue@2.5.17"></script>
    <script src="https://unpkg.com/vue-router@3.0.1"></script>

  <script>
    var router = new VueRouter({
      routes: [
        {
          path: '/sample1',
          component: {
            template: '<div>sample1 page</div>'
          }
        },
        {
          path: '/sample2',
          component: {
            template: '<div>sample2 page</div>'
          }
        },
      ]
    })
    var app = new Vue({
      router: router
    }).$mount('#app')
  </script>
  </body>
</html>

参考

Nuxt.js でアプリケーションを立ち上げるまで

2019-11-03

やったこと

Nuxt.js をインストールして、アプリを立ち上げてみます。

調査

yarn のインストール

yarn は JavaScript のパッケージマネージャです。

$ brew install yarn

$ yarn --version
1.19.1

Vue Cli のインストール

$ npm i -g @vue/cli @vue/cli-init

サンプルアプリ作成

$ vue init nuxt-community/starter-template sample
$ cd sample
$ yarn
$ npm run dev

参考

  • [Nuxt.js ビギナーズガイド]

Kubernetes の基本を学ぶ (ローリングアップデート)

2019-11-02

やったこと

Kubernetes のチュートリアルをやります。

Mac のローカル環境で試します。

調査

ローリングアップデート

ローリングアップデートでは、Podインスタンスを新しいインスタンスで段階的にアップデートすることで、ダウンタイムなしでDeploymentをアップデートできます。

チュートリアル

$ kubectl set image deployments/kubernetes-bootcamp kubernetes-bootcamp=jocatalin/kubernetes-bootcamp:v2
deployment.apps/kubernetes-bootcamp image updated
$ kubectl describe services/kubernetes-bootcamp
Name:                     kubernetes-bootcamp
Namespace:                default
Labels:                   app=kubernetes-bootcamp
Annotations:              <none>
Selector:                 app=kubernetes-bootcamp
Type:                     NodePort
IP:                       10.101.175.64
Port:                     <unset>  8080/TCP
TargetPort:               8080/TCP
NodePort:                 <unset>  30981/TCP
Endpoints:                172.17.0.10:8080,172.17.0.9:8080
Session Affinity:         None
External Traffic Policy:  Cluster
Events:                   <none>
$ export NODE_PORT=$(kubectl get services/kubernetes-bootcamp -o go-template='{{(index .spec.ports 0).nodePort}}')
$ echo NODE_PORT=$NODE_PORT
NODE_PORT=30981
$ curl $(minikube ip):$NODE_PORT
Hello Kubernetes bootcamp! | Running on: kubernetes-bootcamp-b4d9f565-774l8 | v=2
$ kubectl rollout status deployments/kubernetes-bootcamp
deployment "kubernetes-bootcamp" successfully rolled out

参考

Kubernetes の基本を学ぶ (スケーリング)

2019-10-31

やったこと

Kubernetes のチュートリアルをやります。

Mac のローカル環境で試します。

調査

スケーリング

Deploymentをスケールアウトすると、新しいPodが作成され、使用可能なリソースを持つNodeにスケジュールされます。

チュートリアル

$ kubectl get deployments
NAME                  READY   UP-TO-DATE   AVAILABLE   AGE
kubernetes-bootcamp   1/1     1            1           3h37m
$ kubectl scale deployments/kubernetes-bootcamp --replicas=4
deployment.apps/kubernetes-bootcamp scaled
$ kubectl get deployments
NAME                  READY   UP-TO-DATE   AVAILABLE   AGE
kubernetes-bootcamp   4/4     4            4           3h37m
$ kubectl describe services/kubernetes-bootcamp
Name:                     kubernetes-bootcamp
Namespace:                default
Labels:                   app=kubernetes-bootcamp
Annotations:              <none>
Selector:                 app=kubernetes-bootcamp
Type:                     NodePort
IP:                       10.101.175.64
Port:                     <unset>  8080/TCP
TargetPort:               8080/TCP
NodePort:                 <unset>  30981/TCP
Endpoints:                172.17.0.10:8080,172.17.0.7:8080,172.17.0.8:8080 + 1 more...
Session Affinity:         None
External Traffic Policy:  Cluster
Events:                   <none>
$ export NODE_PORT=$(kubectl get services/kubernetes-bootcamp -o go-template='{{(index .spec.ports 0).nodePort}}')
$ echo NODE_PORT=$NODE_PORT
NODE_PORT=30981
$ curl $(minikube ip):$NODE_PORT
Hello Kubernetes bootcamp! | Running on: kubernetes-bootcamp-69fbc6f4cf-5d5dm | v=1

参考

Kubernetes の基本を学ぶ (Service)

2019-10-29

やったこと

Kubernetes のチュートリアルをやります。

Mac のローカル環境で試します。

調査

Service

ワーカーのNodeが停止すると、そのNodeで実行されているPodも失われます。

各Podには固有のIPアドレスがありますが、それらのIPは、Serviceなしではクラスタの外部に公開されません。Serviceによって、アプリケーションはトラフィックを受信できるようになります。

チュートリアル

$ kubectl get services
NAME         TYPE        CLUSTER-IP   EXTERNAL-IP   PORT(S)   AGE
kubernetes   ClusterIP   10.96.0.1    <none>        443/TCP   2d16h
$ kubectl expose deployment/kubernetes-bootcamp --type="NodePort" --port 8080
service/kubernetes-bootcamp exposed
$ kubectl get services
NAME                  TYPE        CLUSTER-IP      EXTERNAL-IP   PORT(S)          AGE
kubernetes            ClusterIP   10.96.0.1       <none>        443/TCP          2d16h
kubernetes-bootcamp   NodePort    10.101.175.64   <none>        8080:30981/TCP   18s
$ kubectl describe services/kubernetes-bootcamp
Name:                     kubernetes-bootcamp
Namespace:                default
Labels:                   app=kubernetes-bootcamp
Annotations:              <none>
Selector:                 app=kubernetes-bootcamp
Type:                     NodePort
IP:                       10.101.175.64
Port:                     <unset>  8080/TCP
TargetPort:               8080/TCP
NodePort:                 <unset>  30981/TCP
Endpoints:                172.17.0.2:8080
Session Affinity:         None
External Traffic Policy:  Cluster
Events:                   <none>
$ export NODE_PORT=$(kubectl get services/kubernetes-bootcamp -o go-template='{{(index .spec.ports 0).nodePort}}')
echo NODE_PORT=$NODE_PORT
$ curl $(minikube ip):$NODE_PORT
$ export POD_NAME=$(kubectl get pods -o go-template --template '{{range .items}}{{.metadata.name}}{{"\n"}}{{end}}')
echo Name of the Pod: $POD_NAME
$ kubectl label pod $POD_NAME app=v1 --overwrite
$ kubectl get pods -l app=v1
NAME                                   READY   STATUS    RESTARTS   AGE
kubernetes-bootcamp-69fbc6f4cf-rfvs5   1/1     Running   0          3h32m

参考