概要

業務で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

筆者のレベル

React歴1年、エンジニア歴2年半の初級~中級くらいのフリーランスエンジニア
フロントエンドまるっと任されたの初めて
reduxはしってるけどよくわかってない
雑魚

ここから内容

※内容は少し抽象化してます

作業対象項目

LP
新規登録・ログイン
登録後の設定
マイページ
設定変更
お知らせ
記事投稿
記事詳細

共通作業

ページ作成(ルーティング/ファイル作成)
画面作成(スタイリング以外の画面作成)
データなしでの動作作成(propsの受け渡しなど)
スタイリング
データつなぎこみ
動作確認

※順不同

共通作業詳細

ページ作成(ルーティング/ファイル作成)

src/components/atomic/pages/配下にPageName/index.jsを作成
src/App.js内でimportし<Route exact path="/pagename" component={PageName} />を追加

画面作成(スタイリング以外の画面作成)

デザインをもとにスタイリングなしのhtmlをsrc/components/atomic/pages/PageName/index.jsに記述

※src/components/atomic/配下のatoms、molecules、organisms、templatesをできるだけ使う

データなしでの動作作成(propsの受け渡しなど)

コンポーネントをatoms、molecules、organisms、templatesに切り分け

参考: https://goo.gl/UTP9Q5
参考2: https://goo.gl/jQo8Ju

仮データをprops経由でコンポーネントが受け取り、表示できるようにする

※詳細まで作り込まないでOK。データつなぎ込み時の修正しやすさ重視で

【補足】データなしでの動作に、ユーザー操作(状態管理)が発生する場合

container(状態を管理するコンポーネント)を作成しstateを管理します。

src/containers/CompNameContainerを作成
class構文で記述し、stateを管理

スタイリング

デザインをCSSで実現する

補足

src/variablesに定義されたAssetを積極的に利用する(定義内容はWIP)
固定値を利用しない、inVisionで自動生成されたコードを盲信しちゃダメ、、。

データつなぎこみ

src/containers/CompNameContainerを作成
class構文で記述し、stateを管理
必要な動作関数を定義

動作確認

動作するようにpropsの受け渡しなど調整

以上です

各項目のタスクは、もっと詳細にタスク化していきます。
イケてないところとか、色々やばやばなところたくさんありそう、、