Doneの定義

• 質問内容とそれに対応する回答が出来る事
• 次へButtonで次の質問に遷移する事

補足情報

APIの部分はredux-sagaからダミー用の関数を呼び出す事で対処する。

ただしreduxのアクション名などはそのまま利用するので、そこの命名は考える必要がある。

Doneの定義

• 診断ページに「戻る」ボタンを追加し、ボタン押下で前の質問ページに遷移すること
• 回答内容が保持された状態できること

Doneの定義

• スナップショットテストが作成されている事

補足情報

今の時点で実施してもあまり意味はないかも、ある程度Componentが揃ってから実施する。

こちらを参考に↓

nekochans/portfolio-frontend#48

Doneの定義

• Storybookが利用出来る状態になっている事
• 現在存在するComponentに対応するストーリーファイルが作成されている事

補足情報

https://github.com/nekochans/portfolio-frontend/tree/master/.storybook を参照。

package.jsonも参照し storybook と名前が付いているpackageを全て追加する必要がある。

• 基本的に純粋な関数型ComponentのみにStoryファイルを追加すればOK
• Reduxが絡んでくるComponentは省略してOK

Doneの定義

• 診断結果に対応した画像が表示されていること
• 全ての診断の画像が作成されていること

Doneの定義

• SEO対策としてmetaタグが設定されていること
• OGPの設定がされ、Twitterでシェアされた際に画像が表示されること

補足情報

Google Analyticsの設定は別の課題で対応する

Doneの定義

• 利用規約ページが作成されていること
• ヘッダーもしくはフッターから遷移できること

完了の定義

• create-react-appでプロジェクトの雛形が作成されていること
• TypeScriptの設定になっていること

Doneの定義

• テストが自動で実行されるようになっている事

Doneの定義

• S3バケットに対してデプロイが出来るようになっている事
• CloudFrontのCacheが消去されている事

Doneの定義

• カウンターアプリがReduxを使用して実装されていること

補足情報

Reduxの導入のために仮の機能を作成する

Doneの定義

• 診断結果の画面に8つのパターンが表示されていること

Doneの定義

• Webデザインの原則に違反しないようにHTML、CSSが調整されている事

補足情報

一度、機能が完成した後に本件の実施を行う。

Doneの定義

• トップページが作成されている事
• リンク先のページが最低1ページ作られている事
• 利用するCSSフレームワーク（使わなくてもOK）が確定している事

補足情報

デザインは仮だが、CSSの基礎的な部分はここで作成する。

Doneの定義

• APIのリクエストに失敗した場合にエラーメッセージが表示されること

補足情報

• エラー表示用のコンポーネントを作成し、エラーメッセージを渡すことでエラーを表示させる。
• エラーページへの遷移は行わない
• Storybookでエラーコンポーネントを確認できること

Doneの定義

• 診断の結果が表示されていること
• 仮のデザインが決まってこと

補足

• 画像はダミーでよい

Doneの定義

• masterブランチにマージされたときにステージング環境にデプロイされるようになっている事
• テスト失敗時はデプロイが行われないようになっている事

Doneの定義

全てのページの文言が確定していること

Doneの定義

• increment、decrementを実行した際に非同期で実行されるようになっている事
• 非同期処理はredux-sagaを用いて実行されるようになっている事

補足情報

実装はこちらを参照。

• https://github.com/nekochans/portfolio-frontend/blob/master/src/redux/middleware/rootSaga.ts

reduxのactionは同期関数である必要があり、どこかで非同期処理を吸収する必要がある。

現状だと redux-saga がある程度複雑な状況にも対応出来て、良く使われているのでそれを利用する。

Doneの定義

• こちら を参考に機能毎にディレクトリ構成が分かれるように変更されている事

補足情報

以下を参考にする。

• https://redux-toolkit.js.org/tutorials/advanced-tutorial
• https://github.com/reduxjs/rtk-github-issues-example

Doneの定義

• APIにリクエスト中にローディングページが表示されること

補足情報

• 適当な画像を表示させる
• Storybookでローディング用の画像を確認する

Doneの定義

• トラッキングされ、 Google Search Consoleでレポートを確認できること

Doneの定義

• jest-styled-componentsが導入され、スナップショットテストでstyleの変化を検知できること

補足情報

https://blog.bam.tech/developer-news/use-storybook-react-project
https://tech.mercari.com/entry/2018/12/19/123834