2012-09-23

oh-my-zshとhomesickを使ってdotfilesをGitHubで管理するようにした

今までdotfilesは会社で使ってるものがメインで、家やノートPCで使うものはそこからコピペしたりして使ってました。たまにDropboxで同期させてシンボリックリンクを作ったりもしていたけど、結局面倒であまりメンテしていませんでした。

そんな感じでなんとなくお茶を濁していたんですが、最近チームの開発環境がSubversionからgitに引っ越しました。大量の.gitconfigの設定とエイリアスができあがり、今も頻繁に更新しています。そうなると当然家のマシンでも同じコマンドを使いたくなり、そろそろ今の管理方法に限界を感じるようになりました。

そこで、いい加減やる気を出して、dotfilesをGitHubでうまいこと管理できないかと挑戦してみました。

前提条件

会社の作業環境はUbuntuとMacbook Air
家はMacbook Air
シェルはzsh

まずはzshの設定を見直し

今までは.zshrcにべたーっと設定を書いていて、会社と家の環境で微妙に追記したり削ったりして使ってました。この.zshrcがかなり長くなっていて手を焼いてたんですが、最近oh-my-zshの存在を知りました。

テーマ（PROMPT）は今使ってるのと結構変わるけど、必要な設定は普通に揃ってる感じ。oh-my-zshのプラグインの仕組みを使えば、今までの長い.zshrcを分割して管理できそう！というわけで、zshまわりはoh-my-zshに乗り換えることにしました。

homesick + GitHubでドットファイル管理

最近GitHub does dotfilesを見ていたら、homesickというよさげなプロジェクトが紹介されていることに気付きました。gemとして提供されていて、簡単にGitHubでドットファイルが管理できるらしいです。

さらっと紹介すると、

$ homesick clone リポジトリ

でGitHubのリポジトリをcloneして、

$ homesick symlink リポジトリ

でリポジトリのhomeディレクトリ以下にあるドットファイルのシンボリックリンクをローカルに作ってくれるものです。

更新するときはこれでいけます。

$ homesick pull リポジトリ

oh-my-zshとhomesickを使ったらよさそうだ！と思って、早速やってみました。

できあがったリポジトリ

ama-ch/dotfiles

インストール方法

README.mdに書いてあることそのまんまですが。事前にインストールしとくものを除けば、使い始めるまでの手順はこれだけです。

1. dotfilesをGitHubから取得してsymlinkを作成する

$ homesick clone ama-ch/dotfiles
$ homesick symlink ama-ch/dotfiles

2. oh-my-zshをインストールする

$ git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh

以上で、dotfilesのインストールは完了です。

設定の書き方で注意したポイントも書いときます。

oh-my-zshの設定

oh-my-zshはホームディレクトリに.oh-my-zshというディレクトリを作成します。この中に各種プラグインやテーマを追加していきます。自分のカスタマイズ内容はデフォルトだと~/.oh-my-zsh/custom以下に追加します。

普通にリポジトリにカスタム内容である .oh-my-zsh/custom を追加すると、oh-my-zshのインストールが失敗するようになってしまいます。.oh-my-zsh以下を全部pushしてしまえばいいのかも知れないけど、お行儀が良くない。そこで、.zshrcの3行目に以下の行を追加しています。

ZSH_CUSTOM=$HOME/.oh-my-zsh-custom

ZSH_CUSTOMという変数をセットすると、~/.oh-my-zsh/customの代わりにその値が使われるようになります。これで、.oh-my-zsh自体のディレクトリとカスタム設定のディレクトリを分離できます。

環境依存設定の切り出し

Ubuntuでだけ使う設定はubuntuプラグインを作ってそこに切り出しました。Macだけの設定は今のところありません。

dotfilesを書き換えたい場合

普通に書き換えてOK。例えば~/.gitconfigを書き換えると、~/.homesick/repos/ama-ch/dotfiles/home/.gitconfigを書き換えることになります。ここは普通にcloneされたgitリポジトリなので、書き換えても問題ありません。

コンフリクトさえしなければ、

$ homesick pull ama-ch/dotfiles

で普通に更新できます。コンフリクトしてしまう場合でも、普通に解消するか別ブランチを切ったりして対応すれば問題ありません。

