テトリス本番開発環境構築
さて、いよいよ、リリースのための開発環境を構築します。(今までのはデモ環境です。)
手順を整理します。
現在下記手順の「3.プロトタイプ構築」まで終わっている想定です。
以後、4方式設計以降を実施します。
完成したら、公開してurlを載せる予定です。
デモ版もきちんと動くのですが、テトリス以外にも色々なデモが混ざってるので、そのままではバンドルファイルをUPできないわけです。
それに、デモ版をまじめにレビューされても困るので。(デモ版に対して欠点を探すような、ひどいあげあし取りな人がいないとも限らない)
手順
-
要求定義
- 発注者の要望のヒアリング
- 使用目的、使用環境、使用者、予算、納期
-
要件定義
- 必要な機能の洗い出し
-
プロトタイプ構築
- HTMLモック構築
- 仮リアクト構築
- デモンストレーション
-
方式設計
- 技術選定
- 言語選定
- ハード、ソフト選定
- 性能比較、機能比較、予算比較
- サーバー選定
- 見積比較、機能比較、性能比較
- ライブラリ選定
- バージョン選定
- ライブラリ整合性確認
- 開発環境定義
- コミュニケーションツール
- 開発用リポジトリ
- 開発用PC、デバイス
- 技術選定
-
開発環境構築
- 開発用サーバー構築
- 開発用モック構築
- 開発用フロントエンド構築
-
基本設計
- 画面要素定義
- イベント定義
-
開発準備
- TypeScript定義
- Storybook製造
- APIモック構築
- 各種アカウント購入
-
詳細設計
- データ定義
- API定義
- コンポーネント定義
- 内部ロジック定義
-
プログラミング
- TypeScript製造
- React製造
- 自動テスト製造
- DB製造
- API製造
-
単体テスト
- 自動単体テスト
-
結合テスト
- 自動結合テスト
-
総合テスト
- 手動総合テスト
デプロイ
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. 開発環境構築
コマンド
- npm init
- yarn add react react-dom
- yarn add typescript
- yarn add ts-loader css-loader sass-loader file-loader style-loader sass sass-loader
- yarn add webpack webpack-cli webpack-dev-server
- yarn add storybook
- yarn add eslint prettier
- git init
- touch .gitignore
- touch tsconfig.json
- touch .prettierrc
- touch .prettierignore
- touch src
- touch dist