常連

注目の的

社会貢献

質問力

回答者

ベストアンサー

拍手喝采

スピードスナイプ

自己紹介

# クローズします

まだまだ不具合は**山ほど**(社会的に見て致命的と思えるものも多数)ありますが、運営状況から見て、運営の方はこれで修正が一段落したと考えているように思われます。

これ以上はここに報告しても参考にされることはないであろうと思いますので、一端クローズとさせていただきます。
これ以降は、各自直接運営の方に報告していただければと思います。

どの報告も大事ですが、クローズするにはシステム上ベストアンサーを決めなければならないので、現時点で最も高評価な回答をベストアンサーに決めさせていただきます。

大勢のご協力、ありがとうございました。

運営はなしのつぶてなので、何の責任もない私が代わりにお礼申し上げます。

---
大規模メンテナンスが終わりましたが、かなりの不具合が見られます。
開発の方で把握できたものは随時修正されると思いますが、せっかくですのでバグ出しを手伝おうではありませんか。

個人個人で報告しても良いとは思いますが、同じものが何人もから報告されると目を通すだけで時間がかかり、返信が必要な場合はそれにも時間がとられます。

そこで、この質問の修正依頼に報告することにしませんか？
なるべく前の書き込みを見て重ならないよう書いていただければありがたいですが、可能であり必要であればこちらで整理して質問または回答に掲載しようと思います。

議論の余地があるものや画像などが必要なものでしたら、回答していただいた方が見やすくなると思います。
この質問の存在はこちらから運営に知らせておきますので、よろしくお願いします。

### 2022/01/12 追記
現在、運営への報告ができない状態です。
事態が事態なので、意図的にその機能がしばらく停止されている可能性もあります。

### 2022/01/12 追記2

[morimorinoki](https://teratail.com/users/morimorinoki) さんから次のような報告を受けています。

- タイムアウトすることが多い
- 記号を使用したり文脈の変な部分での＼が入っていて読みづらい
- 画像が見られない
- ＼のせいでURLに飛びづらい
- 通知が役に立たない。
- 戻るボタンで戻ると強制的にページ最上部まで飛ぶ
- 頻繁に「Application error: a client-side exception has occurred (see the browser console for more information).」が出る。（TOREMO UZAI）
- コードを確認しようとすると下の装飾で読めない時がままある。


teratail 不具合報告

### ユーザーを判別する為のユーザーIDもしくはユーザーネームを設定したい

Task管理アプリを作成しています。
アプリ内でTextInputからTaskを記録し、そのTaskを画面に表示するといったシンプルなアプリです。
データベースではfirebaseを使用しています。



「作成したTaskを画面に表示する」部分の設計で、appを使用しているユーザーと、Taskを作成したユーザーが一致したTaskのみを表示するといった形を想定しています。

そのため、ログイン画面でユーザーを判別するための、ユーザーIDもしくはユーザーネームの作成を検討しています

ユーザーIDを生成する方法、もしくはユーザーネームを設定する方法をお聞きしたいです



### 想定している実装方法


・個人情報に触れないでユーザーを判別する一意の値を使用する

ex)
ユーザーID
ユーザーネーム




### 補足情報（FW/ツールのバージョンなど）
app store connect のガイドラインにより個人情報の収集は違反扱いになってしまいます。
言語　react-native
データベース firestore authentication
端末 iOS

ユーザーIDを生成する方法、ユーザーネームを設定する方法を知りたい

React Navigationを用いてiOSで下記のようなナビゲーションを作成しました。
![イメージ説明](b6beb995e0e422f8d55ba6f563c3eaaa.jpeg)

上記画像の下部、赤線で引いてあるラベルの部分を消したいのですがうまくいかずにいます。（Addの部分です。）

[ドキュメント](https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarshowlabel)に``tabBarShowLabel： Whether the tab label should be visible. Defaults to true.``とあったため下記コードのように``tabBarShowLabel: false``としてみたのですが、ラベルが消えずに残り続けてしまいます。

``tabBarLabelStyle: { display: 'none' }``とすることで消すことはできたのですが、なぜ　tabBarShowLabelのオプションが効かないのかがわからずモヤモヤしています。

```
options={{
   tabBarIcon: () => (
     <Image
       source={require('../img/tab_icon/add.png')}
       style={{
         width: tabBarIconSize,
         height: tabBarIconSize,
       }}
       resizeMode="contain"
     />
   ),
   tabBarShowLabel: false,
        }}
```

tabBarLabelStyleのオプションは自分が考えている使い方とは異なっているのでしょうか？
わかる方いましたら教えていただきたいです。
よろしくお願いいたします。