おわり

とりあえずこんな感じです。まだ.emacsとか整理するのが面倒でpushできてない設定もありますが、GitHubで管理すると紛失したりする心配がなくて嬉しいです。

ついでにMacPortsをやめてHomebrewにしたりして色々スッキリしました。作業環境を見直すと、人生を見直す良い機会になりますね。おしまい。

2012-09-21

はてなブログはじめました

Markdownに対応したと聞いて！

とりあえず使ってみます
よさげなら乗り換えようかなー

てすと

// コードスニペット
var hoge = 'abc';
console.log(hoge);
// ハイライトはできない？

html直書き

2012-08-24

WEB+DB PRESS Vol.70にClosure Compiler/Linterの記事を書きました

連載「JavaScript活用最前線 ── 大規模開発の現場から」第3回目の記事を書きました。

今回はClosure CompilerとClosure Linterの紹介と、コンパイル時の警告をもとにコードチェックツールとして利用する方法を解説しました。
最近は割とClosure Compilerを使ってる人が増えてきたような印象がありますが、コードチェックにまで活用している例はあまり見ないので参考になれば嬉しいです。

これはあくまで僕が経験したケースですが、JavaScriptで実際に複数人で大規模なコードを書いてみると、2〜3万行くらいまでは割と頑張ればなんとかなります。でもそれ以上の規模になってくると、型のぶれが抑えられなくなってきます。型のぶれとは、数値を期待してるとこに数値文字列がきて足し算したら文字列連結になっちゃたとか、配列を期待してたら添え字付きのオブジェクト(!!)が入ってきて配列用のメソッドが動かないとか、そういうやつです。

そうすると多少型がぶれても動くコードを書くようになります。
簡単に書くとこのくらいで、

function hoge(num) {
  var number1 = parseInt(num, 10);
}

funktion fuga(arr) {
  var array1 = arr || [];
}

ちょっと複雑になるとこういうものも。

