Webアプリの構築準備

Webアプリの構築を進めていきます。

1. FirebaseでWebアプリを作る
2. 要件を考える
3. 仕様を考える
   仕様書については別で管理したいので記事には書きませんでした。
4. プロトを作る
5. 実装する
6. テスト
7. 使ってみる
8. 公開する
9. 効果や状況を確認
10. カイゼンする

まずはプロト作成を兼ねてフロント側を実装します。 その後サーバ側の処理を定義して利用できるようにします。

フロントエンドについてはせっかくなのでSPAで作成します。そのために今回はReactを利用します。 このブログはGatsbyを使っており、Reactの扱いに関してはすでに知識があります。簡単に実装できることから選択しました。

今回は、Reactを使ってSPAのアプリケーションを作るための環境の構築をやっていきます。 参考

必要なもの

基本的にはWebpack、Babel、Reactなどをインストールする必要があります。 create-react-appを利用することで簡単に用意できます。

npm install -g create-react-app
create-react-app hello-world

/hello-world/ディレクトリに必要なものが一通り用意されます。ディレクトリに入ってnpm startを実行すればローカルでの確認も始めることが出来ます。

ローカルでの動作確認

以下を実行すればローカルで動作します。URLとポート番号がコマンドラインに表示されるのでアクセスすれば動作確認が可能です。

npm start

プログラムをビルドする

以下コマンドを実行すれば、ビルドが行われデプロイ用のファイルが生成されます。/build/以下に生成されますので、その中身をFirebaseにdeployすればいいことになります。 buildコマンドを実行した後にfirebase.jsonを編集して、Hosting対象ディレクトリの設定を修正しておきましょう。

npm run build

Firebaseeへデプロイする

firebase.jsonのHostingの項目のPublicに指定しているディレクトリがデプロイの対象となりますので、設定を確認・変更しておきます。

Hostingの設定を変更した後はdeployコマンドを実行することでFirebaseにファイルを反映できます。

firebase deploy

gitにソースをコミットしておく

いよいよプログラミングっぽくなってきました。個人開発なので共有とかの必要はありませんがバージョン管理はどんなときでも利用したほうがいいです。

変更を元に戻したり出来ますし、バックアップの代わりにもなります。githubも簡単に利用ができるのでドンドン使いましょう。 将来的にプロジェクトでチーム開発をやるときに備えて、gitの一通りの操作は学ぶべきです。 SVNを使っている環境もあると思いますが、gitを理解出来ていればすぐに理解できます。

gitignore

基本的に/node_module/以下のファイルはgitにコミットしないのが通例です。 下記初に必要なパッケージはプロジェクトのリポジトリからpackage.jsonを取得して、各環境にてそれを参照して必要なモジュールをインストールします。 環境ごとにバージョンが異なったりすると、ローカルの環境が壊れてしまうこともあるので注意しましょう。 nodeを使った開発を行う場合覚えておきましょう。

サンプルとなるgitignoreがcreate-react-appで取得・配置されているので確認しておくと良いです。 以下のURLにも配置されています。 gitignoreのサンプル

ページを作成

あとはWebアプリを作成していきましょう。どこから作るか予定を立てて計画的に進めていきます。

現在もろもろ作成中です。

動作を確認

構築ができたら動作確認していきましょう。最後に確認するのではなく、出来た機能から少しづつ確認しながら進みましょう。不具合等早めに見つけて直せると良いです。細かいテストを実施するためにも、構築前に仕様や正しい挙動を明確に定義しておくことが大切です。