Web
ツール

webエンジニアにおすすめしたいツール

はじめに

普段私が使ってるツールを、軽く言葉を添えながら紹介していきます。
こんなのも便利だよーっていうのがあれば、共有してくれると嬉しいです。

Postman

apiを叩けるグーグル拡張機能
headerを自由に追加できたり、10種類以上のhttpメソッドに対応してる
動作確認によく使う

Postico

PostgresqlをGUIで操作できるアプリケーション
データの確認とかによく使う

MySQLWorkbench

MySQLをGUIで操作できるアプリケーション
ER図を作れたりもする

Kitematic

DockerをGUIで操作できるアプリケーション
コンテナをリスタートしたり、コンテナの中に入ってコマンドを叩くのが凄い楽になる

Slack

おなじみのチャットツール
ないと生きていけない

Pocket

気になったサイトを保存できるアプリケーション
エラーを解決に導いてくれたサイトとか、あとで読もうと思ったサイトをよく保存している
グーグル拡張や、Alfred workflow、スマホアプリまであるのでどこでも使えて便利

PhpStorm

エディタ
LaravelとかVue.jsとかWeb系のプログラミングをするときはこれを使う
Visual Studio Codeとかもいいらしい

Kobito

Qiitaと連携してるマークダウンエディタ
Kobitoで書いた記事をQiitaにあげられる
個人的にはメモとかによく使う

Alfred

ランチャーアプリ
カスタマイズ次第でめちゃくちゃ用途があるので詳細はGoogle先生に
カスタマイズなしでも、コピーしたテキストの履歴をとれたり、スニペットを登録したりできる
買ったら幸せになれるけど、他人のpcを触った時に無くてアッってなる

Sip

カラーピッカー
ブラウザ上だけで無く、どこの色でも抽出できる
抽出した色の履歴もとれて便利

Web Developer Tools

毎日使うブラウザの機能
エラーを確認したり、apiが正しく飛んでるか確認したり、一時的にcssを変更したりする
めちゃくちゃ機能があるので本当に使いこなせたら変態凄い

Awesome ScreenShot

スクリーンショットが取れるグーグル拡張機能
長いページでも自動でスクロールしてページ全体のスクリーンショットがとれる

OneTab

タブを一つにまとめてくれるグーグル拡張機能
いっぱいタブを開いてる時に一つにまとめていらないタブだけ消したりできる

Vue DevTools

Vue.jsを使うなら必須
Dataの状態を見たり、storeの状態をみたりする

Github trend

賢い人たちの賢くてナウいコードがいっぱい見れる

日本語に翻訳

Google Chromeの右クリックすると出てくる機能
英語が読めない私は、すぐ日本語に翻訳してその場をしのぐ

Image Downloader

サイトで使ってる写真を抽出してダウンロードできるグーグル拡張機能

Snappy Snippet

Web Developer Tools で 指定した箇所のhtmlとcssが抽出できるグーグル拡張機能