2016-07-03

fzf で git add する

はじめに

fzf 便利ですよね。煩わしいコマンドラインのファイルパス入力は極力 fzf で済ませたくなってきます。

git add 時の疲労を fzf で軽減する

git add で一部のファイルだけ add したいとき、add したいファイル全てのパスを列挙する必要があります。
git add -p でコード単位で add する方法もありますが、更新量が多い場合などファイル単位で add したいときは面倒です。

シェルスクリプトを組む

今回はシェルスクリプトを用いていますが、bashrc や zshrc などで関数として定義することも可能です。
また、git add のオプションを利用することができます。

#!/bin/bash
local addfiles
addfiles=($(git status --short | awk '{ print $2 }' | fzf --multi))
if [[ -n $addfiles ]]; then
  git add ${@:1} $addfiles && echo "added: $addfiles"
else
  echo "nothing added."
fi

解説

シェルスクリプトの流れを追っていきます。

はじめに、fzf で選択された add したいファイルをローカル変数に代入します。

local addfiles
addfiles=($(git status --short | awk '{ print $2 }' | fzf --multi))

まず、未ステージング状態の (add されていない) ファイルの一覧を git status --short で取得します。
git status --porcelain でもファイル一覧は取得できますが、git リポジトリのルートディレクトリからのパスで出力されるため、ルートディレクトリ下から git status --porcelain を叩くと期待したパスが得られません。

このコマンドは、例えば以下のような出力が得られます。

 M ../Makefile
?? ../test

awk '{ print $2 }' で、スペースを区切りとしたときの 2 列目のみを出力します。

../Makefile
../test

これでファイルパスが得られたので、 fzf --multi で fzf を起動します。 --multi は Tab キーで複数選択できるようにするオプションです。また、tmux を利用しているのであれば、 fzf ではなく fzf-tmux を使用するとなお捗るかもしれません。

最後に、得られた add したいファイル一覧を git add します。

if [[ -n $addfiles ]]; then
  git add ${@:1} $addfiles && echo "added: $addfiles"
else
  echo "nothing added."
fi

-n $addfiles で fzf で何らかの候補がひとつ以上選択された場合のみ git add するようにし、 ${@:1} はシェルスクリプトに渡された引数で、これを git add に渡すことで git add のオプションを利用できるようにしています。

2015-05-24

vue.js の v-on で複数の関数を呼び出す

vue.js

やりたいこと

keyup 時に Vue インスタンスで定義した関数を 3 つ呼び出したい

実装

js

new Vue({
  el: '#vue-container',
  methods: {
    func1: function() {
      console.log('func1');
    },
    func2: function() {
      console.log('func2');
    },
    func3: function() {
      console.log('func3');
    }
  }
});

html

無理やりな方法

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1, keyup: func2, keyup: func3"
  >
</div>

複数回定義する。これでもいける。

演算子を使う方法

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1() + func2() + func3()"
  >
</div>

気持ち悪いけどこれでいける。+ に限らず - や /, >> 等でも動く。色々と試したところ、算術演算子とビット演算子が使用できるっぽい。あと、括弧外すと動かない。

適当に試したもの

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1, func2, func3"
  >
</div>

func1() だけ呼び出される。

<div id="vue-container">
  <input
      v-model="something"
      v-on="keyup: func1(); func2(); func3();"
  >
</div>