常連

拍手喝采

自己紹介

### 前提・実現したいこと

フロントサイド(Nuxt.js)からaxiosでサーバーにアクセスしています。
サーバー側はSpringBootの構成で開発を行っています。

SpringBootの『Filterクラス』で例外を発生させた時に、SpringBoot側で
axiosのerror.response.dataにメッセージやフラグなどを設定する方法はないでしょうか。

statusが500の場合は、errorに「Internal Server Error」が設定されているが
アプリ独自のメッセージや処理を追加したいと思っています。
良い方法がないでしょうか。宜しくお願い致します。



### 該当のソースコード

```ここに言語名を入力
axios.post(url,パラメーター)
.catch((error) => {
   alert(error)   ←　ここでサーバーで設定したメッセージなどを利用したい。
})
```

axiosのerror.response.dataにメッセージを設定したい。

![イメージ説明](78ebd99a2f9d628381c57f439ded137e.jpeg)コードが長いので断片的な部分だけです、コメント部の記入すべきコードです。


2Dアクションゲームでベクトルを使って移動した時にブロックや他の画像と重なってしまういわゆる"めり込み"の修正方が知りたいです。自分はベクトルを使い方向の情報を使ってぶつかってきた方向に追い返す処理を考えました。
図の場合は右と下に進んでいるのでその逆の左上に追い返す(座標をずらす)ということをしたいです。
また水平に並んだブロックに上から下と右に移動しながら進んできた時に上に座標をずらすといった処理を書きたいのですがどうしたらいいのか実装が思いつかないのですが教えてくれますでしょうか？

画像:画像の青がプレイやーで端が紫の青いブロックは移動してる時つまりプレイヤーに移動速度してる情報が追加されたときの画像で赤がブロックです。

環境:dxlibです右がx++で下がy++の座標系です。2Dです。
player_col()部です。



追記ですが下にブロックがあり右の真横にもブロックがる場合上に上がってしましますこれはどうすればいいのでしょうか？
画像の場所です。

![イメージ説明](9277a5013d6e7073fc64522f6ceb8d9f.jpeg)
![イメージ説明](5ae9a3313f42139457a6c25546852d53.jpeg)






```ここに言語を入力

Position Map::Collision::isMapCell(const Position pos)
{
	Position p;
	for (int y = 0; y < MAP_HEIGHT; y++)
	{
		for (int x = 0; x < MAP_WIDTH; x++)
		{

		}
	}

	if (get_mapCell(pos.get_x() / CELL, pos.get_y() / CELL) == (int)mapChip::eBrick || 
							get_mapCell(pos.get_x() / CELL, pos.get_y() / CELL) == (int)mapChip::eQuestion)
	{

		p.new_pos_x((pos.get_x() / CELL));
		p.new_pos_y((pos.get_y() / CELL));
		ofs << "p.get_x(): " << p.get_x() << std::endl;
		ofs << "p.get_y(): " << p.get_y() << std::endl;

		return p;

	}





	return Position(-1,-1);
}

//座標が引数

std::optional<Position> Map::Collision::col(const Position p)
{
	Position c_pos(Map::Collision::isMapCell(p));

		if (c_pos.get_x() > -1 && c_pos.get_y() > -1) {
			if (c_pos.get_x() * CELL <= p.get_x() && (c_pos.get_x() * CELL) + CELL >= p.get_x() )
			{

			}
		}



	return std::nullopt;
}

/*全方位の当たり判定 return セル番号を返す*/
std::optional<Position> Map::Collision::player_col(const Position *pos,const Position *move)
{
	Position p;
		p.new_pos_x( pos->get_x() + move->get_x() + CELL);
		p.new_pos_y( pos->get_y() + move->get_y() + CELL);

	static bool isground = false;

	int px = pos->get_x();
	int py = pos->get_y();


	int add_x = move->get_x();
	int add_y = (int)move->get_y();

	//    ofs << "move->get_x(): " << move->get_x()<<"\n";
	//    ofs << "move->get_y(): " << move->get_y() << "\n";

	int corr_x = 0;
	int corr_y = 0;


	
	

	Position pp = Map::Collision::isMapCell(p);
	if (pp.get_x() > -1) {

		if (move->get_x() > 0)
		{

			//ofs << "x補正" << std::endl;
			//px = pos->get_x() -CELL;

		}

		//ofs << "playe_col isground: " << isground << std::endl;

		if ((move->get_y() < 0))
		{
		ofs << "ground " << std::endl;

			isground = true;

			//py -= ((pos->get_y() + (-move->get_y()) + CELL) - (pp.get_y() * CELL));
			//ofs << "pp.get_y(): " << ((pos->get_y() + (-move->get_y()) + CELL) - (pp.get_y() * CELL));
			
			int yy = ((pos->get_y() + (-move->get_y()) + CELL) - ((pp.get_y() * CELL)));
			py -= yy;
		}



		std::optional<Position> p = Position(px, py);
		return p.value();//セルを返す                    
	}


	
	

	return std::nullopt;
}
```







