ピクセルグリッドの開発環境サーベイ 2017 | 前編エディタとおすすめツール編

ピクセルグリッドの開発環境サーベイ 2017 前編エディタとおすすめツール編

ピクセルグリッドのエンジニア、デザイナーに開発環境や普段使いのツールを調査しました。今回、開発環境は案件に案件に左右されにくい基本的な環境と、日常的に使っている便利なツールを尋ねました。

カテゴリー: アンケート >; 技術アンケート

2017年3月2日発行

ピクセルグリッドの開発環境サーベイ 2017 シリーズの記事一覧

はじめに

このシリーズでは、ピクセルグリッドのエンジニアやデザイナーが、普段どんなツールを使って開発しているのかを調査し、そのツールを利用している理由や良さを紹介します。調査は2016年12月〜2017年1月にかけて行われました。

いったん自分の手に馴染むと、なかなか別のツールに移行しにくいものですが、もしかすると、ほかのツールには今までにない良さがあり、仕事の効率化が図れるかもしれません。ピクセルグリッドのエンジニアやデザイナーが使っている「道具」の中に、何か一つでも、読者のみなさんにお役に立てるものがあれば幸いです。

（構成：編集、丸山陽子）

エンジニアのおすすめエディタ

エンジニアにとって「商売道具」とも言えるエディタ。ピクセルグリッドの全エンジニア、デザイナーにどのエディタを使っているか聞いたところ、6つのエディタが挙がりました。「なんとなく使っている」という人から「もうこれから離れられない……」という人まで、その理由とおすすめ機能を紹介します。

MacVim / Vim

MacVim

その独自の操作性からエンジニアの支持を得ていたのがMacVimでした。「操作体系が好き。いくらでも画面分割できるのがよい」（坂巻）。また、高津戸は「そんなにいろいろとカスタマイズしているわけではないので深く語れないが」と前置きしつつ、「Vimはその独自の操作体系に慣れるだけで高い生産性を得られると思っているし、実際そうなってると思う」とコメントしていました。「ほかのエディタに移りたくても、もう移れない」（大杉）といった、独自の操作体系にハマっている声も聞かれました。

Vimを使っているエンジニアからは「Git操作などもターミナルで行うので、ツールとブラウザを行き来する手間が減ってうれしい」（宇野）という理由が挙げられました。

また、iTerm2の上でVimを使っているのは杉浦と宇野です。「ブラウザとターミナル（iTerm）さえあれば、開発ができてしまう手軽さ」（杉浦）とコメントしています。

また、デザイナーからは「プロ（コードを書く専門の方々）によって使われ続けているツールだから。自分の専門がコードを書くことではないため、プロによって厳選され生き残っているものは良いものであろうという発想から利用している」（小原）という声も聞かれました。

あいまいなキーワードでも、サジェストしてくれる検索プラグインの「FuzzyFinder」。たとえば、「スペースキー、fキー、mキー」を順に押して、最近開いたことがあるファイルを表示し、続けてcssと入力とすると、ファイルをサジェストしてくれる。

画面内から指定した文字列を検索するのに便利なのが、vim-easymotion。vim標準の検索だと、/[任意の文字列]で検索したあと、nキーを何度か入力して、編集したい箇所まで移動するが、vim-easymotionを使えば、対応したキーを入力するだけで編集したい箇所に移動でき、nキーを何度も押す必要がない。

【MacVimおすすめコンビネーション】MacVim＋Notational Velocity

MacVimとメモツールのNotational Velocityを組み合わせて、コード記述以外にも文章作成やメモに役立てているというのは高津戸でした。

Notational Velocityは手軽にテキストを作成して編集でき、grepでインクリメンタル検索もできるツール。テキスト編集中にショートカットキーを押すとMacVimを起ち上げて編集することができます。テキストを書くにしてもまず、Notational Velocityでテキストファイルを作り、MacVimでそれを開き、編集するというステップを経ているそうです。

この組み合わせで真価を発揮するのはNotational Velocityの検索機能。

たとえば、PostCSSについての原稿を書いて保存します。時間が経って、また書き足そうと思ったら、Notational Velocityでファイル名を入力すると、すぐにそのテキストを開いて編集できるわけです。もし名前を覚えていなくても、原稿中に必ずあるワード（たとえばpostcなど）を入力すれば、そのテキストを含むファイルが検索できます。

