今回はMaterialUIのテンプレートを用いて、サクッとWEBページを作ってみたいと思います!!
正しくjsxやstateなどなどを理解することも大切ですが、実際に動くものを作って見ましょう
0.Node.jsインストール
まずはNode.jsのインストールから始めていきましょう！
インストール後は、下のコマンドをうって、バージョンが表示されればOKです。
https://nodejs.org/ja/download/
node -v
1.MaterialUI(MUI)からテンプレート選び
MUIには有料だけでなく、無料で使用できるテンプレートがいくつか存在します。
こちらから閲覧が可能です👀
ダウンロードが終わったら、terminalやgit bash等で操作をしていきます。
package.json等も含まれているので、npm startですぐに動いてくれます。
cd ../../material-kit-react //ダウンロードしたフォルダに移動すればOKです！
npm start
2.Firebaseのインストール・その他ファイルの作成
Firebaseの初期設定に関しては、様々な記事が出ていますので、割愛させていただきます。(怠惰)
//インストール
npm install firebase
//.envファイルの作成(firebaseの設定をここに記載します)
touch .env
//firebase.jsの作成
cd /src
touch firebase.js
※srcフォルダと同じ階層にenvファイルが作成されているか確認しておきましょう！
3.envファイルとfirebase.jsファイルの設定
(細々した面倒くさい作業ですが、ここを見するとfirebaseへ接続できなかったりするので、慎重に行いましょう😇)
// .env
// 自分のfirebaseのkeyをそのままガツンと入れてください
REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MEASUREMENT_ID=""
// firebase.js
// こちらはコピーしてそのままガツンと貼り付けてください
import { initializeApp } from 'firebase/app';
import 'firebase/auth';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
initializeApp(firebaseConfig);
export const auth = getAuth();
4.ユーザー作成フォームとFirebaseを連携してみましょう
MUIにはログインフォームと、作成フォームがデフォルトで用意されています。
まずは作成フォームからFirebaseへ登録できるようにしてみましょう！
// RegisterForm.js
// (src/sections/authentication/register/RegisterForm.js)
// 一部抜粋
import { auth } from '../../../firebase';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
password: ''
},
validationSchema: RegisterSchema,
// この部分を追加すればOKです!
onSubmit: (values) => {
//ユーザー登録
createUserWithEmailAndPassword(auth, values.email, values.password)
.then((UserCredential) => {
//その他情報の登録
updateProfile(UserCredential.user, {
displayName: values.firstName + ' ' + values.lastName
});
})
.catch((error) => {
console.log(error);
});
navigate('/dashboard', { replace: true });
}
});
valuesからフォームの情報が取得できるので、createUserWithEmailAndPasswordでFirebaseへ登録を行い、updateProfile でお名前を登録します。
FirebaseのAuthenticationにデータが入っていればOKです！
5.登録情報の表示
既存のデータをFirebaseに登録した情報へ変換してみましょう。
// account.js
// /src/_mocks_/account.js
import { auth } from '../firebase';
const user = auth.currentUser;
const account = {
displayName: user.displayName,
email: user.email,
photoURL: '/static/mock-images/avatars/avatar_default.jpg' //お写真はそのまま使用させていただきます...!!
};
export default account;
正しく取得できれば、Firebaseに登録した情報がテンプレートの代わりに表示されているはずです！お疲れさまでした！
おまけ.ログイン機能の実装
ログイン機能も実装したい場合は、下のjsを挿入すればOKです
// LoginForm.js
import { auth } from '../../../firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';
onSubmit: (values) => {
//ここらへんからです
signInWithEmailAndPassword(auth, values.email, values.password)
.then((data) => {
console.log('Login Success!!');
console.log(data.user);
})
.catch((errors) => {
console.error(errors);
});
navigate('/dashboard', { replace: true });
}
↧