React開発でよく使うショートカットキー10選

Reactでアプリを作るとき、コードを書くのに時間がかかってイライラしたことはありませんか？

「マウスをあちこち動かして疲れる」「同じ作業を何度も繰り返している」「もっとサクサク開発したい」

こんな悩みを抱えている方も多いはずです。

実は、ショートカットキーを覚えるだけで開発スピードが劇的に変わります。この記事では、React開発で本当によく使うショートカット10選をご紹介します。

実際の使用場面やコード例も交えて分かりやすく解説するので、初心者の方でも安心です。ぜひ最後まで読んで、効率的な開発スタイルを身につけてくださいね！

なぜショートカットキーが重要なの？

まず、ショートカットキーがなぜ大切なのかを理解しましょう。特にReact開発では、その効果が顕著に現れるんです。

開発スピードが圧倒的に早くなる

ショートカットキーを使うと、こんな効果が期待できます。

時間の短縮効果

マウス操作が不要になる
手の移動が最小限で済む
連続した作業がスムーズになる

集中力の維持

画面から視線を外さずに作業できる
思考の流れを止めずにコードが書ける
エラーやバグの発見が早くなる

実際に使い始めると、その違いに驚くはずです。

React開発では特に重要な理由

React開発では、特にショートカットキーが威力を発揮します。

// コンポーネントの作成、編集、リファクタリングが頻繁
function UserProfile({ user }) {
    return (
        <div className="user-profile">
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <button onClick={handleEdit}>編集</button>
        </div>
    );
}

このように、コンポーネントの作成や編集が頻繁に発生します。リファクタリング作業も多いため、効率的なキーボード操作が必須なんです。

ショートカットキーを覚えることで、コードに集中できる時間が格段に増えますよ。

必須ショートカットキー：基本編

まずは、絶対に覚えておきたい基本的なショートカットをご紹介します。これらは毎日使うので、最優先で覚えてくださいね。

1. コピー・カット・ペースト

開発作業の基本中の基本です。

Windows/Linux

Ctrl + C : コピー
Ctrl + X : カット
Ctrl + V : ペースト

Mac

Cmd + C : コピー
Cmd + X : カット
Cmd + V : ペースト

React開発では、コンポーネントをコピーして新しいベースを作ることがよくあります。

// よく使う場面：コンポーネントのコピー
function Button({ children, onClick }) {
    return (
        <button onClick={onClick} className="custom-button">
            {children}
        </button>
    );
}

このButtonコンポーネントをコピーして、別のコンポーネントのベースにできます。

// コピーして作った新しいコンポーネント
function IconButton({ children, onClick, icon }) {
    return (
        <button onClick={onClick} className="icon-button">
            <span className="icon">{icon}</span>
            {children}
        </button>
    );
}

同じ構造のコンポーネントを一から書く必要がなくなるので、とても効率的です。

2. 元に戻す・やり直し

間違えても大丈夫！すぐに元に戻せます。

Windows/Linux

Ctrl + Z : 元に戻す
Ctrl + Y : やり直し

Mac

Cmd + Z : 元に戻す
Cmd + Shift + Z : やり直し

React開発では試行錯誤が多いため、このショートカットは本当に重要です。間違った変更をすぐに元に戻せるので、安心してコードを書けますよ。

「あ、間違えた！」と思ったら、迷わずCtrl + Zを押しましょう。

3. 全選択

ファイル全体を選択するときに便利です。

Windows/Linux

Ctrl + A : 全選択

Mac

Cmd + A : 全選択

ファイル全体をコピーして別のファイルにペーストする場合によく使います。

// ファイル全体を選択して、別のファイルにコピーする場合
const UserList = () => {
    const [users, setUsers] = useState([]);
    
    // 全体を選択してコピーし、新しいコンポーネントのベースにする
    return (
        <div>
            {users.map(user => (
                <div key={user.id}>{user.name}</div>
            ))}
        </div>
    );
};

このコンポーネント全体を選択して、新しいファイルの土台として使えるんです。

