Web アプリケーション開発エンジニアのための "開発生産性を向上させる" ツールたち for Mac
Web アプリ開発のためのツールをまとめてみた
独断と偏見で厳選したツールたちを一挙に紹介したいと思います！！！！
最初にいくつか注意事項をお伝えします。
- MacBook Pro を使用しているため、macOS で使えるツールが前提の選定です。
- 「良いモノには課金を」という信念があるので、一部有料のツールも含みます。
- JetBrains が好きなので、すべての IDE が使いたい放題という闇の契約を結んでいます。[1]
主に開発で使用するプログラミング言語は以下を想定しています。
- TypeScript -- フロント・バックエンド
- Rust -- バックエンド・CLI ツール
- Python -- サクッと・雑に何かしたいとき
なぜツールにこだわるのか
ツールにこだわる理由は 生産性向上のための第一歩 であると考えているからです。
優れたツールは開発者のために考え抜かれた素晴らしい機能を提供してくれます。
好きなツールだからこそ、ショートカットを覚えたり、自分好みにカスタマイズしてより使いやすくしたりしたいと思える。
「商売道具ぐらい、こだわって好きなモノ・良いモノを使っていこうぜ！」と思っています🫶
山とコード's Tools
それでは、私が愛用しているツールたちを紹介していきます✊✨
IDE - 総合開発環境
RustRover
まず、Rustacean の端くれとして RustRover は欠かせない IDE となりました。
冒頭でも述べたように、JetBrains が好きなので IDE は JetBrains 製品を好んで使っています。
RustRover がリリースされる前は IntelliJ IDEA + Rust プラグインで Rust を書いていました。
なお、RustRover には 30 日間無料体験版の評価ライセンスキーが含まているので、まだ試したことのない方はぜひ試してみてください！
JetBrains IDEs はプログラミング言語ごとに最適な IDE が用意されています！
お気に入りの IDE を見つけてください💁♂️💁♂️
JetBrains プラグイン
JetBrains IDE のプラグインでメインどころをピックアップしました。
JetBrains AI Assistant は有料契約が必要です。
レビューを見ていると、Github Copilot や Cursor の方が優れているという投稿が多く評価が異常に低いです...。
たしかに Github Copilot の方が使いやすい、正確かも？というところがあります。
ここは今後に期待ということで！
コードエディタ
Visual Studio Code
コードエディタといえば、Visual Studio Code でしょう。
使い慣れてしまったので、もうこれで良いかなという...。
ただ、新しいツールには興味があるので、ウォッチは怠っていません！！！！
AI Code Editor を謳う VSCode ベースの Cursor というエディタも勢力を拡大していますが、
自分の場合はメインで JetBrains IDEs を愛用しているため乗り換えに至りませんでした。
良いという評判も聞くので、気になる方は要チェックです！！！
新世代コードエディタたち
上述した Cursor も含めて、新世代コードエディタたちも続々と登場しています。
- Cursor -- VSCode ベースの AI Code Editor
- Zed -- Atom 後継と言われる高速が売りの Rust 製エディタ
- Helix -- Rust 製の CLI エディタ
- Lapce -- 高速・軽量の Rust 製エディタ
- Fleet -- JetBrains 製のクラウド開発環境である Space と接続できるエディタ
- Haystack Editor -- VSCode ベースのキャンバス上にコードを表示できるユニークなエディタ
高速に動作することを売りにしているエディタは Rust で実装されていることが多いです。
個人的には Rust のユースケースとして注目しています。
Zed については LT で紹介したことがあるので、良ければ見ていってください！
Rust 製エディタ Zed を布教したい
また、コードエディタではないので余談ですが、
SmoothCSV という CSV エディタ も Rust で再実装が行われているそうです。
VSCode 拡張機能
VSCode の拡張機能もメインどころをピックアップしました。
Catppuccin Icons for VSCode は非常に可愛いアイコンなので、おすすめです😽
Rainbow CSV も CSV を扱う機会がある方にはおすすめの拡張機能です。
Web アプリ開発しているとそれなりに登場しますよね... CSV...。
なお、上記以外に Rust や Python に関する拡張機能も入れています！
サクッと書きたいときなど、やはり VSCode が便利です。
(Python は PyCharm でも良いんですが、登場機会は少ないです...)
テーマとフォント
ツールに関連するところで、自分はテーマやフォントもこだわっています。
見た目の統一される方が心地良いので、ほぼ全てのツールのテーマとフォントはこの組み合わせにしています。
Dracula PRO
Dracula PRO は Dracula テーマの有料版です。
Dracula テーマはメジャーなテーマなので、ご存知の方も多いのではないでしょうか！
JetBrains Mono
JetBrains Mono は JetBrains が開発したオープンソースの等幅フォントです。
JetBrains Monoの書体の形はシンプルで、不必要な装飾はありません。テキストが小さなフォントサイズで描画されていても、より鮮明に見えます。
形状がシンプルなほど目がより迅速に形状を認識できるようになり、脳が形状を処理するのに必要な労力が少なくなります。
エンジニアとして、目には配慮しましょう🥸
データベースクライアント
DataGrip
JetBrains から DataGrip の登場です。
RustRover などの IDE にも DB クライアントの機能は備わっているので、All Products Pack を契約から使ってみるようになりました！笑
DBeaver
DataGrip 単体で契約するのは、JetBrains ファンの私でもなかなか勇気が必要です...。
そこでおすすめなのが、DBeaver です。
DBeaver も便利なツールで、正直これで十分すぎるレベルではあります。
嬉しいことに DBeaver Community 版であれば、無料で使うことができます。
HTTP クライアント（GUI・CLI）
JetClient
バックエンドの開発中は JetBrains IDE のプラグイン である JetClient を使っています。
開発中にシームレスに REST API の検証ができるので便利です。
VSCode の場合は以下の拡張機能が選択肢に挙がるでしょうか。
Postman
HTTP クライアント単体で使いたいケースも多いので、そんなときは Postman の出番です！
非常に多くの機能を備えているので、まだまだ勉強中のツールの 1 つです。
HTTPie
CLI でサクッと操作したいというケースもありまして...
HTTPie の CLI をインストールしています。
https というコマンドが cURL よりも便利で重宝しています。
ノート・メモ帳
Heynote
今回、最もおすすめしたいツールがこの Heynote です！！！！
無限スクロールのように動作し、⌘ + エンター でブロックを分割ことができます。
開発者のためのツールを謳っているので、プログラミング言語のハイライトにも対応しています！
ちなみに、JetBrains からは Writerside というマークダウンエディタが登場しています。
早期アクセスプログラム実施期間中は Writerside は無料で使うことができます！
ターミナル（コマンドライン）
Warp
長らく iTerm2 を使っていましたが、Warp に乗り換えました。
コマンドの補完が強力で、自分で打ち込むこと必要がありません。
コマンドを AI に尋ねることもできます。
また、現在のブランチやコードの変更差分の数など、Git の情報も表示してくれます。
CLI ツール
ぜひとも Warp で使ってほしい CLI ツールです！
ripgrep
grep の代替コマンドです。
Rust で実装されており、非常に高速に動作します！
bat
bat は cat の代替コマンドです。
シンタックスハイライトが効き、Git の情報も表示してくれます。
CLI で操作中に、パッとファイルの中身を確認する際に便利です！
Rust のファイルを表示してみました。
doggo
doggo はコマンドライン DNS クライアントで、dig などの代替コマンドとして使うことができます。
Warp で doggo を使ってみるとこんな感じです！
procs
procs は ps の代替コマンドです。
色付きの表示で見やすく、検索等も可能です。
複数のアプリケーションをデバッグしていて、ポートが使われているというエラー遭遇した際に使用していました。
zoxide
zoxide（z と zi）は cd の代替コマンドです。
本来 cd /works/mocks-storage/ と入力しないとディレクトリを移動できないケースでも、zoxide を使えば z mocks-storage で移動することができます。
これは zoxide がディレクトリへの移動頻度を記憶してくれているため、mocks-storage を指定するだけで移動できるのです。
また、zi を使うことで記憶されたディレクトリを選択して移動することができます。
ランチャーアプリ
Raycast
Mac 用のランチャーアプリ Raycast も非常に便利です。
以下のような、様々なことができます。
- アプリケーションの起動
- ファイルの検索
- スニペットの管理
- クリップボードへのアクセス
- Store から拡張機能の追加
便利ツール
生産性向上に寄与しているである便利なツールを紹介します。
Rectangle
Rectangle はアプリの移動やサイズ変更をショートカットでできるようにするツールです。
ウルトラワイドモニターを使っているので、Chrome や IDE を移動させたりサイズ変更したりして開発できるので便利です。
Shottr
Shottr はスクリーンショットツールです。
撮影したスクリーンショットをピン留めできたり、テキスト認識ができたりと非常に高機能なツールです。
Web アプリ
Tree Editor
ブックマークして使っていた開発者向けの Web アプリ・サイトも紹介します！
Tree Editor はディレクトリ構成を共有する際や Zenn の記事に記載する際などに活用しています。
こんな感じで、コピペできます。
my-app
├── src
│ └── index.ts
└── README.md
Web ToolBox
Web ToolBox は開発者向けのツールを提供してくれています。
以下のツールが個人的によく使うツールたちです。
- 文字数カウンター
- パスワードジェネレーター - 様々な形式でセキュアなパスワードを一括生成
- ULIDジェネレーター
- JSON整形・リント - オンライン上のJSON整形・構文チェックツール
- Base64エンコード
- JWTデコーダー
Google Chrome 拡張機能
Google Chrome 拡張機能もざっと紹介します。
- Acid Tabs -- 開いたタブのグルーピング
- Clear Cache -- キャッシュ削除
- CopyTabTitleUrl -- Web サイトのタイトルと URL をクリップボードにコピーできる
- JSON Formatter -- JSON を整形
- React Developer Tools -- React 触るなら入れとくべき
- Wappalyzer -- 技術スタックをチェック
- ブックマークサイドバー -- 増えるブックマークの管理を最適化する
JSON Formatter は以下のように、JSON のレスポンスを綺麗に表示してくれます。
CopyTabTitleUrl は以下の 2 パターンが特に重宝しています。
同時に title と URL をコピーできる：記事を共有する際に。
Rust on Rails!? Rust 版の Rails と呼ばれる "Loco" を試す！
https://zenn.dev/collabostyle/articles/45762b07bc16fb
マークダウンのフォーマットでコピーできる：Zenn に記事を載せる際に。
[Rust on Rails!? Rust 版の Rails と呼ばれる "Loco" を試す！](https://zenn.dev/collabostyle/articles/45762b07bc16fb)
Chrome 拡張機能も生産性向上に欠かせない部分だなと思います🔥
まとめ
以上！おすすめのツールたちでした！
「これも良いよ！」というものがあれば、ぜひコメントで教えてください🤝✨
Happy Hacking 🥳🥳🥳
P.S. JetBrains のまわし者ではございません。ただのファンです。
Discussion