```ここに言語を入力
#include <iostream>
#include <fstream>
#include "Input.h"
#include "Player.h"
#include "DxLib.h"
#include "Map.h"
#include "Animation.h"

#define MOVE_SPD 5
#define JUMP_FORCE 4.0624 * 3

static std::ofstream ofs("Log.txt");

/*コンストラクタ*/
Player::Player(const char* str, int xx, int yy)
{

	//LoadDivGraph(str,7,7,1,64,64,g_handle);
	AnimeClip = new Animation(anime_s::ewait,str,7,7,1);
	pos = new Position();
	prev = new Position();
	move = new Position();

	AnimeClip->setAnime(anime_s::ewalk,1,3,3);
	AnimeClip->setAnime(anime_s::ewait, 0, 0, 1);
	AnimeClip->setAnime(anime_s::ejump, 5, 5, 1);


}

/*計算更新*/
void Player::Update()
{
	
	gravity();

	input_key();	
	jump_up();
	//side_move();//

	AnimeClip->Update();

	DrawFormatString(200, 280, GetColor(255, 255, 255), "y %d", pos->get_y());
	DrawFormatString(200, 360, GetColor(255, 255, 255), "x %d", pos->get_x());
//	ofs << (double)std::atan2((double)pos->get_x(),(double)pos->get_y()) << std::endl;
	DrawFormatString(100, 200, GetColor(255, 255, 255), "isGround %d", isGround);
	DrawFormatString(100, 280, GetColor(255, 255, 255), "isJump %d", isJump);

	ofs << "pos.x: " << pos->get_x() << std::endl;
	ofs << "pos.y: " << pos->get_y() << std::endl;

	*prev = *pos;
}


/*描画更新*/
void Player::Draw_Update()
{
	


	if ( key == -1)
	{
		//DrawTurnGraph(get_x(), get_y(), g_handle[0], true);
														///////
		DrawTurnGraph(pos->get_x(), pos->get_y(), AnimeClip->draw_setClip(), true);

	}

	/*右→*/
	if (key == 1)
	{													///
		DrawGraph(pos->get_x(), pos->get_y(), AnimeClip->draw_setClip(), true);
	}




	AnimeClip->Draw_Update();


	
}

/*キー入力*/
void Player::input_key()
{
	if (keybord(KEY_INPUT_LEFT) > 0)//←
	{
		
		key = -1;
		AnimeClip->Update_changeAnime(anime_s::ewalk,key);
		pos->set_x(-MOVE_SPD);
		move->new_pos_x(-MOVE_SPD);


	}else if (keybord(KEY_INPUT_RIGHT) > 0)//→
	{
		
		key = 1;
		AnimeClip->Update_changeAnime(anime_s::ewalk,key);
		move->new_pos_x(MOVE_SPD);

		
		pos->set_x(+MOVE_SPD);

	}else if (keybord(KEY_INPUT_UP) > 0)//上
	{
		//pos->set_y(+MOVE_SPD);

	}else if (keybord(KEY_INPUT_DOWN) > 0)//下
	{
	//	pos->set_y(-MOVE_SPD);
	}

	else if (keybord(KEY_INPUT_SPACE) > 0)//ジャンプ
	{
		//AnimeClip->Update_changeAnime(anime_s::ejump);
		
			if (isGround == true && jf == 0) {
				//isJump = true;
				isGround = false;
				jf = JUMP_FORCE;
			}
		
		AnimeClip->Update_changeAnime(anime_s::ejump);

	}
	else//何も押していない時
	{

		move->new_pos_x(0);

		AnimeClip->Update_changeAnime(anime_s::ewait);

	}




}

/************************ジャンプ ***********************/
void Player::jump_up()
{
	if (Map::Collision::player_col(pos, move) == std::nullopt) {

		if (isGround == false) {

			move->new_pos_y((int)jf);
			pos->set_y((int)jf);

			//if (Fps::gframe() % 20 == 0) {

			jf = ((jf - 0.126953125f * 20.0f));

			if (jf < -0.126953125f * 3.0f * 10.0f)
			{
				jf = -0.126953125f * 3.0f * 10.0f;
				//pos->set_y();
			}
			//}
		}

	}
}
/*********************************************************/


/***********************重力*******************************/
void Player::gravity()
{


	/*地面着地*/
	if (Map::Collision::player_col(pos, move) != std::nullopt)
	{
		//	ofs << "test\n";
		std::optional<Position> p = Map::Collision::player_col(pos, move);
		pos->new_pos_x(p->get_x());
		pos->new_pos_y(p->get_y());

		
		//pos->set_y(p->get_y());
		//pos->set_x(-p->get_x());

	//	ofs << "under_col true\n";

	}
	else {

		//ofs << "palyer_col nullopt" <<"\n";

	}

	//落下
	if (Map::Collision::player_col(pos,move) == std::nullopt)

	//if (Map::Collision::under_col(pos, prev) == std::nullopt && isGround == false)
	{

		//DrawFormatString(200, 200, GetColor(255, 255, 255), "x %d", pos->get_x());

		//if (Map::Collision::player_col(pos, move) == std::nullopt) {
			if (isGround == false) {
				move->new_pos_y((int)jf);
				pos->set_y((int)jf);

				jf = ((jf - 0.126953125f * 20.0f));

				if (jf < -0.126953125f * 3.0f * 10.0f)
				{
					jf = -0.126953125f * 3.0f * 10.0f;
					//pos->set_y();
				}
			}
			else {

			}
//		}

	}





}
/**********************************************************/




```

ベクトルを使った当たり判定の実装方法が知りたい

現在、iOSアプリの開発でfirebaseをバックエンドに用いたいと思っています。

そこでユーザー登録をTwitterでも匿名認証でもいいのですが、ユーザーを新規登録する際にfirestoreにも`users`コレクションの中にドキュメントキーに`uid`を用いて保存するという一般的な手法を用いたいと思います。
しかし、firebase Authenticationのメソッドでは、新規登録と既存のユーザーアカウントにログインするという別々のメソッドが存在しなく`signInAnonymously(completion:)`や`Auth().signIn(with: credential)`などのサインインしてユーザーが存在しなければユーザーを作成し、存在していればそのままログインするといったようなメソッドしかないように思われます。(メールアドレス認証をのぞいて)

しかし、これだと次のようにサインインした時にfirestoreにユーザー情報を保存する処理を書いた時、ログアウトしてサインインする度にfirestoreへの書き込みの処理が実行されるかと思います。
```
//Twitter認証を例にします。
var provider = OAuthProvider(providerID: "twitter.com")
provider.getCredentialWith(nil) { credential, error in
  if error != nil {
    // Handle error.
  }
  if credential != nil {
    Auth().signIn(with: credential) { authResult, error in
      if error != nil {
        // Handle error.
      }
      // userInfoは、ユーザー情報が入った[:]型
      //この部分の処理をユーザー新規登録の一回のみにしたい。
      db.collection("users").document(authResult.uid).setData(userInfo)

    }
  }
}
```
```
//匿名認証の場合
Auth.auth().signInAnonymously(completion: { (authResult, error) in
    if let error = error {
        print("failed to sign in anonymously: ", error)
    }
    guard let user = authResult?.user else { return }
    let uid = user.uid
    //この処理をFirebaseプロジェクトにてユーザーが新規登録された時だけの実行にしたい
    db.collections("users").document(uid).setData(userInfo)
})
```
しかし、私はFirebaseのAuthentication側でユーザーが登録された時だけこのfirestoreへのユーザー情報の書き込みを行いたいです。
これを区別させる方法はあるのでしょうか？

バックグラウンド関数も考えましたが、トリガーに遅延が発生する可能性があることやできるだけClientSDKを用いたいのでここでは使わないこにしたいと思っています。

Firebase: ユーザー登録時にその他のユーザー情報をfirestoreに登録する処理を１回だけ行えるようにしたい

### thisが何をどう参照しているのかよく分からない

今まで避けていたのですが、理解を深めようとJavaScrpt勉強中です。
thisで躓くといったような記事は散々見かけましたが・・・
自分も例に漏れず躓いてしまいました；；
どうかお力をお貸しください宜しくお願いします。

### 発生している問題・エラーメッセージ

```
出力結果がundefinedになる
```

### 該当のソースコード

