📝

エンジニアを始めてから便利だったツールまとめ

2022/01/21に公開
2

概要

エンジニアになってから出会った便利ツール・アプリを備忘録としてまとめました。
※WEB用ツール多め

GUIツール・アプリ

デスクトップ上で動作させるやつ。

Authy

https://authy.com/

2FAアプリ。Multi-Deviceという複数端末で使える機能があり、PCでログインする際の2FAをPCのみで完結できるので便利。

Hyper

https://hyper.is/

コンソールアプリ。テーマ機能やプラグイン追加で自分の好みに環境を整えやすくて見た目がよい。
設定を.hyper.jsファイルで管理するので、gitにて設定管理ができて便利。

VSCode

https://code.visualstudio.com/

言わずもがなの高機能コードエディター。特に理由がなければ基本的にはプログラミングするならこれを使えばいいんじゃないかな。
豊富なプラグインや設定で、Hyperと同じように自分の好みの環境を整えやすい。
おすすめのプラグインに関しては別途まとめてます。

RunJS

https://runjs.app/

左ペインにJavaScriptのコードをエディタ上に書くと、右ペインに実行結果をすぐに出せるツール。
この書き方の実行結果はどうなるのか、他の書き方をザクザク試すのに便利です。
TypeScriptやNodeモジュールsのインポートにも対応しているので拡張性◎

TablePlus

https://tableplus.com/

モダンなSQLクライアント。Mac用のSQLクライアントを色々検討した結果ここに落ち着いた。
他のMac用SQLクライアントだと Sequel Proなどが有名だが、

  • Sequel Proが2016年でアップデートが止まってしまっている
  • TablePlusは現在でも継続的なアップデートがされている
  • PostgreSQL, MySQL / MariaDB, Oracle などなどほぼすべてのデータベースに対応している
  • 複数環境の管理を行いやすいGUI
  • とにかくUXがよい

などなど良い点が多いので2022年にMac用SQLクライアントを使うならこれが一番オススメです。

2023/01/30追記
Sequel Pro後継のSequel Aceが出ているそうです!よさそう
https://apps.apple.com/us/app/sequel-ace/id1518036000

Postman

https://www.postman.com/

APIクライアントツール。これを知る前はAPI叩くときはcurl文を毎回書いていたのがツール上で入力するだけで良くなった。もっと前から教えてほしかったやつ。
Headerなど諸々の設定ができ、リクエスト内容はログに残るので「あのリクエストどうやって投げたっけなぁ」がサルベージしやすいので便利。

Figma

https://www.figma.com/

Webデザインツール。Webデザインに関わる機会があるなら使い方知っておくべきなやつ。

  • Webブラウザ上から扱える
  • 他人にリンク共有でそのまま共有が可能
  • どのユーザーがどこにカーソルを合わせているのかリアルタイムで表示される
    • その場で編集してもリアルタイムで反映される
  • ゲストユーザーとして閲覧も可能なのでアカウント作成フローを挟まず共有することが可能
  • パラメータ設定がCSSライクにできるので、そのままコードに落とし込みやすい

Skitch

https://evernote.com/intl/jp/products/skitch

画像にちょっとした注釈(文言や矢印、図形など)を入れ込むツール。
画像ベースで説明を行う際によくつかう。

WebP Converter.

AppStore

JPGやPNGをWebP形式に変換するツール。無料。サイト制作の際に画像はWebPで表示させたいが、もらった素材がPNGのみだったりする場合に使う。
複数枚まとめて変換ができるので使い勝手が良い。

Affinity Photo

AppStore

PhotoShop代替アプリ。PhotoShopでやりたい操作のほとんどができるのでAdobe契約せずに画像編集をしたい場合におすすめ。買い切りタイプ。
よくセールをやっているのでそのタイミングで買うのがおすすめ。

The Unarchiver

AppStore

圧縮ファイル解凍ソフト。無料。Macデフォルトで対応していない形式に対応しているのでこちらを入れておいたほうがストレスフリーになれる。

Tunacan

AppStore

複数枚の画像をくっつけて1枚の画像にするツール。無料。
UIがかっこよかったりSEがきもちよかったりして謎に楽しい。

2023/01/30追記
Tunacan2が出ているみたいです。要チェック
AppStore

Karabiner-Elements

https://karabiner-elements.pqrs.org/

キーボードカスタマイズソフト。キーバインドやキーマップを自由に変更できる。
自分は左Cmd単体押しで英数入力に、右Cmd単体押しでかな入力になるルールを追加している。

