概要
業務で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に切り分け
- 仮データをprops経由でコンポーネントが受け取り、表示できるようにする
※詳細まで作り込まないでOK。データつなぎ込み時の修正しやすさ重視で
【補足】データなしでの動作に、ユーザー操作(状態管理)が発生する場合
container(状態を管理するコンポーネント)を作成しstateを管理します。
-
src/containers/CompNameContainerを作成 - class構文で記述し、stateを管理
スタイリング
- デザインをCSSで実現する
補足
-
src/variablesに定義されたAssetを積極的に利用する(定義内容はWIP) - 固定値を利用しない、inVisionで自動生成されたコードを盲信しちゃダメ、、。
データつなぎこみ
-
src/containers/CompNameContainerを作成 - class構文で記述し、stateを管理
- 必要な動作関数を定義
動作確認
- 動作するようにpropsの受け渡しなど調整
以上です
各項目のタスクは、もっと詳細にタスク化していきます。
イケてないところとか、色々やばやばなところたくさんありそう、、