初心者がReactとfirebaseで作るモバイル対応PWAアプリケーション

このレクチャーではいまいちnpmがはっきり理解できない人に向けてnpmを使う理由とnpmの使い方を紹介します。

npmを使うと大幅に開発効率が上がるので、npmモジュールの利用方法を解説します。

このレクチャーではWindowsユーザー向けにnode.jsとnpm導入の方法を解説します。

このレクチャーではMacユーザー向けにnode.jsとnpm導入の方法を解説します。

このレクチャーではfirebaseという名前はよく聞くと思うのですけど、よく分からない！って人に向けて解説します。

firebaseはログイン機能・データベース・ホスティングなどなど色々とできることがあります。

そのため、この動画を見ていただくとfirebaseでできることが理解できます。

このレクチャーではfirebaseを利用するにあたって必要な初期設定を解説しています。

このレクチャーではWindowsユーザー向けにコマンドでReact（PWAテンプレート）をインストールする方法を解説します。

■ インストールコマンド

npx create-react-app todo-pwa-react --template cra-template-pwa

このレクチャーではMacユーザー向けにコマンドでReact（PWAテンプレート）をインストールする方法を解説します。

■ インストールコマンド

npx create-react-app todo-pwa-react --template cra-template-pwa

このレクチャーではfirebaseを用いたユーザー認証機能を使うために必要な設定を行っていきます（Windows Mac共通）

envファイルの雛形

REACT_APP_FIREBASE_API_KEY=""

REACT_APP_FIREBASE_AUTH_DOMAIN=""

REACT_APP_FIREBASE_DATABASE=""

REACT_APP_FIREBASE_PROJECT_ID=""

REACT_APP_FIREBASE_STORAGE_BUCKET=""

REACT_APP_FIREBASE_SENDER_ID=""

REACT_APP_FIREBASE_APP_ID=""

REACT_APP_FIREBASE_MEASUREMENT_ID=""

このレクチャーではfirebaseの初期化を行うJavaScriptファイルとスクリプトを作成します。

当講座で用いるReactHooksの概要について説明します。

このレクチャーではいよいよ、コンポーネントの作成に入ります。

まずはシンプルなヘッダーコンポーネントを作成します。

このレクチャーではヘッダーコンポーネントにログインボタンを設置し、Googleログイン機能を呼び出す記述をします。

このレクチャーではReactHooksの1つである、useContextを利用して、全てのコンポーネントにユーザー情報を渡す実装を行います。

このレクチャーではfirebaseを利用してログアウト機能を実装します。

このレクチャーではfirebaseのデータベースである、firestoreの概要と使い方を解説します。

このレクチャーではfirestoreを利用するための設定を行っていきます。

このレクチャーでは今回のメインコンポーネントであるDashboardコンポーネントの作成を行います。

このレクチャーではJavaScriptでデータベースと通信する際に必須である非同期通信。

非同期通信を処理するためのPromise, AsyncAwaitについて概要を解説します。

このレクチャーではToDoリストについかする機能を実装します。

このレクチャーではReactHooksの1つである、useEffectを使って、コンポーネントからデータを取得する方法を解説し、実装していきます。

このレクチャーではstateを使って、ToDoリストをユーザーに見えるようにレンダリングを実装していきます。

このレクチャーではfirestoreを操作してtodoを削除する機能を開発します。

このレクチャーではReactのライブラリであるmaterialUIを導入する方法を解説します。

■ materialUI

https://material-ui.com/

■ インストールコマンド

npm install @material-ui/core

npm install @material-ui/icons

このレクチャーではインストールしたmaterialUIをヘッダーに適用して、見た目を整えます。

このレクチャーでは未作成だったフッターコンポーネントを作成します。

このレクチャーではインストールしたmaterialUIをToDo追加フォームに適用して、見た目を整えます。

このレクチャーではインストールしたmaterialUIをToDo一覧に適用して、見た目を整えます。

このレクチャーではインストールしたmaterialUIを使って、後回しにしていた完了機能を実装します。

同時に、firestoreにあるデータを更新する方法も解説し、実装します。

このレクチャーでは、firebaseのhosting機能を使って、アプリをインターネットに公開します。

firebaseコマンドがnot foundになる方へ

export PATH=$PATH:`npm bin -g`

■ アイコン

http://flat-icon-design.com/?p=794

■ 画像サイズ変更

https://www.peko-step.com/tool/resize.html

■ ファビコン作成

https://ao-system.net/favicon/

このレクチャーでは、PWAの大きな特徴である、オフライン動作を実装します。