「そんなふうに雑多なテキストをすべて放り込み、必要なときに記憶から単語を辿ってテキストを探し出すツールとしています」とのことです。

Visual Studio Code

Visual Studio Code

マイクロソフトが提供する、クロスプラットフォームのエディタのVisual Studio Code。

「あまりカスタマイズしなくても、いい感じに動いてくれるところがよいです。以前はAtomを使っていてそれも使いやすかったけれど、それよりさらに面倒がないですね」（中村）

「使っているマシンが古い（2011年のMacBook Air）ので、それでもサクサク動くエディタを使いたかった」（矢倉）などといった手軽さ、動作の軽さを評価する意見がありました。

また「Gitと連携していてエディタ上で変更箇所がわかったり、エディタ側でブレークポイントを設定してデバッグできるところがよい」（森）と、機能的に便利な点を挙げるエンジニアもいました。

Integrated Terminalという、ターミナルをエディタのペーンとして開く機能が便利です。

Sublime Text

Sublime Text

「3Dデータなど、数十MB単位の巨大なJSONファイルも比較的速く開ける」（小山田）、「動作が軽いので、大きいデータファイルを見るときのサブエディタとして使っている」（森）と、「動作が軽快」なことを利点とする意見が多かったエディタがSublime Textです。

特に小山田は、MacBook Proなどに比べると非力なMacBook（Retina 12-inch, Early 2016）を使っており、「たとえば、6.3MBのjsonファイルをAtomで開くと表示するまでに32秒かかっていましたが、Sublime Textでは11秒で開くことができました」とのこと。作業効率が上がることもメリットです。

CSSのコードを補完してくれるプラグインHayaku。選者の小山田によると、これに依存していることもあってSublime Textから離れられないと言っていました。

Atom

Atom

今回のアンケートでは「特別な設定が必要ないという使いやすさ」で支持されていたのが、Atomでした。

「プラグインを入れたり設定を変えなくても、まあまあ使える環境なのがよいかなと思っています。以前使っていたVimは設定を頑張ると、それだけいい環境が手に入っていたのですが、設定が楽なのもいいかなと思って……」（山田順久）。それだけでなく、「使い始めるまでに特別な設定が必要ないこともありますが、JavaScriptで、自分で手軽にプラグインがつくれるところも気に入っています」（山田敬美）など、自由度の高さを挙げる人もいました。

タブを大量に開いたときに横スクロールされるのが嫌で、折り返して多段表示されるようにした自作プラグイン「multiline-tab」。

WebStorm

WebStorm

IDEであるWebStormは、ターミナルを内蔵し、Gitの操作も同じアプリ内から行えるなどのエディタ機能だけではない、さまざまな機能が利点として挙げられていました。機能が豊富な有料アプリケーションだけあって、「コード補完が強い。DefinitelyTypedの型定義を利用すると、ライブラリの補完やヒントが強くなる」（中島）、「プロジェクト内検索、置換、リファクタリングが簡単。コードフォーマットなどが賢い、構文の色付けのカスタマイズ箇所が多い」（奥野）などの機能を挙げる人もいました。

Node.jsのバージョン管理方法

Node.jsはプロジェクトによってバージョンが異なる場合は、管理が面倒になります。そこで、その管理方法と、どうしてその方法を使っているのかを尋ねました。

nodebrew

nodebrew

バージョンの切り替えはコマンド入力で手動で変える必要がありますが、インストールは簡単で手軽なのがnodebrewです。

Binary版をすっきり入れたり消したりできるから。ただ今は頻繁にバージョンは切り替える開発はしてないです（杉浦）
僕はあんまりバージョン切り替えることがないですね。プロジェクトでは固定になってますし、それで切り替われば（徳田）
ぶっちゃけ、わりとなんでもよい。何で管理しようかなーって思ったときにほかちゃん（nodebrewの開発者の外村氏のこと）が使っていた。使い方がわかりやすかったから、そのまま、ずっと使っている（大杉）
最初に使ったのがnodebrewで、そのまま不便なく使っていました（奥野）
nodebrewだけど、機会があればanyenvに乗り換えたい（小山田）

