フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す

## 概要
今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。

スペック的にはJava歴が10年くらい。
割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。

そんなおっさんがお送りします。

## 5ヶ月間のお仕事内容
- PC/タブレット向けのAngularJSを使ったフロントエンド開発
- HTML/CSS(SASS)/Javascript
- PCはIE8~、Chrome。モバイル端末はiPad、Nexus7

## 職場での開発環境
- mac mini (2011)
- 19インチのシングルモニタ

## GUI系ツール

### *[Sublime Text 2](http://www.sublimetext.com/2)*

プログラマ向けのテキストエディタ。
これがないと仕事にならない。

以下、必須なPackage。

* __[Vintage](https://www.sublimetext.com/docs/2/vintage.html)__
vimっぽいキーバインドにする。最初っから入っている。

* __[emmet](https://github.com/sergeche/emmet-sublime)__
HTML、CSSの短縮記法の展開とか、たとえばHTMLタグの開始と終了間を行き来できる便利系コマンドなど。

* __[SublimeLinter](https://github.com/SublimeLinter/SublimeLinter-for-ST2)__
javascriptのlintエラー(jshint)をリアルタイムに検知したり。
チーム内で共有しているjshint設定ファイル（.jshintrc）を読み込むことも可能。

* __[JsFormat](https://github.com/jdc0589/JsFormat)__
javascriptをjsbeatifier基準でフォーマットできる。
チーム内で共有しているjsbeatify設定ファイル(.jsbeautifyrc)を読み込むことも可能。

* __[BracketHighlighter](https://github.com/facelessuser/BracketHighlighter)__
HTMLマークアップしているときすごく見やすくなる。

* __[JavaScript Snippets](https://github.com/jprichardson/sublime-js-snippets)__
`afn`とか超多用する。

* __[SideBarEnhancements](https://github.com/titoBouzout/SideBarEnhancements)__
サイドバーのディレクトリを選択して直下にファイル作ったりできるようになる。

* __[Case Conversion](https://github.com/jdc0589/CaseConversion)__
選択したテキストをcamel caseからsnake caseに変換したり地味に便利。

* __[CSScomb for Sublime Text](https://github.com/csscomb/sublime-csscomb)__
CSSクラスのプロパティをタイプ別（レイアウト系は上で装飾系は下など）にソートする。

* __[AutoFileName](https://github.com/BoundInCode/AutoFileName)__
HTMLでsrc属性を書いているときに実際にそこにあるファイルやディレクトリ候補を補完してくれる。

* __[Synced​Side​Bar](https://github.com/sobstel/SyncedSideBar)__
エディタ上でアクティヴになっているファイルがサイドバー上で選択された状態になる。
自分的にはサイドバーはデフォルト閉じた状態なので、目的のディレクトリにファイルを作りたいときにプチプチディレクトリ掘っていくのが面倒なのでその時だけ有効にし
て、目的を果たしたら切っている。

* __[Git](https://github.com/kemayo/sublime-text-git)__
大体ターミナルからやるがblameするときはこれを使う。

* __[File​Diffs](https://github.com/colinta/SublimeFileDiffs)__
クリップボードとdiffが取れるので便利。

* __[SassBeatify](https://github.com/badsyntax/SassBeautify)__
sass、scssを設定に従ってフォーマットする。

* __多分あまり知られていなくて多様したショートカットキー__
ここで唐突にTips混ぜ込む。
グレップ検索した結果上でジャンプしたいところにカーソル持って行って`SHIFT+F4`でタグジャンプ。（知ってた？？）

### *[Alfred (whith Powerpack)](http://www.alfredapp.com/)*

基本的にはアプリケーションラウンチャ。

だが有料の[Power Pack](https://buy.alfredapp.com/)を入れると便利な機能が開放されて欠かせないツールになる。

よく使う用途としては

* ファイルを検索して好きなアプリで開く
* OS標準の辞書でのキーワード検索
* Can i useや英辞郎やGoogle翻訳のキーワード検索（Chromeなどでできるカスタム検索のようなことができる。）
* iOS Simulatorを直接起動
* Dash（後述）検索
* 登録したスニペットテキストをペースト

とか。（一部はPowerPackなくても出来るかもしれない。）

Workflowというプラグイン的なものが作れるので、[有志によって便利な様々なWorkflowが公開されている](http://www.alfredforum.com/forum/3-share-your-workflows/)。

MacOS上でキーボードだけで操作を完結したい人にとってはかなり捗るツールになるんではないかと思う。

### *[Dash](http://kapeli.com/dash)*

__ドキュメントを確認したいと思い立って3秒で目的のドキュメントにありつけるツール__

ただし有料版に限る。

OSSライブラリやプラグラミング言語などの公式ドキュメントを高速に検索して閲覧できる。

Web上で公開されているようなドキュメントでもローカルで閲覧できるようにしてダウンロードパッケージ化しているので、オフラインな状況におかれても安心。

Alfredとの連携できるWorkflowも公開されている。

スニペット管理ツールとしての一面もあるがそちらは使っていない。

### *[Better Touch Tool (通称BTT)](http://blog.boastr.net/)*

Magic Trackパッドのジェスチャー割り当てに使っている。
設定によってはトラックパッドだけでOS上の大抵の操作が完結するのではないかと思うくらい。

### *[Better Snap Tool](http://blog.boastr.net/)*

BTTの作者が作ったツール。こっちは有料。
ウィンドウの配置やスナップをキーボードのショートカットで割り当てることができる。

例えば、このウィンドウは画面4分の1サイズで右上に移動、このウィンドウは下半分一杯のサイズで移動、などの操作をキーボード操作で瞬時に行える。
シングルモニタ環境の狭い画面で効率よく作業をする場合はとても効果があった。

ただし、BTTでも同様の機能があり大抵のことはできる。
が、こっちにしかできないこともあるしBTTを無料で使わせて貰っている恩義を感じざるを得ないので推しておく。

### *[Witch](http://manytricks.com/witch/)*
アプリケーションスイッチャー。
Windowsみたいにアプリのウィンドウ単位にCmd+Tabでスイッチ出来たりする。
同一アプリのウィンドウに絞ってスイッチしたりもできる。
これはOSXでもできるがこっちのほうがスマート。

### *[iTerm2](http://www.iterm2.com/#/section/home)*
gitやgruntなどで何かとコマンドを叩くことが多くなった。
こいつを起動して`grunt serve`するのが日課。

### *Google Chrome Developer Tools*
開発にはCanary版を使っている。
AndroidのChromeブラウザでのテストは実機をUSBにつないでリモートデバッグしていた。
[とんでもなく便利になっていて驚いた。](https://developer.chrome.com/devtools/docs/remote-debugging)

あとはパフォーマンス計測周りを理解して使いこなせるようになりたい。

### *[Objektiv](http://nthloop.github.io/Objektiv/ "Objektiv")*

OSのデフォルトブラウザを切替るためだけのツール。
ステータスバーにデフォルトブラウザがアイコン表示されていてわかりやすいしショートカットキーでデフォルトブラウザー切り替えられるので便利。

### *iOS Simulator (Xcode付属)*

動作確認に重宝する。
Mobile Safariで発生する不思議な現象も忠実に再現してくれる。
Safari経由でデバッグできるのも非常に便利。

Alfredでピンポイント起動している。

### *[VirtualBox](https://www.virtualbox.org/)*
仮想化ソフト。
IEのテスト用で[modern.IE](http://modern.ie/ja-jp/virtualization-tools#downloads)のVMイメージを使った。

IEの動作確認はこれ一択なんじゃないかと思う。特にまかーは。

[modern.IEのWindows 7で日本語の表示と入力をできるようにする](http://qiita.com/hnakamur/items/5f2f9e817dd0de60abb2)
[Windows8.xのmodern.IEで日本語を入力、表示できるようにする](http://qiita.com/hnakamur/items/cd37c9c8826afe4b4dda)

セットアップ終わったらスナップショットを取ることを忘れないこと。
ライセンス切れのときに使えます。

### *[p4merge](http://www.perforce.com/product/components/perforce-visual-merge-and-diff-tools)*

とりあえずDiffとMergeはこれにした。

主たる用途はGitでのdiff＆merge。
WindowsのWinMergeのような使いやすさはない。

macはこのジャンルで無料の決定版的なものがないように思う。

フォントをOsakaにしないとマルチバイト文字はいっているとハイライト部分の描画がずれていくので注意。

### *[Charles](http://www.charlesproxy.com/)*
デバッグproxy。最近知って買った。
今のところ使ってないけど今後は活躍しそう。

### *Google Chrome 拡張*
* *[Vichrome](https://chrome.google.com/webstore/detail/vichrome/gghkfhpblkcmlkmpcpgaajbbiikbhpdi)*
Vimのキーバインドでブラウジングできる。

* *[CollorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)*
Webページのカラーピッカー。

* *[Postman - REST Client](https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm)*
Web APIのテストに。

* *[Web Developer](http://chrispederick.com/work/web-developer/)*
色々出来る。

### *DigitalColor Meter*
OSX標準のアプリ。
デザイナーさんが作ったワイヤーフレームをイメージファイルで受け取っていたのでカラーピッカーとして使ってた。
`/Applications/Utilities/DigitalColor\ Meter.app`
`sRGBで表示`を選択してカラーピックしたい箇所にカーソルを合わせて`CMD+SHIFT+C`でRGB値をコピれる。

## コマンドラインツール

### *[Homebrew](http://brew.sh/)*
パッケージマネージャー。入れたパッケージ。

* curl
* tree
* jq
* tig
* brew-cask

### *[Git](http://git-scm.com/)*
初めてgit使った。
最初はsource treeを使っていたが、本質的なところを理解せずに使えちゃったりするのがまずいなと
思ったので途中でコマンドラインやtigを使うようになった。

### *[nodejs](http://nodejs.org/)*
npmコマンドをよく使った。Globalで入れたパッケージ。

* jshint
* js-beautify
* plato
* easymock
* generator-webapp
* generator-angular
* gulp

### *[nvm](https://github.com/creationix/nvm)*
nodejsのバージョン管理。

### *[GRUNT](http://gruntjs.com/)*
これでプロジェクトのタスクを自動化していた。

### *[Bower](http://bower.io/)*
依存ライブラリの管理はこれでした。
`bower search`してライブラリ探す習慣がついた。
リポジトリに登録されていてもBowerでバージョン管理されていないやつは注意が必要。
`bower install`した時点の最新が入っちゃうので。

### *[Yeoman](http://yeoman.io/)*
プロジェクトの雛形はYeomanのGenerator Angular使った。

### *[compass](http://compass-style.org/)*
sass＆compass使ったので。

### *[Quick Look plugins](https://github.com/sindresorhus/quick-look-plugins)*
Homebrew Caskで各種Quick Look拡張をインストール。
MarkdownとかたいていのファイルがQuick Lookで見れたりする。

## ツールじゃないけどよく見たり使ったWebサイト

* *[can i use](http://caniuse.com/)*
プラットフォームのバージョンごとに使えるHTMLタグやCSSプロパティなどを確認するためのデータベース。
IEで使えるかどうか怪しそうなものはまずここで確認してから使っていた。

* *[stack overflow](http://stackoverflow.com/)*
プログラマ向けQ&Aサイト。
ハマってググると大体ここに行き着く。かなり救われた。

* *[JSFiddle](http://jsfiddle.net/)*
playground系サービス。プログラムの情報共有に最適。

* *[qiita](http://qiita.com/)*
良記事たくさん。

* *[CSS-TRICKS](http://css-tricks.com/)*
[SNIPPETSセクション](http://css-tricks.com/snippets/)とかかなり参考にさせてもらった。

* *[Landscaping With Frontend Development Tools](https://github.com/codylindley/frontend-tools)*
フロントエンドツールのリンク集。
Github上でメンテされているので新鮮だと思う。
フロントエンド界隈のトレンドを確認したりたまに覗きにいく。

* *[AngularJS-Learning](https://github.com/jmcunningham/AngularJS-Learning)*
AngularJSのお勉強用リンク集。
Angularやってました。

## おまけ
Javaプログラマ時代の欠かせないツールを思い出してみた。
mac使えたことがまれなのでWindowsのツールになる。
細かい説明はしないがお世話になりました。

* eclipse
* chrome devtools
* Sublime Text 2
* [Everything Search Engine](http://www.voidtools.com/)
* [Launchy](http://www.launchy.net/)
* [AutoHotkey](http://www.autohotkey.com/)
* [Devas](http://gimite.net/pukiwiki/index.php?Devas)
* コマンドプロンプト

おしまい