常連

## テーマ、知りたいこと
今後 rxjs って多く使われたりするのでしょうか？
今まであまり使ったことがなかったのですが使用する機会があり、便利に感じた上、フレームワーク自体は結構昔からあるものではある割に今まで使っていなかったので気になり質問させていただきました。
ざっくりした質問のため個人の主観による感想でも良いのですが、この辺りの技術トレンドってどんな感じなのでしょうか？

## 背景、状況

firestore の更新に対してrxjs(rxfire) を用いてobserveするという様な仕組みのシステムに関わっています。

firestoreの更新があるたび一度 subscribe すればリアクティブにデータを扱える点に便利さを感じたのですが、そこまで多く普及して今後も使われ続ける様なものではないのですかね？？このような実装をする場合代替でもっと良いものがあったりするのでしょうか？

また、この辺りは firestore 側の話なのでご存知であればという感じですが、内部的な仕組みについて、これはfirestoreに対して定期的にリクエストを送り変更を検知している or firestore 側から変更の通知が送られるのをリッスンしている のどちらなんですかね？前者であればこちらからのリクエスト数の増加によりクラウド利用のコストが上がったりが懸念される気もしたのですが、そんな事にもなっていない様なのでだとすれば後者なのですかね？

firestore と rxjs(rxfire) でデータの変更をウォッチする事が特にコストも変わらずできるのであれば結構便利でもっと普及しそうなものですが、実際どうなのでしょうか？



Rxjs ( + firestore ) のトレンドについてご存知の方教えてください

## テーマ、知りたいこと
メインとなるページに対してサブページを追加していく際、どのようなやり方、構成があるか。メリットとデメリットを知りたいです。



## 背景、状況
店舗のwebサイトのSEO対策として、ブログやコラム記事を掲載したいです。
この場合にどのような方法が最適であるか皆さんの意見をお伺いできればと思います。
Vite、React、Typescript、Firebaseを使用しています。

ディレクトリの構成やホスティングするサイト数などおすすめを教えていただきたいです。

Vite React Typescript Firebase マルチページサイトの構成について

アプリをRunで起動すると、下記のようなエラーが出ます。

●エラー内容
> Launching lib\main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
Finished with error: Please review your Gradle project setup in the android/ folder.
* Error running Gradle:
ProcessException: Process "C:\Users\<UserName>\AndroidStudioProjects\flutter_app2\android\gradlew.bat" exited abnormally:

> FAILURE: Build failed with an exception.

> * Where:
> Build file 'C:\Users\<UserName>\AndroidStudioProjects\flutter_app2\android\build.gradle' > line: 24

> * What went wrong:
> A problem occurred evaluating root project 'android'.
> > A problem occurred configuring project ':app'.
>    > Could not resolve all artifacts for configuration ':app:classpath'.
>       > Cannot resolve external dependency com.google.gms:google-services:4.0.1 because no repositories are defined.
>         Required by:
>             project :app

> * Try:
> Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
> 
> * Get more help at https://help.gradle.org

> BUILD FAILED in 1s
  Command: C:\Users\<UserName>\AndroidStudioProjects\flutter_app2\android\gradlew.bat app:properties




build.gradleファイル内に、下記の内容を記載しない場合はエラーは発生しないので、この部分がエラーの原因と思われますが、対応方法などご教授いただけると大変助かります。

```ここに言語を入力
buildscript {
    dependencies {
        // Add this line
        classpath 'com.google.gms:google-services:4.0.1'
    }
}
allprojects {
    // ...
    repositories {
        google() // Google's Maven repository
        // ...
    }
}

apply plugin: 'com.android.application'

android {
    // ...
}

dependencies {
    // ...
    implementation 'com.google.firebase:firebase-core:16.0.1'
    // Getting a "Could not find" error? Make sure you have
    // added the Google maven respository to your root build.gradle
}

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
```







●build.gradle全文
``` 
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion 28

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.androidstudio.flutter_app2"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}


buildscript {
    dependencies {
        // Add this line
        classpath 'com.google.gms:google-services:4.0.1'
    }
}
allprojects {
    // ...
    repositories {
        google() // Google's Maven repository
        // ...
    }
}

apply plugin: 'com.android.application'

android {
    // ...
}

dependencies {
    // ...
    implementation 'com.google.firebase:firebase-core:16.0.1'
    // Getting a "Could not find" error? Make sure you have
    // added the Google maven respository to your root build.gradle
}

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
```

コンパイル時にエラーが発生します。 flutter、firebaseアプリ（Android Studioで開発）

### 前提・実現したいこと

エラーを解消したいです。

### 発生している問題・エラーメッセージ

```
「宣言またはステートメントが必要です。ts(1128)」
```
![イメージ説明](57354ed4da9b30cd457ff2cab140ce85.jpeg)

