Edited at

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

More than 5 years have passed since last update.


概要

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

スペック的にはJava歴が10年くらい。

割とツール好きで、できればキーボード(カーソルキー以外)だけですべての操作を完結したいと思っている。

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


5ヶ月間のお仕事内容


  • PC/タブレット向けのAngularJSを使ったフロントエンド開発

  • HTML/CSS(SASS)/Javascript

  • PCはIE8~、Chrome。モバイル端末はiPad、Nexus7


職場での開発環境


  • mac mini (2011)

  • 19インチのシングルモニタ


GUI系ツール


Sublime Text 2

プログラマ向けのテキストエディタ。

これがないと仕事にならない。

以下、必須なPackage。


  • Vintage

    vimっぽいキーバインドにする。最初っから入っている。


  • emmet

    HTML、CSSの短縮記法の展開とか、たとえばHTMLタグの開始と終了間を行き来できる便利系コマンドなど。


  • SublimeLinter

    javascriptのlintエラー(jshint)をリアルタイムに検知したり。

    チーム内で共有しているjshint設定ファイル(.jshintrc)を読み込むことも可能。


  • JsFormat

    javascriptをjsbeatifier基準でフォーマットできる。

    チーム内で共有しているjsbeatify設定ファイル(.jsbeautifyrc)を読み込むことも可能。


  • BracketHighlighter

    HTMLマークアップしているときすごく見やすくなる。


  • JavaScript Snippets

    afnとか超多用する。


  • SideBarEnhancements

    サイドバーのディレクトリを選択して直下にファイル作ったりできるようになる。


  • Case Conversion

    選択したテキストをcamel caseからsnake caseに変換したり地味に便利。


  • CSScomb for Sublime Text

    CSSクラスのプロパティをタイプ別(レイアウト系は上で装飾系は下など)にソートする。


  • AutoFileName

    HTMLでsrc属性を書いているときに実際にそこにあるファイルやディレクトリ候補を補完してくれる。


  • Synced​Side​Bar

    エディタ上でアクティヴになっているファイルがサイドバー上で選択された状態になる。

    自分的にはサイドバーはデフォルト閉じた状態なので、目的のディレクトリにファイルを作りたいときにプチプチディレクトリ掘っていくのが面倒なのでその時だけ有効にし

    て、目的を果たしたら切っている。


  • Git

    大体ターミナルからやるがblameするときはこれを使う。


  • File​Diffs

    クリップボードとdiffが取れるので便利。


  • SassBeatify

    sass、scssを設定に従ってフォーマットする。


  • 多分あまり知られていなくて多様したショートカットキー

    ここで唐突にTips混ぜ込む。

    グレップ検索した結果上でジャンプしたいところにカーソル持って行ってSHIFT+F4でタグジャンプ。(知ってた??)



Alfred (whith Powerpack)

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

だが有料のPower Packを入れると便利な機能が開放されて欠かせないツールになる。

よく使う用途としては


  • ファイルを検索して好きなアプリで開く

  • OS標準の辞書でのキーワード検索

  • Can i useや英辞郎やGoogle翻訳のキーワード検索(Chromeなどでできるカスタム検索のようなことができる。)

  • iOS Simulatorを直接起動

  • Dash(後述)検索

  • 登録したスニペットテキストをペースト

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

Workflowというプラグイン的なものが作れるので、有志によって便利な様々なWorkflowが公開されている

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


Dash

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

ただし有料版に限る。

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

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

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

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


Better Touch Tool (通称BTT)

Magic Trackパッドのジェスチャー割り当てに使っている。

設定によってはトラックパッドだけでOS上の大抵の操作が完結するのではないかと思うくらい。


Better Snap Tool

BTTの作者が作ったツール。こっちは有料。

ウィンドウの配置やスナップをキーボードのショートカットで割り当てることができる。

例えば、このウィンドウは画面4分の1サイズで右上に移動、このウィンドウは下半分一杯のサイズで移動、などの操作をキーボード操作で瞬時に行える。

シングルモニタ環境の狭い画面で効率よく作業をする場合はとても効果があった。

ただし、BTTでも同様の機能があり大抵のことはできる。

が、こっちにしかできないこともあるしBTTを無料で使わせて貰っている恩義を感じざるを得ないので推しておく。