ndenv / anyenv

ndenv
anyenv

バージョン情報のファイルを置いておくことで、ディレクトリを切り替えると自動的にNode.jsのバージョンを切り替えてくれるという便利さがあるndenv。Node.js固定のndenvのほか、RubyやPython、PHPなどでも利用できるanyenvを利用している人もいました。

最近プロジェクトでバージョンを固定したのでndenvにしました（高津戸）
ndenvはプロジェクト内の.node-versionを見て勝手に切り替えてくれるので便利です（宇野）
.node-versionを使っているので（山田順久）
ピクセルグリッドに入るまではnodebrewを、入ってからはndenvを使っている。ndenvにしたのはバージョンを固定しているプロジェクトがあるため（矢倉）
以前はnodebrewでしたけど、Node.js以外でも使えるということでanyenvにしました。でも、今のところNode.js以外使ってません（笑）（森）
何かしらバージョン管理をする必要はありました。anyenvにしたのは周りにおすすめされたので（山田敬美）
特にこだわりはないのですが、まれにプロジェクトでNode.jsやRubyのバージョンに依存があったりしたので、プロジェクトごとに切り替えられるようにanyenvを選びました（小原）
OSSの開発や案件によってNode.jsのバージョンを切り替える必要があったのでanyenvを使ってます（中島）

パッケージインストール

そのほか、LTS（Long-term Support）をパッケージインストールし、バージョン管理はしていないという人もいました。現在の案件では、バージョン切り替えの必要がないとのことです。

node.js

ビルドして確認する場合など、標準的なバージョンで確認したいところが多いので。今はバージョンを切り替えて作業する必要がある案件をしていないので、問題ありません（中村）

エンジニア的おすすめツール

ピクセルグリッドのエンジニアとデザイナーが日頃使っていて、おすすめできるツールを紹介します。

なお、使用環境がOSに依存するツールに関しては【Mac/Win】などの表示を入れています。ピクセルグリッド社内ではMacユーザーがほとんどのため、紹介するツールもMac中心であることをご了承ください。

開発を便利に進めるツール

GitやGitHubに関連した便利なツールを複数挙げてくれたのは、山田順久です。（以下、すべて選者：山田順久）

ghq

GitHubからクローンしたリポジトリを整理する。$HOME/.ghq/github.com/<AUTHOR>/<REPOSITORY>のようなパスを自動的に作ってクローンしてくれるので、クローン先を考えなくてよくなるのが便利。

tmuxinator

tmuxのwindowとpane設定を外部ファイル化してそれを復元する。tmuxのwindowを分けて、git操作したりするwindowとgulpのwatchやローカルサーバー立ち上げるwindowを分けたりする場合、それを毎回手作業で作るのではなく、設定ファイルを呼ぶだけで好みのwindow/paneのレイアウトを作ってくれる。

gibo

OS環境や言語に合わせて.gitignoreファイルのテンプレートを出力してくれる。テンプレートは https://github.com/github/gitignore を参照していて、こういう知見の集まった.gitignoreを手軽に使える。

git-browse-remote

現在のブランチに対応するプルリクエストを開く。手元でgit pushしたあとにGitHubのWebサイト開いて……という手順が、git pushしたら、次に、このコマンドを呼ぶだけでGitHubのプルリクエストのページへ跳べるようになって便利。

また、開発を便利に進めるツールが、各種挙げられました。

Dash（選者：中島）【Mac】

さまざまな言語やライブラリのドキュメントの検索／チェックをできるツール。

Kaleidoscope（選者：小山田）【Mac】

テキストや画像、フォルダ内のファイルの差分などのDiff管理ができるツール。クライアントがGitを使っていない場合、いろいろ手元で比較したい場合などはすごく便利。

mongo-express（選者：山田順久）

CodeGridではMongoDBを使用しており、開発時にローカルのテストデータを簡単に操作できて便利。

peco（選者：山田順久）

標準入力で受けたデータの行をインクリメンタルサーチして標準出力に返すもの。pecoを利用したシェル関数を書くことで、コマンド履歴からもう一度使いたいコマンドを検索して使ったりできる。

デスクトップを快適にするツール

