Git:ブランチを削除する

ローカルの場合

ローカルブランチ一覧を表示

git branch

マージ済みのローカルブランチを削除

git branch -d ブランチ名

マージ済みか否かを問わないで、ローカルブランチを削除

git branch -D ブランチ名

リモートの場合

リモートブランチ一覧を表示

git branch --remote

リモートブランチの削除

git push origin --delete ブランチ名

Vue:Invalid Host Header

vue-cliを使ってこちらのチャットプログラムを作ってみたのですが、ローカルホスト外からアクセスするとInvalid Host Headerというエラーがでる。対処方法ですが、ルートディレクトリに以下の内容のvue.config.jsを作ると解消します:

module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true
  }
}

Vue.js:フォーカスの当たっている要素のIDを取得する

こんな感じでいけます:

created: function() {
    // ブラウザ以外で実行の場合、documentが無いと怒られるための確認
    if(typeof window !== 'undefined') {
        // フォーカスが変わったらfocusChanged関数を呼ぶ
        document.addEventListener('focusin', this.focusChanged);
    }
},
beforeDestroy: function() {
    if(typeof window !== 'undefined') {
        document.removeEventListener('focusin', this.focusChanged);
    }
},
data: function () {
    return {
        idOfFocus: ''
    };
},
methods: {
    focusChanged: function(event) {
        this.idOfFocus = event.target.id;
    },
}

Vue.js:配列の中のオブジェクトの値をリアクティブに変更

こんな感じにVue.setを用います:

<div id='app'>
  <ul>
    <li v-for="artist in artists">{{artists.firstname}} {{artists.lastname}} {{artists.age}}</li>
  </ul>
  <form>
    <input type="button" value="年齢を5際、若くする" v-on:click="reduceAge"/>
  </form>
</div>
var app = new Vue({
  el: '#app',
  data: {
    artists: [
      { lastname: 'セザンヌ', firstname: 'ポール', age: 67 },
      { lastname: 'マティス', firstname: 'アンリ', age: 84 },
    ]
  },
  computed: {
  },
  methods: {
    reduceAge: function() {
      for(i=0,j=this.artists.length; i<j; i++){
        originalAge = this.artists[i].age;
        reducedAge  = originalAge - 5;
        Vue.set(this.artists[i], 'age', reducedAge);
      }
    }
  }
});

AWS:AMIで利用してないスナップショットを探して削除する

  1. 自分が所有するAMIの一覧を取得
aws ec2 describe-images --owners self | jq '.Images[] | {ImageId}' | jq '.[]'| sed 's/"//g'
  1. 自分が所有するAMIのスナップショットIDの取得
aws ec2 describe-images --owners self | jq '.Images[]["BlockDeviceMappings"][]["Ebs"]["SnapshotId"]' | sed 's/"//g'
  1. 自分が所有するスナップショットのIDの取得
aws ec2 describe-snapshots --owner-ids あなたのID | jq '.Snapshots[] .SnapshotId' | sed 's/"//g'
  1. スナップショットの削除

2と3の結果を比較すると、AMIで利用されてないスナップショットを出せますので、それに対して:

aws ec2 delete-snapshot --snapshot-id スナップショットID

なお、最後にステータスがavailableのvolumeを削除する

Vue.js:computedに引数を渡せない

速習vue.jsという本を読んでいて、以下のサンプルコードが出てきました:

お題

<!DOCTYPE html>
<html lang="ja">
<body>
  <div id="app">
    <form>
      <label for="name">メールアドレス:</label>
      <textarea v-bind:value="emails.join(';')" v-on:input="emails = $events.target.value.split(';')"></textarea>
    <ul>
      <li v-for:"email in emails">{{ email }}</li>
    </ul>
  </div>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    emails: []    
  }
});

これを算出プロパティとしたほうが良い書き方、と合ったので試してみました。

ダメだったコード

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'/>
<title>騾溽ソ歎ue.js</title>
</head>
<style>
[v-cloak] {
  display: none;
}
</style>
<body>
<div id='app'>
  <form>
    <textarea v-bind:value="joinedEmail" v-on:input="splitEmails($event.target.value)" cols="80" rows="10"></textarea>
  </form>
  <ul>
    <li v-for="email in emails">{{ email }}</li>
  </ul>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js'></script>
<script src='./hello.js'></script>
</body>
</html>
var app = new Vue({
  el: '#app',
  data: {
    emails: ['foo@foo.com','bar@bar.com'],
  },
  computed: {
    joinedEmail: function() {
      return this.emails.join(';');
    },
    splitEmails: function(value) {
      this.emails = value.split(';');
    }
  },
  methods: {
  }
});

なぜダメなのかまだ完全に理解できていませんが、computedではそもそも、引数を渡せないみたいです。 ちなみにsplitEmails関数をmethodsに移動させると動きます。

動くコード

setterを使うことで実現できました:

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'/>
<title>速習Vue.js</title>
</head>
<style>
[v-cloak] {
  display: none;
}
</style>
<body>
<div id='app'>
  <form>
    <textarea v-bind:value="joinedEmail" v-on:input="splitEmails = $event.target.value" cols="80" rows="10"></textarea>
  </form>
  <ul v-cloak>
    <li v-for="email in emails">{{ email }}</li>
  </ul>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js'></script>
<script src='./hello.js'></script>
</body>
</html>
var app = new Vue({
  el: '#app',
  data: {
    emails: ['a@a.com','b@b.com'],
    myval: ''
  },
  computed: {
    joinedEmail: function() {
      return this.emails.join(';');
    },
    splitEmails: {
      set: function(value) {
        this.emails = value.split(';');
      }
    }
  },
  methods: {
  }
});

とりあえず動くようになりましたが、動作原理をちゃんと理解せねば…