BetterTouchTool

https://folivora.ai/

キーボード、マウス、トラックパッドなどいろんなカスタマイズができるようになるアプリ。
自分は以下の設定で、Windowsで便利だと思ってる機能を再現しています。

  • キーボードショートカット: Option + L で画面ロックにしている(Win + L と同じやつ)
  • ウィンドウスナップ: 有効にするとアプリウィンドウを画面の端に持ってくとリサイズできるあれが使える

Clipy

https://clipy.softonic.jp/mac

クリップボードにコピーした履歴を引っ張りだせるツール。絶対必要。テキストのみならず画像もそのまま引っ張り出せる。
コピー → ペースト → コピー → ペースト … となる作業をとりあえず全部コピーしてペーストするときに引っ張りだすことで快適になれる。

Day-O

Download Site

タスクバーに表示するカレンダーアプリ。デフォルトの時刻表示だと好みの表示に変更できないし、カレンダー表示を軽くだすことができないのでこちらを導入。シンプルで使いやすい。

Gitify

https://www.gitify.io/

メニューバーに常駐して、GitHubの通知を教えてくれるアプリ。https://github.com/notifications の内容をアプリ通知で飛ばしてくれる。
Mac上でメール以外の通知手段が欲しかったのでこれを導入しました。

CLIツール・アプリ

コマンドライン上で利用するもの。大体がHomebrewでインストール可能。

Homebrew

https://brew.sh/index_ja

macのパッケージマネージャー。macの環境構築はこれを入れるところから始まる。

# `wget` をインストールする場合は以下のコマンドを実行
brew install wget

asdf

https://asdf-vm.com/

rubyやnodeなどのプログラミング言語や、terraformなどのツールのバージョン管理を行えるツール。rbenvやnodenvといったプログラミング言語ごとのバージョン管理を導入せずに済む。

clasp

https://github.com/google/clasp

ローカルからGoogle App Scriptのコーディング&デプロイを行えるツール。
ローカル開発時にTypeScriptで書けるようになるのがとても大きい(claspがTypeScriptをJSにコンパイルしてデプロイしてくれる)。

direnv

https://github.com/direnv/direnv

ディレクトリ毎に環境変数を定義&管理できるツール。ディレクトリに環境変数を記載した .envファイル を置くと、そのディレクトリにいる間のみその環境変数を扱える。

ghq

https://formulae.brew.sh/formula/ghq

レポジトリ管理ツール。通常GitHub レポジトリをcloneする際は「プロジェクト管理しているディレクトリに移動して、git cloneを叩いて…」という手順を通るが、
ghqを入れておくとどこのディレクトリにいても ghq get {GitHubのclone URL} をするだけで設定したホームディレクトリ配下によしなにレポジトリを落とすことができる。

# get command
ghq get git@github.com:nakaatsu118/Test1.git
-> /Users/nakaatsu/Project/github.com/nakaatsu118/Test1

ghq get git@github.com:nakaatsu118/Test2.git
-> /Users/nakaatsu/Project/github.com/nakaatsu118/Test2

ghqで管理しているレポジトリは ghq list --full-path でローカルのフルパスを呼び出すことができ、後述のfzfと連携することでコマンド一つで「ローカルレポジトリ一覧を出す→レポジトリ選択してディレクトリ移動」を行うことができる。便利。

fzf

https://github.com/junegunn/fzf

CLI上であいまい検索&選択が行えるツール。
zshにfunction追加 & zshキーバインディングでfunction呼び出しを設定するとさらに便利になる。
「fzf ghq」などでググると色々な方が設定例を紹介しているので調べると幸せになれるかも。

jq

CLI上でJSONを見やすくするツール。curlなどでJSONデータを表示すると非常に見づらいことになるが、パイプでjqに渡してあげると見やすい形に改行してくれる。

