Webプログラミング

React + Firebaseのミニアプリを作る【計画編】

サンプルコードばかりでは申し訳ないので、今回から複数回に分けて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 ...

続きを見る

この記事は参考になりましたか?

下記のボタンよりアンケートにご協力お願いします。

-Webプログラミング
-,

© 2020 エンジニアの本棚