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

本業ではプロダクトエンジニア(フルサイクルエンジニア)としてフロントエンドからインフラまで幅広めのマルチファンクショナルかつ、本業以外ではモバイルアプリの開発などもしている @ruwatana です 🙂

巷では「フルスタックエンジニア 笑」だったり「器用貧乏」なんていわれるようなこともある業務をしている自分ですが、普段開発周りで使用しているツールやExtensionなどを紹介しつつ、なぜ使用しているのかも合わせて説明します。
基本的にミニマル志向なので、玄人な方からすると発見は薄いかもしれませんが、逆にいえばEssentialなものばかりなのでどれも導入すれば役に立つこと間違いないので、試しに導入して威力を知っていただきたいです。
見つけて試し次第、有用なものは随時更新していきます。
皆様にとって一つでも発見があれば幸いです！(FBあれば喜びます)

🔧 使用しているツールや設定

PCと周辺機器

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

Webアプリケーションの動作確認で他のブラウザを使うこともありますが、基本的にはこの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)

• Visual Studio Code
  • 基本的にExtensionが優秀かつ言語によってIDEを入れ替えるのも煩雑なので完結できる場合はVSCodeの利用を優先します
  • 利用している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をご覧ください）

🧩 VSCode Extensions

まずは全般的に使える便利なExtensionsです。

• Live Share
  • 業務時のペアプロやモブプロに必須です
  • Guestが Quick Fixes ( Cmd + . ) を利用できるように、設定で Allow Guest Command Control を有効にしています
    
• GitHub Copilot
  • これがないと開発ができない身体になってしまいました 😇
  • 有料ですが、エンジニアで利用しない手ははっきり言ってないレベルです
  • 全適用は Tabキー で、部分適用は Cmd + → です
  • Trigger Suggest のKeyboard Shortcutをカスタム定義（ Shift + Space ）して、Copilotによるインラインとポップアップのサジェストを使い分けられるようにしてます
• GitHub Copilot Chat
  • Chat-GPTのように使ったり、Quick Fixesで使ったりします
  • プロンプト次第では、めんどくさい整形作業などもいい感じにやってくれるのでおすすめです
• 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でも、ほぼ同じことができると思います

Documentation

Notionや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

• 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カレンダーなどを統合的に管理できるのが便利です

最後に

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