🛠️
フルスタックエンジニア風が愛用しているツールや設定環境を晒してみる【随時更新】

2024/03/13に公開
エンジニア
本業ではプロダクトエンジニア(フルサイクルエンジニア)としてフロントエンドからインフラまで幅広めのマルチファンクショナルかつ、本業以外ではモバイルアプリの開発などもしている @ruwatana です 🙂
巷では「フルスタックエンジニア 笑」だったり「器用貧乏」なんていわれるようなこともある業務をしている自分ですが、領域にこだわらず、ものづくりに必要な開発の全てを担うという本質的な職種なのでとても好きです（もちろん特定の技術を深く掘るのも好きなんですが）。そんな自分が、普段開発周りで使用しているツールやExtensionなどを紹介しつつ、なぜ使用しているのかも合わせて説明します。

基本的にミニマル志向なので、玄人な方からすると発見は薄いかもしれませんが、逆にいえばEssentialなものばかりなのでどれも導入すれば役に立つこと間違いないので、試しに導入して威力を知っていただきたいです。

見つけて試し次第、有用なものは随時更新していきます。

皆様にとって一つでも発見があれば幸いです！(FBあれば喜びます)

 🔧 使用しているツールや設定
 PCと周辺機器
MacBook Pro 14 inch
携帯性と実用性を兼ね備えたサイズ感だけでなく性能も使い勝手も文句なし
かれこれ10年以上Appleのエコシステムを愛用し続けているため離れる理由が見つかりません
USキーの方が何かと都合が良いことが多いです
後述のiOS Simulator上でソフトウェアキーボードを動かす際もデフォルトだとUS配列で認識されたりします

iPad
ほぼストリーム配信垂れ流し用の小型モニタと化していますが意外と持っていると有能です
ちょっとメモしたい時にApple Pencilで手書きしたりもします
Macのサブディスプレイ(Sidecar)としてもWireless対応で特に移動先などで有能です

LG 27BP85UN-W (USB-C PD対応4Kモニタ)
USB-C PD対応の4Kモニタであればなんでも良いかなと思います
Ergotronのモニターアームに取り付けて使っています
サブディスプレイがあると大きな領域にウィンドウを描画できるので何かと作業が捗ります
2枚あるとさらに良いでしょう（筆者はiPad Proで代用してます）
ウルトラワイドディスプレイも良いのですが、画面共有する際に見にくくなってしまったりする点を考慮して採用していません

MacのRetina Display (5K)に慣れてしまうと、Full HDやWQHDのような解像度のモニタで文字を見ると滲んでしまい、眼精疲労の原因にもなりうるので4K以上を強くお勧めします

　　- 逆にいえば、そういったモニタしかないオフィスやコワーク環境では、あえてサブディスプレイは使わないことが多いです
USB-C PD (給電) に対応していると電源とモニタ出力がケーブル１本で完結するのでデスクがとても綺麗になります
SwitchやiPadなども充電しながら出力できるので便利です

Belkin 3 in 1 ワイヤレス充電機
iPhone, AirPods, Apple Watchの三種の神器が載せるだけで充電できます
新しいモデルではMagSafeに対応していてiOS 17のスタンバイモードとの親和性がよくインテリアとしても良いので買い替え検討中です
https://www.belkin.com/jp/P-WIZ009.html

FlexiSpot e8
足場もしっかりしつつ、自動昇降/キャスターつきで模様替えもしやすいです
引っ越しても天板だけ変えればリサイズが可能なことや、デファクトになりつつあるため、リセールバリューもあるといった点も魅力です
既製品の竹製天板を使用していますが、木製天板おしゃれです

こんな感じ。

 dotfiles後述するMac上のCLIツールやAppおよび設定は基本的にgitの dotfiles リポジトリ上でコード管理しています。

これによって、PCを買い替えてもコマンド実行するだけでほぼ同じ設定環境を再現できます。

 Shell
Zsh
Macに標準搭載されているシェルです
git操作など諸々のオペレーションに必須です
詳しい設定は、 dotfiles の .zshrc で管理しています
利用しているプラグインは後述します

iTerm 2
ターミナルAppとしてはフルスクリーンでオーバーレイ表示ができるiTerm 2を利用しています
設定方法は、前に書いたQiitaの記事を参照

IDEに付属されてるターミナルからzshを使うこともあります
ログ上のファイルパスへのCode jumpができるなど便利な面があります

 🧩 Zsh plugins基本的に、このプラグインは黙って入れていいレベルでおすすめです！