React NavigationのcreateBottomTabNavigatorで、tabBarShowLabelオプションが反映されない

GASを使ってスプレッドシートから表を読み込み、HTML化してHTMLメールを送るスクリプトを書いています。

表示したい形式は、取得した値が実際にはドル表記であったり％だったり日付だったりとフォーマットがバラバラです。
値の表示は下部に示すソースの　rangeValue[i][j]　の部分でが、文字列は良いのですが数字が全て小数点が１０個以上も出てしまいます。
表示するフォーマットを各値別に指定するにはどのように記載すればよいでしょうか？

```GAS
      htmlTable = htmlTable + "<td style = 'overflow-wrap:break-word; width:"+rangeColWidth[j]+"px; text-align:"+rangeHAlign[i][j]+"; vertical-align:"+rangeVAlign[i][j]+"; font-size:"+rangeFontSize[i][j]+"; color:"+rangeFontColor[i][j]+"; font-style:"+rangeFontStyle[i][j]+"; background-color:"+rangeBackgroundColor[i][j]+";'>"+rangeValue[i][j]+"</td>";
```

元のシートだと以下のように見えており↓
![イメージ説明](415721d96de2945e1555665d69641a73.png)
以下のスクリプトでメールで送ると以下のようになってしまいます。↓
![イメージ説明](d75a076f97b4ef9e4bdbc077bec7baeb.png)124944cb89eaeb6603b8da9e2fd6982c.png)
理想形は以下のようなイメージです↓
![イメージ説明](2208382d12dc30582889c7bcffa6532b.jpeg)


ソースは以下です。
```GoogleAppScript
function dailyReport() {
  //1. 現在のスプレッドシートを取得
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  //2. 現在のシートを取得
  var sheet = spreadsheet.getActiveSheet();
  //3. 指定するセルの範囲（A1）を取得
  
  //B1
  startRow = 1
  startColumn = 2
  
  //G31
  endRow = 31
  endColumn = 6

  //値の取得
  var range = sheet.getRange(startRow,startColumn,endRow,endColumn);
  var values = range.getValues();
  var htmlTable = makeTable(sheet,range);
  sendMail(htmlTable);

  //取得した配列化ら値の取り出し
  // for(let i = 0; i<endRow; i++){
  //   for(let j = 0; j<endColumn;j++){
  //     Logger.log(values[i][j])
  //   }
  // }
}

function makeTable(sheet,range){
  var rangeHeight = range.getHeight();
  var rangeWidth = range.getWidth();
  var rangeValue = range.getValues();
  var rangeFontSize = range.getFontSizes();
  var rangeFontColor = range.getFontColors();
  var rangeFontStyle = range.getFontStyles();
  var rangeBackgroundColor = range.getBackgrounds();
  var rangeHAlign = range.getHorizontalAlignments();
  var rangeVAlign = range.getVerticalAlignments();

  var rangeFirstCol = range.getColumn();  //get first colmn of range in sheet
  var rangeColWidth = [];  //Array to hold the width of first row or range

  //HTML Table
  var htmlTable = "<table>";
  for(i = 0; i < rangeHeight; i++){
    htmlTable = htmlTable + "<tr>";
    for(j = 0; j < rangeWidth; j++){
      //get each column width to rangeColWidht[]
      if(i == 0){
        rangeColWidth.push(sheet.getColumnWidth(rangeFirstCol+j));
      }
      htmlTable = htmlTable + "<td style = 'overflow-wrap:break-word; width:"+rangeColWidth[j]+"px; text-align:"+rangeHAlign[i][j]+"; vertical-align:"+rangeVAlign[i][j]+"; font-size:"+rangeFontSize[i][j]+"; color:"+rangeFontColor[i][j]+"; font-style:"+rangeFontStyle[i][j]+"; background-color:"+rangeBackgroundColor[i][j]+";'>"+rangeValue[i][j]+"</td>";
    }
    htmlTable = htmlTable + "</tr>";
  }
  htmlTable = htmlTable + "</table>";

  return htmlTable;
}

function sendMail(htmlTable){
  // Get the email address of the active user - that's you.
  var email = Session.getActiveUser().getEmail();

  // Get the name of the document to use as an email subject line.
  var subject = 'test';

  var body ='write body here'; //ignored when htmlBody can be used in mailer

  // document to use as an email body
  var htmlBody = "" + htmlTable + "";

  // Send yourself an email with a link to the document.
  GmailApp.sendEmail(email, subject, body, {htmlBody: htmlBody}); 
}
```

GASによるHTMLメール送信する際の値のフォーマット指定方法

