【React&TypeScript入門】.jsや.tsの使い方とフォルダ名の話

PR
【React&TypeScript入門】.jsや.tsの使い方とフォルダ名の話
この記事は約6分で読めます。

個性豊かな多くの開発現場を経験した筆者がこれだけは、覚えて損はないと思った主要な.js/.tsファイルの使い方とフォルダ名を付ける時に気をつけるべきポイントを解説

.jsや.tsファイルでは、主に下記のようなファイルを作成します。
この他にもありますが、他の使い方は、各開発現場によって偏りやクセが見られることが多いです。

  • 型の定義(主に.ts):〇〇〇Type.ts
  • カスタムフック:use〇〇〇.ts
  • 定数定義:〇〇〇Constants.ts
PR

PR
PR

PR
PR

型の定義

型定義の実装

〇〇〇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
超簡単フリーランスエンジニアになるには?おすすめの案件探し方
経験年数の少なさで諦めていませんか?経験が浅くてもフリーランスエンジニアになれる方法なり方と理由がここにあり。誰でもできる超簡単なおすすめの案件(仕事)の探し方解説!ベストなITエージェントの使い方はこれだ!時代を生き抜く力はフリーランスにあり
GitHubで複数アカウントを使い分け方法解説(Sourcetreeも可)
ソースツリーを使って複数のGitHubアカウントを効果的に管理する方法を詳しく解説
需要の高い人気プログラミング言語&フレームワーク【将来性】
数多くの種類の言語からプログラミング初心者にもエンジニアのキャリアアップにも最適な将来性の高い人気のプログラミング言語とおすすめフレームワークを紹介!特に需要の把握はスキルアップと年収に直結です。ガチで必要な全ての選択肢の答えがここに
【React&TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話
なんとなく使っているけど、.js .jsx .ts .tsxの違いが分からない~使い分けがよくわからない~を解決しよう!React開発でJavaScriptやTypeScriptのどちらを使うべきかそれぞれメリット・デメリットを把握しよう!
【賃貸にスマートロック】玄関におすすめ後付け可能な鍵比較5選
賃貸でも玄関の鍵にスマートロックを後付けすることが可能です。スマホで楽々解錠、急な来客や彼氏彼女に合鍵シェアっておしゃれですね。徹底的に調べて厳選比較しました。【賃貸OK】ITエンジニアがおすすめする賃貸でもできるスマートハウス化計画!
PR
PR

コメント

タイトルとURLをコピーしました