多くのエンジニアが挙げたのは、デスクトップを快適に利用できるようにするツールです。特に、ウインドウを分割表示する、WindowsのAero Snapのような機能をmacOS上で利用できるツールは数多く挙げられました。

Divvy（選者：中村、小山田、山田敬美）【Mac/Win】

ブラウザとエディタを分割して表示したり、エディタだけを全画面で表示したりといったことがショートカットで自由自在。

ショートカットでウインドウをフル画面、分割表示、などを行う。

BetterSnapTool（選者：高津戸、徳田）【Mac】

デスクトップ上のウインドウをショートカットキーやポインタ操作で分割、整理できる。画面分割を頻繁にする場合はとても便利。

Spectacle（選者：坂巻、矢倉）【Mac】

キーボードショートカットでウインドウサイズを画面の半分や2/3にできる。

Magnet（選者：中島、小原）【Mac】

ウインドウをリサイズできるツール。ショートカットキーでウィンドウを四隅に配置したりもできる。

また、MacのRetinaディスプレイの解像度を変更し、デスクトップ画面を広く使うというエンジニアもいました。ウインドウ分割表示ツールと併せ、画面が広くないノートブックタイプのMacでも、快適に開発できるようにということのようです。

QuickRes（選者：坂巻、宇野）【Mac】

Retinaディスプレイ搭載のMacで解像度変更するツール。解像度を上げることで表示領域を広くすることができる。ただし、表示領域を広げた分、細かく表示されて目が疲れるという欠点もあり。

坂巻は、15インチMacBook Proで2880x1800に、宇野は特定の解像度で固定せず、オフィスや外で作業するときなど、作業領域を広く取りたい場合は2048x1280。自宅にいるときで外部モニタに繋げられる場合や、ドキュメントなどを読むときは1440x900にして使い分けているとのこと。

インストール後は、メニューバーから解像度を変更することができる。

メニューバーにいろいろな機能を表示させたり、アクセスしたりするのも、定番の便利ツールといえますね。

iStat Menus（選者：小山田）【Mac】

CPU、メモリーの使用状況、CPUの温度などを常にメニューバーに表示してくれる。選者はパワーのないMacBook 12インチを使っているので、処理負荷がすぐにわかって便利。

メニューバーのアイコンから、さまざまなシステム状況にアクセスできる。

BitBar（選者：森）【Mac】

任意のスクリプトを定期実行して、標準出力結果を Mac OS Xのメニューバーに表示してくれる。さまざまなプラグインが公開されているほか、自分でプラグインを作成することも可能。選者はCPU利用率を表示しており、バッテリが気になるときに便利だという。

ShowyEdge（選者：奥野）【Mac】

IMEが日本語か英語かで、画面上に色の付いたバーを表示する。現在の入力ソースを確認しやすくなる。

画像関連ツール

画像を扱うツールでも、特におすすめが多かったのは、画像圧縮ツールでした。

ImageOptim（選者：大杉、小山田、高津戸、小原）【Mac】

PNGファイルやJPEGファイル、またはそれらのフォルダごとドロップすれば、圧縮してくれる。

ImageOptimをコマンドラインから操作

ImageOptimをGUIからではなくコマンドラインから操作していると回答したのは大杉です。作業中のGitのリポジトリ内で、新しく追加した画像と編集した画像を一括でImageOptimの処理にかけているそうです。

alias imgopt='(git diff HEAD --name-only --diff-filter=ACM && git ls-files --other --exclude-standard) | grep "\.*\(jpg\|png\|gif\)$" | imageoptim --verbose'

git diff HEAD --name-only --diff-filter=ACM で、Gitで追跡してるファイル（リネーム以外）を抽出（=編集した画像）
git ls-files --other --exclude-standard で、Gitで追跡してないファイルで.gitignoreで無視してないファイルのみも抽出（=新しく追加した画像）
1、2を grep "\.*$jpg\|png\|gif$$" で、画像のみをフィルタ
それらのファイル全部を imageoptim --verbose で、ImageOptime-CLI を使ってImageOptimをかける（ --verbose オプションでImageOptimした結果も詳細表示）

ImageOptimのほかにも、さまざまな形式の画像ファイルに対して圧縮するツールが挙げられました。