Witch

アプリケーションスイッチャー。

Windowsみたいにアプリのウィンドウ単位にCmd+Tabでスイッチ出来たりする。

同一アプリのウィンドウに絞ってスイッチしたりもできる。

これはOSXでもできるがこっちのほうがスマート。


iTerm2

gitやgruntなどで何かとコマンドを叩くことが多くなった。

こいつを起動してgrunt serveするのが日課。


Google Chrome Developer Tools

開発にはCanary版を使っている。

AndroidのChromeブラウザでのテストは実機をUSBにつないでリモートデバッグしていた。

とんでもなく便利になっていて驚いた。

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


Objektiv

OSのデフォルトブラウザを切替るためだけのツール。

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


iOS Simulator (Xcode付属)

動作確認に重宝する。

Mobile Safariで発生する不思議な現象も忠実に再現してくれる。

Safari経由でデバッグできるのも非常に便利。

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


VirtualBox

仮想化ソフト。

IEのテスト用でmodern.IEのVMイメージを使った。

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

modern.IEのWindows 7で日本語の表示と入力をできるようにする

Windows8.xのmodern.IEで日本語を入力、表示できるようにする

セットアップ終わったらスナップショットを取ることを忘れないこと。

ライセンス切れのときに使えます。


p4merge

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

主たる用途はGitでのdiff&merge。

WindowsのWinMergeのような使いやすさはない。

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

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


Charles

デバッグproxy。最近知って買った。

今のところ使ってないけど今後は活躍しそう。


Google Chrome 拡張


DigitalColor Meter

OSX標準のアプリ。

デザイナーさんが作ったワイヤーフレームをイメージファイルで受け取っていたのでカラーピッカーとして使ってた。

/Applications/Utilities/DigitalColor\ Meter.app

sRGBで表示を選択してカラーピックしたい箇所にカーソルを合わせてCMD+SHIFT+CでRGB値をコピれる。


コマンドラインツール


Homebrew

パッケージマネージャー。入れたパッケージ。


  • curl

  • tree

  • jq

  • tig

  • brew-cask


Git

初めてgit使った。

最初はsource treeを使っていたが、本質的なところを理解せずに使えちゃったりするのがまずいなと

思ったので途中でコマンドラインやtigを使うようになった。


nodejs

npmコマンドをよく使った。Globalで入れたパッケージ。


  • jshint

  • js-beautify

  • plato

  • easymock

  • generator-webapp

  • generator-angular

  • gulp


nvm

nodejsのバージョン管理。


GRUNT

これでプロジェクトのタスクを自動化していた。


Bower

依存ライブラリの管理はこれでした。

bower searchしてライブラリ探す習慣がついた。

リポジトリに登録されていてもBowerでバージョン管理されていないやつは注意が必要。

bower installした時点の最新が入っちゃうので。


Yeoman

プロジェクトの雛形はYeomanのGenerator Angular使った。


compass

sass&compass使ったので。


Quick Look plugins

Homebrew Caskで各種Quick Look拡張をインストール。

MarkdownとかたいていのファイルがQuick Lookで見れたりする。


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


  • can i use

    プラットフォームのバージョンごとに使えるHTMLタグやCSSプロパティなどを確認するためのデータベース。

    IEで使えるかどうか怪しそうなものはまずここで確認してから使っていた。


  • stack overflow

    プログラマ向けQ&Aサイト。

    ハマってググると大体ここに行き着く。かなり救われた。


  • JSFiddle

    playground系サービス。プログラムの情報共有に最適。


  • qiita

    良記事たくさん。


  • CSS-TRICKS

    SNIPPETSセクションとかかなり参考にさせてもらった。


  • Landscaping With Frontend Development Tools

    フロントエンドツールのリンク集。

    Github上でメンテされているので新鮮だと思う。

    フロントエンド界隈のトレンドを確認したりたまに覗きにいく。


  • AngularJS-Learning

    AngularJSのお勉強用リンク集。

    Angularやってました。



おまけ

Javaプログラマ時代の欠かせないツールを思い出してみた。

mac使えたことがまれなのでWndowsのツールになる。

細かい説明はしないがお世話になりました。

おしまい