Reactを学びたての方に勧めたい!、ちょい学習体感時間が増やせる便利ツール

この記事は株式会社ドットログによる
コンストラク体操日記 Advent Calendar 2025 の 18 日目 の記事です。

はじめに

今のVSCODEは予測変換もしてくれますが、こういうのもある予定どで紹介させてください。
毎回こんな感じで手打ちしていませんか？

import React from 'react';

const Header = () => {
  return (
    <div>
      
    </div>
  );
};

export default Header;

これを少しだけ楽にしようってことで伝えたいのが ES7+ React/Redux/React-Native snippets というVSCODEの拡張機能です。

「rafce」と打ってTabキーを押すだけで、上のコードが一瞬で生成されます。

毎回手打ちより、上記のようにサッと書いてもらって必要な部分を書き換える方が
当たり前に効率がいいです。もちろんすでに使っている方もいるかもしれません。
ですが、学びたての時は確かにガンガン書くことも大事ですが、繰り返し同じようなことをするなら考えるリソースを少し作れるので、もしかしたら導入するだけで少しの少しくらいは効率が上がるかもしれません。

今回は、この拡張機能を軽く一部紹介したいと思います。また、他にも便利な省略コマンドがあるので、一番したの参考にあるドキュメントを参照してください。

この記事でわかること

• ES7+ React/Redux/React-Native snippetsとは何か
• Basic Methodsの基本スニペット（import/export系）
• 【本題】React Componentsスニペットがめちゃくちゃ便利な理由

---

結論：React Componentsスニペットが便利だよって話

先に結論を言うと、この拡張機能の React Componentsスニペット が便利です。実際に仕事で使っている方も多いと思います。ですが、React学びたての方には、より効率的に学習体感時間を増やせると思います。

手打ちの場合	スニペットを使う場合
毎回10行以上書く	5文字打つだけ
ファイル名と違う名前になりがち	自動でファイル名がコンポーネント名に
コピペミスでエラー	タイプミスの心配なし

特に「ファイル名が自動でコンポーネント名になる」のがちょい便利です。Header.jsx というファイルで rafce と打てば、コンポーネント名も自動で Header になります。

---

インストール方法

VSCodeの拡張機能から「ES7+ React」で検索してインストールするだけ。

1. VSCodeを開く
2. Ctrl + Shift + X（Mac: Cmd + Shift + X）で拡張機能を開く
3. 「ES7+ React」で検索
4. 「ES7+ React/Redux/React-Native snippets」をインストール

作者が「dsznajder」のものを選んでください。似た名前の拡張機能がいくつかありますが、ダウンロード数が1600万以上のやつが今回取り扱っているものになります。

---

Basic Methods（import/export系）

まずは基本的なimport/exportのスニペットから紹介します。React Componentsほどではないですが、地味に便利です。

imp - import文

imp + Tab

↓ 生成されるコード

import moduleName from 'module';

imr - React のimport

imr + Tab

↓ 生成されるコード

import React from 'react';

imrs - React と useState のimport

imrs + Tab

↓ 生成されるコード

import React, { useState } from 'react';

imrse - React と useState, useEffect のimport

imrse + Tab

↓ 生成されるコード

import React, { useState, useEffect } from 'react';

exp - export default

exp + Tab

↓ 生成されるコード

export default moduleName;

Basic Methods まとめ

スニペット	説明	生成されるコード
imp	import文	import moduleName from 'module'
imr	React import	import React from 'react'
imrs	React + useState	import React, { useState } from 'react'
imrse	React + useState + useEffect	import React, { useState, useEffect } from 'react'
exp	export default	export default moduleName

「まあこれも便利、、、」

---

【本題】React Componentsが便利な件

ここからが本題。React Componentsスニペットがめちゃくちゃ便利です。

コンポーネントを作るたびに毎回同じコードを書くのは面倒です。このスニペットを使えば、たった5文字でコンポーネントの雛形が完成します。

rafce（

React Arrow Function Component with Export の略。アロー関数でコンポーネントを作成し、export defaultまで自動で書いてくれます。

rafce + Tab

↓ 生成されるコード（ファイル名が Header.jsx の場合）

import React from 'react';

const Header = () => {
  return (
    <div>
      
    </div>
  );
};

export default Header;

ポイント：

• ファイル名が自動でコンポーネント名になる
• アロー関数で書かれる
• export defaultまで自動で追加

手打ちの場合との比較

❌ 手打ちの場合：
1. import React from 'react'; と書く
2. const Header = () => { と書く
3. return ( と書く
4. <div> と書く
5. </div> と書く
6. ); と書く
7. }; と書く
8. export default Header; と書く

⭕ rafce の場合：
1. rafce と打って Tab を押す
→ 終わり

これだけで10行以上のコードが一瞬で生成されます。

---

rfc（関数宣言版）

React Function Component の略。function宣言でコンポーネントを作成します。

rfc + Tab

↓ 生成されるコード

import React from 'react';

export default function Header() {
  return (
    <div>
      
    </div>
  );
}

rafce との違いは、アロー関数ではなくfunction宣言で書かれること。チームのコーディング規約に合わせて使い分けてください。

---

rfce（export が下に来る版）

React Function Component with Export の略。export defaultが末尾に来るバージョンです。

rfce + Tab

↓ 生成されるコード

import React from 'react';

function Header() {
  return (
    <div>
      
    </div>
  );
}

export default Header;

---

rce（クラスコンポーネント）

React Class Component with Export の略。クラスコンポーネントを作成します。

rce + Tab

↓ 生成されるコード

import React, { Component } from 'react';

export class Header extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default Header;

注意： 今はHooks（関数コンポーネント）が主流なので、新規開発では rafce や rfc を使うことが多いです。ただ、既存のクラスコンポーネントを修正する時には便利。

---

React Components スニペット まとめ

スニペット	説明	特徴
rafce	アロー関数コンポーネント	一番おすすめ。今の主流
rfc	関数宣言コンポーネント	export が上に来る
rfce	関数宣言コンポーネント	export が下に来る
rce	クラスコンポーネント	レガシーコード用

初心者はまず rafce だけ覚えればOK。 細かい作業短縮ですが、その分学びの時間は増やせます。

---

おまけ：覚えておくと便利なスニペット

React Components以外にも、覚えておくと便利なスニペットをいくつか紹介します。

clg - console.log

clg + Tab

↓ 生成されるコード

console.log(object);

これもよく使うから便利

nfn - 名前付き関数

nfn + Tab

↓ 生成されるコード

const name = (params) => {
  
};

コンポーネント内でちょっとした関数を作る時に。

---

まとめ

今回わかったこと

• ES7+ snippetsを使えば、コンポーネント作成がちょい体感早くなる
• ファイル名が自動でコンポーネント名になるのがちょい嬉しい
• 毎回同じコードを書く時間を、ロジックなど考えなくてはいけない部分に使える

正直、rafce だけ覚えておけば最初は十分です。何回使って慣れてきたら他のスニペットも覚えていくと思います。

React初学者以外も「毎回同じコード書くのダルいな...」と思ってる人も導入していない方もぜひ試してみてください。

---

参考

• ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace
• GitHub - r5n-labs/vscode-react-javascript-snippets