【エンジニアの日常】これが私の推しツール！〜日々の開発を豊かにするおすすめツール〜 Part1

こんにちは。

Findy で Tech Lead をやらせてもらってる戸田です。

突然ですが皆さんは、開発をするうえで欠かせないツールやOSSはありますか？

キーボードやマウス、マイクといった物理的なツールは机を見ればわかりますが、他のエンジニアがどういったツールを使って効率化しているかは、その人の画面を見ないとわかりません。

そのため、他のエンジニアがどういったツールを使って効率化しているのか、実は意外と知らないということが多いのではないでしょうか？

そこで今回は 推しツール紹介 と題して、弊社エンジニア達が日々の開発業務で愛用しているツールやOSSを紹介していきます。

それでは見ていきましょう！

推しツール紹介
- 戸田
  - git-cz
  - git-cz-for-api-developer
- 新福
  - Nx
  - vscode-spell-checker
- 森
まとめ

推しツール紹介

戸田

git-cz

まず紹介したいのがgit-czというツールです。

github.com

このツールはnpmのパッケージで、ステップに沿って選択、入力を行うことでコミットメッセージのフォーマットを統一することが可能になります。

パッケージをインストールしてコマンドを実行すると、cliで次のような出力が表示されます。

hoge@fuga Piyo % npx git-cz
cz-cli@4.3.0, @commitlint/cz-commitlint@19.2.0

? Select the type of change that you're committing: (Use arrow keys)
❯ feat:       A new feature 
  fix:        A bug fix 
  docs:       Documentation only changes 
  style:      Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 
  refactor:   A code change that neither fixes a bug nor adds a feature 
  perf:       A code change that improves performance 
  test:       Adding missing tests or correcting existing tests

ここでコミットの種類を選択します。

機能追加、バグfix、ドキュメント修正などの選択肢を選び、その後にコミットメッセージを入力すると、自動的にコミットメッセージが作成されます。

選択肢だけではなく、コミットメッセージの内容を入力するステップもあり、全部のステップを通ると自動的にコミットメッセージが作成されコミットを実行します。

hoge@fuga Piyo % npx git-cz
cz-cli@4.3.0, @commitlint/cz-commitlint@19.2.0

? Select the type of change that you're committing: docs
? What is the scope of this change? (See README for more details; e.g. project name): piyo
? Write a short, imperative tense description of the change: (max 188 chars)
 (13) update readme
? Provide a longer description of the change (press enter to skip):
 
? Are there any breaking changes?: No
? Does this change affect any open issues?: No
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[test-git-cz aaaaaaa] docs(piyo): update readme
 1 file changed, 1 insertion(+), 1 deletion(-)

弊社では各リポジトリに導入しており、コミット時に実行することでコミットメッセージのフォーマットの統一を行っています。

フォーマットが統一されているため、リリース時のリリースノートを自動生成したり、リリース内容の分類を自動で行ったりすることが容易になります。

git-cz-for-api-developer

git-czをForkして、API開発者向けにカスタマイズしたものもあります。

github.com

こっちのツールを利用してコミットメッセージを作成することで、SemanticVersionに対応したコミットメッセージを作成できます。

hoge@fuga Piyo % npx git-cz-api
? Select the release type of change that you're committing: patch:      patch update
? Select the type of change that you're committing: ✏️ docs:       Documentation only changes
? Write a short, imperative mood description of the change: 
  [-------------------------------------------------------------] 49 chars left
   patch-docs: update readme
? Provide a longer description of the change:
  fix hoge fuga
? List any breaking changes
  BREAKING CHANGE: 
? Issues this commit closes: 
[git-cz-test aaaaaaaaa] patch-docs: ✏️ update readme
 1 file changed, 1 insertion(+), 1 deletion(-)
hoge@fuga Piyo % git log
commit aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (HEAD -> git-cz-test)
Author: test <example@gmail.com>
Date:   Wed Jun 26 17:27:10 2024 +0900

    patch-docs: ✏️ update readme
    
    fix hoge fuga

弊社ではAPIを提供しているリポジトリで導入しています。

コミットメッセージのフォーマットが統一されているため、SemanticVersionに対応したリリースノートを自動で作成し。major updateがある場合に一目でわかるように仕組み化しています。

興味がある方は是非試してみてください。

新福

フロントエンドTech Leadの新福(@puku0x)です。好きなツールを発表します。

Nx

一番は何と言っても「Nx」です。社内のフロントエンド系のリポジトリのほぼ全てに導入しました。Nxのコア機能自体はフレームワーク非依存であるため、バックエンド系のリポジトリに導入される日もそう遠くないでしょう。

github.com

元々は前職でCRAに代わるツールを探していたことがきっかけで触れるようになりました。今ではCI高速化に欠かせない存在となっています。Nxはいいぞ。

