【チュートリアル】ReactとFirebaseを使ったノートアプリの作り方

これからReactとFirebaseを使ってノートアプリを実装していきます。
対象としているのはフロントエンドの基本的な勉強をしてきたけどどうやってウェブアプリを作ればいいのかわからないといった方を想定しています。
このチュートリアルではReactで実装していくのでReactの知識があることを前提にしています。
さらにブラウザの開発ツールやターミナルも一通り触れることを前提にしています。
またCSSでのスタイリングの部分には触れません。ロジックの部分にフォーカスするためソースコードのコピペで省略しています。
このチュートリアルを通してウェブアプリケーションの基本的な仕組みを説明していきたいと思います。

何を作るのか？

機能としては
- ノートの新規作成
- ノートの編集（タイトルおよび本文）
- ノートの削除
というごく基本的な機能に絞って実装していきます。

どんなものを作るのかというのはこちらの動画を参考にしてみてください。

大まかな構成としては左にノート一覧のセクションがあり選択したノートを右側に表示して編集できるようになっています。

こちらから動くものを触ってご確認いただけます。

React App

使用する技術・ツール

- React：ボイラープレートとしてcreate-react-appを使用します
- React-quill：リッチなテキストエディタをReactのコンポーネントとして提供しているパッケージです。
- MATERIAL-UI：Googleのマテリアルデザインに基づいたReactのコンポーネントです。
- Firebase：Firebase自体は様々な機能を提供しているのですが今回はFirestoreというデータベースの機能を利用します。

実装の流れ

- 実装する機能の洗い出し
- create-react-appでボイラープレートの作成
- Firestoreの設定
- Firestoreの動作確認
- Editor、Sidebar、SidebarItemコンポーネントの実装
- テキストエディタのコンポーネントであるreact-quillの実装
- 「新規ノート作成」ボタンのコンポーネントの機能実装
- 「タイトル一覧」のコンポーネントの実装
- ノートを削除するボタンの機能実装