bata's log

フロントエンド系のTipsとかメモ

gitでよく使うけどよく忘れる便利なコマンド

git

ローカルブランチを作成しリモートをクローンする

$ git checkout -b ローカルブランチ名 origin/リモートブランチ名

ローカルブランチの作成、リモートブランチのクローン、ブランチへの切り替えを一度にできます。

ブランチを削除

# ローカルブランチを削除
$ git branch -d ブランチ名

# リモートブランチを削除
$ git push origin :ブランチ名

リモート側でブランチが削除された状態をローカルに反映する

$ git fetch --prune

Githubの操作でブランチを削除したり誰かがブランチを削除した場合、$ git branch -aを実行すると削除されたはずのブランチ名が残ったままになります。この状態を解決するには上記コマンドを実行します。

indexに登録したファイルを取り消す

$ git reset HEAD ファイル名

間違ってaddしたファイルを取り消す場合に使用。

ファイルの変更を元に戻す

$ git checkout ファイル名

# 全て元に戻す場合
$ git checkout .

間違って削除したファイルを復活させる場合もこれ。

ローカルリポジトリで指定したコミットまで戻る

$ git reset コミットID

# 戻ったコミット以降の更新を全て取り消す場合
$ git reset --hard コミットID

管理中のファイルやフォルダを一旦管理外にする

# ファイルの場合
$ git rm --cached -f ファイル名

# フォルダの場合
$ git rm --cached -r フォルダ名

.gitignoreに除外ファイルの設定をする前にaddしてしまったファイルやフォルダを除外するときなどに使用します。

続く・・・

gitを使うときに便利なconfigファイル設定

git

よく使うコマンドをショートカットにする

どのコマンドをショートカットにするかは好みもありますが、よく使うコマンドを設定すると作業効率がアップします。 ホームディレクトリの.gitconfigファイルを編集するか、git config --globalコマンドで設定できます。

# .gitconfigを編集する場合
[alias]
        st = status
        co = checkout
        br = branch

# コマンドで登録する場合
$ git config --global alias.st status
$ git config --global alias.co checkout
$ git config --global alias.br branch

git push する時の挙動を設定

git pushコマンドだけで実行すると、デフォルトではローカルとリモートでブランチ名が同じものは全部pushしてしまいます。
これはgitを使っている人なら相当ヤバイ状態だとわかると思いますので、デフォルトの設定を変えてしまったほうが無難です。

# .gitconfigを編集する場合
[push]
       #push時にブランチ名を必ず指定する必要がある
       default = noting

       #デフォルト設定。ローカルとリモートでブランチ名が同じものは全部push
       default = matching

       #カレントブランチに追跡ブランチが設定されている場合に追跡ブランチに対して push
       default = upstream

       #カレントブランチに追跡ブランチが設定されていて、
       #かつローカルとリモートのブランチ名が同じである場合にpush
       default = simple

        # カレントブランチと同名のリモートブランチがあればpush 
        default = current

# コマンドで登録する場合
$ git config --global push.default nothing
$ git config --global push.default matching
$ git config --global push.default upstream
$ git config --global push.default simple
$ git config --global push.default current

matching以外で好みのものをデフォルトにすれば良いと思います。
私はcurrentにしています。

文字に色を付ける

ターミナルに出力される文字に色を付けて見やすくします。

# .gitconfigを編集する場合
[color]
        ui = auto
        diff = auto
        status = auto
        branch = auto

# コマンドで登録する場合
$ git config --global color.ui auto
$ git config --global color.diff auto
$ git config --global color.status auto
$ git config --global color.branch auto

続く…

要素の位置を取得する

JavaScript ユーティリティ

縦長スクロール型のページでナビゲーションに現在位置を表示したり、ある特定の位置までスクロールしたらイベントが発火したりするコンテンツを作る場合、該当の要素の位置を取得するという工程が必要になります。

この部分だけを切り出してユーティリティ的に使えるようにしてみました。

HTML

<div id="hoge">hoge</div>
<div id="fuga">fuga</div>
<div id="fugo">fugo</div>

JavaScript

