こんにちは！Webフロントエンドやバックエンドの複雑なコードに向き合い、日夜格闘している皆さん。開発の現場で「またこのボイラープレート（お決まりのコード）を最初から書いているな…」とため息をついたことはありませんか？

新しいコンポーネントを作るたびに、似たようなインポート文を書き、決まりきった型定義を並べ、ボイラープレートをコピペして名前を書き換える。――実は、この「繰り返しの単純作業」こそが、開発者の集中力を削ぎ、貴重な時間を奪う最大のボトルネックです。

今回は、世界最高峰のJavaScript/TypeScript IDEであるWebStormが持つ「カスタムファイルテンプレート機能」を完全攻略します。

これをマスターすれば、あなたが所属するチームの規約に合わせたコンポーネントやAPIの雛形を、ファイルを作成する瞬間に自動生成できるようになります。毎日のコーディングが劇的に楽になる魔法を、一緒に紐解いていきましょう！

—

1. WebStormのファイルテンプレートとは何か？（ツールの本質）

多くの開発者は、WebStormを「賢いコード補完やリファクタリングができる高機能なエディタ」として使っています。しかし、WebStormの真骨頂は「開発者の暗黙のルールや定型作業をコードベースから排除する自動化エンジン」として機能する点にあります。

ファイルテンプレート（File and Code Templates）とは、新規ファイル作成時に自動で展開される「ひな形」です。単なるテキストのコピペではありません。内部で変数（Variables）やApache Velocityテンプレートエンジンを評価し、作成した日付、ファイル名、さらには対話式のダイアグラムから入力した動的な値を埋め込むことができます。

これを適切に設計・導入すれば、以下のような絶大なメリットが生まれます。

チーム全体のコード品質の均一化: 誰が書いても同じアーキテクチャパターン（Container/Presentational構造やエラーハンドリングなど）のコードになる。
認知負荷の激減: 「この書き方であっていたっけ？」と過去のプロジェクトを探す時間がゼロになる。
圧倒的なスピード: ファイル名を入れるだけで、TypeScriptの型定義、コンポーネント、スタイルファイル、テストコードの骨組みが秒速で揃う。

—

2. 基礎セットアップ：テンプレート設定画面への扉を開く

まずは、WebStormでカスタムテンプレートを管理する聖域、設定画面へのアクセス方法を確認しましょう。

設定画面へのパス

macOS: メニューバーの `WebStorm` > `Settings…` （または `Preferences…`）
Windows / Linux: メニューバーの `File` > `Settings…`

設定ウィンドウが開いたら、左側のツリーから以下をたどります。
`Editor` > `File and Code Templates`

ここに、WebStormにあらかじめ用意されている膨大なテンプレート（JavaScript Class, HTML Fileなど）の一覧が表示されます。今回は、ここに「私たち独自のカスタムテンプレート」を追加していきます。

—

3. 実践！社内標準のReact/TypeScriptコンポーネントを自動生成する

ここでは、モダンなWeb開発の現場で非常によく使われる「ReactのTypeScriptコンポーネント、およびCSS Modules（またはStyled Components）のセット」を自動生成するテンプレートを作ってみましょう。

さらに実務を意識し、「ファイル名を入力するだけで、コンポーネント名やエクスポート文が勝手に連動する」高度な仕組みを構築します。

ステップ1: 新規テンプレートの作成

1. `File and Code Templates` 画面のタブから `Files` を選択します。
2. リストの上部にある `+`（Add） ボタンをクリックします。
3. 以下の項目を設定します。

Name: `React TS Component` （分かりやすい名前）
Extension: `tsx` （拡張子）
File name: `[設定不要：後述のダイアグラムで動的に決まります]`

ステップ2: テンプレートコードの記述（Velocity記法）

以下のコードを、テンプレートのエディタ領域にそのまま貼り付けてみてください。

@file ${NAME}.tsx
@description ${NAME} コンポーネント
@created ${DATE} ${TIME}

import React from ‘react’;
import styles from ‘./${NAME}.module.css’;

// コンポーネントのプロパティ定義
export interface ${NAME}Props {
/ コンポーネントの追加クラス名 /
className?: string;
/ 子要素 /
children?: React.ReactNode;
}

${NAME} コンポーネント

/
export const ${NAME}: React.FC<${NAME}Props> = ({
className = ”,
children,
}) => {
return (

1. WebStormのファイルテンプレートとは何か？（ツールの本質）
2. 基礎セットアップ：テンプレート設定画面への扉を開く
設定画面へのパス
3. 実践！社内標準のReact/TypeScriptコンポーネントを自動生成する
ステップ1: 新規テンプレートの作成
ステップ2: テンプレートコードの記述（Velocity記法）

${NAME} Component
UserProfileCard Component
1. 6. さらに先へ：ディレクトリ構造ごと一網打尽にする「File Group Templates」
2. 最後に：プロフェッショナルとしての開発環境チューニング

${NAME} Component

{children}

);
};

export default ${NAME};

匠のコード解説（使われている変数と仕組み）

