Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

Browserifyに対するDuoの優位性について

11/18 21:19 追記

コメントにid:efclさんが書いてくれてますが、すいません、この記事、肝心なところ間違ってます…。

fmtというライブラリですが、npmにあるものとcomponentsにあるものでは名前は一緒ですが、内容が違っていました…。

本当はyields/fmt · GitHub見ないといけなかったのに、npmの方の chilts/fmt · GitHubをビルドしてしまってました。

実際にGitHubリポジトリ作っていただいているんで、そちら見ると分かりますが、Browserifyでビルドした方が(前半部分が圧縮されてることもあり)むしろファイルサイズ小さいです…。

Browserify 1.5Kb

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var uid = require('uid');
var fmt = require('./fmt');

var msg = fmt('Your unique ID is %s!', uid());

var display = document.querySelector('.display');
var text = document.createTextNode(msg);

display.appendChild(text);

},{"./fmt":2,"uid":3}],2:[function(require,module,exports){

/**
 * toString.
 */

var toString = window.JSON
  ? JSON.stringify
  : String;

/**
 * Export `fmt`
 */

module.exports = fmt;

/**
 * Formatters
 */

fmt.o = toString;
fmt.s = String;
fmt.d = parseInt;

/**
 * Format the given `str`.
 *
 * @param {String} str
 * @param {...} args
 * @return {String}
 * @api public
 */

function fmt(str){
  var args = [].slice.call(arguments, 1);
  var j = 0;

  return str.replace(/%([a-z])/gi, function(_, f){
    return fmt[f]
      ? fmt[f](args[j++])
      : _ + f;
  });
}

},{}],3:[function(require,module,exports){
/**
 * Export `uid`
 */

module.exports = uid;

/**
 * Create a `uid`
 *
 * @param {String} len
 * @return {String} uid
 */

function uid(len) {
  len = len || 7;
  return Math.random().toString(35).substr(2, len);
}

},{}]},{},[1]);

Duo 2.5Kb

(function outer(modules, cache, entries){

  /**
   * Global
   */

  var global = (function(){ return this; })();

  /**
   * Require `name`.
   *
   * @param {String} name
   * @param {Boolean} jumped
   * @api public
   */

  function require(name, jumped){
    if (cache[name]) return cache[name].exports;
    if (modules[name]) return call(name, require);
    throw new Error('cannot find module "' + name + '"');
  }

  /**
   * Call module `id` and cache it.
   *
   * @param {Number} id
   * @param {Function} require
   * @return {Function}
   * @api private
   */

  function call(id, require){
    var m = cache[id] = { exports: {} };
    var mod = modules[id];
    var name = mod[2];
    var fn = mod[0];

    fn.call(m.exports, function(req){
      var dep = modules[id][1][req];
      return require(dep ? dep : req);
    }, m, m.exports, outer, modules, cache, entries);

    // expose as `name`.
    if (name) cache[name] = cache[id];

    return cache[id].exports;
  }

  /**
   * Require all entries exposing them on global if needed.
   */

  for (var id in entries) {
    if (entries[id]) {
      global[entries[id]] = require(id);
    } else {
      require(id);
    }
  }

  /**
   * Duo flag.
   */

  require.duo = true;

  /**
   * Expose cache.
   */

  require.cache = cache;

  /**
   * Expose modules
   */

  require.modules = modules;

  /**
   * Return newest require.
   */

   return require;
})({
1: [function(require, module, exports) {
var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');

var msg = fmt('Your unique ID is %s!', uid());

var display = document.querySelector('.display');
var text = document.createTextNode(msg);

display.appendChild(text);
}, {"matthewmueller/uid":2,"yields/fmt":3}],
2: [function(require, module, exports) {
/**
 * Export `uid`
 */

module.exports = uid;

/**
 * Create a `uid`
 *
 * @param {String} len
 * @return {String} uid
 */

function uid(len) {
  len = len || 7;
  return Math.random().toString(35).substr(2, len);
}

}, {}],
3: [function(require, module, exports) {

/**
 * toString.
 */

var toString = window.JSON
  ? JSON.stringify
  : function(_){ return String(_); };

/**
 * Export `fmt`
 */

module.exports = fmt;

/**
 * Formatters
 */

fmt.o = toString;
fmt.s = String;
fmt.d = parseInt;

/**
 * Format the given `str`.
 *
 * @param {String} str
 * @param {...} args
 * @return {String}
 * @api public
 */

function fmt(str){
  var args = [].slice.call(arguments, 1);
  var j = 0;

  return str.replace(/%([a-z])/gi, function(_, f){
    return fmt[f]
      ? fmt[f](args[j++])
      : _ + f;
  });
}

}, {}]}, {}, {"1":""})

結論

ということで、この例ではファイルサイズ比べるの間違いでした。すみません。

こうなると2つの違いは、フロントエンドの観点で言うと

  • package.jsonの有無
  • CSS@importの有無

くらいになり、確かな優位性っていうのはないなーという感じになります。エコシステムとしてはBrowserifyの方が優位くらいですね。

一応、最初に書いた記事は下記に残しておきますが、参考にはならないです。今度からもうちょっとちゃんと確認してからブログ上げることにします。

id:efcl さん、@hokacchaさんご指摘ありがとうございましたー!


11/18 21:19 追記 -> ここから最初に書いた記事になりますが、上記のとおり参考にはなりません…。

@ahomuさんのNode学園祭2014でのセッションでDuoについての感想があったのですが、こんな感じでした。

GitHubからのインストール&ビルドがシームレス◎
現状だとnpm + Browserifyと比べて優位性が低い

このスライドでも紹介していただいたんですが、会社の公式エンジニアブログでかんたんパッケージマネージャDuoという記事を書いていまして、優位性ってとこが気にかかったんで、ちょっと書いておこうかと。

Duoの優位性

Browserifyに対する優位性として、現状自分が考える優位性は2つあって、

  • package.json書かなくていい
  • ビルド後のファイルの容量が段違いに小さい

