React TS でスニペットを使って楽をする　React Snippets Extension 【VS code 拡張機能紹介】

初めての開発や久しぶりの開発で便利な React TS 用に VSCode で便利な拡張機能をします。

また、私の使うスニペットの紹介と、スニペットの追加方法の紹介をします。

スニペットの追加『自分で追加する場合』

ユーザースニペットファイルを開く

Shit + cmd + p でコマンドパレットを開きます。

Snippets: Configure Snippets を検索して、選択します。

tsx と入力して、tsx ファイルでスニペットが効くように設定しましょう。

typescriptreact.json というファイルが開くので、例えば以下のように入力しましょう。（以下は私の設定）

{
	"React Functional Component": {
  "prefix": "rfc", // 好きなショートカットキー
  "body": [
    "import React, { Component } from 'react';",
    "",
    "const ${TM_FILENAME_BASE}: React.FC = () => {",
    "  return (",
    "    <>${2:hello}</>",
    "  );",
    "};",
    "",
    "export default ${TM_FILENAME_BASE};"
  ],
  "description": "React Functional Component template"
}
}

ちょっとした説明をすると

“prefix”: スニペットを呼び出す際に入力するショートカット（例: rfc）。
“body”: 実際に挿入されるコード。${1} や ${2} はタブ補完用のプレースホルダー。
“description”: スニペットの説明。
${TM_FILENAME_BASE} ファイル名から取得

といった感じです。

React Snippets Extension『あるものを使う場合』

VS Code ES7+ React/Redux/React-Native/JS snippets という拡張機能をインストールしよう。

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

rcc

styled component を含み、状態管理などの基本的な部分も書かれています。

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

// #region constants

// #endregion

// #region styled-components

// #endregion

// #region functions

// #endregion

// #region component
const propTypes = {};

const defaultProps = {};

/**
 * 
 */
class Staff extends React.Component {
constructor(props) {
  super(props);

  this.state = {
  };
}

  render() {
    return <div></div>;
  }
}

Staff.propTypes = propTypes;
Staff.defaultProps = defaultProps;
// #endregion

export default Staff;

rccp

styled component を含まないもっと単純な骨組みに使えます。

import PropTypes from 'prop-types'
import React, { Component } from 'react'

export default class Staff extends Component {
  static propTypes = {second: third}

  render() {
    return (
      <div>Staff</div>
    )
  }
}

投稿日: 2025年1月6日

カテゴリ: React

タグ:

coiai

この記事もおすすめ

デザインガイドラインをAIでもわかるようにMarkDown 形式で作った

弊社のデザインガイドラインをAIでもわかるようにMarkDown形式で作成しました。今までプロダクトやサービスのUI設計を任されることがあり、その際はデザインガイドラインをFigmaにエンジニアにわかるように設定していたのですが、エージェント型AIが普及するにあたり、ヴィジュアルでわかるよりも文章でわかるものを用意する必要を感じ制作しました。実際に作ってみると、ヴィジュアルを言葉として理解するのは難しいという当たり前のことがわかったのと、LLMと人間の違いをまた見たなと思いました。人間用デザインガイドライン今回作成したガイドラインは人間にもみやすいようにヴィジュアルでも作成しました。なるべく変更がしやすいようにMarkDown形式で作成したものをHTMLに変換し、PDFで書き出すという手順をとっています。マークダウンのデザインガイドライン design-guideline.md

ポッドキャストを取った後Auditionですべきこと