余談ですが、Nxで作成したプロジェクトには、VS Code拡張として「vscode-jest-runner」が推奨されています。

github.com

ファイル単位でテストを実行できるので、Wallaby.jsと同じぐらい重宝しています。

Wallaby.jsをどのように活用しているか気になった方はこちらの記事もご覧ください。

tech.findy.co.jp

vscode-spell-checker

VS Code拡張については他にも「vscode-spell-checker」がオススメです。タイポの検出に一役買ってくれます。

github.com

設定を変更すれば、よくある英単語の他にも技術用語や固有名詞などもチェックできます。企業名やサービス名を登録しておけば早い段階でミスに気付けるため便利です。

{
  "version": "0.2",
  "language": "en",
  "ignorePaths": [],
  "dictionaries": [
    "en_US",
    "project-words",
    "softwareTerms",
    "misc",
    "companies",
    "typescript",
    "node",
    "html",
    "css",
    "bash",
    "npm",
    "powershell"
  ],
  "dictionaryDefinitions": [
    {
      "name": "project-words",
      "path": "./.cspell-project-words.txt",
      "description": "Project Words Dictionary",
      "addWords": true
    }
  ]
}

直近のPRでのタイポに心当たりのある方はぜひ導入しましょう。

森

2024年6月に入社しました森 @jiskanulo です。

できるだけキーボードから手を離さずに作業を続ける、という観点で私が利用しているツールをご紹介します。

Rectangle

Rectangle はウィンドウの移動、リサイズをキーボードショートカットやドラッグ移動で行うことができるMacOS用のアプリケーションです。

操作しているウィンドウをモニター左半分や右半分にリサイズする、最大化最小化をする、複数ディスプレイを接続している場合に別ディスプレイへ送る、ということができます。

私の場合は次のようにショートカットを設定しています。

ショートカット	ふるまい
Ctrl + Shift + Alt + h	ウィンドウをモニター左半分にリサイズ
Ctrl + Shift + Alt + l	ウィンドウをモニター右半分にリサイズ
Ctrl + Shift + Alt + j	ウィンドウをモニター中央半分にリサイズ
Ctrl + Shift + Alt + s	ウィンドウをモニター中央に配置
Ctrl + Shift + Alt + k	ウィンドウを最大化
Ctrl + Shift + Alt + ←	ウィンドウをモニター左上にリサイズ
Ctrl + Shift + Alt + →	ウィンドウをモニター右下にリサイズ
Ctrl + Shift + Alt + ↓	ウィンドウをモニター左下にリサイズ
Ctrl + Shift + Alt + ↑	ウィンドウをモニター右上にリサイズ
Ctrl + Shift + Alt + n	ウィンドウを次のディスプレイに移動する
Ctrl + Shift + Alt + p	ウィンドウを前のディスプレイに移動する

Hammerspoon

Hammerspoon はツール操作を自動化するためのMacOS用のアプリケーションです。

キーボードショートカットの組み合わせでアプリケーションを操作、alertの実行などをLuaを記載して定義できます。

主にターミナル Alacritty とメモツールの Obsidian を起動、最小化、最大化するショートカットを登録しています。

Gitの操作やコマンド実行したいときにAlacrittyを画面最大化しコマンドを実行終えたら最小化、メモを残しておきたいことがあればObsidianを起動してメモを記述し元の作業に戻る、というように使っています。

ショートカット	ふるまい
Ctrl + Command + 6	Alacrittyを全画面に表示、もう一度押すことで最小化
Ctrl + Command + 7	Obsidianを全画面に表示、もう一度押すことで最小化

Vimium

最後に Vimium です。これは名前の通りにViのキーバインドのようにキーボードだけでブラウザを操作するGoogle Chrome拡張機能です。

ページ上のリンク要素を表示してキー入力で開く、ブラウザ履歴の戻る進む、前後のタブに表示を切り替える、ブックマークを検索してタブを開くなどの操作が行えます。ブラウザ履歴の操作は標準のショートカットでも可能なのですが、Vimiumの設定で右手だけで無理なく操作が行えるようにしているのでインターネット閲覧が快適になります。とくにリンク要素の表示機能はマウスカーソルを細かく操作せずにリンク要素を開くことができるので重宝しています。

ショートカット	ふるまい
f	リンク要素の一覧を表示、さらに表示されたキーを押してリンク先に遷移
Shift + f	リンク要素の一覧を表示、さらに表示されたキーを押してリンク先を別タブで開く
Shift + h	ブラウザ履歴を戻る
Shift + l	前のタブを表示する
Shift + j	次のタブを表示する
Shift + k	ブラウザ履歴を進む

まとめ

いかがでしたでしょうか？

現在、ファインディでは一緒に働くメンバーを募集中です。

興味がある方はこちらから ↓ herp.careers