1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

Buefyで3列のグリッドレイアウトを作る

Vue.js Buefy CSS

 

tonyo.design

こちら勉強になった。こんな感じにするだけで3列のグリッドレイアウトになって、 溢れた分は折り返してくれる。  

ul.columns.is-multiline
 　li(v-for="(todo, index) in todos" :key="index" class="column is-4")

Vue.jsのルートインスタンスとコンポーネントの違いを理解する

Vue.js JavaScript

ルートインスタンスとコンポーネントの違い

グローバルコンポーネントとローカルコンポーネントの違い

Firebase Authで匿名ログインを実装して作成したuserデータを取得する

Firebase Firestore ReactNative

Userドキュメント用のTypeを用意する

import firebase from "firebase"

export type User = {
  id?: string
  name: string
  createdAt: firebase.firestore.Timestamp
  updatedAt: firebase.firestore.Timestamp
}

export const initialUser: User = {
  name: "",
  createdAt: firebase.firestore.Timestamp.now(),
  updatedAt: firebase.firestore.Timestamp.now(),
}

匿名認証の機能を実装する

import 'firebase/auth'

export const signin = async () => {
  const userCredential = await firebase.auth().signInAnonymously()
  const { uid } = userCredential.user
  const userDoc = await firebase.firestore().collection("users").doc(uid).get()
  //ユーザー情報が作られていない場合は初期化
  if (!userDoc.exists) {
    await firebase.firestore().collection("users").doc(uid).set(initialUser)
    return {
      ...initialUser,
      id: uid
    } as User
  } else {
    return {
      //firestoreのドキュメントのdataはIDを返さないので展開して返している
      id: uid,
      ...userDoc.data()
    } as User
  }
}

認証画面を作成する

メインのナビゲーターの前にログインしていなかったら、 弾くための認証画面を作る。

screens/AuthScreen.tsx

import React, { useEffect } from "react"
import {
  StyleSheet,
  ActivityIndicator,
  Text,
  View
} from 'react-native'
import { signin } from "../utils/Fire"

export const AuthScreen = () => {
  useEffect(() => {
    const fetchUser = async () => {
      const user = await signin()
    }
    fetchUser()
  }, [])

  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" />
      <Text style={styles.text}>ログイン中...</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    marginTop: 16,
    fontSize: 12,
    color: "#888",
  },
})

今日の学び

  • App.tsxでログイン状態をみて制御を行う
  • 匿名認証はセッション毎にIDが発行されてusersコレクションに作成される。途中からメール認証に統合も可能、ログインしないでいいねとか出来る
  • Firebaseのドキュメント毎にtypeを定義しておくがお作法