```js
let People = {};

class Human{
    constructor(){
        if(this === People.TANAKA){
            this.value = 'TANAKA';
        }else if(this === People.YAMADA){
            this.value = 'YAMADA';
        }
    }
    get name(){ return this.value }
}

People = {
	TANAKA : new Human(),
	YAMADA : new Human()
}
console.log(People.TANAKA.name); //=> undefined
```
### new Human()でそれを指してるはず・・・？
自分の理解では
```js
People = { 
    TANAKA : new Human() //この場合
```
```js
if(this === People.TANAKA) //thisがPeople.TANAKAになるので
```
```js
this.value = 'TANAKA'; //this.valueはTANAKAになる
```
と思っていたんですがどうやら違うようです。
この場合、thisは何を参照しているのでしょうか？

javascript勉強中なのですが、thisの扱いがよくわかりません。。。

## 概要
現在、React + Laravel + Pusherを用いたリアルタイムのチャット機能を実装しています。
UIのイメージとしは、チャットボタンを押すとチャット用のダイアログが表示され、そこでメッセージのやりとりをするイメージです。
下記のコードの意図としては、useEffectでPusherの設定をし、setMessagesでPusherからのメッセージ（相手が送信したメッセージ）をmessages(メッセージの配列)に追加し、再レンダーをかけてリアルタイムのチャット機能を実装するという感じです。
.listenの後にconsole.log(e)するとメッセージが表示される為、恐らくPusherからのデータは取得できていますが、肝心のsetMessages後の再レンダーで思った様な挙動をしていません。
具体的には、チャットの画面が真っ白になります。

自分なりに色々調べてみましたが、解決せず…。
どなたか解決方法のご教授お願い致します。
## 該当のコード
```
import React, { useEffect } from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { useChannel, useEvent } from 'use-pusher'

import styled from 'styled-components'
import Button from '@material-ui/core/Button'
import IconButton from '@material-ui/core/IconButton'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogTitle from '@material-ui/core/DialogTitle'
import Divider from '@material-ui/core/Divider'
import TextsmsIcon from '@material-ui/icons/Textsms'
import TelegramIcon from '@material-ui/icons/Telegram'

import Chat from './../../../models/Chat'
import User from './../../../models/User'
import Board from './../../../models/Board'

import Pusher from 'pusher-js'

const ChatDialog = props => {
    const { open, onClose, fullScreen } = props
    const [msg, setMsg] = React.useState('')
    const [messages, setMessages] = React.useState([])
    const userID = useSelector(state => state.UserReducer.userID)
    let isChanged = true

    useEffect(() => {
        Echo.channel('chat')
            .listen('ChatMessageReceived', (e) => {
                const newMessages = [...messages, e.message.message]
                setMessages(newMessages)
            })

        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.get(token, boardID)
                .then(res => {
                    setMessages(res.data.messages)
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }, [isChanged])

    const handleOnChangeMsg = e => {
        setMsg(e.target.value)
    }

    const handleSendMsg = () => {
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.send(token, boardID, msg)
                .then(res => {
                    setMsg('')
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }

    const messageList = (
        Array.from(messages).map((msg, i) => (
            <React.Fragment key={i}>
                {msg.user_id === userID ? <UserMsg>{msg.message}</UserMsg> : <Msg>{msg.message}</Msg>}
            </React.Fragment>
        ))
    )

    const fullDialog = (
        <Dialog
            fullScreen
            open={open}
            scroll="paper"
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <Flex>
                <StyledDialogTitle><StyledTextsmsIcon /><Span>チャット</Span></StyledDialogTitle>
                <StyledDialogActions>
                    <Button onClick={onClose} color="primary" autoFocus>
                        <Span>閉じる</Span>
                    </Button>
                </StyledDialogActions>
            </Flex>
            <DialogContent>
                <Textarea placeholder="メッセージを入力" onChange={handleOnChangeMsg} value={msg}></Textarea>
                <StyledIconButton onClick={handleSendMsg}><StyledTelegramIcon /></StyledIconButton>
            </DialogContent>
            <MessageArea>
                {messages.length === 0 ? <p>メッセージがありません</p> : messageList}
            </MessageArea>
        </Dialog >
    )
    const nonFullDialog = (
        <Dialog
            open={open}
            scroll="paper"
            fullWidth={true}
            maxWidth="sm"
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <Flex>
                <StyledDialogTitle><StyledTextsmsIcon /><Span>チャット</Span></StyledDialogTitle>
                <StyledDialogActions>
                    <Button onClick={onClose} color="primary" autoFocus>
                        <Span>閉じる</Span>
                    </Button>
                </StyledDialogActions>
            </Flex>
            <DialogContent>
                <Textarea placeholder="メッセージを入力" onChange={handleOnChangeMsg} value={msg}></Textarea>
                <StyledIconButton onClick={handleSendMsg}><StyledTelegramIcon /></StyledIconButton>
            </DialogContent>
            <MessageArea>
                {messages.length === 0 ? <p>メッセージがありません</p> : messageList}
            </MessageArea>
        </Dialog >
    )

    return (
        <>
            {fullScreen === true ? fullDialog : nonFullDialog}
        </>
    )
}

const Flex = styled.div`
    display: flex;
    justify-content: space-between;
    background-color: #224272;
`
const Textarea = styled.textarea`
    resize: none;
    width: 100%;
    height: 35px;
    border: 1px solid #224272;
`
const Span = styled.span`
    font-size: 0.9em;
    color: white;
`

const StyledDialogTitle = styled(DialogTitle)`
    color: white;
`
const DialogContent = styled.div`
    height: 45px;
    display: flex;
    justify-content: space-between;
    padding: 0;
    padding-left: 5px;
    padding-top: 5px;
`
const MessageArea = styled.div`
    height: 450px;
`
const StyledDialogActions = styled(DialogActions)`

`
const StyledIconButton = styled(IconButton)`
    vertical-align: middle;
    padding: 0 10px;
    height: 35px;
`

const StyledTextsmsIcon = styled(TextsmsIcon)`
    vertical-align: middle;
    margin-right: 3px;
`
const StyledTelegramIcon = styled(TelegramIcon)`
    vertical-align: middle;
    padding: 0;
`

const Msg = styled.p`
    width: 100%
    text-align: left;
`
const UserMsg = styled.p`
    width: 100%
    text-align: right;
`

export default ChatDialog
```

React+Pusherを利用したチャットでの問題

TypeScript + React（JSX）のコードを書いていたのですが、うっかり拡張子が`.ts`のままJSXを書いてしまってトラブルとなることがありました。もちろん拡張子を`.tsx`とすれば解決はするのですが、JSXの有無に関わらず、最初から全ファイルを`.tsx`としてしまって不都合なことはありますでしょうか。

全ファイルを`.tsx`で作った場合、「`.ts`はMPEG-2 TSと拡張子が衝突するけど`.tsx`はそうならない」「あとからJSXが必要になってもそのまま書け、ファイル名変更が不要」などのメリットが見込めます。