という2点です。それぞれ簡単に。

package.json書かなくていい

本当にフロントエンドな感じなのに、package.json書くのはちょっと…みたいなとこあると思います。別に無ければ全然良いんですが。

さっきのエンジニアブログで出したコード例で言うと最低でも

$ npm init
$ npm i -S uid fmt

しないと使えないですが、(npm initの時点で色々聞かれるし)Duoだとそれが全然いらないというのは良いです。

まあ、package.jsonを他のところからコピーしても良いんですが、やっぱりフロントエンドの作業でnode.jsの設定ファイル書くのはなー的なとこがあります。

ビルド後のファイルの容量が段違いに小さい

1つめはとって付けたかのような理由なんですが、こっちは結構切実かなあと思います。

Browserifyでビルドしたものより、DuoでビルドしたJSの方が格段にファイルサイズ小さいです。

これは考えてみたら当たり前のことなんですが、BrowserifyはNode.jsのAPIをブラウザで使えるという機能がウリになってるため、そのAPIのコードがビルド後に入ってきてしまいます。

対して、Duoの場合は単純にインストールしたライブラリと、自分が書いたコード、+αでDuoのコードが入るだけになっていますので、サイズが全然小さいです。

試しにエンジニアブログで書いてるuidfmt使ったコードをビルドしてみました。

Browserify 21.9kb

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
function display(selector, text) {
    var target = document.querySelector(selector),
        msg = document.createTextNode(text);

    target.appendChild(msg);
}