ちなみに筆者は zplug を使ってzshのpluginを管理しています。
※ Copilot for CLI をまだちゃんと使いこなせてないのですが文脈を認識して適切な補完を出してくれるような拡張があると下記は代替されそうな未来を感じます

zsh-completions
Tabキーでさまざまなコマンドの補完が出せるようになります

zsh-syntax-highlighting
実行可能コマンドをsyntax highlightしてくれるので有効or無効が視覚的に判断できます

zsh-autosuggestions
直近使用したhistoryを元に、入力コマンドの補完を表示してくれるようになります
右矢印キーで補完を適用できます
AIを使ったサジェストに対するIssueもあり、今後のアップデートに期待です
https://github.com/zsh-users/zsh-autosuggestions/issues/736

zsh-history-substring-search
入力中のコマンドの補完を遡ることが可能になります
bindしているkeyは戻る(^P)、進む(^N)でそれぞれ設定して使用しています
zshに標準搭載されているCtrl + Rのback incremental search (bashではreverse incremental search）に似た機能ですが、コマンド入力中に遡れるのが強力です

 Command line tools
Homebrew
MacのPackage manager
CLIツールはもちろん、Caskを使うことでMac Appも管理が可能です
dotfiles にて .Brewfile を定義しつつHomebrew自体のセットアップから自動化しています

mas
Mac AppStore上のAppをHomebrewで管理するために使用

asdf
各開発言語の仮想バージョン管理に使用しています
職種上、触る言語が多いですがほとんどのローカル環境がこれで完結できるのでおすすめです
Golang, Node.js, Java, Flutter, Python　など

.tool-versions をgit管理することでプロジェクトごとの言語バージョンも共有できます
以前は anyenv を使用していましたが、こちらの方が充実しててお手軽なので推してます

GitHub CLI
標準のgitコマンドによる操作からPRの提出までCUIで一貫できるのが便利
GitHub Actions のworkflowの作成や実行、管理も可能です

gitmoji
Commit MessageにEmoji prefixを強制できるので個人開発などで使っています

direnv
プロジェクトごとの環境変数管理に便利です

jq
jsonの整形やgrepなどに使用。標準のcurlと組み合わせて使うことが多いです

Firebase CLI
ローカル上でのクレデンシャル管理を隠蔽できるので便利

Cloud SDK
Google CloudのCLI。なぜかHomebrew Caskで入れないといけないですが基本的にCLIとして利用

Terraform CLI
Infrastructure as a CodeなTerraformのCLIツールです
ローカルでのplanやimportなどの際に利用

 Web BrowsingWebアプリケーションの動作確認で他のブラウザを使うこともありますが、基本的にはこの2つで、業務ではChromeを使いつつ、プライベートではSafariという使い分けをしていて、勤務中と勤務外でブラウザのデフォルト設定を入れ替えて使ったりしています。

Google Chrome
Web開発者としては、Dev toolがとても優秀なのでメインで使用
利用しているExtensionsは後述します

Safari
標準搭載
iCloudを用いた設定のsyncやSMS認証時のコードのSuggestなどが非常に便利

 🧩 Chrome Extensions
DeepL翻訳
テキストをドラッグして選択状態にするとフロートのボタンが出てくるので翻訳作業が捗ります

URL をクリップボードにコピー
右クリックでページのURLをTitleとともにHyperlinkやMarkdownとしてコピーできるのでSlackに貼り付ける際などに重宝します
余談ですがこれがSafari拡張にも欲しくなって、自分で作りました 笑
Copy Link to Pasteboard

React Developer Tools
ReactのComponentのDebugをするのに利用します

GraphQL Network Inspector
GraphQLのschema情報をDebugするのに便利

 Editor (IDE)
Cursor 2024/06更新 ✨
AIが強化されたVisual Studio Codeで、ほぼ全ての機能に互換があるため、こちらに乗り換えました
****最も大きな差分としては、VSCodeのGitHub Copilotでは行末付近にカーソルを合わせた時しかうまく補完してくれませんが、Copilot++というCursor独自の機能を用いることで、行頭でもしっかり補完が効き、その補完の類似箇所の変更提案もしてくれます
この機能を最大限に生かすため、LLMサービスのAPI Keyの用意またはCursorの有料プランに加入するのが良いと思います

基本的にExtensionが優秀かつ言語によってIDEを入れ替えるのも煩雑なので完結できる場合はこちらの利用を優先します
利用しているExtensionsは後述します

IntelliJ IDEA
KotlinなどJetBrains製IDEの方がDXがいい場合のみこちらを使います

JetBrains Toolbox でバージョン管理しています

Android Studio
Android Nativeを開発することはないですが、Flutter開発時のEmulatorやAndroid SDKのインストールのために使用します
こちらもJetBrains Toolboxでバージョン管理しています

Xcode
iOSの開発やSimulatorを用いた検証のために使います
Simulatorは録画(GIFアニ出力も対応)も簡単にできるのでそれだけでも入れておく価値があります

Xcodes でバージョン管理しています

Vim
標準搭載。Shell上での簡単なテキストの編集やGitのコンフリクト解消などに使用します
Vimmerではないので使用しているプラグインとかは割愛します（興味ある方はdotfiles内のvimrcをご覧ください）

 🧩 Cursor / VSCode ExtensionsまずはCursorやVSCodeで全般的に使える便利なExtensionsの紹介です。

Copilot++ (Cursor限定)
進化したCopilot。Tabを押しているだけで知らない間に修正が終わっています。

GitHub Copilot
これがないと開発ができない身体になってしまいました 😇
有料ですが、エンジニアで利用しない手ははっきり言ってないレベルです
全適用は Tabキー で、部分適用は Cmd + → です

Trigger Suggest のKeyboard Shortcutをカスタム定義（ Shift + Space ）して、Copilotによるインラインとポップアップのサジェストを使い分けられるようにしてます

GitHub Copilot Chat
Chat-GPTのように使ったり、Quick Fixesで使ったりします
プロンプト次第では、めんどくさい整形作業などもいい感じにやってくれるのでおすすめです

Live Share
業務時のペアプロやモブプロに必須です
Guestが Quick Fixes ( Cmd + . ) を利用できるように、設定で Allow Guest Command Control を有効にしています

Better Comments
TODO / FIXME / !!! などのコメント行が独自のSyntax highlightが効くようになって目に留まりやすくなるのがお勧めです

indent-rainbow
indentの階層が視覚的にわかりやすくなります

Code Spell Checker
typo防止用に使ってます（手動でのIgnore管理が多少煩雑です）

Git Web Links for VS Code
Focusしてるコード上のGitHub上でのlinkをコピーしてくれます

Cmd + Ctrl + L でコピーできます
Commit Hashによるlinkのため、GitHubのPRやSlack上に貼ると展開できるので必須級です

GitLens
Focusしている行のBlameやcommit logが参照できて便利です
逆にいうと他の機能は使いこなせてません

GitHub Actions
workflowのyamlファイルでsyntax highlightのために利用

Docker
DockerfileのSyntax highlightのために利用
VSCode上からGUI的にImageの操作も可能なようですが使いこなせてません

Makefile Tools
MakefileのSyntax highlightのために利用

Rainbow CSV
csv/tsvのSyntax highlightのために利用

ここからは使用する技術によってかなり差異があると思いますので、興味のあるもののみご覧ください

 Web Frontend系
ESLint
ts/tsxファイルなどのLinter設定のために利用
コード上に警告やエラーが表示されるようになります

Prettier
Formatter設定のために利用
settings.jsonの editor.defaultFormatter と editor.formatOnSave を併用することでファイル保存時に自動フォーマットを実現できます

HTML CSS Support
CSSのIntelliSenseのために利用

CSS Modules
CSS Modulesを利用したコンポーネントのautocompleteのために利用

Stylelint
CSSファイルのLinter設定のために利用

Tailwind CSS IntelliSense
その名の通りで、TailwindのIntelliSense機能を提供
独自トークンなども補完が効くようになります

GraphQL: Language Feature Support
graphqlファイルのcompletionなどのために利用

GraphQL: Syntax Highlighting
graphqlファイルのSyntax highlightのために利用

Apollo GraphQL
Apolloクライアントのgql定義時のautocompleteとCode jumpに利用

Import Cost
import した依存のサイズプレビューをエディタ上で見ることができて意外と便利です

 App Frontend系
Dart
dartファイルのSyntax highlightのために利用

Flutter
Flutter関連の統合サポートやdebuggerのために利用

Swift
一応ありますが、lang serverの動作が怪しくCode jumpなどがうまく動かない場合もあるので基本的にXcodeを使うのが無難です

Kotlin
ktファイルのSyntax highlightのために利用
lang serverの動作が怪しくCode jumpなどがうまく動かない場合もあるので基本的に純正となるJetBrainsのIntelliJなどを使うのが無難です

 Server-side系
Go
Go言語の統合開発環境のために利用
合わせて、Go Toolsもインストールして使っています

HashiCorp Terraform
tfファイルのSyntax highlightのために利用

Protobuf (Protocol Buffers)
protoファイルのSyntax highlightのために利用

Buf
ProtobufファイルのBufによるFormatter/Linterとして使用してます

Python
Pythonの統合開発環境のために利用

Pylance
Pyrightによるさまざまな恩恵を受けるために利用

MyPy Type Checker
PythonのType Hint周りのLinterとして利用

Ruff
PythonのFormatter/Linterとして利用

 Development
Docker Desktop
主にローカル開発環境の構築のために利用してます
GUIでImageやBuildとかもえつらんして消せるのでコマンド覚えられない自分は頼りっぱなしです

Postman
エンドポイントの実装時や外部APIの動作確認に使用します
GraphQLやgRPCに対応しているのが良いです
curlコマンドのimport/exportも可能なので時と場合で使い分けます

DataGrip
JetBrains製のDBクライアントです
さすがに有料だけあってこれがあるのとないのとでは、大きな作業効率の違いが生まれます
30 daysのトライアルが可能なのでまずは使ってみるのをお勧めします

たとえば特定のレコードの特定のカラムを1つ更新するだけでもSQLを書くよりは格段に速いです
カラーリングで環境ごとの接続状況を可視化できます
WhereやOrder byの設定も残ったり、CRUDのSQLやCSVなどのさまざまなフォーマットでのコピーも可能など非常に多機能です

Gitify
GitHubの通知用Appです
GitHubには純正のSlack Appによる通知もありますが、Slackはあくまで会話をするための通知として受け取りたいため、あえて通知を分けられるこちらを利用しています

主にレビューのレスポンス速度向上と失敗したCI検知のために使用しています
失敗したCI通知のみ受け取りたい場合はGitHubのSettingも変更しましょう

https://github.com/settings/notifications

Charles
MacやiPhoneの通信をキャプチャしたい時に使用します
MacをVPNに繋げてる際にプロキシとして利用すればiPhoneにも設定なしで適用できるなどの使い方も可能です

Proxymanでも、ほぼ同じことができると思います

 DocumentationNotionやMiro、Figma、GSuiteなどはWebブラウザ上から利用します。(ので割愛)

Markdownの編集はVSCodeを使って行うことが多いです。

Keynote
実質標準搭載
勉強会、LTなどのスライドの作成に利用

メモ.App
標準搭載
最も簡易的なメモに利用
チェックマークをつけられたり、共有メモとして複数人同時編集できたりと意外と高機能です
iPadで手書きで書いたメモをPCで表示させるなどの使い方も簡単です

 Communications
Slack
対人もbotもwebhookも公私共にチャットコミュニケーションは基本Slackに集約しています
業務時は一日中huddleにいてオンデマンドでボイスチャットや画面共有をします

Discord
界隈のコミュニティの情報収集やゲームをする場合に利用します
Slackと違い、無料版でも過去の投稿を遡れるため、こちらを採用するケースもあります

X (formerly Twitter)
TLでの技術トレンド把握やリアルタイム情報やニッチな情報の検索などに

Zoom
おもにWebinarへの参加に使用します

 Others
ChatGPT
ChatGPTのDesktop版(Mac)アプリ
Spotlightのようにショートカットによる対話が可能なのが大きいです
小ウインドウで対話できたりなど日々便利になっています

Skitch
Screenshotした画像に枠や脚注を加えたい時にとても重宝します
モザイクも簡単にかけられるのが便利です
ひと工夫加えてからSlackやNotionに貼るだけで一層伝わりやすくなります

Rectangle
サブモニタを併用している時のウィンドウ移動やサイズ変更のショートカットが便利です
プリセットの設定のままで使っています

DeepL

Cmd + C 2回押下するとクリップボードの内容を翻訳してくれます
ブラウザではChrome Extensionを使用し、それ以外はデスクトップ版のアプリを併用してます

Spotify
ソロ作業時のお供に
モバイル版とは違い、なぜかMac App版では無料版でも好きな曲を再生できます

Digital Color Meter
標準搭載。画面上のカラーコードを調べる際に利用します

Quick Time Player
標準搭載。画面の収録やiPhoneの画面を投影（画面共有）する際に利用します

カレンダー.App
標準搭載
公私の予定の管理と通知のために利用しています
アカウントを複数統合的に管理できてiPhoneとも同期できるのが便利です
iCloudカレンダーやGoogleカレンダーなどを統合的に管理できるのが便利です

 最後に以上となります！

他のツールや設定などで、これだけは入れておいた方がいいものなどあればコメントで教えていただけると幸いです 🙏