下に書いたように「`<type>`形式でのキャストができない」ということは承知ですが、それ以外に「`.tsx`ファイルだとこんな不都合がある」ということがありましたら教えていただければと思います。

### 調べたこと

* [Allow JSX without using `.tsx` extension](https://github.com/microsoft/TypeScript/issues/30503) - 逆に、`.ts`でもJSXを書けるようにしてはどうかという提案（クローズされています）
* キャストの記法として`value as type`と`<type>value`の2通りがあって、後者は`.tsx`ファイルには書けないこと

### 補足情報（FW/ツールのバージョンなど）

* TypeScript 3.7.5
* React 16.12
* Webpack 4.41.6
* Webpackへの読み込みには`ts-loader`を使用（型チェックは`fork-ts-checker-webpack-plugin`に投げている）
* エディタはVisual Studio Codeを使用

Reactを使うプロジェクト内のTypeScriptをすべて.tsxで作るデメリットについて

## 概要
現在、React+Laravelを利用してリアルタイムチャット機能の実装を行っています。
そこで、メッセージのPusherへの送信はできるのですが（Pusherのコンソールで確認）、PusherからのデータをReactで受け取ることができません。自分なりに色々試してみましたが、解決せず…。
どなたか解決方法のご教授お願い致します。

## 該当のコード
```
import React, { useEffect } from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { useChannel, useEvent } from 'use-pusher'

import styled from 'styled-components'
import Button from '@material-ui/core/Button'
import IconButton from '@material-ui/core/IconButton'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogTitle from '@material-ui/core/DialogTitle'
import Divider from '@material-ui/core/Divider'
import TextsmsIcon from '@material-ui/icons/Textsms'
import TelegramIcon from '@material-ui/icons/Telegram'

import Chat from './../../../models/Chat'
import User from './../../../models/User'
import Board from './../../../models/Board'

import Pusher from 'pusher-js'

const ChatDialog = props => {
    const { open, onClose, fullScreen } = props
    const [msg, setMsg] = React.useState('')
    const [messages, setMessages] = React.useState([])
    const userID = useSelector(state => state.UserReducer.userID)
    let isChanged = true

    useEffect(() => {
        // Pusher用のキーを設定
        const pusher = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
            cluster: process.env.MIX_PUSHER_APP_CLUSTER,
            encrypted: true
        })
        // チャンネルの購読
        const channel = pusher.subscribe('chat')
        channel.bind('ChatMessageReceived', data => {
            console.log(data)
            setMessages([...messages, data])
        })
    })
    useEffect(() => {
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.get(token, boardID)
                .then(res => {
                    setMessages(res.data.messages)
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }, [isChanged])

    const handleOnChangeMsg = e => {
        setMsg(e.target.value)
    }

    const handleSendMsg = () => {
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.send(token, boardID, msg)
                .then(res => {
                    setMsg('')
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }

    const messageList = (
        Array.from(messages).map((msg, i) => (
            <React.Fragment key={i}>
                {msg.user_id === userID ? <UserMsg>{msg.message}</UserMsg> : <Msg>{msg.message}</Msg>}
            </React.Fragment>
        ))
    )

    const fullDialog = (
        <Dialog
            fullScreen
            open={open}
            scroll="paper"
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <Flex>
                <StyledDialogTitle><StyledTextsmsIcon /><Span>チャット</Span></StyledDialogTitle>
                <StyledDialogActions>
                    <Button onClick={onClose} color="primary" autoFocus>
                        <Span>閉じる</Span>
                    </Button>
                </StyledDialogActions>
            </Flex>
            <DialogContent>
                <Textarea placeholder="メッセージを入力" onChange={handleOnChangeMsg} value={msg}></Textarea>
                <StyledIconButton onClick={handleSendMsg}><StyledTelegramIcon /></StyledIconButton>
            </DialogContent>
            <MessageArea>
                {messages.length === 0 ? <p>メッセージがありません</p> : messageList}
            </MessageArea>
        </Dialog >
    )
    const nonFullDialog = (
        <Dialog
            open={open}
            scroll="paper"
            fullWidth={true}
            maxWidth="sm"
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <Flex>
                <StyledDialogTitle><StyledTextsmsIcon /><Span>チャット</Span></StyledDialogTitle>
                <StyledDialogActions>
                    <Button onClick={onClose} color="primary" autoFocus>
                        <Span>閉じる</Span>
                    </Button>
                </StyledDialogActions>
            </Flex>
            <DialogContent>
                <Textarea placeholder="メッセージを入力" onChange={handleOnChangeMsg} value={msg}></Textarea>
                <StyledIconButton onClick={handleSendMsg}><StyledTelegramIcon /></StyledIconButton>
            </DialogContent>
            <MessageArea>
                {messages.length === 0 ? <p>メッセージがありません</p> : messageList}
            </MessageArea>
        </Dialog >
    )

    return (
        <>
            {fullScreen === true ? fullDialog : nonFullDialog}
        </>
    )
}

const Flex = styled.div`
    display: flex;
    justify-content: space-between;
    background-color: #224272;
`
const Textarea = styled.textarea`
    resize: none;
    width: 100%;
    height: 35px;
    border: 1px solid #224272;
`
const Span = styled.span`
    font-size: 0.9em;
    color: white;
`

const StyledDialogTitle = styled(DialogTitle)`
    color: white;
`
const DialogContent = styled.div`
    height: 45px;
    display: flex;
    justify-content: space-between;
    padding: 0;
    padding-left: 5px;
    padding-top: 5px;
`
const MessageArea = styled.div`
    height: 450px;
`
const StyledDialogActions = styled(DialogActions)`

`
const StyledIconButton = styled(IconButton)`
    vertical-align: middle;
    padding: 0 10px;
    height: 35px;
`

const StyledTextsmsIcon = styled(TextsmsIcon)`
    vertical-align: middle;
    margin-right: 3px;
`
const StyledTelegramIcon = styled(TelegramIcon)`
    vertical-align: middle;
    padding: 0;
`

const Msg = styled.p`
    width: 100%
    text-align: left;
`
const UserMsg = styled.p`
    width: 100%
    text-align: right;
`

export default ChatDialog
```
## 追記
channel.bindのなかでconsole.log(data)をしていますが、それが表示されていない為、やはりデータが取得できていないのだと思います。

React+Pusherを利用したチャット機能の問題

#環境
- Nuxt: 2.8
- firebase: 7.6.1
- TypeScript: 3.6

# デプロイ手順
- 1.プロジェクト直下に`build.sh`というシェルを作成しビルドします（↓内容）
```
# 前回ビルドで作成されたフォルダ群を一度全て削除
rm -rf .nuxt public functions/nuxt

# publicフォルダを作成
mkdir public

# nuxtをbuildする
npm run build

# 各種フォルダのコピー
cp -R .nuxt functions/nuxt
cp -R .nuxt/dist/client public/assets

```

- 2.`firebase deploy`でデプロイ（`今ココ`）

### エラー内容
```
Running command: npm --prefix "$RESOURCE_DIR" run build

> functions@ build /Users/HOGE/git/HUGA/functions
> tsc

✔  functions: Finished running predeploy script.
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...

Error: Error occurred while parsing your function triggers.

TypeError: Nuxt is not a constructor
    at Object.<anonymous> (/Users/HOGE/git/nuxt-library/functions/lib/index.ts:5:14)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at /Users/HOGE/.nodebrew/node/v12.9.1/lib/node_modules/firebase-tools/lib/triggerParser.js:15:15
    at Object.<anonymous> (/Users/HOGE/.nodebrew/node/v12.9.1/lib/node_modules/firebase-tools/lib/triggerParser.js:53:3)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
```

### `Nuxt is not a constructor`とのことなのでNuxtがうまく読み込めていない？？確かに`import`形式で書いてみると下図のように`モジュール 'nuxt' の宣言ファイルが見つかりませんでした。`エラーとなる。そのため現状`require `形式で書いている
![イメージ説明](c1d91eac81196f9588742301a95306a3.jpeg)

### functions/src/index.ts内容

```
import * as functions from 'firebase-functions'
const Nuxt = require('nuxt')
const express = require('express')
const config = require('../../nuxt.config.ts')
const nuxt = new Nuxt(config)
const app = express()
app.use(nuxt.render) // expressのミドルウェア関数に登録
exports.ssr = functions.https.onRequest(app)
module.exports = app

```



## ご指摘いただけると幸いです。

Nuxt(SSR) + firebase cloud functions デプロイができない

# 発生している事象
- 再読み込みすると認証が必要なページに遷移できなくなる（ローカルでは永続化できている）
- クッキーは消えていない（↓にエビデンス有り）

# 認証が必要なページの判定をしているmiddleware

```
/**
 * 認証が必要なページで未認証の場合はリダイレクトする
 */
export default function({ store, redirect, commit }) {
  if (
    store.state.authenticate.id === null ||
    typeof store.state.authenticate.id === 'undefined'
  ) {
    redirect('/signup')
  }
}

```

# ↑こんな感じで`authenticate.id`に値が入っていなかったら未認証とみなして`signup`ページへリダイレクトするようにしている

# 事象的にはこれが効いてしまっている。。。ということは`authenticate.id`に値が入っていない

# 一番最初にクッキーを設定している実装
- 1.loginアクションにて`user_id`としてクッキーをセット

```action
/** ログイン処理 */
  async login({ commit }, loginUserFilter: InputUserFilter) {
    const response = await fireApp
      .auth()
      .signInWithEmailAndPassword(
        loginUserFilter.email,
        loginUserFilter.password
      )
    if (response.operationType === 'signIn') {
      commit('setloginStatus', { loginStatus: true })

      const authUser = {
        id: response.user.uid,
        email: response.user.email,
        name: response.user.displayName
      }
      const cookies = new Cookies()
      cookies.set('user_id', JSON.stringify(response.user.uid))
      // firebase上のログインデータ取得まで確認済み
      commit('setId', { id: authUser.id })
      commit('setEmail', { email: authUser.email })
      commit('setName', { name: authUser.name })
    }
  },
```

# 再読み込みに対応した（ハズ）のmiddleware
- 1.middlewareにて`user_id`クッキーを取得しstoreへ格納する

```middleware
import Cookies from 'universal-cookie'

export default ({ req, store }) => {
  if (process.browser) {
    return
  }
  const cookies = new Cookies(req.headers.cookie)
  const userId = cookies.get('user_id')
  store.commit('authenticate/setId', { id: userId })
}

```

# 再読み込み前のクッキー
![イメージ説明](4e90ab34964e9b8fe6804e874ca22f47.jpeg)

# 再読み込み後のクッキー
![イメージ説明](382c9123dfe94d67bc5a3fc90eac30f5.jpeg)

# クッキーは消えていない
- ご指摘があればいただけると嬉しいです。

# 追記
### middlewareの挙動でローカルと本番で異なる
- ローカルだと`if (process.browser)`の所には入らないのに本番だと入ってしまい`return`され、終わる。。。

Nuxt.js〜firebaseデプロイ後にログイン情報が永続化できない〜

## 概要
現在、React + Materil-UI + Laravel +Pusherを使用したチャット機能の開発を行っています。
Material-UIのダイアログの中でチャットを実現したいと思っていまして、リアルタイム通信を実現するためにもPusherを使用しています。
ダイアログでチャットの送信画面を作ることはできました。また、送信後、Pusherのコンソールでにデータが送信されていることも確認済みです。
しかし、肝心のReact側でのリアルタイムの更新がうまくいきません…。
具体的には、messagesステートにデータを追加し、チャットのメッセージ部分を更新していこうと思っていたのですが、どうやらデータが帰ってきていないのか追加されていないようです。（console.logで確認しました。）
自分なりに色々調べてみましたが、解決せず…。
どなたか解決方法のご教授お願いいたします。

## 該当するコード
```
import React, { useEffect } from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { useChannel, useEvent } from 'use-pusher'

import styled from 'styled-components'
import Button from '@material-ui/core/Button'
import IconButton from '@material-ui/core/IconButton'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogTitle from '@material-ui/core/DialogTitle'
import Divider from '@material-ui/core/Divider'
import TextsmsIcon from '@material-ui/icons/Textsms'
import TelegramIcon from '@material-ui/icons/Telegram'

import Chat from './../../../models/Chat'
import User from './../../../models/User'
import Board from './../../../models/Board'

import Pusher from 'pusher-js'

const ChatDialog = props => {
    const { open, onClose, fullScreen } = props
    const [msg, setMsg] = React.useState('')
    const [messages, setMessages] = React.useState([])
    const userID = useSelector(state => state.UserReducer.userID)
    let isChanged = true

    useEffect(() => {
        
        // Pusher用のキーを設定
        const pusher = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
            cluster: process.env.MIX_PUSHER_APP_CLUSTER,
            encrypted: true
        })
        // チャンネルの購読
        const channel = pusher.subscribe('chat')
        channel.bind('ChatMessageReceived', data => {
            setMessages([...messages, data])
        })
        
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.get(token, boardID)
                .then(res => {
                    setMessages(res.data.messages)
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }, [isChanged])

    const handleOnChangeMsg = e => {
        setMsg(e.target.value)
    }

    const handleSendMsg = () => {
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.send(token, boardID, msg)
                .then(res => {
                    setMsg('')
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }

    const messageList = (
        Array.from(messages).map((msg, i) => (
            <React.Fragment key={i}>
                {msg.user_id === userID ? <UserMsg>{msg.message}</UserMsg> : <Msg>{msg.message}</Msg>}
            </React.Fragment>
        ))
    )

    const fullDialog = (
        <Dialog
            fullScreen
            open={open}
            scroll="paper"
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <Flex>
                <StyledDialogTitle><StyledTextsmsIcon /><Span>チャット</Span></StyledDialogTitle>
                <StyledDialogActions>
                    <Button onClick={onClose} color="primary" autoFocus>
                        <Span>閉じる</Span>
                    </Button>
                </StyledDialogActions>
            </Flex>
            <DialogContent>
                <Textarea placeholder="メッセージを入力" onChange={handleOnChangeMsg} value={msg}></Textarea>
                <StyledIconButton onClick={handleSendMsg}><StyledTelegramIcon /></StyledIconButton>
            </DialogContent>
            <MessageArea>
                {messages.length === 0 ? <p>メッセージがありません</p> : messageList}
            </MessageArea>
        </Dialog >
    )
    const nonFullDialog = (
        <Dialog
            open={open}
            scroll="paper"
            fullWidth={true}
            maxWidth="sm"
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <Flex>
                <StyledDialogTitle><StyledTextsmsIcon /><Span>チャット</Span></StyledDialogTitle>
                <StyledDialogActions>
                    <Button onClick={onClose} color="primary" autoFocus>
                        <Span>閉じる</Span>
                    </Button>
                </StyledDialogActions>
            </Flex>
            <DialogContent>
                <Textarea placeholder="メッセージを入力" onChange={handleOnChangeMsg} value={msg}></Textarea>
                <StyledIconButton onClick={handleSendMsg}><StyledTelegramIcon /></StyledIconButton>
            </DialogContent>
            <MessageArea>
                {messages.length === 0 ? <p>メッセージがありません</p> : messageList}
            </MessageArea>
        </Dialog >
    )

    return (
        <>
            {fullScreen === true ? fullDialog : nonFullDialog}
        </>
    )
}

const Flex = styled.div`
    display: flex;
    justify-content: space-between;
    background-color: #224272;
`
const Textarea = styled.textarea`
    resize: none;
    width: 100%;
    height: 35px;
    border: 1px solid #224272;
`
const Span = styled.span`
    font-size: 0.9em;
    color: white;
`

const StyledDialogTitle = styled(DialogTitle)`
    color: white;
`
const DialogContent = styled.div`
    height: 45px;
    display: flex;
    justify-content: space-between;
    padding: 0;
    padding-left: 5px;
    padding-top: 5px;
`
const MessageArea = styled.div`
    height: 450px;
`
const StyledDialogActions = styled(DialogActions)`

`
const StyledIconButton = styled(IconButton)`
    vertical-align: middle;
    padding: 0 10px;
    height: 35px;
`

const StyledTextsmsIcon = styled(TextsmsIcon)`
    vertical-align: middle;
    margin-right: 3px;
`
const StyledTelegramIcon = styled(TelegramIcon)`
    vertical-align: middle;
    padding: 0;
`

const Msg = styled.p`
    width: 100%
    text-align: left;
`
const UserMsg = styled.p`
    width: 100%
    text-align: right;
`

export default ChatDialog
```
```
// イベント ChatMessageReceived

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class ChatMessageReceived implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat', $this->message);
    }
}

```
```
// ChatController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Events\ChatMessageReceived;
use App\Models\Chat;
use Auth;

class ChatController extends Controller
{
    public function index(Request $req)
    {
        $messages = Chat::where('board_id', $req->board_id)->orderBy('id', 'asc')->get();

        return response()->json([
            'messages' => $messages->toArray()
        ]);
    }

    public function store(Request $req)
    {
        $user_id = Auth::guard('api')->user()->user_id;

        // データベースにメッセージを追加
        $message = Chat::create([
            'board_id' => $req->board_id,
            'user_id' => $user_id,
            'message' => $req->message
        ]);

        event((new ChatMessageReceived($message)));

        return $message;
    }
}

```
# 追記
下記の様に副作用(useEffect)のスキップ(isChangedで制御)を外したところ正常に動作いたしました。
しかし、今度はリクエストが永遠に送られつづけ、```429 Too many requests```で死にます。
このことより、pusherとのデータのやりとりをする為のコードは間違っていないことがわかりました。
恐らく、useEffectが何度も走るということは、何度もレンダリング？されているからだと思うのですが、その原因がわかりません…。

```
　　useEffect(() => {
        
        // Pusher用のキーを設定
        const pusher = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
            cluster: process.env.MIX_PUSHER_APP_CLUSTER,
            encrypted: true
        })
        // チャンネルの購読
        const channel = pusher.subscribe('chat')
        channel.bind('ChatMessageReceived', data => {
            console.log(data)
            setMessages([...messages, data])
            console.log(messages)
        })
        
        const token = JSON.parse(User.get('token')).token
        const boardID = Board.getBoardID()

        if (token) {
            Chat.get(token, boardID)
                .then(res => {
                    setMessages(res.data.messages)
                })
                .catch(e => {
                    console.log(e)
                })
        }
    })

React + Pusherを使用したリアルタイム通信での問題

setState({ ...state, ...{Item: newNames}});が①のエラーになったので
  const newNames:Item = {
    text:t,
    isCheck: false,
  };
のNamesに[]をつけて
  const newNames:Item[] = {
    text:t,
    isCheck: false,
  };
に直したらsetState({ ...state, ...{Item: newNames}});のエラーは消えたのですが下記(②)エラーが出てしまいました。

const newNames:Item[] = {
    text: string,
    isCheck: false,
  };のname:nameが②のエラーになりました。
  解決方法がわからず困っています。どうしたらいいでしょうか？
```
①
  Argument of type '{ names:Item; name: string; }' is not assignable to parameter of type 'SetStateAction<State>'.
  Type '{ names:Item;  name: string;}' is not assignable to type 'State'.
    Types of property 'names' are incompatible.
      Type 'Item' is missing the following properties from type 'Item[]': length, pop, push, concat, 

```


```ここに言語を入力
②
Type '{text: string; isCheck: boolean; }' is not assignable to type 'Item[]'.
  Object literal may only specify known properties, and 'text' does not exist in type 'Item[]'.

```

```ここに言語を入力
  const type Item= {
    text: string
    isCheck: boolean
  }

  interface NState {
  name: string;
  names:Item[];
  }

const Index:FC<Props> = () => {
  const [state, setState] =  useState<NState>({
    name: '',
    names: [],
  });

const onSubmit = (t: string) => {
  const newNames: Item = {
    text:t,
    isCheck: false,
  };

setState({ ...state, ...{Item: newNames}});
```

React Typescript オブジェクトリテラルエラー解決できない

Firebaseでアプリを作っています。

Firebase Admin SDK を使用したいのですが、
エラーが出てしまいうまくいきません。

解決方法のわかる方がいれば、ご教授いただけますと幸いです。

## 該当コード
```json
"firebase": "^7.6.2",
"firebase-admin": "^8.9.2",
```

```TypeScript
import * as admin from 'firebase-admin';

admin.initializeApp({
  credential: admin.credential.applicationDefault(),
  databaseURL: 'https://XXXXX.firebaseio.com'
});
```

## エラー内容（一部）
```
WARNING in ./node_modules/hash-stream-validation/index.js
Module not found: Error: Can't resolve 'fast-crc32c' in '/Users/XXXX/node_modules/hash-stream-validation'

WARNING in ./node_modules/write-file-atomic/index.js
Module not found: Error: Can't resolve 'worker_threads' in '/Users/XXXX/node_modules/write-file-atomic'

ERROR in ./node_modules/google-gax/build/src/operationsClient.js
Module not found: Error: Can't resolve './operations_client_config' in '/Users/XXXX/node_modules/google-gax/build/src'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'child_process' in '/Users/XXXX/node_modules/google-auth-library/build/src/auth'
ERROR in ./node_modules/@grpc/grpc-js/build/src/resolver-dns.js
Module not found: Error: Can't resolve 'dns' in '/Users/XXXX/node_modules/@grpc/grpc-js/build/src'
...
```

## 調べた解決方法
[こちら](https://tutorialmore.com/questions-1244132.htm)と同じ問題のようですが、
webpack.config.jsがないため、どう解決すればいいか分かりませんでした。
> 同じフォルダー（single package.json）にfirebaseとfirebase-adminをインストールしていました。
> 基本的に、webpack-node-externalsを使用して node_modules を除外する必要があります。

Firebase Admin SDK を使用すると、エラーが発生する

FirebaseのFirebase Authenticationを用いてGoogleアカウントでのログイン機能を実装したいのですがつまずいております。

### 該当ソースコード
App.js
```js:
import React from 'react';
import Menu from './components/Menu';
import './App.css';
import firebase from 'firebase/app';
import "firebase/auth";


const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
}

firebase.initializeApp(firebaseConfig);

function App() {
  return (
    <div className="App">
     <Menu />
    </div>
  );
}

export default App;
```

<Menu />はreact-router-domによるページ遷移です。

そして遷移先のSignin.jsでログイン機能が欲しいです

```js
import React, { Component } from 'react';
import firebase from 'firebase';


class Signin extends Component {
    constructor(props){
        super(props);
        this.signInWithGoogle = this.signInWithGoogle.bind(this);
    }

    signInWithGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider()
        firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
            console.log(result);
          });
    }

    render() {
        return (
            <div>
                <div className="login">
                    <h1>ログイン / 新規登録</h1>
                </div>
                <div className="signin_button">
                    <img src="../btn_google_signin.png" onClick={()=>this.signInWithGoogle()} alt="google signin"/>
                </div>
            </div>
        );
    }

}

