Reactメモ

VS Code の React 用スニペット拡張機能

主に VS Code の React 用スニペット拡張機能で使う省略コマンド。代表的なのは ES7+ React/Redux/React-Native snippets 系の拡張です。対応言語は .js / .jsx / .ts / .tsx です。 (Visual Studio Marketplace)

よく使うものを、まず分かりやすくまとめます。

よく使うReactスニペット

rafce

React Arrow Function Component Export

入力すると、だいたいこういう形になります。

const Sample = () => {
  return (
    <div>Sample</div>
  )
}

export default Sample

• アロー関数でコンポーネント作成
• 最後に export default も付く

という形です。

---

rfc

React Function Component

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

これは 普通の function で書くコンポーネントです。

---

rfce

React Function Component Export

function Sample() {
  return (
    <div>Sample</div>
  )
}

export default Sample

rfc と似ていますが、export default 付きの形です。

---

rafc

React Arrow Function Component

const Sample = () => {
  return (
    <div>Sample</div>
  )
}

rafce との違いは、export default が付かないことです。

---

いっしょに覚えると便利なもの

useState

拡張によっては候補補完で出ます。
自分で書くとこうです。

const [count, setCount] = useState(0)

---

useEffect

useEffect(() => {
  
}, [])

---

imr

import React from 'react' を作るスニペットです。
ただし React 17+ では、拡張機能側に importReactOnTop を無効化できる設定があり、必ずしも import React が必要ではない形にもできます。 (Visual Studio Marketplace)

---

imp

import moduleName from 'module'

---

imd

import { something } from 'module'

---

exp

export default moduleName

---

どれを使えばいいの？

おすすめはこの使い分けです。

1. いちばんよく使う

rafce

理由：

• 今どきのReactでよく見る形
• アロー関数
• export default まで一気に書ける

---

2. functionで書きたいとき

rfce または rfc

• rfce → export付き
• rfc → functionだけ

---

3. exportをあとで自分で書きたいとき

rafc

---

実務でよくある形

たとえば Header.jsx を作るなら、
ファイルを開いて rafce → Tab でこうなります。

const Header = () => {
  return (
    <header>Header</header>
  )
}

export default Header

この形はかなり使いやすいです。

---

注意点

このコマンドは VS Code本体の標準機能ではなく、拡張機能のスニペットです。
よく使われる拡張には dsznajder.es7-react-js-snippets や、その派生版があります。 (Visual Studio Marketplace)

なので、使えない場合は

• 拡張機能が入っていない
• .js ではなく対応外ファイルで開いている
• 補完候補が出る前に確定していない

ということがあります。

---

最低限これだけ覚えればOK

• rafce → アロー関数 + export default
• rafc → アロー関数だけ
• rfce → function + export default
• rfc → functionだけ
• imr → React import
• imp → import
• exp → export default

---

必要なら次に
「Reactでよく使うVS Codeスニペット一覧を、初心者向けに表でまとめた版」 を作ります。