curl https://pokeapi.co/api/v2/pokemon/ditto | jq .
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 22278    0 22278    0     0  87364      0 --:--:-- --:--:-- --:--:-- 87708
{
  "abilities": [
    {
      "ability": {
        "name": "limber",
        "url": "https://pokeapi.co/api/v2/ability/7/"
      },
      "is_hidden": false,
      "slot": 1
    },
    {
      "ability": {
        "name": "imposter",
        "url": "https://pokeapi.co/api/v2/ability/150/"
      },
      "is_hidden": true,
      "slot": 3
    }
  ],

ngrok

https://ngrok.com/

ローカルのネットワークを一時的に外部公開できるツール。ローカル開発中のWebページをその場でサクッと動作確認できるようになる。
無料プランだと転送量や利用時間が短いので、頻繁に使うようなら課金推奨。

zprezto

https://github.com/sorin-ionescu/prezto

zshのフレームワーク。テーマ機能でいい感じの見た目にできたりzshをカスタマイズできる。

awscli

https://aws.amazon.com/jp/cli/

CLI上でAWS操作が行える。AWS操作をスクリプトで自動化したり様々な応用ができる。
認証情報の管理に後述の aws-vault を介することをおすすめ。

aws-vault

https://github.com/99designs/aws-vault

AWSのアクセスキー/シークレットキーを平文保存せずに扱える。ローカルでaws周りの操作を行う場合はこの環境を整えることを推奨する。

VSCode Addon

VSCode にインストールした拡張機能のうち、おすすめのものを掲載。

Auto Close Tag

HTML/XMLの閉じタグを自動で入れてくれる。

Auto Rename Tag

HTML/XMLのタグ名を変更したとき、対応したペアのタグ名も自動で変更してくれる。

Bracket Pair Colorizer

コード内のカッコの開始と終了のペアを同じ色にしてくれる。
※今はVSCodeデフォルトに含まれているっぽいのでインストール不要かも

Class autocomplete for HTML

HTMLのclass要素のオートコンプリート。現在のhtml内のクラスや、インポートしているcssのクラスを参照してくれる。

Code Spell Cheker

コード内にTypoがあるとハイライト表示してくれる。恥ずかしいコミットを防げる神アドオン。
固有名詞がTypo判定されがちだが、範囲選択→右クリックメニューからホワイトリスト追加がすぐできる。

GitHub Pull Requests and Issues

VSCode上でのGit操作でpushしたときに、VSCode上でPR作成まで完結できる。

Highlight Matching Tag

カーソルをあわせたHTMLタグのペアタグをハイライト表示してくれる。少しネストが深くなると混乱しがちなタグ対応が見やすくなる。

HTMLHint

HTMLコードの構文チェック。設定したルールに反すると警告表示をしてくれる。
これがあると閉じタグ忘れやスラッシュ抜けなどを防いできれいなコードを書く癖がつけられてよい。

indent-rainbow

インデントごとに色分けをしてくれる。様々な言語で使えるので便利。

Live Server

HTMLファイルをボタン一つでローカルサーバーを立ち上げられる。
LiveReloadまでついているので最高。これないとWeb開発の効率が落ちる。

Live Share

VSCodeでコードの共同編集が行える。ペアプロする際はこれ入れるだけで環境が整う。

Markdown All in One

マークダウンをいじる場合はとりあえずこれを入れておく。

Partial Diff

2ファイルのdiff比較ができる。
編集中のファイルや、クリップボードにコピーした内容で比較ができるのでいちいち保存して比較〜をしなくて済む。

Prettier

コード自動整形ツール。レポジトリ単位で設定を作ったりチームコーディングでの品質担保等が行える。必須。
ローカルで自身の設定は調整したほうが便利かと。

Swagger Viewer

Open APIドキュメントのSwagger形式のファイルを表示するアドオン。

TODO Highlight

コード内にTODOコメントを残しておくとハイライト表示してくれるやつ。TODOそのまま残してしまうのを視覚的に防げる。
デフォルトだとTODO:, FIXME:のキーワードをハイライト表示する。(設定でいじれる)

Trailing Spaces

コード内の不要な半角スペースをハイライト表示してくれる。
これも汚いコードを書かない矯正ができるのでおすすめ。

Chrome Addon

Google Chromeの拡張機能。

ColorPicker

ページ要素のカラーコードを取ることができる。

GoFullPage

ページ全体のスクリーンショットを取れる。

LiveReload

ローカルファイルに変更があった場合に自動でリロードしてくれるやつ。

Wappalyzer

サイト内で利用されているソフトウェアやサービス、フレームワークなどを一覧表示してくれる。

swagger-viewer

ブラウザ上でSwaggerを表示するためのやつ。

React Developer Tools

ChromeでReactをデバッグするならほぼ必須の拡張。コンポーネント構造やstate, propsの値を確認することができます。

Discussion

スズキサトシスズキサトシ

すごい多岐にわたってていい記事ですね!
Clipyって時々クラッシュしませんか? Pastebotの方が同じ用途でより洗練されてるように見受けられるので、ご参考までに。