個性豊かな多くの開発現場を経験した筆者がこれだけは、覚えて損はないと思った主要な.js/.tsファイルの使い方とフォルダ名を付ける時に気をつけるべきポイントを解説
.jsや.tsファイルでは、主に下記のようなファイルを作成します。
この他にもありますが、他の使い方は、各開発現場によって偏りやクセが見られることが多いです。
- 型の定義(主に.ts)：〇〇〇Type.ts
- カスタムフック：use〇〇〇.ts
- 定数定義：〇〇〇Constants.ts
型の定義
型定義の実装
〇〇〇Type.ts
インターフェースや型エイリアスを定義します。
例: UserType.ts
export interface User {
id: number;
name: string;
email: string;
}型定義のフォルダ名
複数ファイル入ることを意識すると「types」がわかりやすいでしょう。
もっと細分化するのであれば、「〇〇〇Types」でも良いかもしれません。
types/〇〇〇Type.ts カスタムフック
カスタムフックの実装
use〇〇〇.ts
再利用可能なロジックを含むカスタムフックを定義します。
専用の単機能処理ファイルであり、主に副作用と呼ばれる処理を分離して責務を一つのファイルに固めたファイルと思っておけばよいでしょう！
ここでは詳細は割愛しますが、インプット、アウトプットの中で行われる処理や状態変化は全て副作用というイメージでよいです。
下記にある使い方のように呼び出し側では、処理内容の細部を気にせずに使用することができ再利用も可能
副作用であれば、何でもカスタムフックにできます。状態、APIコール等でよく使いますね
例: useWindowSize.ts
// このカスタムフックは、ウィンドウのサイズを追跡し、そのサイズを返します。
import { useState, useEffect } from 'react';
const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return windowSize;
};
export default useWindowSize;例: useWindowSize.tsの使い方
const { width, height } = useWindowSize(); // フックを呼び出してウィンドウサイズを取得例: useToggle.ts
// このカスタムフックは、ブール値をトグル（切り替え）するためのシンプルな機能を提供します。
import { useState } from 'react';
const useToggle = (initialValue: boolean = false): [boolean, () => void] => {
const [value, setValue] = useState(initialValue);
const toggleValue = () => {
setValue((prevValue) => !prevValue);
};
return [value, toggleValue];
};
export default useToggle;例: useToggle.tsの使い方
const [isToggled, toggle] = useToggle(); // フックを呼び出してトグル状態を管理カスタムフックのフォルダ名
複数ファイル入ることを意識すると「hooks」がわかりやすいでしょう。「useHooks」もたまに見ます
hooks/use〇〇〇.ts
useHooks/use〇〇〇.ts 定数定義
定数定義の実装
〇〇〇Constants.ts
アプリケーションで使用する定数を定義します。
例: appConstants.ts
export const API_BASE_URL = 'https://api.example.com';
export const ITEMS_PER_PAGE = 10;定数定義フォルダ名
複数ファイル入ることを意識すると「constants」がわかりやすいでしょう。「consts」もたまに見ます
constants/〇〇〇Constants.ts
consts/〇〇〇Consts.tsその他（カラー定義）
カラー定義も用意しておくとかなり便利です。アプリの統一感アップや使用している色の整理に繋がります。
この場合は、「colors.ts」や「colorConstants.ts」などの名前で良いです。
export const COLORS = {
PRIMARY: "#1D9BF0",
SECONDARY: "#EEA1AF",
TEXT: '#595968',
WHITE: "#ffffff"
・・・など
}寄付の依頼
もし、少しでもご参考になりましたらサイト運営への寄付をお願いします。
とても励みになります。
If you would like to help, please make a donation to the site management.
It is very encouraging.
| BTC （ビットコイン） アドレス |
|---|
| 35AfkHtN3paTC1iNVtHg6BDmCnHmffzQWM |
| DEEPコイン アドレス |
|---|
| 0x43Dbe7F99b4A31bF184b98A8A814ADEC48FB789D |
コメント