`${NAME}`: 新規ファイル作成時にポップアップするダイアログで入力したファイル名（拡張子除く）が自動で代入されます。例えば `UserProfile` と入力すれば、すべての `${NAME}` が `UserProfile` に置換されます。
`${DATE}` / `${TIME}`: ファイルが生成された瞬間のシステム日付と時刻が挿入され、ドキュメントの鮮度や生成履歴を担保します。
${NAME}.module.css への自動リンク: インポート文に `import styles from ‘./${NAME}.module.css’;` を仕込むことで、コンポーネントとスタイルシートの命名規約が完全に一致することを強制できます。

—

4. 動的変数（Variables）を極める！カスタムプロンプトの追加

WebStormのテンプレートエンジンは、あらかじめ用意された変数（`$NAME$`など）だけでなく、開発者に対して追加の入力を促すカスタム変数を定義できます。

例えば、「このコンポーネントはAPIからデータをフェッチするかどうか」をファイル作成時に選択させたい場合を考えてみましょう。

テンプレート内に以下のような記述を埋め込みます。

set($isClient = $USER_INPUT_IS_CLIENT)

しかし、もっとスマートなのはWebStormの標準機能である「カスタム変数ダイアログ」です。テンプレート内に存在しない変数（例: `$AUTHOR$` や `$COMPONENT_TYPE$`）を書くと、WebStormはファイル作成時に自動的に「値の入力ダイアログ」をポップアップさせてくれます。

以下の改良版テンプレートを見てください。

Author: ${AUTHOR}
Created at: ${DATE}

/
import React from ‘react’;

export interface ${NAME}Props {
/ データの状態 /
initialState?: string;
}

export const ${NAME}: React.FC<${NAME}Props> = ({ initialState = ‘${DEFAULT_STATE}’ }) => {
return (

Component: ${NAME}

Initial State: {initialState}

);
};

このテンプレートを保存して適用すると、WebStormはファイル名の入力を求めた後、`AUTHOR` や `DEFAULT_STATE` に何を入れるか尋ねるダイアログを静かに、しかし確実に表示してくれます。これにより、テンプレートの汎用性が劇的に跳ね上がります。

—

5. 精度高い動作確認：実際にコンポーネントを生み出してみよう

設定が完了したら、実際にこのテンプレートが期待通りに動作するか、厳格にテスト（動作確認）してみましょう。

動作確認の手順

1. WebStormのプロジェクトツールウィンドウで、コンポーネントを配置したいディレクトリ（例: `src/components`）を右クリックします。
2. コンテキストメニューから `New` を選択します。
3. リストの中に、先ほど作成した `React TS Component` が追加されているはずです。これを選択します。
4. ポップアップが表示されるので、ファイル名として `UserProfileCard` と入力し、Enterキーを押します。

期待される出力結果

指定したディレクトリに `UserProfileCard.tsx` というファイルが生成され、中身が以下のように美しく自動構築されているはずです。

@file UserProfileCard.tsx
@description UserProfileCard コンポーネント
@created 202X-XX-XX XX:XX:SS

import React from ‘react’;
import styles from ‘./UserProfileCard.module.css’;

// コンポーネントのプロパティ定義
export interface UserProfileCardProps {
/ コンポーネントの追加クラス名 /
className?: string;
/ 子要素 /
children?: React.ReactNode;
}

UserProfileCard コンポーネント

/
export const UserProfileCard: React.FC = ({
className = ”,
children,
}) => {
return (

UserProfileCard Component

{children}

);
};

export default UserProfileCard;

どうですか？キーボードを数回叩いただけで、型安全なReactコンポーネントの骨組みが完璧に出来上がりました。この感動を知ってしまうと、もう手動でファイルを作っていた昔には戻れなくなります。

—

6. さらに先へ：ディレクトリ構造ごと一網打尽にする「File Group Templates」

ここまでの設定で「単一ファイルの自動化」はマスターできましたが、プロの開発現場では「コンポーネントファイル」「スタイルファイル」「テストファイル」「ストーリーファイル（Storybook）」の4点セットを同時に生成したいという強い欲求があります。

WebStormでは、複数のファイルをグループ化して一括生成する機能（File Group Templates）も備えています。

1. `File and Code Templates` の設定画面に戻ります。
2. タブを `Files` から `Includes` または `Templates` のカスタムグループ に切り替えます（※WebStormのバージョンによりUIが異なりますが、親テンプレートから子テンプレートをインクルードする設計が可能です）。
3. 親テンプレートの中で `#parse(“SubTemplate.tsx”)` のように記述することで、1つのアクションで複数のファイルを生成するマクロを組むことができます。

まずは今回作成した単一のテンプレートを完璧に使いこなし、チームの規約に落とし込んでみてください。それだけでも、チーム全体の生産性は目に見えて向上します。

—

最後に：プロフェッショナルとしての開発環境チューニング

開発ツールを極めるとは、単に「便利な機能を知っている」ということではありません。「自分の思考スピードと出力スピードの間の摩擦（フリクション）を極限までゼロにする」というエンジニアリングそのものです。

今回マスターしたカスタムファイルテンプレートは、あなたの頭の中にある設計思想を、瞬時にコードという形ある成果物に変換する強力な武器となります。ぜひ今日の業務から取り入れて、圧倒的なスピード感とクオリティで周囲を驚かせてください。

あなたの毎日のコーディングが、より創造的で楽しいものになりますように。最高の開発環境を、共に創り上げていきましょう！