質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Firebase

    604questions

    Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

  • React Native

    181questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

  • Redux

    112questions

〇〇を含むデータを取る/絞りたい(react native)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 139

yamady

score 148

いつもお世話になっております。

React Nativeと、Firebaseを使って、TODOアプリを作っています。
取得した曜日(getDay)と、TODOを作った時に指定した曜日が一致している時にホームに表示する仕組みを実装したいと考えています。

Firebaseには、orderByChildでフィルタリングできるのですが、複数のキーワードを指定することができませんでした。

例)
月曜と、火曜にゴミ出しをすると指定して、TODOを作成する。
実際の曜日が月曜になると、ホームにTODOとして表示される。

 開発環境

react-native 0.53.0
react-native-firebase ^3.2.2

 エラー

for文もしくは、lodashを使うのが適切かなとも思っていますが
まだやり方を迷っています。

 ソースコード

Firebaseに保管されているJSONデータ

イメージ説明

todoActions.js(redux)

export const todosFetch = () => {
  console.debug("todosFetch start");

  return (dispatch) => {
    firebase.database().ref(`/todos/`)
    // Firebaseならここで .orderByChild でフィルターします
    .once('value', snapshot => {
      // ここでfor文かlodashの処理が必要かと考えています
      const todos = snapshot.val();
      return todos;
    })
    .then((todos) => {
      const userPromises = _.map(todos.val(), async (todo, todoId) => {
        return firebase.database().ref(`/users/${todo.uid}`).once('value')
          .then(snapshot => snapshot.val())
          .then(user => ({...todo, user, todoId}));
      });
      dispatch({ type: 'ui/loading/hide' });
      return Promise.all(userPromises);
    })
    .then(todoItems => {
      dispatch({ type: 'todos_fetch_success', payload: todoItems });
    });
  };
};
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Yatima

    2018/07/06 09:32

    「Firebase側で適切なフィルタリング機能がない」とはどういう意味でしょうか?

    キャンセル

  • yamady

    2018/07/06 10:07

    失礼しました。質問内容を編集しました。

    キャンセル

回答 2

checkベストアンサー

+1

いまいちデータの構造が理解できなかったので勝手に解釈しました。
Array.prototype.filter() を使えば絞り込みできますし、 Array.prototype.some() を使えば一つでも条件に合致すれば true を返せます。
react native、 リリースビルドするとランタイムの違いでメソッドが実装されてなかったりしますが(String#padStart() とか)、 .filter と .some は普通に動いた気がするので、 外部ライブラリ使う必要無い気がします。まあ未実装であれば Polyfill かけば良い話で。

const todo = [{
 label: '燃えるゴミ',
  selectedWeekDays: [{
    label: 'Monday',
    value: 1,
  }, {
    label: 'Thursday',
    value: 5,
  }], 
}, {
  label: 'プラスチック',
  selectedWeekDays: [{
    label: 'Thursday',
    value: 4,
  }]
}, {
  label: '資源ゴミ',
  selectedWeekDays: [{
    label: 'Friday',
    value: 6,
  }],
}, {
  label: '金曜市',
  selectedWeekDays: [{
    label: 'Friday',
    value: 6,
  }],
}];

// 今日の曜日を整数で返す関数
const getTodaysWeekDay = () => (new Date()).getDay() + 1; // -> 6
// タスクが今日の曜日を指定されているなら true を返す関数
const isTodaysTask = task => task.selectedWeekDays.some(weekday => weekday.value === getTodaysWeekDay());

const fillterdTodo = todo.filter(isTodaysTask);

console.log(fillterdTodo); // -> 資源ごみ、金曜市

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 13:15

    og24715さま、ご丁寧にありがとうございます!
    参考になるやり方でした。何かとライブラリに頼ってしまう傾向があったので、ちょっと直して行きたいと思います。。。!

    キャンセル

+1

各todoのデータでの曜日の保持を

sunday: 0
monday: 1
tuesday: 0
...


といった構造にするとスマートではないでしょうか.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 13:14

    Yatimaさん、データの保持の仕方ご指摘いただきありがとうございます!
    おっしゃる通りですね、この構造を検討してみたいと思います(_ _)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Firebase

    604questions

    Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

  • React Native

    181questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

  • Redux

    112questions