### 該当のソースコード

```js
// The Cloud Functions for Firebase SDK to create Cloud Functions and setup triggers.
const functions = require('firebase-functions');

const Twitter = require('twitter');

exports.twitterPost = functions.https.onRequest(async (req, res) => {
    const client = new Twitter({
        consumer_key:'',
        consumer_secret: '',
        access_token_key: '',
        access_token_secret: ''
    })
    const params = {status: 'ああああ'};
    client.post('statuses/update', params, function(error, tweets, response){
        if(error){
            console.log(error);
        });
    }
)};
```

### 試したこと

「宣言またはステートメントが必要です。ts(1128)」で検索しましたが有効な情報にたどり着けませんでした。

### 補足情報（FW/ツールのバージョンなど）

Firebase
Node.js
Twitter API

VSCodeのエラー「宣言またはステートメントが必要です。ts(1128)」を解決したい！

### 実現したいこと

React.jsでアプリを作成しており、
Firebaseでログイン認証の実装をしたいのですが、
「API Keyが無効のため、正しくコピーされているか確認ください」とエラーが表示されます。



### 発生している問題・エラーメッセージ

```
provider.ts:120 Uncaught 
t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}
a: null
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error
```

### 該当のソースコード
.envファイル
```
REACT_APP_FIREBASE_API_KEY
="***"
REACT_APP_FIREBASE_DOMEIN="***"
REACT_APP_FIREBASE_DATABASE="***"
REACT_APP_FIREBASE_PROJECT_ID="***"
REACT_APP_FIREBASE_STORAGE_BUCKET="***"
REACT_APP_FIREBASE_SENDER_ID="***"
REACT_APP_FIREBASE_APP_ID="***"

```
Firebase.js
```
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

var firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMEIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const initialized_fb = firebase.initializeApp(firebaseConfig);

export const auth = initialized_fb.auth()
;
export const db = initialized_fb.firestore();

```

###試したこと
0. Firebaseの管理画面からAPIのKey等の.envファイル内のコードをコピーし直しましたが、このエラーメッセージは消えませんでした。
0. コンポーネント内でimportする際は、以下のように書いています。
```
import { auth, db } = '../firebase/Firebase';
```
3..envファイルは .src外のrootに入れています。

どなたかご教示をいただけませんでしょうか。

Firebaseのログイン認証実装したいがYour API key is invalidと表示される

### 前提・実現したいこと

