こんにちは、DeNAでソーシャルプラットフォーム本部開発部でフロントエンドエンジニアとして働いている加茂です。
一般的に、フロントエンドエンジニアや、マークアップの開発環境といえば、どんな想像をするでしょうか。
BKwwmrsTqsI


まずテキストエディタから考えてみましょう。実はDeNAのフロントエンドでは、これといって特定のエディタは決まっていません。秀丸であれEmEditorであれCodaであれSublimeText3であれ。
最適化されたレギュレーションとコーディングルールが定まっていれば、言わば馬の鞍とも言えるエンジニアにとって最も重要なツールを干渉されることはありません。

各々が、もっとも効率的に開発できるツールを使用しています。

それを踏まえた上で、私の開発環境を紹介しましょう。
プラットフォームの開発には、エンジニア一人ひとりにLinuxサーバーが与えられ、個人開発環境として自由にチューンアップしています。ちなみに私は、日本と韓国の2つのプラットフォームを股にかけて開発を行なっている都合上、2つの開発環境を持っています。それに加え、Macの環境を含めると合計3つの環境を持っているわけです。

開発はすべてリモート

このように異なる環境を複数持っている場合、フロントエンドといえどMacのローカル上で作業するのは効率的ではありません。
私はiTerm 2を常時起動しており、SSHを利用してリモートで個人開発環境にアクセスして作業しています。開発業務の7-8割はすべてリモート上で行なっており、Macのローカルで作業するときはブラウジングとPhotoshopを弄るときくらいしかありません。
真っ黒な画面が日常の中では、ログインシェルにもお気に入りの物を使いたいところですし、シェルの整備も欠かせません。私はログインシェルとしてzshを使っています。zshrcでは

* コマンド,ファイル名の補完,表示,訂正
* コマンドヒストリの管理
* cdのヒストリ管理
* お気に入りのテーマ、スタイル
* gitブランチ名の表示、補完
* ファイルに対するエイリアス

などを設定して、快適に作業しています。

Vim

さて話は戻ってエディタです。

お話したとおり私の環境はリモート上で完結しているので、当然エディタもリモート上です。そして使っているエディタはVimです。Vimは優れた高機能エディタで、他に類をみないキーバインドとコマンド操作によって、非常に効率的にコーディングすることができます。
私がいれているプラグインの一部を紹介しましょう。

* 超定番補完ツール
https://github.com/Shougo/neocomplcache
https://github.com/Shougo/neosnippet

* Vim上で動作するIDE風ファイラー
https://github.com/Shougo/vimfiler

* 超高機能ランチャー
https://github.com/Shougo/unite.vim

* indentの深さでハイライトする
https://github.com/nathanaelkane/vim-indent-guides

* git操作の超定番
https://github.com/tpope/vim-fugitive

* SVN操作
https://github.com/hrsh7th/vim-versions

* Vim上でShell操作
https://github.com/Shougo/vimproc
https://github.com/Shougo/vimshell

* grep
https://github.com/thinca/vim-qfreplace
https://github.com/fuenor/qfixgrep

* %でHTMLの開始タグ/閉じタグ移動
https://github.com/tsaleh/vim-matchit

* 良い感じにコメントつけれる
https://github.com/scrooloose/nerdcommenter

* タグや文字列を囲ったり編集したり
https://github.com/tpope/vim-surround

* git diff の 差分を行数表示の横にマークする
https://github.com/airblade/vim-gitgutter

* Perlなどのシンタックスチェックに
https://github.com/scrooloose/syntastic