VSCode専用ショートカット：中級編

VSCodeでReact開発を行う場合の、より実践的なショートカットをご紹介します。これらを覚えると、開発効率がグッと上がりますよ。

4. ファイル検索

プロジェクト内のファイルを素早く見つけられます。

Windows/Linux

Ctrl + P : ファイル検索

Mac

Cmd + P : ファイル検索

React開発では多くのコンポーネントファイルを扱うため、このショートカットは必須です。

たとえば「UserProfile」と入力すると、関連するファイルが表示されます。

src/components/UserProfile.jsx
src/components/UserProfileCard.jsx
src/pages/UserProfile.jsx

マウスでフォルダを開いて探す必要がなくなります。とても便利なので、ぜひ覚えてくださいね。

5. 文字列検索・置換

コード内の特定の文字列を素早く見つけたり、一括で変更したりできます。

Windows/Linux

Ctrl + F : 現在のファイル内検索
Ctrl + H : 置換
Ctrl + Shift + F : 全ファイル検索

Mac

Cmd + F : 現在のファイル内検索
Cmd + Option + F : 置換
Cmd + Shift + F : 全ファイル検索

propsの名前を変更する場合によく使います。

// 例：propsの名前を変更する場合
function UserCard({ userData }) {  // userDataをuserInfoに変更したい
    return (
        <div>
            <h3>{userData.name}</h3>     // ← 全て置換
            <p>{userData.email}</p>      // ← 全て置換
        </div>
    );
}

Ctrl + Hで置換ダイアログを開いて、userDataをuserInfoに一括変更できます。手作業で一つずつ変更する必要がないので、ミスも減りますよ。

6. 行の複製

同じような行を複数作りたいときに便利です。

Windows/Linux

Shift + Alt + ↓ : 現在の行を下に複製

Mac

Shift + Option + ↓ : 現在の行を下に複製

似たような要素を複数作る場合によく使います。

// 例：似たような要素を複数作る場合
function FormFields() {
    return (
        <div>
            <input type="text" name="name" />
            <input type="text" name="name" />  // ← 上の行を複製
            <input type="text" name="name" />  // ← さらに複製
        </div>
    );
}

最初のinputを書いてから複製すれば、同じ構造の要素を素早く作れます。後からそれぞれのname属性を変更するだけなので、とても効率的ですね。

7. 行の移動

コードの順序を変更したいときに使います。

Windows/Linux

Alt + ↑ : 現在の行を上に移動
Alt + ↓ : 現在の行を下に移動

Mac

Option + ↑ : 現在の行を上に移動
Option + ↓ : 現在の行を下に移動

JSXの要素の順序を変更する場合によく使います。

// 例：JSXの要素の順序を変更する場合
function UserProfile() {
    return (
        <div>
            <h1>プロフィール</h1>
            <button>編集</button>      // ← この行を上に移動したい
            <p>ユーザー情報</p>
        </div>
    );
}

buttonの行にカーソルを置いてAlt + ↑を押すと、上の行と順序が入れ替わります。カット&ペーストする必要がないので、とてもスムーズに作業できますよ。

高度なショートカット：上級編

より高度で効率的なショートカットをご紹介します。これらを覚えると、プロレベルの作業効率が手に入りますよ。

8. 複数選択（マルチカーソル）

同じ文字列を一度に編集できる強力な機能です。

Windows/Linux

Ctrl + D : 同じ文字列を順次選択
Ctrl + Alt + ↓ : 下の行にカーソル追加

Mac

Cmd + D : 同じ文字列を順次選択
Cmd + Option + ↓ : 下の行にカーソル追加

複数のpropsを同時に変更する場合に威力を発揮します。

// 例：複数のpropsを同時に変更
function UserCard({ user }) {
    return (
        <div>
            <h3>{user.name}</h3>    // userを選択してCtrl+D
            <p>{user.email}</p>     // userを選択してCtrl+D
            <span>{user.role}</span> // userを選択してCtrl+D
        </div>
    );
}

まず一つ目のuserを選択します。次にCtrl + Dを押すと、次のuserも選択されます。

