Webアプリケーションを作成した時に役に立ったツール

ローカルで開発していて役に立ったツールの個人的メモ。
今後良さそうなツールを見つけたら逐一更新する予定。
ほかに良さそうなツールなどがありましたらこの記事のコメント欄や twitter などで教えていただけるとうれしいですm(__)m

# 使ってみて役に立ったツール

## [RubyMine](https://www.jetbrains.com/ruby/)
![Screen Shot 2015-08-31 at 8.11.25 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/6b3280c7-aaf9-9404-7888-49a6a3afd41c.png)

Ruby用IDE。最近利用したのが Rails だったので。Python なら PyCharm とかになる。Sublime Text, Eclipse, Atom, Vim, Emacs, ..など、エディタなので使いやすいのを使えばいいと思います。個人的には関数をサジェストしてくれる機能、関数の宣言場所に飛んだりする機能(Ctrl-B や Ctrl-[ など)が便利だった。慣れてくるとデバッガもいい感じに役に立つ。

## [Sequel Pro](http://www.sequelpro.com/)

![Screen Shot 2015-08-31 at 8.10.21 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/19e95d69-7402-6006-a85e-ec292050145f.png)

MySQL クライアント。コマンドライン直接たたいてSQL文実行してもいいのだが、クリックして削除、更新、挿入など基本的な動作が全部 UI でできるのは便利。ローカルにかぎらず、SSH でリモートサーバにログインしてデータを編集することもできる。正直これで MySQL 関係は十分だった。

## [Sqlite browser](http://sqlitebrowser.org/)
![Screen Shot 2015-08-31 at 8.20.38 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/f9405519-3fee-fabd-a152-00b5989194f5.png)

SQLite クライアント。上記の Sequel Pro 同様、DB を UI で操作できるのは便利。

## [Google Insights](https://developers.google.com/speed/pagespeed/insights/)
![Screen Shot 2015-09-09 at 7.36.37 PM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/d4478137-fc53-dc58-2fbf-410bb1d82153.png)

作ったサイトの速度や CSS、JS などの問題点を列挙してくれる。URL を真ん中のバーに入れれば結果が出力される。CEO 対策や自分たちが書いたコードの問題点を探すのに利用していた。

## [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?utm_source=chrome-ntp-icon)

![Screen Shot 2015-08-31 at 8.59.31 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/3a88b3e1-5b4f-76e6-ed83-522632e08ccf.png)

Chrome の拡張機能。RestAPI を叩いて動作を確認するのに便利。Curl コマンド叩いてもいいのだけれど、結局 UI でできるのは楽。ヘッダーなども指定できる。しっかりとテストを書けば本来は不要なのかもしれない、、、

## [Mail Catcher](http://mailcatcher.me/)
![Screen Shot 2015-08-31 at 10.24.34 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/a587846c-afbe-a343-3289-6a96e43bfc8d.png)
SMTPサーバ。ローカルで起動する。ローカルでメール関係のデバッグをするのは大変だったので導入。これでメールを送る処理がしっかりと実行されていることを確認していた。今なら、そもそもメールは実装せずに、[SendGrid](https://sendgrid.com/) などのサービスを利用する。これならば、メールの文面変えるだけなのにコードの編集したりとかしなくて済むし、難しいテストしなくていいし、API 叩けばメール送ることができるので、サーバの設定も不要。

## [Hosts](http://permanentmarkers.nl/software.html)
![Screen Shot 2015-08-31 at 8.26.52 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/870be667-a48e-541b-148d-f296336036e4.png)

URL と IP をセットしておくと、その URL にアクセスした時に指定した IP へ勝手に飛ばしてくれる。やってることは `/etc/hosts` を Vim で編集しているのと同じ。これが何の約に立つのかって？ 本番サーバと開発サーバみたいに１台以上サーバがあり、本番サーバが `honban_server.com` という URL になってるとする。開発サーバ使って開発している時に、たまに本番サーバ のURL をそのまま `<img src='honban_server.com/img/a.png' />` のように HTML に埋め込んでしまったりしていると、開発サーバなのにこの部分は本番サーバの画像が読み込まれたりする。Hosts を使っておけばすべての`honban_server.com`へのリクエストを開発サーバへ行くので、間違って `honban_server.com` と書いてしまっていても問題なくテストできる。
... Rails で開発してて使うことはあんまし無いかも‥ (Facebook ログインとかを試すときとか？)。昔 WordPress 利用してて、こいつ書いた記事を HTML タグのまますべて DB に記録してるじゃんΣという状況で役に立った...


## [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-ntp-icon)
![Screen Shot 2015-08-31 at 9.13.41 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/8aad8965-5ef7-8653-955e-7751cf844744.png)

これも Chrome の拡張機能。キャッシュの削除に利用。クリック一発でできるのがいい。でも Chrome の開発ツールの設定でキャッシュ無効化できるので、それでいいような気が最近している ↓
![Screen Shot 2015-08-31 at 9.18.28 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/2d0ec853-74ad-3873-6b6d-0a8f7839854a.png)

# 使ってみたけど、使いこなせている感じがしないツール

## [Charles](http://www.charlesproxy.com/download/latest-release/)
![Screen Shot 2015-08-31 at 10.54.37 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/2ca13375-ed1f-4d97-1940-bba3000ead0b.png)

リクエストの中身みれたり、ブレークポイント設定してパケットの中身帰ることが出来たり、通信速度を擬似的に遅くさせることができる。いろいろと機能的にはすごいが、Rails 書いてるときは使うことはほとんどなかった。セキュリティの検証とかにつかえるはず。

## [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?utm_source=chrome-ntp-icon)
![Screen Shot 2015-08-31 at 10.59.12 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/b1ecbc20-fe22-3d03-a19b-6c91e88ea116.png)

Chrome の拡張機能。物差が便利だった。↓いろいろ機能があるけれども、使ってたのは一部(物差しとか物差しとか)。自分がデザイナーだったらもっと色々使うのかもしれない。
![Screen Shot 2015-08-31 at 11.07.46 AM.png](https://qiita-image-store.s3.amazonaws.com/0/31970/f56fd710-2f10-3db6-8de7-0382fc352153.png)


# まとめ
なにもかも列挙するときりがないので、なるべくコーディングに関係しそうで、個人的に便利だったものを列挙してみた。Vagrant や git の UI クライアントなども書こうかと考えたけれども、そもそも自分がそんなにWeb関連の開発で使ってなかったのでパス。今後よさそうなものを見つけたら更新する予定。