export default Signin
```

onClickの際にしているsignInWithGoogle()が何か間違っているのでしょうか？
現状はクリックしても何も起こりません

ぜひご教授いただけますと幸いです。
よろしくお願いいたします。

FirebaseのGoogleAuthを使いたい

以下のサイトのvisionやcompamyをクリックしていただくと画像が表示されるアニメーションが分かるかと思います。
マスクアニメーションのような気がしています。

https://zoccon.me/company/

何かしらマスクをして中央から上下にマスク？らしい要素がアニメーションしていますが、これを再現するにはどうしたらいいのでしょうか？
参考サイトはいろいろなアニメーションやらJSやらの関係でいろんなクラスなどついていてよく分かりません。

よろしくお願いします。

css のanimationがtransitionでマスク？アニメーションをしたい

FirebaseとNuxt.jsでWebアプリを制作しております。

Clooud StorageにPDFファイルをアップロードし、そのダウンロードURLをFirestoreに保存しています。

ダウンロードURLは以下のようになっています。
https://firebasestorage.googleapis.com/v0/b/PROJECT_NAME.appspot.com/o/〇〇〇〇.pdf?alt=media&token=〇〇〇〇

Nuxt.jsでボタンを押したらこのPDFファイルをダウンロードさせたいのですが、現状ボタンをクリックしたら画面上にPDFが表示されてしまい、ダウンロードできません。

ダウンロードボタンのコードは以下のようになっており、`item.url`に上記のURLが入っています。

```
<a :href="item.url" download>ダウンロード</a>
```

ボタンクリックでダウンロードするにはどのようにしたらいいのでしょうか？？

cloud storageにあげたPDFファイルをダウンロードしたい

静的なWebサイトを制作し、Firebase Authentication を使ったログイン認証機能を実装しました。

下記のサイトに記載のコードを参考にして、ログイン機能と認証後にページ移管させることはできました。

https://www.topgate.co.jp/firebase05-firebase-authentication

流れ
ログインページ（Index.html）
↓ 認証後にページ移管
会員専用ページ(main.html)

index.html
```ここに言語を入力
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script defer src="/__/firebase/5.3.1/firebase-app.js"></script>
    <script defer src="/__/firebase/5.3.1/firebase-auth.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/3.1.1/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.1.1/firebaseui.css" />
    <script defer src="/__/firebase/init.js"></script>
  </head>

  <body>
    <p>Hello, Firebase Hosting!</p>
    <div id="firebaseui-auth-container"></div>
    <div id="loader">Loading...</div>

    <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<SENDER_ID>",      
      };
      firebase.initializeApp(config);
    </script>

    <script type="text/javascript">
            var ui = new firebaseui.auth.AuthUI(firebase.auth());

            var uiConfig = {
              callbacks: {
                signInSuccessWithAuthResult: function(authResult, redirectUrl) {
                  return true;
                },
                uiShown: function() {
                  document.getElementById('loader').style.display = 'none';
                }
              },
              signInFlow: 'popup',
              signInSuccessUrl: 'main.html',
              signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID,
              ],
            };
            ui.start('#firebaseui-auth-container', uiConfig);
        </script>
  </body>