デモを用意しました。
[CodeSandBox](https://codesandbox.io/s/competent-waterfall-23zk8?fontsize=14&hidenavigation=1&theme=dark)

2つのプロパティを持ったオブジェクトを格納した配列に、```forEach```で各オブジェクトに処理を施し、処理を施したオブジェクトを配列の```state```に格納したいです。

デモで言うと、下記のような表示を目指しています。
> HOGE
hogehoge
FUGA
fugafuga

新しい配列を生成する場合は```map```を使う方が相応しいと思いますが、実際のデータの取得元が```Firestore```からであり、```Firestore```から取得したデータは```map```メソッドが使えないようなので、```forEach```で実装したいです。

### 発生している問題・試したこと

処理を施したオブジェクトは配列に追加されず上書きをします。

[【React】 useStateで配列を保存するときの注意点 - Qiita](https://qiita.com/naogify/items/cef4330858d0c677e71b)
上記ページを参考にして、```setState([...配列のstate, 処理を施したオブジェクト])```と書いてみましたが、配列の```state```の中身は最後に処理を施したオブジェクト1つのみでした。

現状のデモは```hoge```オブジェクトが```fuga```オブジェクトに上書きされ、下記のように```fuga```オブジェクトのみが表示されています。
> FUGA
fugafuga

### 該当のソースコード

```javascript
const data1 = {
  title: "hoge",
  text: "hogehoge"
};
const data2 = {
  title: "fuga",
  text: "fugafuga"
};
const listData = [data1, data2];

export default function App() {
  const [array, setArray] = useState([]);
  useEffect(() => {
    listData.forEach((data) => {
      const upperTitle = data.title.toUpperCase();
      const newData = { title: upperTitle, text: data.text };
      setArray([...array, newData]);
    });
  }, []);

  const list = array.map((item, index) => (
    <div key={index}>
      <p>{item.title}</p>
      <p>{item.text}</p>
    </div>
  ));

  return <>{list}</>;
}
```

useStateで配列にオブジェクトを追加したいです。

### 前提・実現したいこと

現在、Vue.js+Firebaseでwebアプリケーションを開発しています。

Firebaseの実装をし始めたときに以下のエラーが発生しました。

### 発生している問題・エラーメッセージ

```
Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
```

### 該当のソースコード

```plugins
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

if(!firebase.app.length) {
  const firebaseConfig = {
    apiKey: "AIzaSyDPtgGX2peTSXI2kv0T88iTuQlm8ps4IJY",
    authDomain: "slack-clone-app-95304.firebaseapp.com",
    databaseURL: "https://slack-clone-app-95304.firebaseio.com",
    projectId: "slack-clone-app-95304",
    storageBucket: "slack-clone-app-95304.appspot.com",
    messagingSenderId: "69617890975",
    appId: "1:69617890975:web:4460bcaab4e8312d4054aa",
    measurementId: "G-7LRQQ3WN86"
  };
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
}

const db = firebase.firestore()
export {
  firebase,
  db
}

```

### 試したこと

[No Firebase App '[DEFAULT]' has been created の対応](https://qiita.com/sawadango/items/15938cd80fe7959b67c6)を参考にしたところ
このエラーが発生する原因は、firebaseの初期化がされていないこととありましたが
初期化はきちんとしているため何が原因なのか不明です。

### 補足情報（FW/ツールのバージョンなど）

FirebaseのNo Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() エラーを解決したい。

### 実現したいこと
Header.jsの変数emailの中身が取得できなくて困っています。
データベースはfirebase、v8です。
一応ポップアップ方式（firebase.auth().signInWithPopup）にすると値を取得できているのですが、何故かリダイレクト方式（firebase.auth.signInWithRedirect）に変更すると値を取得できません。
変数emailはページ全部で共有して使える様になっています。

※現在GithubでのHeader.jsの中身が変わっていますが、ここに書いてあるHeader.jsでの前提でお願いします。
詳しいファイルの中身のgithubはこちらです
https://github.com/KKt53/DG_telephone

### 発生している問題・分からないこと
現状の状態ではログインに成功してもコンソール上で「リダイレクト後のユーザーなし」と表示されます。
ポップアップ方式で同じようにログインすると値取得に成功します。



### 該当のソースコード

```next.js(Header.js)
import { useState, useEffect, useContext } from 'react';
import firebase from 'firebase';
import '../components/fire';
import AuthContext from '../contexts/AuthContext';

const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export default function Header(props) {
  const { email, setEmail } = useContext(AuthContext);

  useEffect(() => {
    // 1. リダイレクト後の結果を取得
    firebase.auth().getRedirectResult()
      .then(result => {
        if (result.user) {
          console.log("リダイレクトログイン成功:", result.user.email);
          setEmail(result.user.email);
        } else {
          console.log("リダイレクト後のユーザーなし");
        }
      })
      .catch(error => {
        console.error("リダイレクトログインエラー:", error);
      });

    // 2. ログイン状態の変更を監視
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        console.log("ログイン状態検出:", user.email);
        setEmail(user.email);
      }
    });

    return () => unsubscribe(); // クリーンアップ
  }, []);

  // ログイン処理（リダイレクト）
  const handleLogin = () => {
    if (!firebase.auth().currentUser) { // すでにログインしている場合はリダイレクトしない
      firebase.auth().signInWithRedirect(provider);
    } else {
      console.log("すでにログイン済み:", firebase.auth().currentUser.email);
    }
  };

  // ログアウト処理
  const clear_email = () => {
    firebase.auth().signOut().then(() => {
      setEmail('');
    });
  };

  return (
    <div>
      <h1 className="bg-primary px-3 text-white display-4 text-right">
        {props.header}
      </h1>

      {!email ? (
        <button className="btn btn-primary" onClick={handleLogin}>
          Googleでログイン
        </button>
      ) : (
        <div className="text-right">
          <p>Email: {email}</p>
          <button className="btn btn-primary" onClick={clear_email}>
            ログアウト
          </button>
        </div>
      )}
    </div>
  );
}
```

```next.js(fire.js)
import firebase from 'firebase/app';
import 'firebase/firestore';

// ☆各プロジェクトの設定を記述
const firebaseConfig = {
    apiKey: "AIzaSyCd_4OIkpeQpaJKHbYPaQyQ8ItjT4-SmmA",
    authDomain: "dgtelephone-aa990.firebaseapp.com",
    projectId: "dgtelephone-aa990",
    storageBucket: "dgtelephone-aa990.appspot.com",
    messagingSenderId: "302246333552",
    appId: "1:302246333552:web:0913ca35ca378d44b4b8b5"
}

if (firebase.apps.length == 0) {
  firebase.initializeApp(firebaseConfig)
}
```

```next.js(AuthContext.js)
import { createContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [email, setEmail] = useState(null);

  useEffect(() => {
    const storedEmail = localStorage.getItem('email');
    if (storedEmail) {
      setEmail(storedEmail);
    }
  }, []);

  return (
    <AuthContext.Provider value={{ email, setEmail }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
前述の通り、ポップアップ方式やリダイレクト方式の方法を試してみました。

### 補足
特になし