この記事はポッドキャストなどの音声コンテンツを取った後にAuditionで編集する方法について解説しています。環境やること基本的に以下の4つの工程をすると、かなりクオリティアップにつながります！ノイズリダクション無音部分を選択します。開始地点をi, 終わりをo キーを押すと選択できます。選択できたらエフェクト→ノイズリダクション/リストア→ノイズプリントをキャプチャを押します。続いて、全体を選択します。cmd, a で全選択になります。エフェクト→ノイズリダクション/リストア→ノイズリダクションを選択します。以下のようなパネルが表示されうので、ノイズのみをきたりして、削減ちを調整して、良い感じになったら適応ボタンを押します。シングルバンドコンプレッサ左のパネルのエフェクトトラックから▶️ボタンを押し、振幅と圧縮→シングルバンドコンプレッッサを選択します。選択すると下記のようなパネルが開きます。それぞれ、といった意味があります。設定値は下記画像のようにしています。設定がめんどくさい場合はプリセットからラジオレベラーを選択してください。 EQ（声をクリアにする）パラメトリックイコライザーを使用します。エフェクト→フィルターとイコライザ→パラメトリックイコライザーを選択します。私の場合は下記のように設定しています。無音カットエフェクト→診断→無音をカットをすると左パネルに診断が表示されます。効果を無音を削除、プリセットをポッドキャストにするとちょうどよくなると思います。設定したら、スキャンボタンを教えて、全て削除で無音がカットされます。かなりカットされてしまうので、短いCM等に使うのはありかなという感じです。参考 Adobe 無音カット https://helpx.adobe.com/jp/audition/using/strip-silence.html

Oculus Link での開発でパススルーをオンにする

環境 Unity で Quest 対応のアプリを構築している際に Link での確認で、パススルーをオンにするとエラーが出て砂時計のまま開けないというエラーが出ました。コンソールでは以下のエラーが表示されています。やり方 PC で Meta Holizon アプリを開きます。 Settings を開いて Developer タブを開きます。Developer Runtime Features を ON にします。続いて、Passthrough over Meta Horizon Link をオンにします。前提 OVR Manager の Passthrough & Guardian Boundary の中の Enable Passthrough にチェックを入れてださい。参考 https://developers.meta.com/horizon/documentation/unity/unity-passthrough-use-over-link/?locale=ja_JP おわりに株式会社coiaiではOculus向けのアプリも構築しています。受託開発、一次受けも設計から可能ですのでお問い合わせください。

MetaStore コンテンツ型のアプリ内課金を実装する

MetaStoreのコンテンツ型のアプリ内課金を実装する方法についてです。コンテンツを追加する右上のアドオンを作成ボタンを押す。アドオンタイプ一度購入したら、それ以降は購入しない設定は耐久型を選びます。アプリ内のコインや石など、消耗品は消耗品を選びます。価格設定価格設定タブに進むとコンテンツの価格を設定できます。有料のコンテンツをまだ登録したことない場合は支払い情報の設定が住んでいないはずなので、支払い情報の設定が先に必要になります。 DUC データユーズチェックアップ左メニューの必要条件の中のデータ使用状況の確認を開きます。例えばIAPでユーザー認識が必要な場合は User ID, ユーザー名が必要な場合は User Profile の追加ボタンを押します。何に使うかの用途と説明が求められるのでそこに使用用途を記述してください。ここまで出来たらリクエストを送信ボタンを押します。このようにデータの取り扱いについて質問されるので答えてください。英語で書いてあるので、なんとなく何が書いてあるか順番にさらっと説明します。データの使用状況の確認左サイドバーから必要条件⇒データ使用状況の確認をクリックします。これが設定されていないと以下の文言のポップアップが表示されます。読んでくださった方へ株式会社coiaiでは、Quest向け、PCVR、Vision OS向けの開発も得意としています。新規開発ももちろん、開発途中でメンバーが必要といった場合でも請け負えますので、ご相談ください！

React TS でスニペットを使って楽をする　React Snippets Extension 【VS code 拡張機能紹介】

スニペットの追加『自分で追加する場合』

React Snippets Extension『あるものを使う場合』

rcc

rccp

この記事を書いた会社

資料請求・無料相談

React TS でスニペットを使って楽をする React Snippets Extension 【VS code 拡張機能紹介】

スニペットの追加 『自分で追加する場合』

React Snippets Extension『あるものを使う場合』

rcc

rccp

この記事を書いた会社

資料請求・無料相談

React TS でスニペットを使って楽をする　React Snippets Extension 【VS code 拡張機能紹介】

スニペットの追加『自分で追加する場合』