常連

## テーマ、知りたいこと
初歩的な質問で申し訳ありません。現在特に必要性も理解せず漠然とステージング環境を作っています。

本番環境と開発環境を切り分ける理由はわかります。
ステージング環境と開発環境を分ける理由はありますでしょうか。。

最新のデータを本番環境から開発環境にコピーして来れば開発環境内に擬似的にステージング環境が作れるかと思います。もし不具合があればロールバックする形にすればステージング環境をわざわざ作らなくてもよいのではないでしょうか。



ステージング環境と開発環境を切り分ける理由について

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

## 背景、状況

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

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

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

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



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

アプリを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で開発）

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



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

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

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

### 前提・実現したいこと

エラーを解消したいです。

### 発生している問題・エラーメッセージ

```
「宣言またはステートメントが必要です。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と表示される

## 問題概要
FlutterアプリでFirebase認証を使い、Google Sign-Inを実装しています。Android版では正常に動作しますが、iOS版のみ認証時に「Error 400: invalid_request」が発生します。

## エラーメッセージ
{}部分については置換済み。
```
エラー 400: invalid_request
リクエストの詳細: response_type=code code_challenge_method=S256 nonce={省略} 
device_os=iOS 18.3.2 client_id={CLIENT_ID} emm_support=1 gpsdk=gid-7.1.0 gidenv=ios state={省略} 
redirect_uri={REVERSED_CLIENT_ID}:/oauth2callback code_challenge={省略} include_granted_scopes=true access_type=offline 
scope=https://www.googleapis.com/auth/userinfo.email 
https://www.googleapis.com/auth/userinfo.profile openid flowName=GeneralOAuthFlow
```

## 前提
- Firebase AuthenticationでGoogleサインインを有効化済み
- Android側端末では実端末、エミュレータともGoogleサインインの正常動作確認済み(ログイン成功)。ios側ではどちらもエラー発生(アプリがクラッシュするわけではなく、エラーが出る)。
- iOS端末については複数端末、複数アカウントで同事象が発生することを確認済み。
- GoogleService-Info.plistはGoogleサインインを有効化後にダウンロードし、xcodeからios/Runner配下に格納済み。
- AppCheckについて、Android側、ios側とも有効化済みであり、適用APIはFirebase Authentication、Google Identity for iOS等。

## 環境情報
- Flutter: 3.29.2
- firebase_auth: ^5.5.1
- google_sign_in: ^6.1.5
- iOS: 18.3.2
- Xcode: 最新版

## 実装コード
```dart
// lib/repository/fireauth/sign_in_with_google_repository.dart
Future<dynamic> signInWithGoogle() async {
  try {
    //Google認証フローを起動する
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
    if (googleUser == null) {
      debugPrint('Google sign in: User cancelled');
      throw const AppException(
        message: 'ログインをキャンセルしました。',
      );
    }
 
    final googleAuth = await googleUser.authentication;

    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    UserCredential userCredential =
        await FirebaseAuth.instance.signInWithCredential(credential);

    return userCredential;
  } catch (e) {
    // エラー処理省略
  }
}
```

## Info.plist設定
```xml
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>{REVERSED_CLIENT_ID}</string>
    </array>
  </dict>
</array>
<key>GIDClientID</key>
<string>{CLIENT_ID}</string>
```

## 試した解決策
1. `GoogleSignIn()`をパラメータなしで使用
2. ソースコードの方で直接`clientId`パラメータを設定
3. `scopes`パラメータを追加（email, profile）
4. firebaseのiosプロジェクトを一度削除し、再作成、再連携。

FirebaseやGoogle Cloud Consoleでの設定を含めてどのように解決すべきでしょうか？


FlutterでiOS版のみGoogle Sign-In認証でError 400: invalid_requestが発生する問題

### 前提・実現したいこと

デモを用意しました。
[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}</>;
}
```