### 前提・実現したいこと
丸ボタンを押したときにBoxが右に移動して画面から消えます。
罰ボタンを押した時に左にBoxが動いて画面から消えます。
cardの配列cardsをmapで回して表示しています。
ボタンを押下した時に最前面のBoxだけ移動したいのですが、なぜか後ろのBoxも移動してしまいます。
cardsの配列のlenghtは３なので３回ボタンを押下したらBoxがなくなるはずですが、２回押下したタイミングで画面からBoxが全部消えてしまいます。どうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。
よろしくお願いします。




### 補足情報（FW/ツールのバージョンなど）
react
scss
Typescript
framer-motion

react buttonを押下した後のBoxのアニメーションが複数回行われる。

お世話になっております。
現在ReactNativeでのAndroidアプリ開発を行っていて、Realmを使ってみようとして
・作成 
・参照  
・更新  
・削除
について調査進めながらサンプル組んでいたんですが、参照の部分で詰まってしまいました。

```
 const Sample = async () => {
      let realm: Realm;
      try {
        realm = await Realm.open({
          schema: [{ name: "Dog", properties: { name: "string" } }],
        });

        realm.write(() => {
          realm.create("Dog", { name: "ポチ" });
        });

        const dogs = realm.objects("Dog");
        console.log(dogs[0].name);

      } catch (error) {
        console.log("エラメ" + error);
      } finally {
        if (realm !== undefined && !realm.isClosed) {
          console.log("閉じる");
          realm.close();
        }
      }
    };
``` 
dogs[0].nameで出力できるかと思っていたんですがUndefined又は空白が返ってきてしまい上手く行ってない状況です。

DBを触った事がなく知識が乏しいのでおかしなことを言っているかもしれませんが回答頂けると助かります。

ReactNative Realmを使っての値取得が上手くいかない

#概要
オブジェクトを定義する際に、条件分岐でtrueの場合、値を追加したいのですが、良い書き方がわかりません。

##このコードを。
```ここに言語を入力
const isTrue = true
if(isTrue){
  const data = {
    A1:'Hoge',
    B1:'Hoge',
    C1:'Hoge' // Trueの場合、この項目を追加したい。
  }
  await post(data)

}else{
  const data = {
    A1:'Hoge',
    B1:'Hoge',
  }
  await post(data)
}
```

##こんな感じに書きたい
```ここに言語を入力
const isTrue = true

const data = {
  A1:'Hoge',
  B1:'Hoge',
  if(isTrue){C1:'Hoge'} // Trueの場合、この項目を追加したい。
}
await post(data)

```

アドバイスお願い致します。

オブジェクトを定義する際に、条件分岐で項目を追加したい。

React NativeでDropDownPickerを使用してアイテムを1~100まで繰り返し処理で作成しようと考えています。
以下のコードで意図した動作はするのですが、動作がかなり重たいので、恐らく書き方がまずいのではないかと思っています。
正しいというかもう少し良い書き方があればご教示いただけないでしょうか。


```ここに言語を入力
  let items = [];

  for (let i = 1; i <= 100; i++) {
    items.push({
      key: i,
      label: String(i) + "minutes",
      value: i,
      color: "black",
    });
  }

  return (
    <View>
      <DropDownPicker
        items={items}
      />
    </View>
  );
};
```

React Nativeで「DropDownPicker」のitemに繰り返しで値をセットする方法を教えていただきたいです。

### 前提・実現したいこと

表題の通り、BLEManagerを使ってBLEデバイスに接続をしたいです
環境はMacOS　CatalinaでReact Nativeを使っています
作ろうとしているアプリはiOS用アプリです

### 試したこと

現在、BLEManagerのインストールができ、BluetoothのON・OFFの状況の把握までできました
https://github.com/innoveit/react-native-ble-manager#basic-example
こちらのBLEManagerの公式サイトを見ながらやっています
接続するには接続先となるBLEデバイスのMACアドレスが必要とのことですがMACアドレスの取得方法がわかりません...
海外のプログラミング交流サイトによると「iOSの場合、デバイスのMACアドレスを取得することはできず、代わりにランダムなUUIDを取得する」という話ですが、もしそれが本当だとしたらどのようにして接続するのでしょうか？

