Edy's Hub

プログラミング・シェアハウス・ライフスタイルについて書き綴っています

【Vue.js】v-onディレクティブに引数を渡す

v-onディレクティブに引数を渡すのは非常に簡単です。

引数を渡す前

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
    <link rel="href + exp" href="main.css">
</head>
<body>
<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp">カウントアップ</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="sample.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function() {
      this.number += 1
    }
  }
})

f:id:yuki-eda0629:20190922171912p:plain
画面表示

このような表示になっています。 ボタン押下時にカウント数が1ずつ増加していきます。

今回の変更

さて、ここでcountUpメソッドに引数を渡して、1クリックでのカウントを3倍にしてみましょう。

html側のcountUpに3という数値を渡します。

<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
</div>

続いて、jsはこのように変更します

new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) { // timesとして数値を受け取る
      this.number += 1 * times // timesを掛ける
    }
  }
})

これで、1クリックで3ずつインクリメントされるようになりました! 引数を渡すのも直感的でわかりやすいですね!

さらに発展(eventを取得する)

eventオブジェクトに起因するデータに対して、引数を元に何らかの処理を加えたいケースもありますよね。

その場合は、渡したい引数に加えて、$eventを引数に加えます。

渡す位置に決まりはなく、順不同です。

例えば、テキストにマウスカーソルを当てたときに、そのカーソルのブラウザ上の位置を取得してX座標、Y座標として表示したいとき。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
    <link rel="href + exp" href="main.css">
</head>
<body>
<div id="app">
  <p v-on:mousemove="changeMousePosition">マウスを載せてください</p>
  <p>X: {{x}}, Y: {{y}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="sample.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    changeMousePosition: function(event) {
      this.x = event.clientX;
      this.y = event.clientY;
    }
  }
})

f:id:yuki-eda0629:20190922173233p:plain
位置情報を取得

では、引数を渡してこの座標を半分にしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
    <link rel="href + exp" href="main.css">
</head>
<body>
<div id="app">
  <p v-on:mousemove="changeMousePosition(2, $event)">マウスを載せてください</p>
  <p>X: {{x}}, Y: {{y}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="sample.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    changeMousePosition: function(divideNum, event) {
      this.x = event.clientX / devideNum;
      this.y = event.clientY / devideNum;
    }
  }
})

htmlファイルでは、$eventという特別な変数を用いています。 これで、Vueで定義したメソッドにDOMイベントを渡すことができるようになります。

参考

jp.vuejs.org

awkコマンドを理解していく

awsとの接触

はじめてawkコマンドと出会ったときに、衝撃を受けた。
意味分からんと。 でもこれを書く先輩エンジニアに憧れも抱いた...

mail_users=(`awk 'F==0{a[$1]=$2;next}{print $1 "\t" a[$1] "\t" $2}' <(cat employee.csv | awk -F',' '{print $1" " $8}' | sed -e '1d' -e '$d') F=1 <(/Users/guest/.nodebrew/current/bin/node sample.js | sed -e 's/[^0-9]//g' | sed -e 's/0*\([0-9]*[0-9]$\)/\1/g' | sort -nu)`)

※一部ファイル名とか変えてます

ということで、awk芸人になっていきましょう。

序章

awkはテキストファイルの一行毎に処理を行うスクリプト言語

awk 'パターン {アクション}' ファイル名」で、テキストファイルを1行ずつ読み、パターンに合致した行に対して、アクションで指定された内容を実行する。

基本的なオプション

オプション 意味
-f ファイル名 awkスクリプトが書かれたファイルを指定する
-F 区切り文字 区切り文字を指定する(デフォルトは空白文字)
-v 変数名=値 変数を定義する

オプションである -F'[フィールド区切り文字]' を指定しない場合、 区切り文字には、タブまたは半角スペースが選択される。

awk '{print $2,$3}' sample.csv # 2,3列目

awk -F, '{print $2,$3}' sample.csv # ,で区切って 2,3列目を出力

参考

qiita.com

qiita.com

www.techscore.com

シェルスクリプトの基礎と便利コマンド集

変数

# イコールの両端にスペースを空けない
str="hello"

# こういう書き方ができる
echo $srt # =>hello
echo "$str" # =>hello
echo "${str}" # => hello

# 文字列の連結
# +は要らない
echo $str$str # hellohello
# スペースはそのまま反映される
echo "$str $str" # hello hello

egrep

  • grepの拡張版らしい
  • grepに'-E'オプションを付与して実行するのと同義

egrepとgrepの違い - Qoosky

正規表現もメモっておく

パターン 意味
^ 行頭
$ 行末
. 任意の一文字
[ABC] ABCのいずれか
[A-Z] A~Zの範囲いずれか
[^ABC] ABCいずれでもない
[^A-Z] A~Zの範囲いずれでもない
+ 1回以上の繰り返し
* 0回以上の繰り返し
{n} n回の繰り返し
{n}, n回以上の繰り返し
{n,m} n回以上m回以下の繰り返し
r1 r2 | 正規表現r1かr2のいずれか

参考

【シェル芸人への道】Bashの変数展開と真摯に向き合う - Qiita

シェルスクリプトのtrap

trapは シェルスクリプトの実行結果に関わらず、 trapコマンドを後処理として実行させることができるようになります。

trap 'コマンド' シグナルリスト

※実行中のシェルスクリプトに対して送出されたシグナルは、trap コマンドを使用することで捕捉することが可能です。

シグナルについては、こちらを参考に

shellscript.sunone.me

さらに終了時のシグナルを分けて指定することで、エラー時・正常終了時のパターンに応じた処理の分担もできるようになります! スクリプトが途中終了した場合があったとしても、飛ぶ鳥跡を濁さずということで、綺麗に保ってくれるのです。

参考

qiita.com

RailsのCarrierwaveをコンソールで試してみる

はじめに

Railsで画像をアップロードする際に、gem 'carrierwave' を使用しています。

github.com

コンソールで画像をアップロードする

例の如く、コンソールを立ち上げます。

rails c
uploder = HogeUploader.new

image_file = Pathname.new(Rails.root.join("db/images/mcdonalds_logo.png")).open

uploader.store!(imge_file)

これで、画像の保存を試すことができます。 自分はバリデーションがワークしているかのチェックに使いました。

railsで任意のURLにJSONをPOSTする方法

特定のURLをSlackのWebhookとします。

def post_man
  url = 'https://hooks.slack.com/services/xxxxxx/yyyyy/zzzzz'
 
 content = { text: 'This post is from Ruby on Rails', icon_emoji: ':ghost:' }
 uri  = URI.parse(WEBHOOK_URL)
 http = Net::HTTP.new(uri.host, uri.port)
 http.use_ssl = true
 http.verify_mode = OpenSSL::SSL::VERIFY_NONE
 http.start do
   request = Net::HTTP::Post.new(uri.path)
   request.set_form_data(payload: content.to_json)
   http.request(request)
 end
end

参考記事

masawada.hatenablog.jp

便利Gemを発見

なんとかPOSTできましたが、そんなときに gem 'rest-client' という便利Gemの存在を知りました。

github.com

こやつのお蔭で冗長だった、記述がここまで簡潔に!!

def post_man
  url = 'https://hooks.slack.com/services/xxxxxx/yyyyy/zzzzz'
  body = params.to_json
  content_type = :json
  RestClient.post(url, body, content_type: content_type)
end