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

2022/01/21に公開
2件
 概要エンジニアになってから出会った便利ツール・アプリを備忘録としてまとめています。随時更新しています。

 GUIツール・アプリデスクトップ上で動作させるやつ。

 1Passwordhttps://1password.com/jp
パスワード管理ツールです。Windows, mac, iPhone等様々な端末で共通したパスワード管理が行えます。有料のアプリとなりますが、LastPassやiCloud Passwordに比べて使い勝手等がよいのでオススメです。2FA（2 要素認証）やパスキーの登録も行えます。

 Authyhttps://authy.com/
2FAアプリ。Multi-Deviceという複数端末で使える機能があり、PCでログインする際の2FAをPCのみで完結できるので便利。 PC版のサポートが終了したり、個人情報流出問題等があったため上記の1Passwordに2FAを移行しました。

 Hyperhttps://hyper.is/
コンソールアプリ。テーマ機能やプラグイン追加で自分の好みに環境を整えやすくて見た目がよい。

設定を.hyper.jsファイルで管理するので、gitにて設定管理ができて便利。

 VSCodehttps://code.visualstudio.com/
言わずもがなの高機能コードエディター。特に理由がなければ基本的にはプログラミングするならこれを使えばいいんじゃないかな。

豊富なプラグインや設定で、Hyperと同じように自分の好みの環境を整えやすい。

おすすめのプラグインに関しては別途まとめてます。

 RunJShttps://runjs.app/
左ペインにJavaScriptのコードをエディタ上に書くと、右ペインに実行結果をすぐに出せるツール。

この書き方の実行結果はどうなるのか、他の書き方をザクザク試すのに便利です。

TypeScriptやNodeモジュールsのインポートにも対応しているので拡張性◎

 Sublime Texthttps://www.sublimetext.com/
軽量なコードエディター。自分はこれを簡易テキストエディターに使っています。Windows, mac, Linuxどれでも使えます。

「ちょっとテキストを編集したい」「比較用に一旦どこかにテキストをおいておきたい」といったTemporary的な用途で使っています。自動保存があって便利。

日本語化する手順が必要だったりライセンスを購入しないとファイル保存時にダイアログが出たりしますが、そこを気にしなければずっと無料で使えます。

 TablePlushttps://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

 A5:SQL Mk-2https://a5m2.mmatsubara.com/
古からあるWindows用のSQLクライアント。無料。

非常に歴史のあるSQLクライアントで信頼性が高く多機能。無料でER図出力までできてしまうとても良いツールです。

現在も更新がされておりAI対応等も進んでいてイチオシ。

 Postmanhttps://www.postman.com/
APIクライアントツール。これを知る前はAPI叩くときはcurl文を毎回書いていたのがツール上で入力するだけで良くなった。もっと前から教えてほしかったやつ。

Headerなど諸々の設定ができ、リクエスト内容はログに残るので「あのリクエストどうやって投げたっけなぁ」をサルベージしやすいので便利。

 Figmahttps://www.figma.com/
Webデザインツール。Webデザインに関わる機会があるなら使い方知っておくべきなやつ。
Webブラウザ上から扱える
他人にリンク共有でそのまま共有が可能
どのユーザーがどこにカーソルを合わせているのかリアルタイムで表示される
その場で編集してもリアルタイムで反映される

ゲストユーザーとして閲覧も可能なのでアカウント作成フローを挟まず共有することが可能
パラメータ設定がCSSライクにできるので、そのままコードに落とし込みやすい

 Skitchhttps://evernote.com/intl/jp/products/skitch
画像にちょっとした注釈（文言や矢印、図形など）を入れ込むツール。

画像ベースで説明を行う際によくつかう。

 WebP Converter.AppStore
JPGやPNGをWebP形式に変換するツール。無料。サイト制作の際に画像はWebPで表示させたいが、もらった素材がPNGのみだったりする場合に使う。

複数枚まとめて変換ができるので使い勝手が良い。

 Affinity PhotoAppStore
PhotoShop代替アプリ。PhotoShopでやりたい操作のほとんどができるのでAdobe契約せずに画像編集をしたい場合におすすめ。買い切りタイプ。

よくセールをやっているのでそのタイミングで買うのがおすすめ。

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

 TunacanAppStore
複数枚の画像をくっつけて1枚の画像にするツール。無料。

UIがかっこよかったりSEがきもちよかったりして謎に楽しい。
2023/01/30追記

Tunacan2が出ているみたいです。要チェック

AppStore

 Karabiner-Elementshttps://karabiner-elements.pqrs.org/
キーボードカスタマイズソフト。キーバインドやキーマップを自由に変更できる。

自分は左Cmd単体押しで英数入力に、右Cmd単体押しでかな入力になるルールを追加している。

 BetterTouchToolhttps://folivora.ai/