こちらが現在のコードになります
```javascript
import React, { Component } from 'react';//コンポーネントをインストール
import { NativeModules, NativeEventEmitter } from 'react-native';
import { Text, View, Image, StyleSheet } from 'react-native'//コンポーネントを指定してインストール
import styles from './styles'//スタイルシートを読み込み
import BleManager from 'react-native-ble-manager';//ble-managerをインストール

const BleManagerModule = NativeModules.BleManager;
const bleManagerEmitter = new NativeEventEmitter(NativeModules.BleManager);

class MainScreen extends React.Component {
  
  state = {//bt_statusオブジェクトをon
    bt_status: 'off',
  }

  componentDidMount() {
    BleManager.start({showAlert: false})//BleManagerを起動
    .then(() => {//正常に起動できたら
      console.log('BleManager initialized');//consoleに左記を表示
      bleManagerEmitter.addListener(//リスナー(イベント時に発動する関数)の登録
        'BleManagerDidUpdateState',//BLEの状態を変化させる
        (args) => {
            this.setState({bt_status: args.state})//引数をもとにbt_statusを変更
        }
      );
      BleManager.checkState()//モジュールにBLEの状態をチェックさせ、
                             //BleManagerDidUpdateStateイベントをトリガーする
                             //トリガーとは任意のタイミングでイベント処理を実行させること

    })
    .catch((error) => {//起動できなかったら
        console.log(error)//コンソールにエラーを表示
    });
  }

  render() {
    //stateのbt_statusを表示
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
            Bluetooth: {this.state.bt_status}
        </Text>
      </View>
    );
  }
}

export default MainScreen;
```
本来ならばお金を払って教えてもらうような内容になるため教えていただければ本当に感謝致します
詳しくない方でも何か知っていることがあれば教えていただきたいです
どうかご教授よろしくお願い致します。。。

ReactNativeのBLEManagerを使ってBLEデバイスと接続したい

iOSとAndroidで動作する写真投稿機能を持つアプリを開発しています。
いろいろ調べましたが、どうにも解決できなかったので相談させてください。


## 困っていること
* Androidで、並び替え可能なフラットリストが機能しない。(あるコンポーネント内では動作するのに、他のコンポーネント内では動作しない)
* iOSでは正常に動作している

## スクリーンショット
* 正常に並び替えができる箇所
![イメージ説明](c8af057f0876de8caa16cc78cd6876e6.png)
* 並び替えができない箇所
![イメージ説明](5cc64d03f4714c4c9fc4f629bf0f3e30.png)

## 並び替えに使用しているmodule
```
react-native-cli: 2.0.1
react-native: 0.63.1
react-native-draggable-flatlist: 2.4.0 (https://github.com/computerjazz/react-native-draggable-flatlist)
```

## コードと説明
* 写真投稿画面で「画像を選択する」をクリックすると、画像選択用のモーダルが出現。  
* 投稿する画像を選択すると、画面下部に選択した画像のサムネイルが表示される。(スクリーンショット2枚目)  
* それらは並び替え可能なリストだが、Androidでは並び替えできない(onLongPressは発火してる)  
* 画像選択完了後、スクリーンショット1枚目の画面では、正常に並び替えができる