</html>
```


ただ、その後の流れについてわからない点があり質問をさせて頂きました。

こちらのサイトは会員専用のサイトを想定しており、ログインの状況に応じて各ページにアクセス制限をかける予定ですが、Firebase Authenticationを使用した場合の、アクセス制限方法やセッション管理がわかりません。

セッション管理に関しては下記も参考にしたのですが、現状でまだやり方がわかりません。

https://firebase.google.com/docs/auth/admin/manage-cookies?hl=ja#sign_out
https://firebase.google.com/docs/auth/web/service-worker-sessions


知りたいこと
・ログインをしてない状態で会員専用(main.html)ページにアクセスした場合、ログインページ（Index.html）にリダイレクトさせるにはどういう処理が必要なのか（ログイン後はリダイレクト制限を解除させる）

・会員専用ページ(main.html)に移管後にログアウトをさせる処理

・JavaScriptでセッションを管理する方法などの記事を見ていますが、このようなことを参考にすればFirebase Authentication でも代用できるのか。

https://techacademy.jp/magazine/23194
https://techacademy.jp/magazine/22314

Firebase Authentication を使ったログイン認証でのセッション管理やアクセス制限について

### 前提・実現したいこと

現在、[Vue.js + Firebase functionsでお問い合わせフォームを作成する](https://qiita.com/ryo2132/items/7cdd6c86dd418095f74a) 
こちらを参考に Nuxt.js+Firebaseで、お問い合わせフォームを作成しています。

実際にフォームは作成できましたが、フォームに問い合わせ内容を入力し送信したところ
以下のエラーが発生したので解決したいです。

### 発生している問題・エラーメッセージ

```
Access to fetch at 'https://~' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

