Reactでテトリスをつくる⑩＿本番開発環境構築

テトリス本番開発環境構築

さて、いよいよ、リリースのための開発環境を構築します。（今までのはデモ環境です。）
手順を整理します。

現在下記手順の「3.プロトタイプ構築」まで終わっている想定です。
以後、4方式設計以降を実施します。

完成したら、公開してurlを載せる予定です。
デモ版もきちんと動くのですが、テトリス以外にも色々なデモが混ざってるので、そのままではバンドルファイルをUPできないわけです。
それに、デモ版をまじめにレビューされても困るので。（デモ版に対して欠点を探すような、ひどいあげあし取りな人がいないとも限らない）

手順

1. 要求定義

   1. 発注者の要望のヒアリング
   2. 使用目的、使用環境、使用者、予算、納期

2. 要件定義

   1. 必要な機能の洗い出し

3. プロトタイプ構築

   1. HTMLモック構築
   2. 仮リアクト構築
   3. デモンストレーション

4. 方式設計

   1. 技術選定
      1. 言語選定
      2. ハード、ソフト選定
         1. 性能比較、機能比較、予算比較
   2. サーバー選定
      1. 見積比較、機能比較、性能比較
   3. ライブラリ選定
      1. バージョン選定
      2. ライブラリ整合性確認
   4. 開発環境定義
      1. コミュニケーションツール
      2. 開発用リポジトリ
      3. 開発用PC、デバイス

5. 開発環境構築

   1. 開発用サーバー構築
   2. 開発用モック構築
   3. 開発用フロントエンド構築

6. 基本設計

   1. 画面要素定義
   2. イベント定義

7. 開発準備

   1. TypeScript定義
   2. Storybook製造
   3. APIモック構築
   4. 各種アカウント購入

8. 詳細設計

   1. データ定義
   2. API定義
   3. コンポーネント定義
   4. 内部ロジック定義

9. プログラミング

   1. TypeScript製造
   2. React製造
   3. 自動テスト製造
   4. DB製造
   5. API製造

10. 単体テスト

    1. 自動単体テスト

11. 結合テスト

    1. 自動結合テスト

12. 総合テスト

    1. 手動総合テスト

13. デプロイ

4.1 技術選定

技術選定はReactで決定
WindowsでnodejsでOK

4.2 サーバー選定

格安のWebサーバーでOKだが、APIとDB積めること

4.3 ライブラリ選定

• Storybookでカタログつくって早々に公開したい
• Storybookやるとpropsが複雑になるのでTypeScriptで型参照できると便利
• Storybookに付随してCSS Moduleが相性いいので、loaderを積む
• サーバーは、とりあえずwebpack-dev-serverでOK
• 画面切り替えするからreact-router-dom必要
• ゲームだしHooks使うからRedux不要
• 開発速度重視なので、yarn使って適当にバージョン決めればOK

4.4 開発環境定義

• 個人開発なのでGitLabの無料枠でOK
• ソース公開用に無料のGitHub使う
• 1人なのでコミュニケーションツール不要

5. 開発環境構築

コマンド

1. npm init
2. yarn add react react-dom
3. yarn add typescript
4. yarn add ts-loader css-loader sass-loader file-loader style-loader sass sass-loader
5. yarn add webpack webpack-cli webpack-dev-server
6. yarn add storybook
7. yarn add eslint prettier
8. git init
9. touch .gitignore
10. touch tsconfig.json
11. touch .prettierrc
12. touch .prettierignore
13. touch src
14. touch dist