```Javascript
【styleや無関係なメソッドなどは削除して記載してあります】


/**
 * Component1: 「画像を選択する」ボタンが設置されているコンポーネント
 * このコンポーネント直下でレンダリングされた<PreviewArea>では普通にドラッグアンドドロップの並び替えが機能します
 */
export class FileSelectArea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedImages: [],
      showModal: false,
    }
    this.setSelectedImages = this.setSelectedImages.bind(this);
    this.toggleModal = this.toggleModal.bind(this);
  }

  static contextType = Context;

  setSelectedImages(selectedImages) {
    this.setState({
      selectedImages: selectedImages,
    });
  }

  toggleModal() {
    this.setState({
      showModal: !this.state.showModal,
    });
  }

  render() {
    return (
      <PhotoRegisterContext.Provider
        value={{
          selectedImages: this.state.selectedImages,
          setSelectedImages: this.setSelectedImages,
        }}
      >
        <TouchableOpacity
          onPress={() => this.toggleModal()}
        >
          <Text>画像を選択する</Text>  // ←(1)クリックするとモーダルが出現
        </TouchableOpacity>

        {this.state.selectedImages.length > 0 &&
          <View>
            <PreviewArea
              viewType="registerPage"
            />  // ←(2)正常に動作する並び替えエリア
          </View>
        }

        <Modal
          animationType="card"
          visible={this.state.showModal}
        >  // ←(3)モーダルが表示され、モーダル内で画像の選択や写真の撮影が可能
          <PhotoSelectModalTabNavigator
            toggleModal={this.toggleModal}
          />
        </Modal>
      </PhotoRegisterContext.Provider>
    );
  };
}

/**
 * Component2: タブナビゲーター
 */
const Tab = createBottomTabNavigator();
const PhotoSelectModalTabNavigator = (props) => {
  return (
    <Tab.Navigator
      tabBar={(props) => <ModalFooter {...props} />}  // ←(4)モーダル内のtabNavigator上に、(2)と同様のPreviewAreaコンポーネントが設置されている
    >
      <Tab.Screen name="Album">
        {(props) => <CameraRollPickerArea {...props} />}
      </Tab.Screen>
      <Tab.Screen name="Camera">
        {(props) => <CameraArea {...props} />}
      </Tab.Screen>
    </Tab.Navigator>
  );
}

/**
 * Component3: 並び替え可能なFlatListコンポーネント
 */
class PreviewArea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showPreviewImageModal: false,
      previewImageIndex: 1,
    };
    this.setShowStatus = this.setShowStatus.bind(this);
    this.handlePressIconDelete = this.handlePressIconDelete.bind(this);
  }

  static contextType = PhotoRegisterContext;

  setShowStatus(status) {
    this.setState({
      showPreviewImageModal: status,
    });
  }

  handlePressIconDelete(targetIndex) {
    const selectedImages = this.context.selectedImages;

    const newSelectedImages = selectedImages.filter((item, index) => {
      return index != targetIndex;
    });

    this.context.setSelectedImages(newSelectedImages);
  }

  handlePressThumbnail(uri) {
    const images = [];
    this.context.selectedImages.map(item => images.push(item.uri));

    this.setState({
      showPreviewImageModal: true,
      previewImageIndex: images.indexOf(uri),
    });
  }

  renderItem = ({ item, index, drag, isActive }) => {
    return (
      <View>
        <TouchableWithoutFeedback
          onLongPress={(e) => {
            drag();
          }}
          onPress={() => this.handlePressThumbnail(item.uri)}
        >
          <Image
            resizeMode="contain"
            source={{
              uri: item.uri,
            }}
          />
        </TouchableWithoutFeedback>
      </View>
    );
  };


  render() {
    const images = [];
    this.context.selectedImages.map(item => images.push({url: item.uri}));

    return (
        <DraggableFlatList
          horizontal
          renderPlaceholder={({item}) => (
            <Image
              resizeMode="contain"
              source={{uri: item.uri}}
            />
          )}
          keyExtractor={(item) => this.props.viewType === 'selectImageModal'? `inSelectImageModal${item.uri}`: `inRegisterPage${item.uri}`}
          data={this.context.selectedImages}
          renderItem={this.renderItem}
          onDragEnd={({data}) => {
            this.context.setSelectedImages(data);
          }}
        />
    )
  }
}

/**
 * Component4: モーダル内のフッターエリア
 */
class ModalFooter extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static contextType = PhotoRegisterContext;

  render () {
    const {state, descriptors, navigation} = this.props;

    return (
      <View>
        <View
          style={styles.selectModalPreviewArea}
        >
          <PreviewArea
            viewType="selectImageModal"
          />  // ←(5)ドラッグアンドドロップによる並び替えが動作しない(Androidのみ)コンポーネント自体は(2)と共通
        </View>
      </View>
    );
  }
}

```

React NativeでAndroidでもリストをD&Dで並べ替えできるようにしたいです。

```javaScript
let l = [1,2,3,4,5]
//何らかの処理
console.log(l)
// [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]
```
といったようにある配列に対して何らかの処理を行い、元の配列を任意の回数繰り返した配列を作成したいです（別の変数名になっても構いません）
pythonでは以下のようにすることで簡単に実現可能なのですが、javaScriptでもシンプルな実装方法はありますでしょうか？
```python
l = [1, 2, 3, 4, 5]
l *= 3
print(l)
# [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]
```

javaScriptでの配列の増幅方法について

#前提・実現したいこと
##使っているライブラリなど
1. ReactNative
1. Firebase
1. yarn
1. Windows10Pro

ReactNativeを使って、アプリを作成しています。
インフラにはFirebaseを使っています。
yarnを使って、ライブラリを管理しています。




