やるしかなっちゃん

やるしかない!

JavaScriptでインスタンスメソッドの動的呼び出し

Pythonではインスタンスメソッドを動的に呼び出すにはgetattrを使えば実現できる

class Hello:
  def greet(self):
    print("hello~")

  def run(self, name):
    method = getattr(self, name)
    method()

hello = Hello()
hello.run("greet") # hello~

JavaScriptで同じことをやりたい時によくわからなかったので次の様に実装した

class Hello {
  greet() {
    console.log("hello~");
  }

  run(name) {
    this[name].call(this);
  }
}

const hello = new Hello();
hello.run("greet"); // hello~

あってるのかこれ?

シェルスクリプトでフォルダ監視するやつ

止むにやまれぬ事情があって題名の通りのことをするハメになった

最近はどんなツールにもwatchオプションがあるし、一昔前でもgulp-watch使ってたしまさかこんな原始人みたいなことをするハメになるとは思いもしなかった

#!/bin/bash

# 監視対象のディレクトリ
targets=(/Sample/Example/Dir1 /Sample/Example/Dir1)

# 実行するコマンド
command="ls"

# 変更検知用の配列
prev_sizes=()
for target in "${targets[@]}"; do
  size=`du -bsx $target | awk '{print $1}'`
  prev_sizes+=($size)
done

# 監視間隔
INTERVAL=1

while true; do

  sleep $INTERVAL

  for ((i = 0; i < ${#targets[@]}; i++)) {
      size=`du -bsx ${targets[$i]} | awk '{print $1}'`

      if [ "${prev_sizes[$i]}" != "$size" ]; then
        eval $command
        echo "Changed: ${targets[$i]}"
        echo "Done: $command"

        prev_sizes[$i]=$size
      fi

  }

done

シェルスクリプト全然書いたことないからこれが正しいのかまったくわからない
こんなもの書かなくてもワンライナーでできそうな気もするんだけど圧倒的に力が足りなくてできなかった
無念だ

Atomのファイルツリー(tree-view)のフォルダ・ファイル名の色の変更方法

Atomに乗り換えた記念にメモ

// style.less
.tree-view {
  .icon-file-directory {
    color: #A5A5A5;
  }
  .icon-file-text {
    color: #A5A5A5;
  }
}

JavaScriptの型判定

typeof

typeofは色々と使いにくいです
特にnew Hoge()したものは'object'になってしまいます

// 正しく判定できるパターン
typeof 1         // 'number'
typeof '1'       // 'string'
typeof true      // 'boolean'
typeof undefined // 'undefined'

// 'object'になってしまうパターン
typeof null            // 'object'
typeof []              // 'object'
typeof new String('1') // 'object'
typeof new Date()      // 'object'

Object.prototype.toString()

typeofが使いにくいのならばどうすれば?と思うかもしれませんが実は素晴らしいメソッドがあるのです
Object.prototype.toString() - JavaScript | MDN
MDNにも記載されている様にオブジェクトクラスの検出にObject.prototype.toString()を使うということができます

Object.prototype.toString.call(1)               // '[object Number]'
Object.prototype.toString.call(null)            // '[object Null]'
Object.prototype.toString.call(undefined)       // '[object Undefined]'
Object.prototype.toString.call([])              // '[object Array]'
Object.prototype.toString.call(new String('1')) // '[object String]'
Object.prototype.toString.call(new Date())      // '[object Date]'

まとめ

以上より型判定を行い時はObject.prototype.toString()を使いましょう
ちなみに↓のようにsliceをしておけば型名だけを取り出せます

Object.prototype.toString.call(1).slice(8, -1) // 'Number'

ここまで書いておいてなんですが、少し不安になったので幾つか調べてみましたがやはり出来る人たちはもう少し丁寧にやってますね
便利関数として自作する場合は↓を参考にして下さい
JavaScriptでオブジェクトの型を判別するのにtypeof演算子使うとツラいよね - Qiita
jQueryはどうやって型判定してるのか - Qiita]

おまけ(NaNの判定)

NaN判定もやりたい時ってありますよね
Object.prototype.toString.call(NaN).slice(8, -1)は実は'Number'になります
なのでisNaNを使うしかないのですが、トップレベルのisNaN関数はあまり厳密ではないです

isNaN(NaN)       // true
isNaN(undefined) // true
isNaN("hoge")    // true

一番最後の例は文字列から数値への変換が失敗してNaNになってしまっています
文字列は数値ではないので(Not a Numberなので)正しいのでは?とも思いますが求めているものとは少し違いますよね
これを回避するためにはNumber.isNaNを使いましょう
Number.isNaNは純粋にNaNであるかどうかを判定できます

Number.isNaN(NaN)       // true
Number.isNaN(undefined) // false
Number.isNaN("hoge")    // false

lessのcalcに死ぬほどハマった

題名の通りのlessのcalcにとんでもない落とし穴があって今日見事にハマってしまった。
下のようなよくあるcalcを書くとする。

width: calc(100% - 90px);

これをCSSコンパイルすると下のようになる

width: calc(10%);

100% - 90%になる(;´Д`)(;´Д`)(;´Д`)

どうやらコレは有名な不具合らしくて既にみんな知っていることだったらしい

解決策としては以下のようにエスケープすれば良い

width: calc(~"100% - 90px");

[WordPress] WordPressでformのname属性に"name"を使ってはいけない

こんな時代だからformを作ることはよくあると思う
その時に動作確認用にname属性にnameと付けてしまうこともよくあると思う

<form method="post">
  <input name="name" type="text">
  <input type="submit" value="送信">
</form>
$name = $_POST['name'];
// $nameを使ってほげほげ

このような命名をサボったコードを書いてしまうとWordPressでは動作しない

原因はwp-includes/class-wp.phpを見てみると納得

// ソースコードの一番最初の方にある
public $public_query_vars = array('m', 'p', 'posts', 'w', 'cat', 'withcomments', 'withoutcomments', 's', 'search', 'exact', 'sentence', 'calendar', 'page', 'paged', 'more', 'tb', 'pb', 'author', 'order', 'orderby', 'year', 'monthnum', 'day', 'hour', 'minute', 'second', 'name', 'category_name', 'tag', 'feed', 'author_name', 'static', 'pagename', 'page_id', 'error', 'attachment', 'attachment_id', 'subpost', 'subpost_id', 'preview', 'robots', 'taxonomy', 'term', 'cpage', 'post_type', 'embed' );

WordPressのコアのソースコードに既に"name"が取られてしまっている

なので↓のようにname属性には正しく名前を付けましょう

<form method="post">
  <input name="tyantoshitaname" type="text">
  <input type="submit" value="送信">
</form>
$name = $_POST['tyantoshitaname'];
// $nameを使ってほげほげ

Facebookのアクセストークンをlocalhostで取得する方法

開発者登録の時にアプリドメインを指定するとそのドメインが認証の対象になるので、そのドメインならアクセストークンの取得ができるみたい

でもこのアプリドメインにはlocalhostを指定できないのでこれは困ったと思ったら簡単に解決できた

開発者画面の設定 -> 詳細設定 -> クライアントOautn設定から有効なOauthリダイレクトURLにlocalhostのURLを指定すればよいだけだった

f:id:k213:20160426005426p:plain

↑ここの場所ね