Loading...
メインコンテンツまでスキップ

pro - README

raquty proのサービスに含まれる、大会運営webアプリケーションのフロントエンドを構築するプロジェクトです。

使用技術​

  • React v18 — モダンなコンポーネントベースのUIライブラリ
  • Vite v6 — 高速なビルド＆開発サーバーツール
  • Tailwind CSS v3 — ユーティリティファーストなCSSフレームワーク
  • React Router DOM v7 — 画面遷移・ルーティング管理
  • Axios — API通信を簡単に扱うHTTPクライアント
  • vite-plugin-pwa — サイトをPWA（Progressive Web App）対応にするVite用プラグイン
  • ESLint — コードの静的解析による品質チェック・統一

ディレクトリ構成​

bulletproofという有名？なものを参考にしました。公式のgithubはこちら

以前と異なることは、featuresに１機能ごとにフォルダを作成し、api, component, hooksなどをまとめるようにしたことです。

そして pagesでは、この featuresを呼び出す形でページのルーティングを管理します。

pagesのファイル構成は基本的に、実際のサイトのURLと一致するようにすることでわかりやすく整理できると思います！

※featuresでは index.jsxを利用していいと思うのですが、pagesでは featuresの component呼び出しの兼ね合いから、xxxPage.jsxのような命名がいいと思います。

app.jsxも肥大化していたので、app/ディレクトリを作成し、router.jsxと provider.jsxに分解し整理しました。(app.jsxはアプリを起動するという役目だけに留める)

src/
├── app/                  # アプリケーション全体の設定（ルーティング, ストア, コンテキスト）
│   ├── router.jsx
│   ├── store.js
│   └── providers.jsx
│
├── features/             # 機能単位（ログイン・ユーザー管理など ※中身は例です）
│   ├── auth/
│   │   ├── components/    # auth専用コンポーネント
│   │   ├── hooks/         # auth専用カスタムフック
│   │   ├── api/           # authのAPIアクセス処理
│   │   ├── assets/        # authの画像・フォントなど
│   │   ├── stores/        # auth専用の状態管理(Redux Toolkitなど)
│   │   ├── utils/         # auth内の汎用関数をまとめる
│   │   └── index.jsx      # この機能をまとめるコンポーネント
│   │
│   └── user/
│       ├── components/  
│       ├── hooks/   
│       ├── api/   
│       ├── assets/  
│       ├── stores/  
│       ├── utils/   
│       └── index.jsx  
│
├── components/            # グローバルに使い回す汎用コンポーネント
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.test.jsx
│   └── Modal/
│
├── hooks/                 # アプリ全体で使える汎用カスタムフック(現在はない)
│   └── 
│
├── lib/                   # 汎用ユーティリティ（dateFormat, localStorage管理など）
│   └── axiosClient.js
│
├── assets/                # 画像・フォントなど
│   └── logo.svg
│
├── pages/                 # ここでfeaturesの機能を呼び出す。ルーティングと機能を分離させる。
│   ├── index.tsx
│   └── about.tsx
│
│
├── App.jsx		   # アプリ全体のコンポーネント構成
├── index.css		   # アプリ全体のスタイル
└── main.jsx		   # Reactアプリの起動スクリプト

セットアップ手順​

1. リポジトリをクローン​

git clone https://github.com/raquty-development/raquty

2. 依存パッケージをインストール​

cd raquty/pro.raquty.com
npm install

3. 環境変数の設定​

それぞれの環境に合わせて、3つの.envを用意する必要がある。

  1. .env.development(ローカル環境用)
VITE_API_URL=http://localhost:8000/api
※ここのport番号はご自身のlaravelサーバーに合わせてください。
  1. .env.staging(ステージング環境用)
VITE_API_URL=https://dev-api.raquty.com/api
  1. .env.production(本番環境用)
VITE_API_URL=https://api.raquty.com/api

4. 設定用の画像を用意​

  • public/にpwa用の画像(192×192, 512×512の2種類)を配置する
  • ここで設定した画像が、ホーム画面に追加した際のアイコンになります

5. 各種コマンド​

  1. 開発サーバー起動
npm run dev
  1. ステージング環境用ビルド
npm run build:staging
  1. 本番環境用ビルド
npm run build

このコマンドで dist/にビルドされたファイルが生成されます。

dist/内の全てのファイルをftpを利用して、pro.raquty.comのディレクトリにアップロードしてください。

コーディングルール​

多少統一感持ってやれたらいいのではと思います。

1. エイリアスの使用​

importでパスを指定する際に ../../のような形式で遡って行って指定するのももちろんいいのですが、エイリアスを使用すると楽にパスを指定できると思います。

使用例

// pro.raquty.com/src/features/match-result-editing/index.jsx

// 従来の指定方法
import Header from "../../../components/Header";

// エイリアス使用時
import Header from "@/components/Header";

@を使用することで src/から見た時のパスとして扱ってくれるため、../../で遡って指定するよりも見やすく、辿りやすくなると思うので活用していきましょう。

2. export default functionの使用​

後から exportするよりも、最初に書いてある方が、コードを読んでいるときに、この componentが exportされて他で使われているんだなと把握しやすいため、こちらの方がいいのではないかと思います。

3. タブサイズ​

現在、　スペース2個分と4個分が混在している。

これ宗派あるかもしれないですが、個人的に jsx書いててネスト深くなりがちだと思うのでスペース2個分を推します。