などなどのプラグインが、NeoBundle(https://github.com/Shougo/NeoBundle)というVimプラグイン管理プラグインを利用して一括管理されており、インストール、アップデートもとても楽に行えています。

さて、私はもともとVimmerだったわけではありません。もともとFlash Developerだったこともあり、FDTやFlash BuilderなどのIDE、DreamweaverやEmEditor、WebStorm、そしていま流行しているSublimetextも利用したことがあります。それらを利用した上での選択肢が、Vimです。私がなぜVimを選んでいるか、それは筆舌に尽くしがたいものです。実際に触ることが肝要といえるでしょう。あわよくば、Vimをビルドするとよいかもしれません。ビルドは非常に楽しい作業で、愛着も湧いてくるでしょう。ちなみにVimの最新版は7.3で、パッチが1000を超えてお祭りさわぎになったのは記憶にあたらしいですね。

.zshrcと.vimrcを共有する

これら、リモートで使用しているzshとvimには、設定ファイルとして.zshrcと.vimrcがあり、ユーザーのルートフォルダにこれらのファイルが置かれていると、起動時に自動で呼び出しその設定を反映するようになっています。DeNAで割り当てられている個人開発環境のサーバーは、そのリージョンによって当然OSやインストールされているパッケージも異なりますので、.vimrcや.zshrcなどの内容も差異がでてきます。とはいえほとんどが同じファイルである以上、共有したいのがエンジニアの性です。

そこで利用するのがgitです。DeNAではGithub Enterprise(https://enterprise.github.com/)を導入し、日常的にエンジニアもデザイナーもgitを使用しており、gitが非常に身近な存在です。私の場合、社内Github Enterpriseの専用アカウントでvim用とzsh用のリポジトリを作り、.zshrcと.vimrcをバージョン管理しています。2つのリージョンの個人開発環境サーバー+Macという3つ環境において、共有する部分はmasterの.zshrcと.vimrcから。環境依存する設定はbranchを分けて.zshrc.localと.vimrc.localに設定することで、Macを買い換えようが新しい環境が構築されようが、Githubからgit cloneするだけで自分のお気に入りの環境が手に入るように整備しています。

入社時やMac刷新時に、MacにGUIツールをうだうだ入れるの、億劫ですよね。Macは単にAdobe製品が動くUnixに過ぎません。ほとんどの作業をターミナルですることに慣れてさえしまえば、Macに対するすべての不満が万事解決し、すぐにストレスなく快適に開発に従事できます。

ターミナルで作業することのなにがいいのか

sassやgruntといったツールはもはやフロントエンド開発の定番として定着しつつありますが、もしターミナル・アレルギーの場合、GUIが出るのを待つしかありません。大変もったいない話です。
bashやzshなどのシェルの操作に慣れ、黒い画面を砂場に遊んでいれば、こういった素晴らしいツールが出るたびに、その恩恵に預かることができます。
また、シェルスクリプトを使えばすべてのオペレーションが自動化の対象になりえます。あなたが普段感じているGUIでの作業、そのすべてを改善する手立てを自分のものにでき、"マウスで何かを操作する"、”ホームポジションから指を離してマウスやトラックパッドに指を持っていく”といった、0カンマ何秒といった、思考を邪魔するストレスから開放されるのです。


Vimのコマンド操作は覚えられない?

ご安心ください。Vimはあなたの日常に潜んでいます。あなたがChromeを使っていれば、Vimnium(https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb)を、Firefoxを使っていればvimperator(https://addons.mozilla.org/ja/firefox/addon/vimperator/)というプラグインを入れてみましょう。これらのプラグインはブラウジングをVimのキーバインドに置き換えるもので、ブラウジングをしながらVimのキーバインドを練習することができるわけです。
私はこのVimniumがなければブラウジングが億劫でなりません。Vimのキーバインドでブラウジングが快適になった!と思えるようになれば、おめでとうございます。あなたもVimmerです。

ガチ勢フロントエンドエンジニア募集中です

ただいまDeNAではフロントエンドエンジニアを絶賛募集中です。ただし、"ただ与えられたデザインをマークアップするだけ"をしたい人は合わないかも知れません。言語やスキルの最低条件に関してはあえて書きませんが、"デザイン"もわかり、"エンジニア"で、"サーバーサイド"の理解もある"ガチ"なフロントエンドエンジニアを大募集しています。Vimに限らずemacsユーザーも構いませんし、Sublimetextのプラグインをガリガリ書いてるぜっという勝気な方もぜひご検討ください。

DeNAはエンジニアがエンジニアらしく、羽根を伸ばし羽ばたける環境と人材が整っています。あなたのような素晴らしいエンジニアと仕事できる日を、楽しみにしています。