サンプルコードばかりでは申し訳ないので、今回から複数回に分けてReactでミニアプリを作っていきます。
サーバー環境はなんでもいいのですが、簡単に使えるので今回はFirebaseを使います。
今回は準備回です。
作るアプリの概要
せっかく作るなら実際に使えるものを作りたいので、私が"お勉強"をするときに書いている「まとめ」を作成できるアプリを作って行こうと思います。
例えばReactのことを学ぶとすると、
- 「Reactを一言で表すと？」
- 「Reactはどんな問題をどう解決した？」
- 「Reactの代わりとなるものは？」
- 「Reactに関連するキーワードは？」
- 「Reactの本があるとして目次を作るとしたら？」
こういった質問(自問自答)をしていくことで理解を深めていきます。
これをWebアプリ化してみます。
流れは以下のような形。
- テーマ(お題)を決める
- デフォルトで基本的な質問を生成する
- 質問に答える
- 保存する
- 必要であればさらに質問を追加し、それに答える
言葉で説明するだけではイメージが掴めないので、簡単にワイヤーフレームを作成していきます。
Figmaを使ってざっくり設計
ワイヤーフレームの作成にはFigmaを使います。
無料では作成できるプロジェクト数に限りがありますが、機能は十分です。
まずはデータの一覧画面から作っていきます。ざっくり作っていきます。
このようにそれぞれアイキャッチ画像を設定し、リスト表示させます。
またメインとなる質問ページは以下のようにします。こちらもイメージがつかめれば十分なので細かいところは気にしないで下さい。
最初に5つの基本的な質問を表示し、その下に質問を追加するボタンと保存ボタンを設置します。
また、灰色のボックスになっているところは入力フォームを配置します。(各種入力フォームは作り込むつもりがないので省略)
大体このようなイメージで作っていきます。ここから作っていく過程で修正したり、気が変わったりするかもしれません。
必要となる技術
このミニアプリでは以下の技術を使用します。
| フロントエンド | React |
| バックエンド | Firebase |
| UI | Material UI |
これらを使って基本的なCRUD操作、画像アップロード, 認証をします。
またルーティングにReact Router、フォーム処理にReact Hook Form、非同期通信にaxiosを使用します。
状態管理に関してはReduxを使用します。
Firebaseプロジェクト作成
実装は次回からするので、今回はFirebaseのプロジェクトを作成しておこうと思います。
Firebaseは十分な無料枠がありますし、クレジットカードの登録等もなく使えます。
右上のコンソールへ移動からFirebaseのプロジェクトを作成していきます。
画面に従いプロジェクトを新規作成します。
プロジェクト作成の際にGoogle Analyticsを有効にするか聞かれますが、OFFにします。
プロジェクト画面左のメニューからDatabseを選び、新規データベースを作成します。
FirebaseにはCloud FirestoreとRealtime Databaseの2種類がありますが、今回はRealtime Databaseを使います。
認証は後で行うので、まずはテストモードを選択し、実装を進めていきます。
準備は出来たので、次回から実装をしていきます。
===
3日後までに更新したい......
更新しました。続き↓
-
React + Firebaseのミニアプリを作る【実装編1】
React + Firebaseでミニアプリを作っていきます。 前回の記事で作るアプリの計画をしたので今回は実際にコードを書いていきます。 前回の記事はこちらから↓ Con ...
続きを見る