function GetElementsPosition(idAry,adjustPosition){
    this.idAry = idAry;
    this.len = this.idAry.length;
    this.adjustPosition = adjustPosition || 0;
    this.hashTable = this.generateObj();
}

GetElementsPosition.prototype = {

    //連想配列を生成
    generateObj: function(){
        var hashObj = {};
        for(var i = 0; i < this.len; i++){
            hashObj[this.idAry[i]] = this.getPosition(i) + this.adjustPosition;
        }
        return hashObj;
    },

    //要素の位置を取得
    getPosition: function(i){
        var el = document.getElementById(this.idAry[i]);
        if(el){
            return el.offsetTop;
        }
    }

}

取得したい要素を引数から受け取り、[要素名]:[位置の値]の形の連想配列を生成します。

実行

window.onload = function(){
    //初期化
    var hoge = new GetElementsPosition(['hoge','fuga','fugo']);
    //配列の呼び出し
    console.log(hoge.hashTable);
}

引数に取得したい要素名（id名）を入力して初期化します。 生成した配列を呼び出す時は[インスタンス名].hashTable。

データが返ってきます。

{hoge: 8, fuga: 24, fugo: 40}

JavaScriptの設計 ～ ModelとViewを考えながら書いてみる

JavaScript

フォームにテキストを入力すると配列にデータをプッシュするというWEBアプリでよくありそうな処理です。 色々やると難しいので、Modelはデータを管理してViewはDOMの操作を管理するという単純なルールのみ。

さらにデータをDOMに書き出すViewを作ると簡単なMV○になるかもしれないけど、とりあえずは単純な処理のみで書いてみた。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="src/js/myapp.js"></script>
</head>
<body>
<form action="" class="todoForm">
    <input type="text" />
    <input type="submit" value="add" />
</form>
</body>
</html>

まずはHTML。Formにクラスを付けて管理。

名前空間

/**
 * namespace[MyApp]
 */

var MyApp = MyApp || {};

名前空間を設定する。

Model

/**
 * データを管理するModelクラス
 */

(function($,nss){

    //個別のデータを管理するクラス
    ns.Item = function(text){
        this.text = text;
    }

    //配列を管理するクラス
    ns.Data = function(){
        this.list = [];
    }

    //配列にデータを追加するメソッド
    ns.Data.prototype = {

        add: function(text){
            var item = new ns.Item(text);
            this.list.push(item);
        }

    }

})(jQuery,MyApp);

個別のデータをItemクラス、配列をDataクラスで管理。
ここではDOMの操作やイベントに関する操作は一切しません。

View

/**
 * フォームを管理するViewクラス
 */

(function($,ns){

    ns.ViewForm = function(el,data){
        this.$el = $(el);
        this.$input = this.$el.find('input[type="text"]');
        this.data = data;
        this.event();
    }

    ns.ViewForm.prototype = {

        event: function(){
            var that = this;
            that.$el.on('submit',function(e){
                that.onSubmit(e);
                console.log(that.data.list);
            });
        },

        onSubmit: function(e){
            e.preventDefault();
            var text = this.getText();
            if(text){
                this.data.add(text);
                this.clearInput();
            }
        },

        getText: function(){
            return this.$input.val();
        },

        clearInput: function(){
            this.$input.val('');
        }

    }

})(jQuery,MyApp);

FormをViewFormクラスで管理。
FormがsubmitされるとModelの配列にデータを追加します。
イベントのみを管理しデータの管理はModelに任せます。

初期化

/**
 * 初期化
 */

$(function(){

    var data = new MyApp.Data();
    new MyApp.ViewForm('.todoForm',data);

});

最後に初期化。
配列を管理するDataクラスをインスタンス化して変数に格納してViewクラスに渡します。

フォームにテキストを入力してsubmitすると、データが追加されます。

画像ロールオーバーをオブジェクト指向的な書き方で・・・その2

JavaScript jQuery ユーティリティ

基本的な機能を使いまわして、通常のロールオーバーとフェード付きを作ってみた。
クローン画像の生成のあたりはもう少し改善できそうな気がする。

kawabataryo/imgRollover · GitHub