function foo(obj) {
  if (isArray(obj) {
    ...
  } else if (isObject(obj)) {
    ...
  } else {
    ...
  }
}

このようなことをやっていると一応ちゃんと動くんですが、バグは必ずこういう処理が漏れてる箇所で発生するんですよね。

そうして発生したバグをしばらく潰していると、ふと「あれ、これ詰んでね？」と思うようになります。いや、思いました。どれだけ型に対して慎重にコードを書いても必ず型の考慮漏れは出てくるし、書いてるのは自分だけじゃないから書き方も統一できないし、このまま一生後手後手で型エラーと戦うのかという不安感はいやなものです。

そこで取った方法が、Closure Compilerを使ったコンパイル時チェックです。
紙面ではClosure Compilerの基本的な使い方から、コードチェックツールとしての利用方法、継続的インテグレーションに組み込んで綺麗なコードを維持する方法までを解説しています。

Closure Compilerを使ったコードチェックを導入することで、型エラーに対する不安をほぼなくすことができました。ついでにAPIが返すデータ構造の設計がよろしくないとこが見つかったり、コンパイル後のパフォーマンスが向上したり、身長が5cm伸びたりしました。

WEB+DB PRESS Vol.70は本日発売です。Webアプリ開発でJavaScriptを書く方や、きちんとしたJavaScriptを書きたい方は、ぜひ読んでみてください。

WEB+DB PRESS Vol.70

作者: 成田一生,高津戸壮,Dr.Kein,近藤宇智朗,後藤秀宣,mala,中島聡,森田創,堤智代,A-Listers,はまちや2,佐藤裕介,久森達郎,大窪聡,本田謙,和田英一,天野祐介,藤吾郎(gfx),奥野幹也,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2012/08/24
メディア: 大型本
購入: 8人クリック: 89回
この商品を含むブログ (15件) を見る

2012-06-08

サイボウズ技術説明会 for students でフロントエンドについて話します

6/14(木)にエンジニア志望の学生向けに「サイボウズ技術説明会 for students」というイベントが開催されます。サイボウズ本社のエンジニア3人が登壇し、使っている技術やトレンドを紹介します。

僕からはフロントエンドのお仕事についてお話します。
今のところこんな感じの内容で考えています。

フロントエンドエンジニアとは
なぜフロントエンドエンジニアが必要なのか
必要なスキル
使ってるライブラリなどの紹介
サービス開発時のちょっと具体的な話

フロントエンドエンジニアといっても、漠然とJavaScriptを書いてるイメージだったり、コーダーとかマークアップエンジニアとの違いがよく分からないということが多いと思うので、これを機に普段どんなことをしているか具体的にお話したいと思います。
「こんなことが聞きたい！」とかあれば、こちらかTwitterで @ama_ch までいつでもどうぞ。
僕以外にもサイボウズLiveのモバイルアプリ開発や、定年(35歳)を突破したバリバリCTOのお話がありますよ！
フロントエンドのみならず、Webサービス作りに興味がある人には楽しんでもらえると思うので、ぜひ気軽に参加してください。

イベント詳細・参加申込はこちらから
https://job.rikunabi.com/2013/company/seminar/r646010018/C011/
紹介ブログ
https://job.rikunabi.com/2013/company/blog/detail/r646010018/60/

なお、明日無事に退院できなかった場合は上記の限りではありません。

2012-06-06

社内勉強会でクライアントサイドMVCについて話しました

こんにちは。日曜から盲腸で入院中のama-chです。
普段は不健康の代名詞みたいに扱われていますが、これでも小学校は修学旅行の日以外は皆勤だったし、入院するのも初めてなんです。
退屈な入院生活ですが、PCとモバイル通信環境があると一気に世界が開けます。電源、食事、ベッドの三拍子が揃った理想的な職場がそこにはありました。難点といえば、21時に強制消灯されてしまうことと、なかなか風呂に入らせてもらえないことくらいです。

風呂の話はさておき、今年の2月頃から社内で「フロントエンド勉強会」というものを始めています。
JavaScript, CSS, HTML5, UI/UXなど、フロントエンドに関するテーマでざっくばらんに毎週開催しています。だいぶ前になっちゃいましたが、4月にその勉強会でクライアントサイドMVCについて話したので資料を公開します。

明日のためのクライアントサイドMVC

試しにSpeaker Deckにアップしてみたけど、はてなダイアリーにうまいこと埋め込めなかった＞＜
データにモデルという名前を与えて、モデルとしての振る舞いを定義するようになったという所がMVC フレームワークの出現前後で最も変わったところだと思います。
個人的には、モデルとコンポーネントが綺麗に分離されてるのが好きですね。

2012-04-24

WEB+DB PRESS Vol.68からJavaScriptの連載を始めました

表題の通りですが、WEB+DB PRESS Vol.68 からJavaScriptの連載を書かせていただくことになりました。
連載タイトルは「JavaScript活用最前線 ── 大規模開発の現場から」です。

WEB+DB PRESS Vol.68

作者: 名村卓,三宅陽一郎,小野修司,中島聡,森田創,小飼弾,田籠聡,天野祐介,cho45,大和田純,白土慧,勝間亮,石田忠司,牧本慎平,A-Listers,近藤宇智朗,はまちや2,mala,じゅんいち☆かとう,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2012/04/24
メディア: 大型本
購入: 4人クリック: 189回
この商品を含むブログ (10件) を見る

第一回目はBackbone.jsを使ってクライアントサイドMVCを実現するという内容です。
大規模なJavaScriptを書く際に使える内容や、最新のホットな話題など、現場の方に参考になるような記事を書いていきたいと思います。
id:teppeis と交互に執筆する予定なので、次回にもぜひご期待ください。
よろしくお願いします！

2011-11-03

作業効率が10倍アップする Chrome Developer Tools の使い方

というタイトルで社内勉強会を開きました。
その時の資料を公開します。
「作業効率が10倍アップする」かどうかは個人差があるのでご注意ください。
最近のChrome Developer Toolsは本当に高機能ですごいですね！僕も資料を作っていて新しい発見が沢山ありました。

追記: 説明不足ですいません。スライドは←→キーで移動します。表紙にも記載しておきました。
作業効率が10倍アップする Chrome Developer Tools の使い方

あとキャプチャをとるのに使ったSkitchが便利すぎて感動しました。

はてブロ@ama_ch

https://twitter.com/ama_ch