エディタとおすすめツール編ピクセルグリッドのエンジニア、デザイナーに開発環境や普段使いのツールを調査しました。今回、開発環境は案件に案件に左右されにくい基本的な環境と、日常的に使っている便利なツールを尋ねました。次回このシリーズの記事一覧をみる目次はじめにエンジニアのおすすめエディタNode.jsのバージョン管理方法エンジニア的おすすめツールおわりにはじめにこのシリーズでは、ピクセルグリッドのエンジニアやデザイナーが、普段どんなツールを使って開発しているのかを調査し、そのツールを利用している理由や良さを紹介します。調査は2016年12月〜2017年1月にかけて行われました。自分の手に馴染むと、なかなか別のツールに移行しにくいものですが、もしかすると、ほかのツールには今までにない良さがあり、仕事の効率化が図れるかもしれません。ピクセルグリッドのエンジニアやデザイナーが使っている「道具」の中に、何か一つでも、読者のみなさんにお役に立てるものがあれば幸いです。(構成:編集、丸山陽子)エンジニアのおすすめエディタエンジニアにとって「商売道具」とも言えるエディタ。ピクセルグリッドの全エンジニア、デザイナーにどのエディタを使っているか聞いたところ、6つのエディタが挙がりました。「なんとなく使っている」という人から「もうこれから離れられない......」という人まで、その理由とおすすめ機能を紹介します。VimMacVimその独自の操作性からエンジニアの支持を得ていたのがMacVimでした。いくらでも画面分割できるのがよい」(坂巻)。高津戸は「そんなにいろいろとカスタマイズしているわけではないので深く語れないが」と前置きしつつ、「Vimはその独自の操作体系に慣れるだけで高い生産性を得られると思っているし、実際そうなってると思う」とコメントしていました。「ほかのエディタに移りたくても、もう移れない」(大杉)といった、独自の操作体系にハマっている声も聞かれました。Vimを使っているエンジニアからは「Git操作などもターミナルで行うので、ツールとブラウザを行き来する手間が減ってうれしい」(宇野)という理由が挙げられました。iTerm2の上でVimを使っているのは杉浦と宇野です。「ブラウザとターミナル(iTerm)さえあれば、開発ができてしまう手軽さ」(杉浦)とコメントしています。デザイナーからは「プロ(コードを書く専門の方々)によって使われ続けているツールだから。自分の専門がコードを書くことではないため、プロによって厳選され生き残っているものは良いものであろうという発想から利用している」(小原)という声も聞かれました。Vimおすすめプラグイン】FuzzyFinder(選者:坂巻、大杉)あいまいなキーワードでも、サジェストしてくれる検索プラグインの「FuzzyFinder」。「スペースキー、fキー、mキー」を順に押して、最近開いたことがあるファイルを表示し、続けてcssと入力とすると、ファイルをサジェストしてくれる。Vimプラグイン】vim-easymotion(選者:宇野)画面内から指定した文字列を検索するのに便利なのが、vim-easymotion。vim標準の検索だと、/[任意の文字列]で検索したあと、nキーを何度か入力して、編集したい箇所まで移動するが、vim-easymotionを使えば、対応したキーを入力するだけで編集したい箇所に移動でき、nキーを何度も押す必要がない。Velocityを組み合わせて、コード記述以外にも文章作成やメモに役立てているというのは高津戸でした。Velocityは手軽にテキストを作成して編集でき、grepでインクリメンタル検索もできるツール。テキスト編集中にショートカットキーを押すとMacVimを起ち上げて編集することができます。Velocityでテキストファイルを作り、MacVimでそれを開き、編集するというステップを経ているそうです。Velocityの検索機能。PostCSSについての原稿を書いて保存します。Velocityでファイル名を入力すると、すぐにそのテキストを開いて編集できるわけです。名前を覚えていなくても、原稿中に必ずあるワード(たとえばpostcなど)を入力すれば、そのテキストを含むファイルが検索できます。「そんなふうに雑多なテキストをすべて放り込み、必要なときに記憶から単語を辿ってテキストを探し出すツールとしています」とのことです。「あまりカスタマイズしなくても、いい感じに動いてくれるところがよいです。Air)ので、それでもサクサク動くエディタを使いたかった」(矢倉)などといった手軽さ、動作の軽さを評価する意見がありました。「Gitと連携していてエディタ上で変更箇所がわかったり、エディタ側でブレークポイントを設定してデバッグできるところがよい」(森)と、機能的に便利な点を挙げるエンジニアもいました。Terminalという、ターミナルをエディタのペーンとして開く機能が便利です。Textでは11秒で開くことができました」とのこと。作業効率が上がることもメリットです。Textおすすめプラグイン】Hayaku(選者:小山田)CSSのコードを補完してくれるプラグインHayaku。Textから離れられないと言っていました。AtomAtom今回のアンケートでは「特別な設定が必要ないという使いやすさ」で支持されていたのが、Atomでした。「プラグインを入れたり設定を変えなくても、まあまあ使える環境なのがよいかなと思っています。敬美)など、自由度の高さを挙げる人もいました。敬美)タブを大量に開いたときに横スクロールされるのが嫌で、折り返して多段表示されるようにした自作プラグイン「multiline-tab」。WebStormWebStormIDEであるWebStormは、ターミナルを内蔵し、Gitの操作も同じアプリ内から行えるなどのエディタ機能だけではない、さまざまな機能が利点として挙げられていました。機能が豊富な有料アプリケーションだけあって、「コード補完が強い。DefinitelyTypedの型定義を利用すると、ライブラリの補完やヒントが強くなる」(中島)、「プロジェクト内検索、置換、リファクタリングが簡単。コードフォーマットなどが賢い、構文の色付けのカスタマイズ箇所が多い」(奥野)などの機能を挙げる人もいました。Node.jsのバージョン管理方法Node.jsはプロジェクトによってバージョンが異なる場合は、管理が面倒になります。そこで、その管理方法と、どうしてその方法を使っているのかを尋ねました。nodebrewnodebrewバージョンの切り替えはコマンド入力で手動で変える必要がありますが、インストールは簡単で手軽なのがnodebrewです。Binary版をすっきり入れたり消したりできるから。今は頻繁にバージョンは切り替える開発はしてないです(杉浦)僕はあんまりバージョン切り替えることがないですね。プロジェクトでは固定になってますし、それで切り替われば(徳田)ぶっちゃけ、わりとなんでもよい。何で管理しようかなーって思ったときにほかちゃん(nodebrewの開発者の外村氏のこと)が使っていた。anyenvndenvanyenvバージョン情報のファイルを置いておくことで、ディレクトリを切り替えると自動的にNode.jsのバージョンを切り替えてくれるという便利さがあるndenv。Node.js固定のndenvのほか、RubyやPython、PHPなどでも利用できるanyenvを利用している人もいました。順久)ピクセルグリッドに入るまではnodebrewを、入ってからはndenvを使っている。ndenvにしたのはバージョンを固定しているプロジェクトがあるため(矢倉)以前はnodebrewでしたけど、Node.js以外でも使えるということでanyenvにしました。今のところNode.js以外使ってません(笑)(森)何かしらバージョン管理をする必要はありました。Support)をパッケージインストールし、バージョン管理はしていないという人もいました。現在の案件では、バージョン切り替えの必要がないとのことです。node.jsビルドして確認する場合など、標準的なバージョンで確認したいところが多いので。今はバージョンを切り替えて作業する必要がある案件をしていないので、問題ありません(中村)エンジニア的おすすめツールピクセルグリッドのエンジニアとデザイナーが日頃使っていて、おすすめできるツールを紹介します。使用環境がOSに依存するツールに関しては【Mac/Win】などの表示を入れています。ピクセルグリッド社内ではMacユーザーがほとんどのため、紹介するツールもMac中心であることをご了承ください。順久)ghqGitHubからクローンしたリポジトリを整理する。$HOME/.ghq/github.com/<AUTHOR>/<REPOSITORY>のようなパスを自動的に作ってクローンしてくれるので、クローン先を考えなくてよくなるのが便利。tmuxinatortmuxのwindowとpane設定を外部ファイル化してそれを復元する。tmuxのwindowを分けて、git操作したりするwindowとgulpのwatchやローカルサーバー立ち上げるwindowを分けたりする場合、それを毎回手作業で作るのではなく、設定ファイルを呼ぶだけで好みのwindow/paneのレイアウトを作ってくれる。giboOS環境や言語に合わせて.gitignoreファイルのテンプレートを出力してくれる。参照していて、こういう知見の集まった.gitignoreを手軽に使える。git-browse-remote現在のブランチに対応するプルリクエストを開く。pushしたら、次に、このコマンドを呼ぶだけでGitHubのプルリクエストのページへ跳べるようになって便利。開発を便利に進めるツールが、各種挙げられました。Dash(選者:中島)【Mac】さまざまな言語やライブラリのドキュメントの検索/チェックをできるツール。Kaleidoscope(選者:小山田)【Mac】テキストや画像、フォルダ内のファイルの差分などのDiff管理ができるツール。クライアントがGitを使っていない場合、いろいろ手元で比較したい場合などはすごく便利。順久)CodeGridではMongoDBを使用しており、開発時にローカルのテストデータを簡単に操作できて便利。順久)標準入力で受けたデータの行をインクリメンタルサーチして標準出力に返すもの。pecoを利用したシェル関数を書くことで、コマンド履歴からもう一度使いたいコマンドを検索して使ったりできる。デスクトップを快適にするツール多くのエンジニアが挙げたのは、デスクトップを快適に利用できるようにするツールです。Snapのような機能をmacOS上で利用できるツールは数多く挙げられました。敬美)【Mac/Win】ブラウザとエディタを分割して表示したり、エディタだけを全画面で表示したりといったことがショートカットで自由自在。Divvyショートカットでウインドウをフル画面、分割表示、などを行う。BetterSnapTool(選者:高津戸、徳田)【Mac】デスクトップ上のウインドウをショートカットキーやポインタ操作で分割、整理できる。画面分割を頻繁にする場合はとても便利。Spectacle(選者:坂巻、矢倉)【Mac】キーボードショートカットでウインドウサイズを画面の半分や2/3にできる。Magnet(選者:中島、小原)【Mac】ウインドウをリサイズできるツール。ショートカットキーでウィンドウを四隅に配置したりもできる。MacのRetinaディスプレイの解像度を変更し、デスクトップ画面を広く使うというエンジニアもいました。ウインドウ分割表示ツールと併せ、画面が広くないノートブックタイプのMacでも、快適に開発できるようにということのようです。QuickRes(選者:坂巻、宇野)【Mac】Retinaディスプレイ搭載のMacで解像度変更するツール。解像度を上げることで表示領域を広くすることができる。表示領域を広げた分、細かく表示されて目が疲れるという欠点もあり。Proで2880x1800に、宇野は特定の解像度で固定せず、オフィスや外で作業するときなど、作業領域を広く取りたい場合は2048x1280。自宅にいるときで外部モニタに繋げられる場合や、ドキュメントなどを読むときは1440x900にして使い分けているとのこと。QuickResインストール後は、メニューバーから解像度を変更することができる。メニューバーにいろいろな機能を表示させたり、アクセスしたりするのも、定番の便利ツールといえますね。Menus(選者:小山田)【Mac】CPU、メモリーの使用状況、CPUの温度などを常にメニューバーに表示してくれる。12インチを使っているので、処理負荷がすぐにわかって便利。Menusメニューバーのアイコンから、さまざまなシステム状況にアクセスできる。Xのメニューバーに表示してくれる。さまざまなプラグインが公開されているほか、自分でプラグインを作成することも可能。選者はCPU利用率を表示しており、バッテリが気になるときに便利だという。ShowyEdge(選者:奥野)【Mac】IMEが日本語か英語かで、画面上に色の付いたバーを表示する。現在の入力ソースを確認しやすくなる。画像関連ツール画像を扱うツールでも、特におすすめが多かったのは、画像圧縮ツールでした。)【Mac】PNGファイルやJPEGファイル、またはそれらのフォルダごとドロップすれば、圧縮してくれる。ImageOptimをコマンドラインから操作ImageOptimをGUIからではなくコマンドラインから操作していると回答したのは大杉です。作業中のGitのリポジトリ内で、新しく追加した画像と編集した画像を一括でImageOptimの処理にかけているそうです。オプションでImageOptimした結果も詳細表示)ImageOptimのほかにも、さまざまな形式の画像ファイルに対して圧縮するツールが挙げられました。svgo-gui(選者:小山田)【Mac/Win】ドラッグ&ドロップでSVGファイルを圧縮する。JPEGmini(選者:小原)【Mac/Win】JPEGの最適化ツール。画質を落とさずに軽くしてくれる。選者は、JPEG形式の画像についてはImageOptimよりも信頼している。pngquant(選者:杉浦)【Mac/Win】PNG画像の圧縮ができるツール。GUIバージョンとコマンドラインから利用するバージョンが用意されている。選者はmacOSの右クリックメニューから使えるようにして、複数画像を選択して右クリックでまとめて8bitPNGにできるようにしている。そのほか、画像関連のツールはいくつも挙げられていました。URIがクリップボードに保存される。簡単に長さや幅を計測できる定規ツール。画面上でざっとピクセル数を測りたい場合には便利。Mockups(選者:高津戸、坂巻)【Mac/Win】CodeGridやセミナー資料などの図版を制作するのに利用。手書き風でいい感じになるところがお気に入り。手書き風に表現できるが、日本語フォントはほとんど選択の余地がないのは惜しいところ。スクリーンキャプチャツール同じチーム内のエンジニアやクライアントに状況説明するときに使う、スクリーンキャプチャツールやGIFアニメ作成ツールも、さまざまなおすすめがありました。OSの機能や標準付属アプリでキャプチャすることもできますが、専用ツールにはやはり使いやすさがあります。順久)【Mac】また、キャプチャ後の画像に加工を加えるツールを挙げる人もいました。順久)【Mac/Win】キャプチャした画像に対して線や矢印、テキストやモザイク加工を加えたりできる。キャプチャ後のプレビューをGitHubのテキストエリアにドラッグするとアップロードもできて便利。文字入力/トラックパッドやマウスなどの操作関連よく使うツールのショートカットに合わせたい、WindowsからMacに移行したなど、キーボード配列を変更したいと思うことはないでしょうか。キーリマップツールもいくつか挙げられました。トラックパッドやマウスの調整にも、専用ツールを使うことがあるようです。Sierraには未対応)高性能なキーリマップツール。選者のキーボードはUS配列だが、次のように変えている。気軽に利用できるキーリマップツール。こちらの選者の坂巻はキーボードもUS配列だが、次のように変えている。坂巻のキーリマップ設定vimのコマンド入力に使う:(コロン)は、US配列のキーボードでは、Shiftキーと;(セミコロン)の2つのキー入力が必要。それをひとつのキーで済ませるためのキーリマップはよく行われる。BetterTouchTool(選者:杉浦)【Mac】トラックパッドやマウスの機能を拡張するツール。選者は、ピンチインでChromeのタブを閉じたり、4本タップで新規タブを開いたりするのに使っている。元々はMacに対応していない入力デバイスのキーを変更するツールだが、選者はマウスの加速度曲線を編集することに利用している。Illustratorなどをマウスで操作するときに、標準のマウス加速度にどうしても馴染めないため、加速度曲線を変更できるツールが必須になってしまった。【Tips】OS標準機能ですばやく絵文字候補表示(選者:小山田)macOSでは、アプリに関係なく、日本語入力にしていても英字入力にしていても、「cmd」+「ctrl」+「space」キーで絵文字や記号の候補表示パネルを表示できる。特別な設定は必要なく、地味に便利な機能。おわりにいかがでしたでしょうか。便利なツールを出してもらったら、意外と数が多くなってしまいましたが、一挙にご紹介しました。気になるツールはありましたでしょうか。後編となる次回は、Webブラウザ編となる予定です。大典フロントエンド・エンジニア大手電機メーカーを中心とした基幹系システム開発プロジェクトにSE兼プログラマとして多数参画。WEBシステム、C/S、POSレジ、無線ハンディ、汎用機(COBOL)、工場設備(シーケンス制御)、など、多数のシステム構築の実務経験を積む。2015年株式会社ピクセルグリッドへ入社。ブログにて発信しているチュートリアル、リファレンス関連の記事は幅広い層に利用されている。有右嗣フロントエンド・エンジニア業務系SIerにて主にWebサービス開発の上流工程を経験した後、大手インターネット企業に転職。ソーシャルゲームをはじめとする、モバイル向けWebサービスのフロントエンド開発を数多く経験する。2015年株式会社ピクセルグリッドへ入社。フロントエンドはもちろん、サーバーサイドやネットワークの知識も豊富である。享介フロントエンド・エンジニアデザイン事務所のWebデザイナー、Web制作会社のWebディレクターを経て、フリーランスのFlash・JavaScriptエンジニアとして独立後、株式会社ピクセルグリッドを設立。多数のリニューアル、新規立ち上げを取り仕切った経験をもち、情報設計、デザイン、フロントエンド、サーバーサイド、ネットワークといったひと通りのWebサイト制作技術に精通する。Web制作の他にも経営、講演、執筆など幅広く活動している。Scripting』(単著:毎日コミュニケーションズ、2007年4月20日)、『jQuery逆引きマニュアル』(共著:インプレス、2010年12月17日)などがある。壮フロントエンド・エンジニアWeb制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。Webサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。jQuery入門』(技術評論社、2014年11月14日)がある。2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。晃浩フロントエンド・エンジニア2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Meetupの主催者。プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。和規フロントエンド・エンジニアHTML/CSSコーダーとしてWebに触れ、その後WebディレクターとしてJavaScriptの特性を活かしたサイトのテクニカルディレクションからUI開発までを経験。2011年にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。著書に『jQuery逆引きマニュアル』(共著:インプレスジャパン、2010年12月17日)などがある。順久フロントエンド・エンジニアHTML・CSSのコーディング、後にJavaScriptの設計や実装を主業務として経験を積む。キャンペーンサイトやコーポレートサイトの、動きと操作性に工夫を凝らしたUI実装を多く手がけている。複雑なWebアプリケーション実装における、コンポーネント的な考え方を念頭においたJSの設計を得意とする。著書に『JavaScriptエンジニア養成読本』(共著:技術評論社、2014年12月11日)がある。紙媒体をメインに制作しているデザイン事務所で広告デザインの基礎を学ぶ。販促物を中心に、店頭グラフィック、パッケージ、POP、グッズ立案などを担当。2007年頃からWeb媒体へのデザインにも積極的に取り組み、クロスプラットフォームアプリのデザイン、画面設計、実装に携わる。現在では紙やWebの媒体にとらわれることなく、その媒体の特長を活かしたグラフィックデザインに励んでいる。マンセル色相環とムーン&スペンサー配色理論を採用した配色アプリ『HUE360』の開発を自身で行っている。jQuery入門』(技術評論社、2014年11月14日)がある。敬美フロントエンド・エンジニアWeb制作会社、自社サービス運営会社などでサービス企画、マークアップ・エンジニアの経験を積むも、退職して1年間専門学校に通う。プログラミングの基礎を学んだのち、2013年4月、ピクセルグリッドのフロントエンド・エンジニアとして入社。CSSの設計を得意とするが、JavaScriptも好き。仕事で絶対に使うプロのテクニック』(共著:MDN、2012年3月21日)などがある。翔大郎フロントエンド・エンジニア大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。プログラマブルなCSSの設計、実装を得意とする。PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。陽子エディターMac雑誌の編集者を経験後、フリーランスのエディター/ライターとして独立。パソコン系雑誌やデジタルカメラ雑誌、iPhone/iPadの初心者向け書籍などの編集や執筆に携わる。2015年にピクセルグリッドへ入社し、「CodeGrid」の編集を担当する。陽太フロントエンド・エンジニア大手ソフトウェアダウンロード販売会社、ソーシャルアプリケーションプロバイダーなどで、デザイナー、マークアップ・エンジニア、フロントエンド・エンジニアとして、主にスマートフォン向けゲームの開発に携わる。2015年1月に株式会社ピクセルグリッドに入社。MVCフレームワークを用いたJavaScriptの実装や、メンテナブルなCSSの設計を得意とする。ディレクターとして、制作工程全体の効率化を行いながら、数百サイトのコーディングに携わる。それらの経験を活かしセミナー講師も勤めている。漠然としたイメージや状況をうまく把握し、最適なアドバイスや提案につなげることが得意。著書に『Web制作者のためのGit入門』(共著:マイナビ、2014年6月28日)がある。直博フロントエンド・エンジニアJavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わる。眞隆フロントエンド・エンジニアウェブ制作会社にフロントエンド・エンジニアとして携わった後、2016年10月に株式会社ピクセルグリッドへ入社。ウェブ標準技術やブラウザの実装動向に明るく、雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを多数手がけた。イベントでの講演なども行っている。Expertとしても活動中。最近は何度目かのCSSと、ウェブでのプライバシーなどに興味がある。賢太郎フロントエンド・エンジニア音楽業界に飛び込み、音楽制作・ディレクター・DTM科講師などをつとめる。同時期にWebデザインのバイトをきっかけにAngularJSと出会う。その後、フロントエンド・エンジニアへの転身を決心し、自社サービスを運営する企業に入社。2017年1月に株式会社ピクセルグリッドへ入社。得意分野はAngularを用いたWebアプリケーションの構築。MIDIの技術にも明るい。2018年7月、退社。特定商取引法に基づく。