#試したこと
[Git Bash で error: xxx :Filename too long と表示されてはじかれるときの対処法](https://qiita.com/pollenjp/items/8c70a5b55d46c1f03728)などを参考にして、
管理者として、GitBashに```git config --system core.longpaths true```と打ち込みました。
打ち込んだ後、再起動も行いました。

さらに、[Win 10 IP編: ファイルシステムが持つ最大文字列値の制限を外す](http://news.mynavi.jp/article/windows-394/)を行いました。


しかし、下記のような状態のままです。
![イメージ説明](2ceadcb9dd2d9cdfd495356cb8ac4d3e.png)



#発生している問題・エラーメッセージ

**エラーメッセージ**
```Filename too long```

ReactNativeで使っているライブラリの名前が長すぎる問題をどのようにすれば良いのかを教えていただきたいです。


#解決方法
[.gitignoreでgitにコミットしないディレクトリを管理する【node_modules】](https://qiita.com/growsic/items/b2965c0ba3b0aaae1ff8)
こちらのサイトを参考に、ReactNativeのライブラリを保存しないようにすることで、gitの管理を簡単にすることができるようになる。

ReactNativeのライブラリ名が長くてもGitで、Filename too longと表示されない対処法を教えていただきたいです。

react typescriptを使って開発をしています。
dataから取得した値を users, names, agess,に入れて共通のCardコンポーネントにpropsとしてデータをわたしmapで回して表示させたいです。
dataの中身の変数がそれぞれ違うためどう実装したらいいのでしょうか？
わかる人いましたらご教授お願いしたいです  

```ここに言語を入力
import React, { FunctionComponent } from 'react';
import {
  IUsers,
  INames,
  IAges,
} from 'domain/type.ts';

type Props = {
 data: IUsers | INames | IAges;
};

export const Card: FunctionComponent<Props> = ({
  data,
}) => {
  return (
    <div>
     <span>
      {data.{// ここにそれぞれの配列で回してあげたい変数を入れたい}.map((d, i) => (
        <div key={i}>
            <p>{d}</p>
        </div>
      ))}
    </div>
  );
};

```

```ここに言語を入力
// 親コンポーネント
  <Card
    name={'user'}
    data={users}
  ></Card>
  <Card
   name={'names'}
   data={names}
  ></Card>
  <Card
   name={'ages'}
   data={ages}
  ></Card>
```

```ここに言語を入力

// usersの中身
{
  users: ["aaa", "aaaa",  "aaaaa"]
}

// namesの中身
{　
  names: ["あああ", "あああ" "あああ","あああ","あああ"]
}

// agesの中身
{
  age_group: [
    {
      id: 1
      name: "20"
　　},
   {
　　　id: 2
     name: "21"
   }
  ]
}

```

react データから取得した複数の値をmapする

## 前提・実現したいこと
for文の中にfor文をいれる方法しか思いつかず、
データ量が増えた際に処理が重くなってしまうのではないかと思い
スマートな記述方法をご教示願います。

## データ
下記２つの配列を条件によって結合させたいです。

■条件
- idが同じ
- 必要なkey, valueだけ取り出す（id, name, age）

```javascript
const arrayA = [
    {"id": "1", "name": "a", "hoge": "hoge"},
    {"id": "2", "name": "b", "hoge": "hoge"},
    {"id": "3", "name": "c", "hoge": "hoge"},
    {"id": "4", "name": "d", "hoge": "hoge"},
    {"id": "5", "name": "e", "hoge": "hoge"},
    {"id": "6", "name": "f", "hoge": "hoge"}
 ]
const arrayB = [
    {"id": "3", "age": "10"},
    {"id": "6", "age": "20"}
]


// expected output:
// [
//   {"id": "1", "name": "a", "age": null},
//   {"id": "2", "name": "b", "age": null},
//   {"id": "3", "name": "c", "age": "10"},
//   {"id": "4", "name": "d", "age": null},
//   {"id": "5", "name": "e", "age": null},
//   {"id": "6", "name": "f", "age": "20"}
// ]
```
ご回答いただけると幸いです。よろしくお願いします。

配列（内はJSON）同士を条件によって結合したい

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
react native firebase/messagingを使用して
iOSへのリモートプッシュ通知受信を契機にバックグラウンド処理を実装しようとしています。

この機能を実装中に以下問題が発生しています。
・「setBackgroundMessageHandler」を使用してもリモートプッシュ通知を検知出来ない。

この機能を使用して、バックグラウンド処理を行うにはどうしたら良いでしょうか？

### 発生している問題・エラーメッセージ

リモートプッシュ通知受信を契機に処理を実行できない。

### 該当のソースコード

```JavaScript

import RNFmessaging from '@react-native-firebase/messaging';

.......

	RNFmessaging().setBackgroundMessageHandler(async (remoteMessage) => {
		console.warn('test' ,remoteMessage);
	});

```


### 試したこと

postmanを使用して以下のJSONDataを送信しても検知をしませんでした。

{
    "to" : "トークン",
    "priority" : "high",
    "notification" : {
        "content_available" : true,
        "data":{
           "Nick" : "Mario",
           "Room" : "PortugalVSDenmark"
        }   
    }
}

Firebase/messagingを使用したリモートプッシュ通知

`Gatsby`を使って自分のサイトを開発しているのですが、進めていくうちに謎点がでてきました。
[公式ドキュメント](https://www.gatsbyjs.com/docs/)も見たりしていますが、よくわからない・・

#### 謎点
1. `gatsby-browser.js`とは何の為にあるのか?
2. `gatsby-config.js`と`gatsby-node.js`との違い。両方ともサイト全体の設定だと思うけど、それらの違いがよくわからない
3. スタイリング時、`hoge-hoge`ではなく`hogeHoge`としないといけない理由。例えば、`margin-top`でなく`marginTop`とか。`margin-top`だとスタイリングできない!←これはReactだと勉強したけどなぜこんなことをした?
4. `<Img/>`と`<Layout>`みたいにタグ終わりの前に`/`(スラッシュ)を必要なものと、いらないものとの違い
5. React及びGatsbyはどの概念で設計されていますか?MVC?
6. ReactもGatsbyも両方とも中途半端な理解なので何がReact固有の機能で何がGatsby固有な機能なのかがわからない。GatsbyJs特有ののクセがあれば教えて下さい
7. React及びGatsbyが勉強できる良いリンクがあれば教えて下さい

以上が謎点です。すべて答えていただかなくても結構ですので教えていただければ嬉しいです。
#### 参考:
* [Gatsby.js Documentation](https://www.gatsbyjs.com/docs/)
* [gatsby-project-structure](https://www.gatsbyjs.com/docs/gatsby-project-structure/)

GatsbyのクセとReactとの違い

ReactNativeの勉強をしている大学生です。この度は閲覧いただきありがとうございます。
UIツールとしてnative-baseを利用しているのですが、DeckSwiperを使用し、実際にswipeした際にanimate関連の警告がコンソールに出てきます。動作はexpoで行っています。

該当部分コード(もちろんimportは確実に行えており、DeckSwiper部分はほとんど公式のコピペです。)
```ここに言語を入力
const cards = [
  {
    text: "Card One",
    name: "One",
    image: require("./assets/img1.jpg"),
  },
  {
    text: "Card Two",
    name: "Two",
    image: require("./assets/img2.jpg"),
  },
  {
    text: "Card Three",
    name: "Three",
    image: require("./assets/img3.jpg"),
  },
  {
    text: "Card Four",
    name: "Four",
    image: require("./assets/img4.jpg"),
  },
  {
    text: "Card Five",
    name: "Five",
    image: require("./assets/img5.jpg"),
  },
];
export default class DeckSwiperExample extends React.Component {
  // constructor(props) {
  //   super(props);
  //   this.onImportClick = this.onImportClick.bind(this);
  // }
  render() {
    return (
      <Container>
        <Header />
        <View>
          <DeckSwiper
            ref={(c) => (this._deckSwiper = c)}
            onSwipeRight={(item) => alert(item.text)}
            onSwipeLeft={(item) => console.log(item.text)}
            renderEmpty={() => alert("finished!")}
            dataSource={cards}
            // looping={false}
            renderItem={(item) => (
              <Card style={{ elevation: 3 }}>
                <CardItem>
                  <Left>
                    <Thumbnail source={item.image} />
                    <Body>
                      <Text>{item.text}</Text>
                      <Text note>NativeBase</Text>
                    </Body>
                  </Left>
                </CardItem>
                <CardItem cardBody>
                  <Image style={{ height: 300, flex: 1 }} source={item.image} />
                </CardItem>
                <CardItem>
                  <Icon name="heart" style={{ color: "#ED4A6A" }} />
                  <Text>{item.name}</Text>
                </CardItem>
              </Card>
            )}
          />
        </View>
        <View
          style={{
            flexDirection: "row",
            flex: 1,
            position: "absolute",
            bottom: 25,
            left: 0,
            right: 0,
            justifyContent: "space-between",
            padding: 15,
          }}
        >
          <Button iconLeft onPress={() => this._deckSwiper._root.swipeLeft()}>
            <Icon name="arrow-back" />
            <Text>Swipe Left</Text>
          </Button>
          <Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
            <Text>Swipe Right</Text>
            <Icon name="arrow-forward" />
          </Button>
        </View>
      </Container>
    );
  }
}

```
該当エラー
```
Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
* [native code]:null in __expoConsoleLog
- node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:162:6 in registerWarning
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:88:8 in warnImpl
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:66:4 in console.warn
- node_modules\expo\build\environment\muteWarnings.fx.js:18:4 in warn
- node_modules\react-native\Libraries\Animated\src\NativeAnimatedHelper.js:281:4 in shouldUseNativeDriver
- node_modules\react-native\Libraries\Animated\src\animations\DecayAnimation.js:52:49 in constructor
- node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:256:24 in start
- node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:262:13 in start
- node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:383:10 in animations.forEach$argument_0
* [native code]:null in forEach
- node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:365:6 in result.start
- node_modules\@codler\react-native-keyboard-aware-scroll-view\lib\KeyboardAwareHOC.js:230:8 in Object.values.forEach$argument_0
- node_modules\react-native\Libraries\Interaction\PanResponder.js:572:12 in clearInteractionHandle
- node_modules\react-native\Libraries\Interaction\PanResponder.js:490:30 in panHandlers.onResponderRelease
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:286:4 in invokeGuardedCallbackImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:497:2 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:521:2 in invokeGuardedCallbackAndCatchFirstError
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:683:41 in executeDispatch
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:707:19 in executeDispatchesInOrder
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:872:28 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:851:4 in forEachAccumulated
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:897:20 in runEventsInBatch
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:1069:18 in runExtractedPluginEventsInBatch
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2835:35 in batchedUpdates$argument_0
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20569:13 in batchedUpdates$1
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2731:29 in batchedUpdates
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2834:16 in _receiveRootNodeIDEvent
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2911:27 in receiveTouches
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
```
字数の問題で描き切れていませんが、2回
```ここに言語を入力
Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
```と出てきており、困っています。(2つとも警告内容は全く同じ)

試したこと
→Animated.timingの後にuseNativeDriverをtrueかfalseで設定すればよいとのことで調べてみましたが、[このgitのコード変更](https://github.com/GeekyAnts/NativeBase/commit/5c190746544293aa9c434c4831771f7e17043317)にて既に対処されていました。自分のコードを確認しましたが、全く同じコードになっていました。

現在は全く見当もついていません。博識な方で何かわかることがございましたら、是非ご教授いただけると幸いです。

native-base/DeckSwiperのswipe時animateに警告が出る

### 前提・実現したいこと

Reactアプリでauth0を使ってログイン機能を実装しています。
その際に認証済みだと閲覧できるページを作りたいのですが、そのページに行こうとするとログイン画面にリダイレクトされるのですが、ログイン後に以下のようなエラーが表示されます。
エラー文的にstringかクラス/関数を渡すように言われているのですが、自分が渡そうとしているDemoAppは関数コンポーネントなので満たしてるのではないかなと思っています。
何が原因なのでしょうか。
わかる方がいましたらコメントお願いします。

####参考
[https://auth0.com/docs/libraries/auth0-react](https://auth0.com/docs/libraries/auth0-react)

### 発生している問題・エラーメッセージ

```
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    in Unknown (created by Context.Consumer)
    in Route (created by ProtectedRoute)
    in ProtectedRoute
    in Switch
    in ThemeProvider
    in Auth0Provider
    in Provider
    in Router (created by HashRouter)
    in HashRouter
```

### 該当のソースコード

```index
<Route exact path="/view" component={DemoApp} /> //成功
<ProtectedRoute exact path="/view" component={DemoApp} /> //失敗
```

```ProtectedRoute
import { withAuthenticationRequired } from "@auth0/auth0-react";
import React from "react";
import { Route } from "react-router-dom";

export default function ProtectedRoute(component) {
  return <Route component={withAuthenticationRequired(component, {})} />;
}

```

[React]React.createElement: type is invalid

データを取得(get)の処理をaxiosを使っていたのですがswrに書き換えてgetの通信をしてみました。
そしたら401エラーになりNot enough or too many segments"というメッセージがコンソールに表示されました。
セグメントのエラーというのはどういうものなのでしょうか？
修正したいのですがセグメントエラーがどういうものなのかがわからず困っています。
わかる人いましたらご教授お願いしたいです。

開発環境はnext.js Typescriptを使っています。
以下のコードがaxiosからswｒを使った処理に書き換えたコードです。


```ここに言語を入力
import useSWR from 'swr';
import { Axios } from './axios';

const token = ***********************
const lang = 'jp';

export const useUserList = (id: number) => {
  const path = `/list/${id}`;

  const fetcher = (url, params) => {
    Axios.get(url, {
      params: { lang: params.lang },
      headers: { Authorization: `Bearer${params.token}` },
    }).then((res) => res.data);
  };
  const { data, error } = useSWR(
    [path, { params: { token, lang } }],
    fetcher
  );
  return {
    user: data,
    isLoading: !error,
    isError: error,
  };
};

```

データ通信　セグメントのエラー

### 前提・実現したいこと

react naitveでtypscriptで書き始めたのですが、errorがなぜに出るのかわかりません、、

### 発生している問題・エラーメッセージ

JSX 要素型 'View' にはコンストラクトも呼び出しシグネチャも含まれていません。

下記の部分で上記のerrorが出ます

```
      <View>

```

### 該当のソースコード

```
//app.tsx

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {
  return (
    <>
      <View>
        <Text>oooo</Text>
      </View>
    </>
  );
};

export default App;
```

### 試したこと

[この記事を読んだのですがわからなかったです](https://tutorialmore.com/questions-1545558.htm)