さらにCtrl + Dを押すと、全てのuserが選択された状態になります。この状態で文字を入力すると、全てのuserを同時に変更できるんです。

一度に複数箇所を編集できるので、作業時間が大幅に短縮されますよ。

9. 定義へジャンプ

コンポーネントの定義を素早く確認できます。

Windows/Linux

F12 : 定義へジャンプ
Ctrl + Click : 定義へジャンプ

Mac

F12 : 定義へジャンプ
Cmd + Click : 定義へジャンプ

コンポーネントの定義を確認したいときに便利です。

// 例：コンポーネントの定義を確認
import { UserProfile } from './UserProfile';  // ← F12でジャンプ

function App() {
    return (
        <div>
            <UserProfile />  // ← ここでF12を押すと定義に移動
        </div>
    );
}

UserProfileの部分にカーソルを置いてF12を押すと、UserProfileコンポーネントの定義ファイルに移動します。

コードの動きを理解したいときや、他の人が書いたコードを読むときに重宝しますよ。

10. コードの整形

見た目がバラバラなコードを綺麗に整理できます。

Windows/Linux

Shift + Alt + F : コードの自動整形

Mac

Shift + Option + F : コードの自動整形

読みにくいコードを一瞬で整理できる便利な機能です。

// 整形前：読みにくいコード
function UserList({users}){
return(<div>{users.map(user=>(<div key={user.id}><h3>{user.name}</h3><p>{user.email}</p></div>))}</div>);}

Shift + Alt + Fを押すと、こんな風に整形されます。

// 整形後：読みやすいコード
function UserList({ users }) {
    return (
        <div>
            {users.map(user => (
                <div key={user.id}>
                    <h3>{user.name}</h3>
                    <p>{user.email}</p>
                </div>
            ))}
        </div>
    );
}

手動でインデントを調整する必要がないので、とても楽になります。コードレビューの前に使うと、チームメンバーにも喜ばれますよ。

実際の開発でどう使うの？

これらのショートカットを実際のReact開発でどう活用するか、具体的な場面をご紹介します。日常的な作業がどれだけ楽になるか、実感していただけるはずです。

新しいコンポーネントの作成

新しいコンポーネントを作るときの効率的な手順です。

// 1. 既存のコンポーネントを全選択（Ctrl+A）
function Button({ children, onClick }) {
    return (
        <button onClick={onClick} className="btn">
            {children}
        </button>
    );
}

まず、似たような構造のコンポーネントを見つけます。全選択（Ctrl + A）でコンポーネント全体をコピー（Ctrl + C）します。

新しいファイルを作成して、ペースト（Ctrl + V）します。文字列置換（Ctrl + H）でButtonをLinkButtonに変更すれば完成です。

一から書くよりもずっと早くて、ミスも減りますよ。

デバッグ時の効率的な検索

エラーが起きたときの効率的な対処法です。

エラーメッセージのキーワードで全ファイル検索（Ctrl + Shift + F）をします。該当箇所に素早く移動できます。

定義へジャンプ（F12）で関連するコードを確認します。複数選択（Ctrl + D）で同じ問題を一括修正できます。

段階的にエラーを解決していけるので、デバッグ作業がスムーズになります。

リファクタリング作業

コードを改善するときの手順です。

変数名を選択して複数選択（Ctrl + D）で一括変更します。コードの整形（Shift + Alt + F）で見た目を整えます。

もし間違えても元に戻す（Ctrl + Z）で簡単に修正できます。

リファクタリングは慎重になりがちですが、ショートカットキーがあれば安心して作業できますね。

ショートカットキーの覚え方

効率的にショートカットキーを覚えるための方法をご紹介します。無理をせず、段階的に覚えていくのがコツですよ。

段階的な習得がおすすめ

一度に全部覚えようとしないでください。週ごとに分けて、少しずつ覚えていきましょう。

Week 1: 基本の3つ

コピー・ペースト
元に戻す
全選択

Week 2: 検索系

ファイル検索
文字列検索
置換

