フロントエンド開発を高速化する5つのターミナルコマンド

Dec 13, 2025 · 3 min read

数百のコンポーネントを含むReactプロジェクトの奥深くで作業しているとします。特定のフックをインポートしているすべてのファイルを見つけ、先週書いたユーティリティ関数を探し出し、昨日実行したビルドコマンドを思い出す必要があります。フォルダをクリックして回ったり、ブラウザの履歴をスクロールしたりすることは、積み重なって数時間になる無駄な時間を生み出します。

これら5つのコマンドがそうした問題を解決します。ビルドツールやフレームワークのスキャフォールディングではなく、大規模なコードベース内で検索、ナビゲーション、そしてより効率的な作業を支援する高速なCLIワークフローです。

重要なポイント

Ripgrep(rg)は、標準のgrepよりも高速に数千のファイル内容を検索し、自動的にnode_modulesを無視して.gitignoreを尊重します。
fzfは、部分的な名前を入力してファイルを見つけられるインタラクティブなファジー検索を提供し、正確なパスを覚える必要をなくします。
Ctrl+Rはシェル履歴から以前に実行したコマンドを検索し、fzfと組み合わせることでビジュアルなファジー検索にアップグレードできます。
fdは、ファイル名パターンでファイルを見つけるための、従来のfindコマンドよりもシンプルな構文を提供します。
treeとezaは、ディレクトリ構造を階層的に表示し、プロジェクトのレイアウトを一目で理解できるようにします。

1. Ripgrep:プロジェクト内の高速テキスト検索

解決する問題: 数千のファイル全体で、prop、関数、またはインポートを参照しているすべてのファイルを見つける。

標準のgrep -Rは機能しますが、ripgrep(rg)は劇的に高速です。自動的にnode_modulesを無視し、.gitignoreを尊重し、デフォルトで再帰的に検索します。

rg "useState" --type js

これにより、プロジェクト内でuseStateを含むすべてのJavaScriptファイルが見つかります。コンポーネントが特定のpropを受け取っている場所を見つける必要がありますか?このような検索とナビゲーションコマンドは、数分ではなく数秒で完了します。

プロのヒント: -lを追加してファイル名のみをリスト表示するか、-C 2で各マッチの前後2行のコンテキストを表示します。

2. fzf:あらゆるもののためのファジー検索

解決する問題: 名前の一部しか覚えていないときにファイルを開く。

fzfは、プロジェクトのナビゲーション方法を変革するインタラクティブなファジーファインダーです。数文字入力するだけで、数千のファイルを瞬時にフィルタリングしてマッチを表示します。

fzf

btncompと入力し始めると、src/components/ButtonComponent.tsxが見つかります。ファジーマッチングにより、正確なパスを覚えるという精神的負担がなくなります。

エディタ統合: 結果を直接エディタにパイプします:

code $(fzf)

3. Ctrl+Rによる拡張履歴検索

解決する問題: 数日前に実行した長いコマンドを思い出す。

すべてのシェルはコマンド履歴を保存します。Ctrl+Rを押して入力を開始すると、履歴を逆方向に検索できます。これは、複雑なビルド、テスト、またはデプロイコマンドを実行するフロントエンド開発者にとって不可欠です。

# Ctrl+Rを押して、「build」と入力
# 見つかる: npm run build:prod --env=staging

パワームーブ: fzfをインストールすると、Ctrl+Rが自動的に履歴全体のビジュアルなファジー検索にアップグレードされます。先月の難解なwebpackコマンドも数秒で見つかります。

シェル互換性: BashとZshで動作します。FishはCtrl+Rを異なる方法で使用しますが、同様の機能を提供します。

4. fd:モダンなファイル検索

解決する問題: 難解なfind構文を覚えることなく、名前パターンでファイルを見つける。

従来のfindコマンドは機能しますが、冗長なフラグが必要です。fdは、デフォルトで隠しファイルとnode_modulesを無視する、よりシンプルで高速な代替手段です。

fd "\.test\.js$"

これにより、プロジェクト内のすべてのテストファイルが見つかります。最近作成した設定ファイルを見つける必要がありますか?

fd config --type f --changed-within 1week

これらのコマンドは、未知のコードベースを素早くナビゲートするのに役立ちます。

5. treeまたはeza:明確なディレクトリ構造

解決する問題: フォルダをクリックして回ることなく、プロジェクトのレイアウトを理解する。

新しいプロジェクトに参加したり、未知のパッケージを探索したりするとき、構造を一目で見ることが役立ちます。treeコマンドは、ディレクトリを階層的に表示します。

tree -L 2 -I node_modules

これは、node_modulesを除外して2レベルの深さを表示します。よりモダンな代替手段として、eza(exaの保守されている後継)は、gitステータス付きのカラー出力を提供します:

eza --tree --level=2 --git-ignore

クイックリファレンス

タスク	コマンド
ファイル内容を検索	`rg "pattern"`
名前でファイルを検索	`fd "pattern"`
ファジーでファイルを開く	`fzf`
コマンド履歴を検索	`Ctrl+R`
ディレクトリ構造を表示	`tree -L 2`または`eza --tree`

まとめ

1つのコマンドを選んで1週間使ってみてください。rgとCtrl+Rが最も早く効果を実感できます—ファイルを手動で検索したり、長いコマンドを再入力したりすることがすぐになくなります。

これらのツールは、フレームワークに関係なく、あらゆるフロントエンドプロジェクトで機能します。時間とともに複利的に効果を発揮する高速CLIワークフローの基盤を形成します。一度身につければ、これらなしでどうやって作業していたのか不思議に思うでしょう。

よくある質問

はい、5つのツールすべてがWindowsで動作します。Ripgrep、fd、fzf、ezaは、ScoopやChocolateyなどのパッケージマネージャーを介してインストールできます。treeコマンドはWindowsコマンドプロンプトに組み込まれています。最良の体験のためには、WSLまたはGit BashでWindows Terminalを使用することを検討してください。これらはこれらのツールがネイティブに感じられる、よりUnixライクな環境を提供します。

ほとんどのパッケージマネージャーがこれらのツールをサポートしています。macOSでは、brew install ripgrep fzf fd ezaのようなコマンドでHomebrewを使用します。UbuntuまたはDebianでは、一部のツールにaptを使用しますが、他のツールはGitHubリリースからダウンロードする必要がある場合があります。WindowsユーザーはScoopまたはChocolateyを使用できます。各ツールのGitHubページには、お使いのオペレーティングシステム向けの詳細なインストール手順が記載されています。

いいえ、これらのツールは大規模なコードベースでの速度のために設計されています。RipgrepとfdはRustで書かれており、パフォーマンスのために最適化されています。自動的にnode_modulesをスキップし、gitignoreファイルを尊重するため、不要なディレクトリのスキャンを防ぎます。ほとんどの検索は、数千のファイルがあるプロジェクトでも1秒未満で完了します。

はい、多くのIDEがこれらのツールと統合しています。VS Codeにはfzfとripgrep統合のための拡張機能があります。JetBrains IDEは内部的に同様の検索アルゴリズムを使用しています。ただし、ターミナルバージョンを学習することで、あらゆるエディタやリモートサーバーで一貫したワークフローが得られます。また、コマンド置換を使用して、これらのツールからの結果を直接エディタにパイプすることもできます。

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.