Go to Qiita Advent Calendar 2024 Top
LoginSignup
1380
1417

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@dayoshix

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

Last updated at Posted at 2014-06-05

概要

今年からフロントエンドエンジニアにシフトチェンジして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使えたことがまれなのでWindowsのツールになる。
細かい説明はしないがお世話になりました。

おしまい

1380
1417
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1380
1417

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?