Week 3: 編集系

行の複製
行の移動
複数選択

Week 4: 高度な機能

定義へジャンプ
コードの整形

この順番で覚えていけば、無理なく身につけられます。

実践的な練習方法

毎日の開発で意識的に使うことが一番の練習になります。

// 練習例：コンポーネントを作る際に必ずショートカットを使う
// 1. ファイル検索（Ctrl+P）でベースとなるコンポーネントを開く
// 2. 全選択（Ctrl+A）してコピー（Ctrl+C）
// 3. 新しいファイルでペースト（Ctrl+V）
// 4. 置換（Ctrl+H）で名前を変更
// 5. 整形（Shift+Alt+F）で見た目を整える

この流れを意識して作業すれば、自然とショートカットが身につきます。

チートシートの作成 よく使うショートカットを手元に置いておくと、覚えやすくなります。最初は紙に書いて、モニターの近くに貼っておくのもおすすめです。

チーム内での共有 チーム内でショートカットを共有することで、全体の開発効率が向上します。お互いに教え合うことで、覚えるのも早くなりますよ。

よくある困った時の対処法

ショートカットキーでよくある問題と対処法をご紹介します。困ったときの参考にしてくださいね。

ショートカットが効かない場合

たまにショートカットが反応しないことがあります。

拡張機能の競合 VSCodeの拡張機能がショートカットを上書きしている場合があります。設定 → キーボードショートカットで確認・修正できます。

OS固有の問題

Windows: 日本語入力時にショートカットが効かない場合があります
Mac: CommandキーとControlキーを間違えやすいので注意です

解決策 一度VSCodeを再起動すると直ることが多いです。それでも直らない場合は、設定を確認してみてください。

覚えられない場合

全部覚えようとしなくても大丈夫です。

使用頻度の低いショートカット 無理に全てを覚えようとせず、よく使うものから優先的に覚えましょう。毎日使うショートカットだけでも十分効果がありますよ。

マウス操作との併用 最初はマウス操作と併用しながら、徐々にショートカットの比重を増やしていきます。完璧を目指さず、少しずつでOKです。

焦らず、自分のペースで覚えていってくださいね。

まとめ：今日から効率的な開発を始めよう

React開発でよく使うショートカットキー10選をご紹介しました。これらのショートカットを覚えることで、開発効率が劇的に向上しますよ。

必須ショートカット

コピー・カット・ペースト
元に戻す・やり直し
全選択
ファイル検索
文字列検索・置換

効率向上ショートカット 6. 行の複製 7. 行の移動 8. 複数選択 9. 定義へジャンプ 10. コードの整形

習得のコツ

段階的に覚える
毎日の開発で意識的に使う
チーム内で共有する

最初は慣れるまで時間がかかるかもしれません。でも一度覚えてしまえば、もう手放せなくなります。

マウスを何度も動かしてイライラすることもなくなります。コードに集中できる時間が増えて、開発がもっと楽しくなりますよ。

ぜひ今日から実践して、より効率的なReact開発を目指してください！きっと「こんなに楽になるなんて！」と驚かれるはずです。

React開発でよく使うショートカットキー10選

なぜショートカットキーが重要なの？

開発スピードが圧倒的に早くなる

React開発では特に重要な理由

必須ショートカットキー：基本編

1. コピー・カット・ペースト

2. 元に戻す・やり直し

3. 全選択

VSCode専用ショートカット：中級編

4. ファイル検索

5. 文字列検索・置換

6. 行の複製

7. 行の移動

高度なショートカット：上級編

8. 複数選択（マルチカーソル）

9. 定義へジャンプ

10. コードの整形

実際の開発でどう使うの？

新しいコンポーネントの作成

デバッグ時の効率的な検索

リファクタリング作業

ショートカットキーの覚え方

段階的な習得がおすすめ

実践的な練習方法

よくある困った時の対処法

ショートカットが効かない場合

覚えられない場合

まとめ：今日から効率的な開発を始めよう

関連記事

Untitled

Untitled

Untitled