module.exports = display;

},{}],2:[function(require,module,exports){
// var uid = require('matthewmueller/uid');
// var fmt = require('yields/fmt');
var uid = require('uid');
var fmt = require('fmt');
var display = require('./display');

var msg = fmt('Your unique ID is %s!', uid());

display('.display', msg);

},{"./display":1,"fmt":3,"uid":4}],3:[function(require,module,exports){
// --------------------------------------------------------------------------------------------------------------------
//
// fmt.js - Command line output formatting.
//
// Copyright (c) 2012 Andrew Chilton - http://chilts.org/
// Written by Andrew Chilton <andychilton@gmail.com>
//
// License: http://opensource.org/licenses/MIT
//
// --------------------------------------------------------------------------------------------------------------------

var util = require('util');

// --------------------------------------------------------------------------------------------------------------------

var sep  = '===============================================================================';
var line = '-------------------------------------------------------------------------------';
var field = '                    ';

// --------------------------------------------------------------------------------------------------------------------

// separator
module.exports.separator = function() {
    console.log(sep);
};

// alias the above
module.exports.sep = module.exports.separator;

// line
module.exports.line = function() {
    console.log(line);
};

// title
module.exports.title = function(title) {
    var out = '--- ' + title + ' ';
    out += line.substr(out.length);
    console.log(out);
};

// field
module.exports.field = function(key, value) {
    console.log('' + key + field.substr(key.length) + ' : ' + value);
};

// subfield
module.exports.subfield = function(key, value) {
    console.log('- ' + key + field.substr(key.length + 2) + ' : ' + value);
};

// list item
module.exports.li = function(msg) {
    console.log('* ' + msg);
};

// dump
module.exports.dump = function(data, name) {
    if ( name ) {
        console.log(name + ' :', util.inspect(data, false, null, true));
    }
    else {
        console.log(util.inspect(data, false, null, true));
    }
};

// msg
module.exports.msg = function(msg) {
    console.log(msg);
};

// --------------------------------------------------------------------------------------------------------------------

},{"util":8}],4:[function(require,module,exports){
/**
 * Export `uid`
 */

module.exports = uid;

/**
 * Create a `uid`
 *
 * @param {String} len
 * @return {String} uid
 */

function uid(len) {
  len = len || 7;
  return Math.random().toString(35).substr(2, len);
}

},{}],5:[function(require,module,exports){
if (typeof Object.create === 'function') {
  // implementation from standard node.js 'util' module
  module.exports = function inherits(ctor, superCtor) {
    ctor.super_ = superCtor
    ctor.prototype = Object.create(superCtor.prototype, {
      constructor: {
        value: ctor,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
  };
} else {
  // old school shim for old browsers
  module.exports = function inherits(ctor, superCtor) {
    ctor.super_ = superCtor
    var TempCtor = function () {}
    TempCtor.prototype = superCtor.prototype
    ctor.prototype = new TempCtor()
    ctor.prototype.constructor = ctor
  }
}

},{}],6:[function(require,module,exports){
// shim for using process in browser

var process = module.exports = {};

process.nextTick = (function () {
    var canSetImmediate = typeof window !== 'undefined'
    && window.setImmediate;
    var canMutationObserver = typeof window !== 'undefined'
    && window.MutationObserver;
    var canPost = typeof window !== 'undefined'
    && window.postMessage && window.addEventListener
    ;

    if (canSetImmediate) {
        return function (f) { return window.setImmediate(f) };
    }

    var queue = [];

    if (canMutationObserver) {
        var hiddenDiv = document.createElement("div");
        var observer = new MutationObserver(function () {
            var queueList = queue.slice();
            queue.length = 0;
            queueList.forEach(function (fn) {
                fn();
            });
        });

        observer.observe(hiddenDiv, { attributes: true });

        return function nextTick(fn) {
            if (!queue.length) {
                hiddenDiv.setAttribute('yes', 'no');
            }
            queue.push(fn);
        };
    }

    if (canPost) {
        window.addEventListener('message', function (ev) {
            var source = ev.source;
            if ((source === window || source === null) && ev.data === 'process-tick') {
                ev.stopPropagation();
                if (queue.length > 0) {
                    var fn = queue.shift();
                    fn();
                }
            }
        }, true);

        return function nextTick(fn) {
            queue.push(fn);
            window.postMessage('process-tick', '*');
        };
    }

    return function nextTick(fn) {
        setTimeout(fn, 0);
    };
})();

process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];

function noop() {}

process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;

process.binding = function (name) {
    throw new Error('process.binding is not supported');
};

// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
    throw new Error('process.chdir is not supported');
};

},{}],7:[function(require,module,exports){
module.exports = function isBuffer(arg) {
  return arg && typeof arg === 'object'
    && typeof arg.copy === 'function'
    && typeof arg.fill === 'function'
    && typeof arg.readUInt8 === 'function';
}
},{}],8:[function(require,module,exports){
(function (process,global){
// Copyright Joyent, Inc. and other Node contributors.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to permit
// persons to whom the Software is furnished to do so, subject to the
// following conditions:
//
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
// USE OR OTHER DEALINGS IN THE SOFTWARE.

var formatRegExp = /%[sdj%]/g;
exports.format = function(f) {
  if (!isString(f)) {
    var objects = [];
    for (var i = 0; i < arguments.length; i++) {
      objects.push(inspect(arguments[i]));
    }
    return objects.join(' ');
  }

  var i = 1;
  var args = arguments;
  var len = args.length;
  var str = String(f).replace(formatRegExp, function(x) {
    if (x === '%%') return '%';
    if (i >= len) return x;
    switch (x) {
      case '%s': return String(args[i++]);
      case '%d': return Number(args[i++]);
      case '%j':
        try {
          return JSON.stringify(args[i++]);
        } catch (_) {
          return '[Circular]';
        }
      default:
        return x;
    }
  });
  for (var x = args[i]; i < len; x = args[++i]) {
    if (isNull(x) || !isObject(x)) {
      str += ' ' + x;
    } else {
      str += ' ' + inspect(x);
    }
  }
  return str;
};


// Mark that a method should not be used.
// Returns a modified function which warns once by default.
// If --no-deprecation is set, then it is a no-op.
exports.deprecate = function(fn, msg) {
  // Allow for deprecating things in the process of starting up.
  if (isUndefined(global.process)) {
    return function() {
      return exports.deprecate(fn, msg).apply(this, arguments);
    };
  }

  if (process.noDeprecation === true) {
    return fn;
  }

  var warned = false;
  function deprecated() {
    if (!warned) {
      if (process.throwDeprecation) {
        throw new Error(msg);
      } else if (process.traceDeprecation) {
        console.trace(msg);
      } else {
        console.error(msg);
      }
      warned = true;
    }
    return fn.apply(this, arguments);
  }

  return deprecated;
};


var debugs = {};
var debugEnviron;
exports.debuglog = function(set) {
  if (isUndefined(debugEnviron))
    debugEnviron = process.env.NODE_DEBUG || '';
  set = set.toUpperCase();
  if (!debugs[set]) {
    if (new RegExp('\\b' + set + '\\b', 'i').test(debugEnviron)) {
      var pid = process.pid;
      debugs[set] = function() {
        var msg = exports.format.apply(exports, arguments);
        console.error('%s %d: %s', set, pid, msg);
      };
    } else {
      debugs[set] = function() {};
    }
  }
  return debugs[set];
};


/**
 * Echos the value of a value. Trys to print the value out
 * in the best way possible given the different types.
 *
 * @param {Object} obj The object to print out.
 * @param {Object} opts Optional options object that alters the output.
 */
/* legacy: obj, showHidden, depth, colors*/
function inspect(obj, opts) {
  // default options
  var ctx = {
    seen: [],
    stylize: stylizeNoColor
  };
  // legacy...
  if (arguments.length >= 3) ctx.depth = arguments[2];
  if (arguments.length >= 4) ctx.colors = arguments[3];
  if (isBoolean(opts)) {
    // legacy...
    ctx.showHidden = opts;
  } else if (opts) {
    // got an "options" object
    exports._extend(ctx, opts);
  }
  // set default options
  if (isUndefined(ctx.showHidden)) ctx.showHidden = false;
  if (isUndefined(ctx.depth)) ctx.depth = 2;
  if (isUndefined(ctx.colors)) ctx.colors = false;
  if (isUndefined(ctx.customInspect)) ctx.customInspect = true;
  if (ctx.colors) ctx.stylize = stylizeWithColor;
  return formatValue(ctx, obj, ctx.depth);
}
exports.inspect = inspect;


// http://en.wikipedia.org/wiki/ANSI_escape_code#graphics
inspect.colors = {
  'bold' : [1, 22],
  'italic' : [3, 23],
  'underline' : [4, 24],
  'inverse' : [7, 27],
  'white' : [37, 39],
  'grey' : [90, 39],
  'black' : [30, 39],
  'blue' : [34, 39],
  'cyan' : [36, 39],
  'green' : [32, 39],
  'magenta' : [35, 39],
  'red' : [31, 39],
  'yellow' : [33, 39]
};

// Don't use 'blue' not visible on cmd.exe
inspect.styles = {
  'special': 'cyan',
  'number': 'yellow',
  'boolean': 'yellow',
  'undefined': 'grey',
  'null': 'bold',
  'string': 'green',
  'date': 'magenta',
  // "name": intentionally not styling
  'regexp': 'red'
};


function stylizeWithColor(str, styleType) {
  var style = inspect.styles[styleType];

  if (style) {
    return '\u001b[' + inspect.colors[style][0] + 'm' + str +
           '\u001b[' + inspect.colors[style][1] + 'm';
  } else {
    return str;
  }
}


function stylizeNoColor(str, styleType) {
  return str;
}


function arrayToHash(array) {
  var hash = {};

  array.forEach(function(val, idx) {
    hash[val] = true;
  });

  return hash;
}


function formatValue(ctx, value, recurseTimes) {
  // Provide a hook for user-specified inspect functions.
  // Check that value is an object with an inspect function on it
  if (ctx.customInspect &&
      value &&
      isFunction(value.inspect) &&
      // Filter out the util module, it's inspect function is special
      value.inspect !== exports.inspect &&
      // Also filter out any prototype objects using the circular check.
      !(value.constructor && value.constructor.prototype === value)) {
    var ret = value.inspect(recurseTimes, ctx);
    if (!isString(ret)) {
      ret = formatValue(ctx, ret, recurseTimes);
    }
    return ret;
  }

  // Primitive types cannot have properties
  var primitive = formatPrimitive(ctx, value);
  if (primitive) {
    return primitive;
  }

  // Look up the keys of the object.
  var keys = Object.keys(value);
  var visibleKeys = arrayToHash(keys);

  if (ctx.showHidden) {
    keys = Object.getOwnPropertyNames(value);
  }

  // IE doesn't make error fields non-enumerable
  // http://msdn.microsoft.com/en-us/library/ie/dww52sbt(v=vs.94).aspx
  if (isError(value)
      && (keys.indexOf('message') >= 0 || keys.indexOf('description') >= 0)) {
    return formatError(value);
  }

  // Some type of object without properties can be shortcutted.
  if (keys.length === 0) {
    if (isFunction(value)) {
      var name = value.name ? ': ' + value.name : '';
      return ctx.stylize('[Function' + name + ']', 'special');
    }
    if (isRegExp(value)) {
      return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');
    }
    if (isDate(value)) {
      return ctx.stylize(Date.prototype.toString.call(value), 'date');
    }
    if (isError(value)) {
      return formatError(value);
    }
  }

  var base = '', array = false, braces = ['{', '}'];

  // Make Array say that they are Array
  if (isArray(value)) {
    array = true;
    braces = ['[', ']'];
  }

  // Make functions say that they are functions
  if (isFunction(value)) {
    var n = value.name ? ': ' + value.name : '';
    base = ' [Function' + n + ']';
  }

  // Make RegExps say that they are RegExps
  if (isRegExp(value)) {
    base = ' ' + RegExp.prototype.toString.call(value);
  }

  // Make dates with properties first say the date
  if (isDate(value)) {
    base = ' ' + Date.prototype.toUTCString.call(value);
  }

  // Make error with message first say the error
  if (isError(value)) {
    base = ' ' + formatError(value);
  }

  if (keys.length === 0 && (!array || value.length == 0)) {
    return braces[0] + base + braces[1];
  }

  if (recurseTimes < 0) {
    if (isRegExp(value)) {
      return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');
    } else {
      return ctx.stylize('[Object]', 'special');
    }
  }

  ctx.seen.push(value);

  var output;
  if (array) {
    output = formatArray(ctx, value, recurseTimes, visibleKeys, keys);
  } else {
    output = keys.map(function(key) {
      return formatProperty(ctx, value, recurseTimes, visibleKeys, key, array);
    });
  }

  ctx.seen.pop();

  return reduceToSingleString(output, base, braces);
}


function formatPrimitive(ctx, value) {
  if (isUndefined(value))
    return ctx.stylize('undefined', 'undefined');
  if (isString(value)) {
    var simple = '\'' + JSON.stringify(value).replace(/^"|"$/g, '')
                                             .replace(/'/g, "\\'")
                                             .replace(/\\"/g, '"') + '\'';
    return ctx.stylize(simple, 'string');
  }
  if (isNumber(value))
    return ctx.stylize('' + value, 'number');
  if (isBoolean(value))
    return ctx.stylize('' + value, 'boolean');
  // For some reason typeof null is "object", so special case here.
  if (isNull(value))
    return ctx.stylize('null', 'null');
}


function formatError(value) {
  return '[' + Error.prototype.toString.call(value) + ']';
}


function formatArray(ctx, value, recurseTimes, visibleKeys, keys) {
  var output = [];
  for (var i = 0, l = value.length; i < l; ++i) {
    if (hasOwnProperty(value, String(i))) {
      output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,
          String(i), true));
    } else {
      output.push('');
    }
  }
  keys.forEach(function(key) {
    if (!key.match(/^\d+$/)) {
      output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,
          key, true));
    }
  });
  return output;
}


function formatProperty(ctx, value, recurseTimes, visibleKeys, key, array) {
  var name, str, desc;
  desc = Object.getOwnPropertyDescriptor(value, key) || { value: value[key] };
  if (desc.get) {
    if (desc.set) {
      str = ctx.stylize('[Getter/Setter]', 'special');
    } else {
      str = ctx.stylize('[Getter]', 'special');
    }
  } else {
    if (desc.set) {
      str = ctx.stylize('[Setter]', 'special');
    }
  }
  if (!hasOwnProperty(visibleKeys, key)) {
    name = '[' + key + ']';
  }
  if (!str) {
    if (ctx.seen.indexOf(desc.value) < 0) {
      if (isNull(recurseTimes)) {
        str = formatValue(ctx, desc.value, null);
      } else {
        str = formatValue(ctx, desc.value, recurseTimes - 1);
      }
      if (str.indexOf('\n') > -1) {
        if (array) {
          str = str.split('\n').map(function(line) {
            return '  ' + line;
          }).join('\n').substr(2);
        } else {
          str = '\n' + str.split('\n').map(function(line) {
            return '   ' + line;
          }).join('\n');
        }
      }
    } else {
      str = ctx.stylize('[Circular]', 'special');
    }
  }
  if (isUndefined(name)) {
    if (array && key.match(/^\d+$/)) {
      return str;
    }
    name = JSON.stringify('' + key);
    if (name.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)) {
      name = name.substr(1, name.length - 2);
      name = ctx.stylize(name, 'name');
    } else {
      name = name.replace(/'/g, "\\'")
                 .replace(/\\"/g, '"')
                 .replace(/(^"|"$)/g, "'");
      name = ctx.stylize(name, 'string');
    }
  }

  return name + ': ' + str;
}


function reduceToSingleString(output, base, braces) {
  var numLinesEst = 0;
  var length = output.reduce(function(prev, cur) {
    numLinesEst++;
    if (cur.indexOf('\n') >= 0) numLinesEst++;
    return prev + cur.replace(/\u001b\[\d\d?m/g, '').length + 1;
  }, 0);

  if (length > 60) {
    return braces[0] +
           (base === '' ? '' : base + '\n ') +
           ' ' +
           output.join(',\n  ') +
           ' ' +
           braces[1];
  }

  return braces[0] + base + ' ' + output.join(', ') + ' ' + braces[1];
}


// NOTE: These type checking functions intentionally don't use `instanceof`
// because it is fragile and can be easily faked with `Object.create()`.
function isArray(ar) {
  return Array.isArray(ar);
}
exports.isArray = isArray;

function isBoolean(arg) {
  return typeof arg === 'boolean';
}
exports.isBoolean = isBoolean;

function isNull(arg) {
  return arg === null;
}
exports.isNull = isNull;

function isNullOrUndefined(arg) {
  return arg == null;
}
exports.isNullOrUndefined = isNullOrUndefined;

function isNumber(arg) {
  return typeof arg === 'number';
}
exports.isNumber = isNumber;

function isString(arg) {
  return typeof arg === 'string';
}
exports.isString = isString;

function isSymbol(arg) {
  return typeof arg === 'symbol';
}
exports.isSymbol = isSymbol;

function isUndefined(arg) {
  return arg === void 0;
}
exports.isUndefined = isUndefined;

function isRegExp(re) {
  return isObject(re) && objectToString(re) === '[object RegExp]';
}
exports.isRegExp = isRegExp;

function isObject(arg) {
  return typeof arg === 'object' && arg !== null;
}
exports.isObject = isObject;

function isDate(d) {
  return isObject(d) && objectToString(d) === '[object Date]';
}
exports.isDate = isDate;

function isError(e) {
  return isObject(e) &&
      (objectToString(e) === '[object Error]' || e instanceof Error);
}
exports.isError = isError;

function isFunction(arg) {
  return typeof arg === 'function';
}
exports.isFunction = isFunction;

function isPrimitive(arg) {
  return arg === null ||
         typeof arg === 'boolean' ||
         typeof arg === 'number' ||
         typeof arg === 'string' ||
         typeof arg === 'symbol' ||  // ES6 symbol
         typeof arg === 'undefined';
}
exports.isPrimitive = isPrimitive;

exports.isBuffer = require('./support/isBuffer');

function objectToString(o) {
  return Object.prototype.toString.call(o);
}


function pad(n) {
  return n < 10 ? '0' + n.toString(10) : n.toString(10);
}


var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
              'Oct', 'Nov', 'Dec'];

// 26 Feb 16:19:34
function timestamp() {
  var d = new Date();
  var time = [pad(d.getHours()),
              pad(d.getMinutes()),
              pad(d.getSeconds())].join(':');
  return [d.getDate(), months[d.getMonth()], time].join(' ');
}


// log is just a thin wrapper to console.log that prepends a timestamp
exports.log = function() {
  console.log('%s - %s', timestamp(), exports.format.apply(exports, arguments));
};


/**
 * Inherit the prototype methods from one constructor into another.
 *
 * The Function.prototype.inherits from lang.js rewritten as a standalone
 * function (not on Function.prototype). NOTE: If this file is to be loaded
 * during bootstrapping this function needs to be rewritten using some native
 * functions as prototype setup using normal JavaScript does not work as
 * expected during bootstrapping (see mirror.js in r114903).
 *
 * @param {function} ctor Constructor function which needs to inherit the
 *     prototype.
 * @param {function} superCtor Constructor function to inherit prototype from.
 */
exports.inherits = require('inherits');

exports._extend = function(origin, add) {
  // Don't do anything if add isn't an object
  if (!add || !isObject(add)) return origin;

  var keys = Object.keys(add);
  var i = keys.length;
  while (i--) {
    origin[keys[i]] = add[keys[i]];
  }
  return origin;
};

function hasOwnProperty(obj, prop) {
  return Object.prototype.hasOwnProperty.call(obj, prop);
}

}).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./support/isBuffer":7,"_process":6,"inherits":5}]},{},[2]);

Duo 2.7kb

(function outer(modules, cache, entries){

  /**
   * Global
   */

  var global = (function(){ return this; })();

  /**
   * Require `name`.
   *
   * @param {String} name
   * @param {Boolean} jumped
   * @api public
   */

  function require(name, jumped){
    if (cache[name]) return cache[name].exports;
    if (modules[name]) return call(name, require);
    throw new Error('cannot find module "' + name + '"');
  }

  /**
   * Call module `id` and cache it.
   *
   * @param {Number} id
   * @param {Function} require
   * @return {Function}
   * @api private
   */

  function call(id, require){
    var m = cache[id] = { exports: {} };
    var mod = modules[id];
    var name = mod[2];
    var fn = mod[0];

    fn.call(m.exports, function(req){
      var dep = modules[id][1][req];
      return require(dep ? dep : req);
    }, m, m.exports, outer, modules, cache, entries);

    // expose as `name`.
    if (name) cache[name] = cache[id];

    return cache[id].exports;
  }

  /**
   * Require all entries exposing them on global if needed.
   */

  for (var id in entries) {
    if (entries[id]) {
      global[entries[id]] = require(id);
    } else {
      require(id);
    }
  }

  /**
   * Duo flag.
   */

  require.duo = true;

  /**
   * Expose cache.
   */

  require.cache = cache;

  /**
   * Expose modules
   */

  require.modules = modules;

  /**
   * Return newest require.
   */

   return require;
})({
1: [function(require, module, exports) {
var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');
var display = require('./display');

var msg = fmt('Your unique ID is %s!', uid());

display('.display', msg);

}, {"matthewmueller/uid":2,"yields/fmt":3,"./display":4}],
2: [function(require, module, exports) {
/**
 * Export `uid`
 */

module.exports = uid;

/**
 * Create a `uid`
 *
 * @param {String} len
 * @return {String} uid
 */

function uid(len) {
  len = len || 7;
  return Math.random().toString(35).substr(2, len);
}

}, {}],
3: [function(require, module, exports) {

/**
 * toString.
 */

var toString = window.JSON
  ? JSON.stringify
  : function(_){ return String(_); };

/**
 * Export `fmt`
 */

module.exports = fmt;

/**
 * Formatters
 */

fmt.o = toString;
fmt.s = String;
fmt.d = parseInt;

/**
 * Format the given `str`.
 *
 * @param {String} str
 * @param {...} args
 * @return {String}
 * @api public
 */

function fmt(str){
  var args = [].slice.call(arguments, 1);
  var j = 0;

  return str.replace(/%([a-z])/gi, function(_, f){
    return fmt[f]
      ? fmt[f](args[j++])
      : _ + f;
  });
}

}, {}],
4: [function(require, module, exports) {
function display(selector, text) {
    var target = document.querySelector(selector),
        msg = document.createTextNode(text);

    target.appendChild(msg);
}

module.exports = display;

}, {}]}, {}, {"1":""})

Conclusion

ということで、フロントエンドでCommonJSスタイルを使いたい!だけど、特にNode.jsのAPIは使わないわ…っていう場合にはDuoも有効な選択肢じゃないかなーと思います。

とは言え、自分もSubstack大好きっ子なんでBrowserifyも好きなんですけども。

Frontrend in Kanazawaのスライドを公開しましたというご連絡と情報収集についての補足など

2014/10/18に開催されたFrontrend in Kanazawaの資料を公開しました。

つらつらと、この時の補足など書いていこうかと思います。

RSSのチェックはどういうタイミングでやっていくか

今回の講演で質問もされたのですが いつRSSなどのチェックをしているのか? という問題ですが、実は自分も明確な答えはまだ無い感じです。というのもライフスタイルに合わせる…という感じにどうしてもなってきてしまうからです。

スライドにもあるように、自分は通勤時間や、ちょっとした空き時間にスマホでチェックだけはするというようになっていますが、このフローは現在のスタイルでやっているからというだけです。例えば、通勤が車になっていたらどうしても、その時間にチェックはできなくなってきます。

が、その場合は例えば、就業中に一仕事終えて気分転換がてら、5~10分とかでぱぱーっとチェックだけしておくみたいなスタイルになるんじゃないでしょうか。(今もさすがに通勤時間だけでチェックできる分量ではないんで、自分もこんな感じでチェックだけはしています)

ここはあくまでも自分のやりやすい方法でチェックしているというだけなんで、人によっては、週末にじっくりと1週間分のRSSをチェックする…というやり方もありかなと思います。

今回紹介した方法はあくまでも自分のやり方なんで、要点押さえれば全然他の方法でも良いんじゃないかなーと思っています。

個人的に良いなと思うサイトを選んだ理由

公開はしていませんが、避けたいサイトも良いなと思うサイトも日本語のサイトになっています。英語で検索やら記事を読めだの書いていたのに、推薦するのは日本語のサイトというのは矛盾するようですが、これには理由がありました。

というのも、既に慣れ親しんでいるなら別なんですが、いきなり英語の情報を摂取していこうとしても、なかなか取っ掛かりが掴みにくいからです。そこで、英語の情報源を良い感じに紹介しているサイトを(さらに)紹介したという理由です。

jser.infoはその週の色々なJavaScript関連の情報について、概要も合わせて紹介しているので、どんな情報源があるのか?という点と読み始めるのにどんな内容なのか?が分かりやすくなっています。何より、@azu_reさんのキュレーションがとても良いセレクションになっていると思います。実を言うと自分はGitHubjser/jser.infoをwatchしていたり、@azu_reさんのはてブを追っていたりするので、本サイトの方よりもこっちを見ていることが多いのですが…。

ワザノバPOSTDはもう少し、ジャンルが広く主にHacker Newsから拾ってきてそうな話題を一早く翻訳してくれています。また、後述しますが、この2つを選んだ理由としては、動画やPodcastのような媒体も逐次ではないですが日本語で要約してくれているのが、個人的にはポイントが高い理由です。他にもちゃんと原著者に翻訳の許可を取っていそうだというのも、理由だったりしますが。

逆に避けたいサイトは、これらの逆です。英語の記事の取っ掛かりとしても、そもそも原文がすぐ分からないとか、翻訳の質が低いという理由で選択しました。大人の事情で公開していませんけども。お察しください。

良いサイトをまずは見ていって、段々と英語の良い情報源を増やしていく…というようにしていくと良いんではないかなーと思っています。

ちょっとでも気になったサイトは取りあえず、RSSリーダーにブチ込んでいく

自分はfeedly MiniというChrome拡張を使っていて、気になった記事が書いてあるブログなんかはすぐにFeedlyに登録するようにしています。

これはある種諸刃の剣の部分があって、あんまりフィードが多いと読み切れない…ということにもなりかねないんですが。定期的にフィードの整理はしています。

ブチ込む基準ですが、実は明確なものはそんなになくって、自分の役に立ちそうかどうかという基準だったりします。それっぽい基準を言うと、 ググったり、他の人の記事を読んで2回以上そのブログを見た覚えあったら というものです。この広大なネット空間で2回も同じ人のブログ見るというのは既に偶然ではないだろうという安易な基準ですが、一つの目安にはなるんじゃないでしょうか。

RSSフィードの重み付け

自分の登録しているフィードを見てもらえると分かりますが、かなりの数のRSSを登録しています。若干被ってたりしますけども。ただ、自分の中で重み付けがあって、チェックするときに全部のフィードを目を皿のようにして見ているわけではないです。

一般的な情報サイト —> はてブなどのタグ -> 専門的なブログ -> 信頼してる個人のサイト

みたいな感じで右に行くほど、一般的ではない情報になっていくので、チェックするときにも、それなりに時間をかけています。左に行くほど結構流し見です。

そんな感じで、ブックマークすること多いのはやっぱり右に行くに従って多かったりします。こんな感じで力の抜き所(?)みたいのが分かると処理も早くなると思います。

はてなブックマークからPinboardに移行した理由

移行してほぼ4ヶ月になるんですが、いくつか理由がありました。

  • 検索が遅かった
  • 検索で思うような精度が得られなかった
  • IFTTTの連携ができない
  • はてブの移行ツールが修正された

1番と2番の比重がとても大きかったです。なので、はてブを使っていたときにはEvernoteに連携して検索のときはこちらから検索するというような使い方もしていました。が、Evernote使っても検索のサクサク感はやっぱり無かったので、Pinboardに移行しました。

今のところどちらもPinboardで満足しています。有料サービスですけど、URLで操作が可能というか分かりやすかったりもするのがとても良いです。iOSではPinswiftというアプリを使ってますが、こちらも便利に使っています。

はてブに関しては7年?くらい使ってるんですが、そもそもブックマークを書きだす機能が5年くらいはまともに動いておらず、他のサービスに移行するのも中々大変で、スクリプトでも組もうかと思っていたんですがダメ元でサポートに問い合わせたところ、3ヶ月前にちゃんと動くようになったので、思い切ってPinboardに移行しました。

また、はてブiOSアプリが色々広告とか入って改悪したり調子が悪かったのも理由の1つだったりしました。ただ今でも重要な情報源として、ブックマーク自体はもうほとんどしてませんが、情報収集には役に立っています。

IFTTTに関してはまあ連携できないというわけではなくて面倒・自分でツールでも作れば良いじゃんというところなんですが、個人的にはそこまでコストをかけたくないなーという感じでした。

英語の記事を読むのに速読系のサービスを使ってみる

これはここ半年くらいなのですが、 あとで読む (Readabilityを俺は使ってますが)とかを読む際には、PCではSquirtiOSではReadQuickというアプリを使って読むようにしています。

これらは速読というか、目をほとんど動かさずに英文を一定の速度で流していくというようなサービスなんですが、慣れてくるとかなり早く英文を読める…と思います。

なので、読むときはこれらのサービスを使って時間をできるだけ節約するようにしています。ただ、日本語で使っても、読みにくくなるだけという感じなのが残念といえば残念…。

動画やPodcast系もなるべくカバー

RSSでは登録してなかったりしますが、最近多いのがYouTubeやVimeoなどの動画サイトや、Podcastという情報源です。今、自分も一番困ってるのがこれらの情報源でどのように情報集めようかなあという試行錯誤してるところです。

しかし、最近は例えば動画であれば、JSConfのチャンネルとか、PodcastであればJavascript Jabberなど有用な情報源がとても増えているのでここら辺をチェックするのは重要じゃないかと感じています。

試行錯誤してる原因としては、 英語を 読む のより 聞く・観る 方が格段にハードルが高いというのが一番な気がします。あとは、記事などであれば自分のペースで読めますが、動画や音声などであれば、自分のペースで飛ばしたりするのが難しいというのも理由にあります。

自分もまだベストプラクティスが無いんですが、チェックだけはしており、すごく興味があるタイトルなどは時間を見つけて、観たり聞いたりしているところです…。誰か良い試聴の仕方教えてくれないかな…。

まとめ

今回のFrontrend in Kanazawaでの自分の発表の補足というか考えていることはこんな感じです。

今回は自分がいつも行なっていることをテキスト化するという感じでスライドを作っていったんで、そもそもちゃんと聞きに来てくれた方々にリーチしてるのかどうかというのが自分では分からなかったのが非常に大変でした。

余談ですが、社内の事前練習のときに時間の都合で40minの発表を10minにして発表したというアクシデントもありました。

が、頂いたアンケートなどを拝見したところ、結構ありそうで無かった題材というのもあったのか概ね好評を頂いていたようで、大変良かったです。

あらためて、発表者・来場者の皆様ありがとうございました。また機会があればお会いしたいところです。

“Web制作者のためのGitHubの教科書” という本を共著させてもらいました

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

インプレスさんより、10/24発売予定の Web制作者のためのGitHubの教科書 という本を、弊社の原さん、紫竹さん、ドワンゴの塩谷さんという布陣で共著させていただきました。

以前の書籍でお世話になった編集さんに声をかけていただいて、メンバー集めのところから入っていったのですが、何だか色々あり当初の予定よりも発売遅れてしまい、関係各位には申し訳なかったです…。

今回の本は名前の通りテーマとしては普通のWeb制作をしている(プログラミングとかじゃなくても)方々にも気軽にGitHubを使えるようにというものでした。

既刊の書籍でもGitHubの機能や使い方などが詳しく書いてある良い書籍があるのですが、この本の要件としては上記のように今までGitHubの名前は聞いたことがあるけど…というような方々をターゲットにしています。

とはいえ、塩谷さんのブログにも書かれていますが、執筆中にどんどんとGitHub関連の書籍が発売されていて大変にビビってました。

が、最初のころに「分かりやすいように会話文形式をメインに実際のWeb制作の案件をやっていく過程を書いていく」というコンセプトは特色が出ているかなと思います。

執筆しているときにも聞いたりしたんですが、案外GitHubを使うことに抵抗がある…という方は多いようで、便利なんで少しでもそういう抵抗が無くなればいいなーという感じで執筆しています。

そんなこんなで初めての会話文形式での執筆なんですが、思った以上に難しくて所々難航してしまいました…。あとは共著なので、全部の章が出揃ったあとに会話文の調整などや、より分かりやすい表現にするなどの作業も結構出てきました。

色々と難航しましたが、GitHubでの共同作業についてはプロジェクトとかでやっていないと案外どういう風に進めていけばいいのかというのが分からないところもあると思いますが、そういう方におススメできるように書いているので、購入を検討してもらうと嬉しいっす。

それにしても、1年くらい前に生まれて初めて書籍執筆の機会をいただいたというのに、あれよあれよと3冊目ということで人生どう転ぶか分かりません。

Frontrend in Kanazawaに登壇します。

FRONTREND IN KANAZAWA

もう明日になってしまいますが、2014/10/18(土)金沢市にてFrontrend in Kanazawaが開催されまして、自分も登壇させていただくことになりました。

今回はDMM.comラボの皆さんとサイバーエージェント共催という形になります。テーマは 10年先のため、今身につけたいこと というかなり壮大なテーマになっております。

このテーマで話をいただいたときに、何話そうかなーと悩んだんですが結局いつもやってる情報収集のやり方とか考え方について話すことにしました。

別に自分は情報収集のプロとかそういうんでもないんですが、何だかんだとこの仕事していく内にプロセスが固まってきてて、たまーに「どういう風にそれ知ったんですか」とか質問もらったりもしたんで、良い機会ということでまとめることにしました。

ということで、金沢の皆さまよろしくお願いいたします。

共著したフロントエンド養成読本が出ました

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

お久しぶりのエントリになりますが、表題のとおり、技術評論社さまから「フロントエンド養成読本」という本が7/1に発売されましたので、その宣伝になります。

こちらの本のコンセプトとして「現状の広範囲なフロントエンドに必要な技術を、必要十分な程度に紹介する」というものになるかと思います。目次などを見てもらえると分かると思いますが、近年フロントエンドエンジニアに必要とされている技術の概要はほぼ網羅しているのではないかと思います。

もちろん、一つ一つのテーマはページ数の関係で、思いきり深いところまで紹介するということはできませんでしたが、それでも、その技術を使うにあたって情報を調べる足がかりになると思います。

個人的には自分はこの業界に入ったときにこういう本があれば、とても良いなあという感じにするように書いたつもりです。しれっとVimのことを書きたいと思いましたが、俺の技量では無理でした。

本書のなかにもありますが、最近の フロントエンドエンジニア という職種は知っておかなければいけない知識の範囲というのが広範になっています。自分も「必要になったときドリブン勉強法」なのですが、それでもWeb業界に入ったばかりの方や、元々サーバエンジニアなどの他の職種の方などが「最近のフロントエンド事情」を知ろうと思うと、今回の本の内容はもちろんネットで調べたりしても出てくるものなんですが、やはり体系的に調べようと思うと情報が あり過ぎ て大変になると思います。

そんな中の一つの道標的に使える書籍になっているんではないかなと思います。

執筆は結構ハイスピードに進んでいましたが、自分はケツから数えた方が良いくらいにスピード出ませんでした。ごめんなさい。見本誌を改めて読んでみましたが、全編通して読んでも結構面白い書籍になってるんじゃないかなと思いました。

ということで、みなさん買っていただくと嬉しいです。

『開発効率をUPする Git逆引き入門』という本を執筆しました

開発効率をUPする Git逆引き入門

開発効率をUPする Git逆引き入門

  • 作者: 松下雅和,船ヶ山慶,平木聡,土橋林太郎,三上丈晴
  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2014/04/09
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る

Git本を執筆しました - matsukaz's blog

のエントリーにもありますが、共同執筆という形で、id:matsukaz さんに声をかけていただいて執筆させてもらいました。 来たる4/9に発売予定になっています。

自分の担当範囲は「はじめに」とか「Gitを使った作業の流れ」とか逆引きの一部とか、他の方の修正お手伝いとかそんな感じです。

大体の本の内容は上記のid:matsukaz さんのブログをご覽いただくとして、自分はちょっと違う感想を。

本のターゲット

今回のターゲットは"Gitを使いたいけど、使っていない" という人向けという感じです。なので、思いっきり踏み込んだ使い方…みたいなのはないと思います。個人的にはgit bisectとか極たまーに使うんで載せたかったりしましたけど、このような理由で見送り。

エンジニアだけではなくデザイナーさんなどにも優しい感じにはなっているかと思います。

本の特色

既存のGitについての書籍とは結構毛色が違うんじゃないかなーという点を列挙。(もちろん既存の書籍を全部読んだわけじゃないんですけど)

逆引きメイン

まあタイトルからお察しなんですが、この本は「逆引き」がメインになっています。一例を上げると各項目はこんな感じ。

  • 新しいブランチを作成したい
  • リモートリポジトリの情報を確認したい
  • コンフリクトを解決したい

各項目の最初の方で、使うコマンドが書いてあって手順が載ってるというイメージです。

今のところ逆引きがメインの書籍はないかなーと思っています。

SourceTreeでの操作方法が(ほぼ)全ての項目に載っている

ほぼ全ての項目でGUIのGitクライアントのAtlassian SourceTreeでの操作方法をスクリーンショット付きで載せています。ここがエンジニアじゃない方にもオススメしやすいポイントかなと。

「ほぼ」って言うのはコマンドではあるけど、SourceTreeでの操作が見あたらない…っていう場合ですね。

コマンドではこう操作するけど、SourceTreeはこうですというように併記してあるので最初はSourceTreeで操作していって慣れればコマンドで…というような使い方もできるんではないでしょうか。

ちなみにSourceTreeを選んだ理由は、

  1. クロスプラットフォーム
  2. 無料
  3. できないGitの操作が少ない

という理由で選出しています。

Gitのコマンドを実行したときのリポジトリやツリーの状態が図で載っている

これまたほとんどの項目で、「この操作をした結果、Gitの中ではこんな状態になります」という図を載せています。 こんな感じの図ですね。(id:matsukaz さんのいつやるの?Git入門 v1.1.0から引用)

f:id:Layzie:20140403161754j:plain

個人的にも、Git覚えるのにこの辺の「実際のファイルの状態とGitの中の状態」というのを覚えるのが、早道じゃないかと考えているので、大事かなーと思いました。応用も効きやすくなりますしね。各項目にこういった図が載っているのも結構無いんじゃないかなあと思います。

まとめ

何だかんだと、みんなで時間かかりましたが頑張ったので、ぜひお手に取ってもらえれば嬉しいです。 関係各位のみなさんにおかれましては、お疲れさまでしたー!