WebEngine

だらだらと綴る技術系メモ

vimのカラースキーマをMolokaiにしただけ

Molokaiが結構良いみたいなので

  • Macのターミナルのvimでやっています(Windowsだとおそらくキツイ)

今までデフォルトのカラースキーマで満足していたのですが、ほかの人のvimを見て「いいな」と思い導入することにしました。
続きを見てもいいですが、僕が参考にした以下のサイトを見れば一発でできると思います。(それだけ簡単だった)
ponkiti’s blog VimのカラースキームをMolokaiに変更する

手順

ターミナルを開いて、以下のコマンドを順に実行します。

$ mkdir ~/.vim
$ cd ~/.vim
$ mkdir colors
$ git clone https://github.com/tomasr/molokai
$ mv molokai/colors/molokai.vim ~/.vim/colors/

.vimという隠しディレクトリを作成し、さらにその中にcolorsというディレクトリをつくります。そこに ネットからもってきたmolokaiをぶちこみます。 続いて.vimrcvimで開きます。(なければ作成) ファイルには以下のように追記します。

syntax on
set t_Co=256
colorscheme molokai

おまけ

なんか短くなってしまったのでvim関連で自分が最近驚いたことをメモしておきます。
:e .と入力するとvim内で現在いるディレクトリのエクスプローラが表示されます。地味に 便利。

参考


今さらながら == と === の挙動の違いをチェック

そもそもコレなんて呼ぶ

PHPjavaScriptで、いつも使っているけど、何て言うのか 覚えていますか?
ネット上とかで毎回見ているけど、意外とスルーしていたりします。
正解は

うーん、会話で使うには長いんですよね。普段は、「イコール1コ抜けてるよ」 とか言っていますね。 (ごめんなさい、そんな状況あんまりなかった)

で、名前のとおり、=== の方が厳しく型をチェックしてくれます。 でも、実際にどんな動きをしているか理解しているのか、と言われたら微妙だということに 気づきました。

挙動チェック

上がjavaScript、下がPHPのコードです。

var str = "1";
var num = 1;

console.log( str == num ); // true
console.log( str === num ); // false
<?php
$str = '1';
$num = 1;

var_dump( $str == $num ); // true
var_dump( $str === $num ); // false

== は文字列を数値に変換してから比較を行います。 === は型変換を行うことなく評価を行うので、 javaScriptPHPともにfalseが返ってきていますね。この挙動を見ただけでも === を使うことの 意味が実感できると思います。

次に、Boolean(boolean)型を見てみましょう。
オペランドの片方がBooleanならば、その論理オペランドはtrueならば1に、そしてfalseならば0に変換さます。
=== ならば、もちろん厳密にチェックしてくれるのでfalseが返って来ます。

console.log( true == 1 ); // true
console.log( true === 1 ); // false
console.log( false == 0 ); // true
console.log( false === 0 ); // false
<?php
var_dump( 1 == true ); // true
var_dump( 1 === true ); // false
var_dump( 0 == false ); // true
var_dump( 0 === false ); // false


javaScriptPHPの違い

javaScriptの方は、最後の2行に注目していただければわかると思います。

console.log( undefined == null ); // true
console.log( undefined === null ); // false
console.log( undefined == "" ); // false
console.log( undefined === "" ); // false
console.log( null == "" ); // false
console.log( null === "" ); // false
<?php
var_dump( null == '' ); // true
var_dump( null === '' ); // false

PHPの方はnullが == で比較した場合、trueになっているんですね。この挙動は最新のPHP7で確認しても 変わっていませんでした。
それでも、 === で比較すれば、ちゃんとfalseが返って来てくれます。
大事なことは、なんでもかんでも === を使わずに == と === を使った場合とで、どういう挙動になるか 考えてプログラムを書くことです。

javaScriptのthis

thisイコール「自分自身」からの脱却


先にコードとコンソール(開発者ツール)での結果を出します。

<div id="test_zone">
  <button id="test_button">テストボタン</button>
</div>
$(function() {

  "use strict";

  console.log("1 : " + this);

  // Testオブジェクト
  var Test = function(score) {
    console.log("2 : " + this);
    this.score = score;
}

  // メソッドはプロトタイプ宣言で
  Test.prototype = {

    buttonOn : function() {
      console.log("3 : " + this);
      console.log("test : " + this.score);

      $("#test_zone").on({
        "click": function() {
          console.log("4 : " + this);
        }
      }, "#test_button");

    }

  };

// -- main --
var test = new Test(55);
test.buttonOn();

});
結果
1 : [object HTMLDocument]
2 : [object Object]
3 :[object Object]
test : 55
4 : [object HTMLButtonElement] // ボタンをクリック後


番号順に説明していきましょう。

1はグローバルなので、オブジェクトはHTMLDocument、つまりwindowを指しています。

2はTestオブジェクト(Testクラス)内なので、Testオブジェクト自体を指しています。

3はbuttonOnメソッド内。結果がobject Objectでわかりづらいので、Testオブジェクトの プロパティであるscoreをthisで呼びしています。scoreがthisで呼びせている、ということ は、つまり、thisにはTestオブジェクトが入っていることを意味しますね。

問題は4です。4でのthisは、HTMLButtonElementを指しています。DOMのボタン を示しているのです。

なぜか。それは、javaScriptでは関数自体が独立したオブジェクトであり、thisは関数を 定義したオブジェクトに属するものではないからです。(この説明は誤解を招くかもしれませんね。自分でも ちょっと自信ないです)

で、結局thisがなんなのかと言うと、その関数やメソッドを呼び出したオブジェクトが入っているというイメージが良い かもしれません。
4では、jQueryのonメソッドのclickメソッドを呼び出したbuttonElementがthisに 入っていたわけです。


上記の場合の解決策

上記の場合で、onメソッド内でTestオブジェクトを参照したい、という場合があります。そのような場合は、 一旦、別変数のなかにthisを格納することで解決できます。下記ではselfという変数 のなかにthisを格納しています。

buttonOn : function() {
  console.log("3 : " + this);
  console.log("test : " + this.score);

  var self = this;

  $("#test_zone").on({
    "click": function() {
      console.log("4 : " + this);
      console.log("5 : " + self);
      console.log("test : " + self.score);
    }
  }, "#test_button");

}
5 : [object Object]
test : 55


Testオブジェクトのscoreselfで呼び出せているので 5のobject Objectの正体がTestオブジェクトであることがわかります。 成功ですね。

参考

applycallを使うとthisを自由自在に操ることができる らしいです。詳しくは以下を参照してください。