九州工業大学 オープンキャンパス 2023 年 C3 企画

環境構築

1. ローカル環境の構築

   • pnpm の使用

     本プロダクトでは pnpm という npm より高速に動くパッケージマネージャを使用しています。 以下コマンドを実行してpnpmをインストールしてください。

     curl -fsSL https://get.pnpm.io/install.sh | sh -

   • volta の使用

     本プロダクトではvoltaという node のバージョンマネージャを使用しています。 以下コマンドを実行してvoltaをインストールしてください。

     curl https://get.volta.sh | bash

2. リポジトリのクローン

   以下コマンドを実行してローカルにリポジトリをクローンしてください

   git clone [email protected]:Kyutech-C3/OC_2023_frontend.git

3. ライブラリインストール

   以下コマンドを実行してライブラリをインストールしてください

   pnpm install

開発の手引き

• storybook の使用

  本プロダクトではstorybookというライブラリを使用し、コンポーネント単位でのブラウザ出力を可能としている。 以下コマンドを実行すると storybook が起動する

  pnpm sb

  http://localhost:6006にアクセスすることでコンポーネントをレンダリングすることができる

  各ディレクトリに[コンポーネント名].stories.tsxファイルが生成されるが基本的には触らなくていい

• コンポーネント

  • コンポーネントの作成

    本プロダクトではhygenというライブラリを使用し、ファイル生成を容易にしている。

    コンポーネントを作成する際は以下コマンドを実行しファイルを生成する。

    pnpm new

    実行すると対話形式でファイル生成が開始される

    ✔ What is the component name? ·
    ✔ Where is the directory? (No problem in blank) ·
    ✔ Is it have props? (y/N) · false
    

    1. コンポーネントの名前を記入する(Header など)
    2. 次に ディレクトリ指定をする 入力なしの場合はsrc/components/配下に生成される。 特定の場合においてはディレクトリ名を指定する必要がある。 例えばCommonという様々なとこに使用されるコンポーネントをまとめるディレクトリが作成されているときはCommonと入力すればsrc/components/Common以下にファイルが生成される。
    3. propsをもつかを記入　入力なしで false(props を持たない) 必要に応じて使用

  • ファイルわけ 基本的には[コンポーネント名].tsxと[コンポーネント名].stories.tsxとhooks/index.tsxとlibs/index.tsxとtypes/index.tsxの 5 ファイルに分けて記述する。関数がない場合やtypeを使わない場合はそれぞれのファイルに記述する必要ない,libsとhooksの違いについてはhooksにはカスタムフックを記述し、libsにはカスタムフック以外を書いてください。カスタムフックが何かわからない人は基本libsです

    モデルようのファイルはcomponents/Model配下に設置する

    またsrc/components/[Map|Web]/[コンポーネントカテゴリ]/[コンポーネント名]/配下に各ファイルを設置する

    例えば web のヘッダーを作りたいときはコンポーネントカテゴリはCommon(共通して使われるコンポーネントのカテゴリ)に配置されるため配置するディレクトリは

    src/components/Web/Common/Header/[Header.tsx Header.stories.tsx]

    src/types/index.ts

    src/hooks/index.ts

    src/libs/index.ts

    ディレクトリ構造は以下の通り

    src
    ├── app
    │
    ├── components
    │   ├── Map
    │   └── Web
    │       └── Common
    │           └── Header
    │               ├── Header.stories.tsx
    │               └── Header.tsx
    ├── hooks
    │   └── index.ts
    ├── libs
    │   └── index.ts
    └── types
        └── index.ts
    

• ブランチ

  • ブランチのルート

    ブランチはdevelopブランチから生やす

  • ブランチの命名規則

    ブランチは基本以下のように命名する [feature | fix]/[issue番号]-[issue内容] 例えば issue 番号が#14で issue の内容がheaderの作成だった場合以下のようになる

    feature/#14-header また不具合修正の場合featureの部分がfixとなる

• コミットメッセージ コミットメッセージは以下のように記述する

  [add | change | fix | delete]:[メッセージ] [issue番号]

  例えば issue 番号が#14で issue の内容がheaderの作成だった場合以下のようになる

  add:ヘッダーの追加 #14

  機能追加の場合はadd,機能変更の場合はchange,不具合修正の場合はfix,機能削除の場合はdeleteとなる。

  またメッセージの部分はわかりやすく簡潔にする。

以上のことに対しわからないことや対応できないエラーの発生の際は土佐犬に連絡をください