キーボード、マウス、トラックパッドなどいろんなカスタマイズができるようになるアプリ。

自分は以下の設定で、Windowsで便利だと思ってる機能を再現しています。

キーボードショートカット: Option + L で画面ロックにしている（Win + L と同じやつ）

ウィンドウスナップ: 有効にするとアプリウィンドウを画面の端に持ってくとリサイズできるあれが使える

 Clipyhttps://clipy.softonic.jp/mac
クリップボードにコピーした履歴を引っ張りだせるツール。絶対必要。テキストのみならず画像もそのまま引っ張り出せる。

コピー → ペースト → コピー → ペースト … となる作業をとりあえず全部コピーしてペーストするときに引っ張りだすことで快適になれる。

 Gitifyhttps://www.gitify.io/
メニューバーに常駐して、GitHubの通知を教えてくれるアプリ。https://github.com/notifications の内容をアプリ通知で飛ばしてくれる。

Mac上でメール以外の通知手段が欲しかったのでこれを導入しました。

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

 Homebrewhttps://brew.sh/index_ja
macのパッケージマネージャー。macの環境構築はこれを入れるところから始まる。
# `wget` をインストールする場合は以下のコマンドを実行
brew install wget

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

 clasphttps://github.com/google/clasp
ローカルからGoogle App Scriptのコーディング&デプロイを行えるツール。

ローカル開発時にTypeScriptで書けるようになるのがとても大きい（claspがTypeScriptをJSにコンパイルしてデプロイしてくれる）。

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

 ghqhttps://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と連携することでコマンド一つで「ローカルレポジトリ一覧を出す→レポジトリ選択してディレクトリ移動」を行うことができる。便利。

 fzfhttps://github.com/junegunn/fzf
CLI上であいまい検索＆選択が行えるツール。

zshにfunction追加 & zshキーバインディングでfunction呼び出しを設定するとさらに便利になる。

「fzf ghq」などでググると色々な方が設定例を紹介しているので調べると幸せになれるかも。

 jqCLI上で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
    }
  ],

 zpreztohttps://github.com/sorin-ionescu/prezto
zshのフレームワーク。テーマ機能でいい感じの見た目にできたりzshをカスタマイズできる。

 awsclihttps://aws.amazon.com/jp/cli/
CLI上でAWS操作が行える。AWS操作をスクリプトで自動化したり様々な応用ができる。

認証情報の管理に後述の aws-vault を介することをおすすめ。

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

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

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

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

 Auto Importimportを自動で入れてくれる。

 Bracket Pair Colorizerコード内のカッコの開始と終了のペアを同じ色にしてくれる。

※今はVSCodeデフォルトに含まれているっぽいのでインストール不要かも

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

 Code Spell Chekerコード内にTypoがあるとハイライト表示してくれる。恥ずかしいコミットを防げる神アドオン。

固有名詞がTypo判定されがちだが、範囲選択→右クリックメニューからホワイトリスト追加がすぐできる。

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

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

 HTMLHintHTMLコードの構文チェック。設定したルールに反すると警告表示をしてくれる。

これがあると閉じタグ忘れやスラッシュ抜けなどを防いできれいなコードを書く癖がつけられてよい。

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

 Live ServerHTMLファイルをボタン一つでローカルサーバーを立ち上げられる。

LiveReloadまでついているので最高。これないとWeb開発の効率が落ちる。

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

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

 Partial Diff2ファイルのdiff比較ができる。

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

 Prettierコード自動整形ツール。レポジトリ単位で設定を作ったりチームコーディングでの品質担保等が行える。必須。

ローカルで自身の設定は調整したほうが便利かと。

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

 TODO Highlightコード内にTODOコメントを残しておくとハイライト表示してくれるやつ。TODOそのまま残してしまうのを視覚的に防げる。

デフォルトだとTODO:, FIXME:のキーワードをハイライト表示する。（設定でいじれる）

 Trailing Spacesコード内の不要な半角スペースをハイライト表示してくれる。

これも汚いコードを書かない矯正ができるのでおすすめ。

 Chrome AddonGoogle Chromeの拡張機能。

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

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

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

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

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

 1Passwordブラウザ上にパスワード等をAutofillしてくれる。

 Stylus定義した条件でCSSを追加で当てることができる。ローカル環境、ステージング環境など環境ごとに一部の色を変えたりラベルを表示させて環境間違いがないように使っています。
Discussion

スズキサトシ
すごい多岐にわたってていい記事ですね！
Clipyって時々クラッシュしませんか？ Pastebotの方が同じ用途でより洗練されてるように見受けられるので、ご参考までに。
nabeyang
ご存じかもしれませんが、Sequel Proの後継Sequel Aceを紹介します。
ご覧の通り、開発は継続されています。