はじめに
今回の投稿では全体の作業の流れと、それぞれの作業でどんなことをやるかの作業詳細について解説します。本来その1でやる内容なのですが、計画不足ですみません。
全体の流れ
全体の流れへ下記の通りです、なお既に仕様は確定しているものと仮定します。
- staticのセットアップ（済み）
- appのセットアップ（済み）
- HTMLのルーティング（済み）
- ページ仮作成
- appのモデル作成（済み）
- テストデータ作成（済み）
- APIのルーティング
- APIの仮組み
- staticのモデル作成
- セッションと認証管理の設定
- ページ作成
ページ仮作成を飛ばしてしまっていました、次回のその8ではViewの実装をやろうと思います。
staticのセットアップ
staticのセットアップではwebpack-dev-serverなどをインストールし、クライアントサイドのJavaScriptのコーディングがスムースになるようにします。
-
webpack_dev_server,nodemon,gulpのインストール -
gulpfile.jsの追加 -
webpack.config.jsの追加 -
package.jsonの編集 - HTML5 Boilerplate からファイルをコピー
-
src/entry.jsの追加 - .gitignore の追加
appのセットアップ
appのセットアップではexpressなどのインストールとサーバ起動のスクリプト追加などにより、開発が開始できるようにします。
-
express,proxy-middleware,serve-static,morgan,jadeのインストール - 開発用に
nodemonのインストール -
index.jsの追加 -
bin/wwwの追加 -
package.jsonの編集 -
routes/pages.jsの追加 -
views/layouts/default.jadeの追加 -
views/pages/anonymous-home.jadeの追加
HTMLのルーティング
HTMLのルーティングでは次の作業であるページ仮作成で作成されるページをどのURLに配置するを設定します。
-
index.jsの編集 -
routes/projects.jsなどの追加 -
views/projects/admin-list.jadeなどの追加 -
views/layouts/2-column/admin.jadeなどの追加
ページ仮作成
ページ作成ではモックアップを作成します。何かとモックアップを作ると、どんなものが必要なのかが見えてくるので便利だなーと、自分は忘れっぽいので重宝しています。
-
views/projects/admin-list.jadeなどの編集
appのモデル作成
データベースに格納されるデータを設計します。
-
sequelize,sqlite3,mysqlをインストール - 開発用に
sequelize-cliをインストール -
sequelize initでmodels/index.jsを追加 -
models/project.jsなどの追加 -
dataディレクトリの作成
テストデータ作成
テストデータがあった方が動作確認が楽なのでテストデータを作成します。
-
test/fixture/index.jsの追加 -
test/fixture/projects.jsなどの追加 -
bin/syncの追加
APIのルーティング
次の作業のAPIの仮組みで作成するAPIをどのURLに配置するかを設定します。
-
index.jsの編集 -
routes/projects.jsなどの編集
APIの仮組み
リソースに対するGET, POST, PUT, DELETEなど基本的なREST APIを実装します。
-
routes/projects.jsなどの編集
staticのモデル作成
フォームではValidationが必要になることが多いですが、これをクライアントサイド側だけでやりたいので、staticのモデルを作成します。
-
static/src/models/project.jsなどの追加 -
static/src/entry.jsの編集
セッションと認証管理の設定
ユーザのIDがないと保存できないテーブルなどもありますので、この段階でセッションを設定し、認証管理を行えるようにします。
-
express-session,connect-redisのインストール -
app/index.jsの編集
ページ作成
個々のページを実装していきます、だいたいが下記の繰り返しです。
- Viewの編集
- APIの追加と変更
- Routerの追加・編集
- Componentの作成
Componentとはクライアントサイドで使用するパーツのことを指しています。HTMLのWeb Componentと概念が近く、私が勝手にそう呼んでいます。
おわりに
これまで無計画に進めてしまって読みづらい記事になってしまって恐縮ですが、これからはもう少し計画的に記事を書いていこうと思います。
次回は飛ばしてしまった作業である「ページ仮作成」についてご紹介します。