概要

業務でSPA開発のフロントエンド部分を対応しており、チームで作業するにあたって必要なタスクの洗い出しの結果をまとめたので、せっかくなので今後の自分のためにも公開してみます

内容は、プロジェクトメンバーの1人(初級者コーダー)向けにまとめたものです。

中規模のSPAの開発を行うフロント界隈の人が、こんな感じでがんばってるのかと思ってくれれば嬉しい、、

プロジェクトはシェアエコ系のサービスを開発しているイメージでお読みください

内容をみて「もっとこうした方がいいよ」とか「意味がわからんぞこれ？」といった話あれば教えてください〜

前提

プロジェクトイメージ

SPA開発である
- フロントエンドとバックエンドの作業が基本的に分離している
- フロントエンドはアプリケーションにコミット、バックエンドはAPI開発にコミットしている
デザインは基本決まってる
- inVisionで共有されている
筆者の担当はフロントエンド
- SPAとAPIのつなぎこみと
- スタイリングが主な仕事
よくあるシェアエコ系のサービス開発である
- 画面数多くてつらい
- やることは結構一般的
開発メンバーは3人
- バックエンド1人
- フロントエンド2人(うち1人はコーダー寄り)
導入技術/ルール
- 全体
  - Reactオンリー(きつさを感じたらreduxとか考える)
- ルーティング
  - react-router-dom
- スタイリング
  - styled-components
- コンポーネントの区分け方法
  - Atomic Design

ディレクトリ構成

src/
├── App.js
├── components
│   ├── Shared
│   │   ├── Footer.js
│   │   └── index.js
│   ├── StyledComponents.js
│   └── atomic
│       ├── atoms
│       │   ├── Button
│       │   ├── Card
│       │   ├── InputField
│       │   ├── InputRadio
│       │   └── Label
│       ├── molecules
│       │   ├── ImageGallery
│       │   └── Setup
│       ├── organisms
│       │   ├── Header
│       │   └── Login
│       ├── pages
│       │   ├── Login
│       │   ├── Setup
│       │   ├── Signup
│       │   └── Top
│       └── templates
│           ├── Column
│           ├── Default
│           └── Page.js
├── containers
│   ├── LoginContainer.js
│   ├── SetupContainer.js
│   └── SignupContainer.js
├── helpers
│   └── media-query.js
├── images
│   └── user-avatar.png
├── index.css
├── index.js
├── registerServiceWorker.js
└── variables
    ├── colors.js
    ├── dimens.js
    ├── fontsizes.js
    └── index.js