```
Failed to load resource: net::ERR_FAILED
```

### 該当のソースコード

```functions
const functions = require('firebase-functions')
const nodemailer = require('nodemailer')
const gmailEmail = functions.config().gmail.email
const gmailPassword = functions.config().gmail.password
const adminEmail = functions.config().admin.email

// 送信に使用するメールサーバーの設定
const mailTransport = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: gmailEmail,
    pass: gmailPassword
  }
})

// 管理者用メールアドレス
const adminContents = (data) => {
  return `I received a contact from the website with the following contents.

name:
${data.name}

email:
${data.email}

contents:
${data.contents}
`
}

exports.sendMail = functions.https.onCall((data, context) => {
  // メール設定
  const adminMail = {
    from: gmailEmail,
    to: adminEmail,
    subject: 'contact form',
    text: adminContents(data)
  }

  // 管理者へのメール送信
  mailTransport.sendMail(adminMail, (err, info) => {
    if (err) {
      return console.error(`admin send failed. ${err}`)
    }
    return console.log('admin and send success.')
  })
})
```

### 試したこと

[FirebaseのCloud FunctionsでCORSが~とかAccess-Control-Allow-Originが~と言われたらこれ](https://qiita.com/qrusadorz/items/40234ac0b5c5c2315cad)
こちらを参考に、改めて functions/index.js内該当ソースコード

```functions
exports.sendMail = functions.https.onCall((data, context) => {
  // メール設定
  const adminMail = {
    from: gmailEmail,
    to: adminEmail,
    subject: 'contact form',
    text: adminContents(data)
  }

  // 管理者へのメール送信
  mailTransport.sendMail(adminMail, (err, info) => {
    if (err) {
      return console.error(`admin send failed. ${err}`)
    }
    return console.log('admin and send success.')
  })
})
```

こちらを確認しましたが、onCall ではそもそも Access-Control-Allow-Origin を
記述する必要がないため、なぜ

```
No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

こちらが表示されるかわかりませんでした。

また、[Cloud Functions for Firebase でCORSを許可する方法](https://qiita.com/seya/items/0f12bd09c8e856123bc3)
こちらを参考に functions/index.jsに以下ソースコードを追記しました。

```functions
// yarn add cors をしたのち、cors 定数を定義
const cors = require('cors')({origin: true})
//関数をcorsでラップ
cors(mailTransport.sendMail(adminMail, (err, info) => {
    if (err) {
      return console.error(`admin send failed. ${err}`)
    }
    return console.log('admin and send success.')
  }))
```

しかし、解決には至りませんでした。

### 補足情報（FW/ツールのバージョンなど）

```functions
{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "firebase-admin": "^8.6.0",
    "firebase-functions": "^3.3.0",
    "nodemailer": "^6.4.2",
    "yarn": "^1.21.1"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

```

Firebase functionsのCORSエラーを解決したい。

### 前提・実現したいこと

javascript（jQuery）初学者です。

ボタンをクリックする　→ CSSでdisplay:noneにしていた要素をjavascriptでフェードイン表示し、遷移演出を見せる　→ 遷移する
という流れを実装したいです。



### 発生している問題・エラーメッセージ

```
遷移の遅延を指定しているのに、すぐにページが遷移してしまう。
```

### 該当のソースコード

```HTML
<div id="button">
<a href="result.html"></a>
</div>

<div class="toppage__hideme">
hogehoge
</div>
```

```SCSS
.toppage__hideme {
  width: 100vw;
  height: 100vh;
  background-color: #64468B;

  p {
    text-align: center;
    color: #ffffff;
  }
}

```

```javascript

$(function() {

  // ボタンをクリックしたとき
  $('#button').click(function() {
 
    // ボタンを押して5秒後に結果ページへ遷移
    var TransitionDelay = function(){
        window.location.href = 'result.html';
    }
    setTimeout ( TransitionDelay, 5000 );

    // toppage__hidemeを1.5秒かけてフェードイン
    $('.toppage__hideme').fadeIn(1500);

  });
});
```

### 試したこと
htmlへの直接の書き込み　setTimeoutの書き換え（違う形で同じ意味になるようなもの）

「ボタンをクリックしたら〜秒後に遷移する」処理について

タイトルの通り、以下のコードにtransition効果をつけて、ゆっくり開閉するようにしたいのですが、
cssにtransitionを設定しても動作せず、すぐに開閉してしまいます。
jqueryで行えば簡単ですが、ネイティブのjavascriptでゆっくり開閉させるには、どのようにすればよいのでしょうか？
ご教授の程宜しくお願い致します。

```ここに言語を入力
    <dl>
        <dt class="question">よくある質問</dt>
        <dd class="answer">よくある質問の答え</dd>
    </dl>
    <dl>
        <dt class="question">よくある質問2</dt>
        <dd class="answer">よくある質問の答え</dd>
    </dl>
    <dl>
        <dt class="question">よくある質問3</dt>
        <dd class="answer">よくある質問の答え</dd>
    </dl>
    <style>
        dl {
            border-bottom: 1px solid #333;
            padding: 10px;
        }
        dd {
            transition: all 0.3s ease;
        }    
    </style>
    <script>
    var answr = document.getElementsByClassName("answer");
    for (i = 0; i < answr.length; i++) {
      answr[i].style.display = "none";
    }

    var qst = document.getElementsByClassName("question");
    for (i = 0; i < qst.length; i++) {
      let answers = qst[i].nextElementSibling;
      qst[i].addEventListener("click", function () {
        if (answers.style.display == "none") {
          answers.style.display = "block";
        } else {
          answers.style.display = "none";
        }        
      }, false);
    }
    </script>

```