dodokk / BlueMarlinHP

2020 BlueMarlin HP

BlueMarlinドキュメント

使用しているフレームワーク・ライブラリ

• react
• typescript
• react-router
• styled-components
• husky
• lint-staged
• typescript-eslint
• prettier

使用しているデザインパターン

• (なし)

ディレクトリ構造

.
├── README.md
├── package.json
├── node_modules/
├── public
│   ├── favicon.ico
│   ├── index.html      <- タイトルとかサイトの説明を記入する部分あり
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── index.css
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── serviceWorker.js
│   ├── utils
│   │   ├── history.ts      <- 履歴情報を作成（変更不要）
│   │   └── size.ts     <- 共通して使いたい長さや大きさがもしあれば
│   └── views
│       ├── Pages.tsx       <- 全体のページ構成を設定
│       ├── BaseWrapper     <- ヘッダーとフッターのこと(全ページの共通部分)
│       │   ├── BaseWrapper.tsx
│       │   ├── Footer.tsx
│       │   ├── Header.tsx
│       │   └── index.ts        <- importしやすくするためのファイルなのであんまり気にしなくてOK
│       └── components      <- 個別のページなので、主にここを編集することになると思われる
│           ├── Aboutus.tsx
│           ├── Gallery.tsx
│           ├── Generation.tsx
│           ├── Member.tsx
│           ├── QandA.tsx
│           └── Top.tsx
├── tsconfig.json
└── yarn.lock

サイトマップ

モックアップ

https://xd.adobe.com/view/6062687f-eb56-4b26-48c8-6f7118af7493-1653/

環境構築

1. cloneする

   git clone https://github.com/dodokk/BlueMarlinHP

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

   yarn

   もしyarnが使えなければnpm install -g yarnでインストール可能
   npmも使えなければ→https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

起動方法(ローカル)

1. 環境構築を行う

2. カレントディレクトリがBlueMarlinHPなのを確認する

3. 以下のコマンドを実行する

   yarn start

開発方法

1. 作業開始時にgit pullする

2. BlueMarlinHP/src/views/{自分の作業したいファイル}をモックアップを元に変更する

3. ローカルリポジトリに保存する

   git add .
   git commit -m "作業内容を簡潔に書く！"

4. masterブランチでOKなのでpushする

   git push origin master