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

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

ただいまの
回答率

87.59%

JavaScriptでデータの処理を行いたい

解決済

回答 2

投稿

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

score 12

内容

JavaScriptで実装したい内容があるのですが、良い方法が思い浮かばないので皆様のお力添えいただければと思います。

データベースと連携して、以下のデータをやりとりしています。
・comment (文字列型)
・scroll(整数型)
このscrollというデータはページのスクロール量です。
ページの読み込み時点で、上記のデータを全て配列に取得しています。
今回、JavaScriptで現在開いているページのスクロール量を取得し、データベースから取得したscrollの値と一致した時に対応したcommentを出力するという処理を行いたいと思っています。

解決案

私が思いついた案は以下です。

1.Web Workersを使ってcomment1つだけをスクロール量の一致した場合に表示する処理を並列に行う。
2.データベースから取得したデータが格納された配列をスクロール量でソートし、昇順に値を取り出して処理する。

しかし、どちらも処理が冗長だと感じています。
何か効率の良い方法はありませんでしょうか?

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/01/08 17:02

    実際にどちらかの案で実装はされたのでしょうか?

    キャンセル

  • silyauta

    2021/03/29 04:23

    レスポンスが遅くなってしまい申し訳ございません。
    miyabi-sunさんから頂いた回答を参考に、Firebaseにコメントとスクロール量を記録し、Chrome拡張機能から取得して表示する形で実装しました。

    キャンセル

  • m.ts10806

    2021/03/29 06:53

    そうですね。さすがに2年は。

    キャンセル

回答 2

checkベストアンサー

+2

根本的な問題ですが、スマホやパソコンは画面の縦横幅が全然違いますし、
利用出来るフォントも違うので改行するしないでスクロールしたピクセル数は同じ事になるはずが無いのですが……

あーわかった!
ニコニコ静画と同じ事をJS上で再現したいのね。

下記はその想定で考えて行きます。

1.Web Workersを使ってcomment1つだけをスクロール量の一致した場合に表示する処理を並列に行う。

これは却下
そもそもWeb WorkerはDOMを触る普通のJavaScriptの用途からかけ離れたものです。

一応調べたらWeb WorkerでDOMを強引に触るライブラリが見つかりましたが、
documentオブジェクトがないので相当つらそうです。
何かあれば自己責任で出来るのなら試して見れば良いですが、出来なければやり直しです。

Worker DOM - Web WorkerでDOM操作を実現

2.データベースから取得したデータが格納された配列をスクロール量でソートし、昇順に値を取り出して処理する。

やるとすればこれですかね。
冗長にならないよう、初期処理を済ませてしまえばどうとでもなるでしょう。

この辺を参考にしてっと
【jQuery】スクロール量に応じて発火するサンプルコード

$(() => {
  // ソートする必要があるならば、ここでソートすればいいし、HTML吐き出す時にソート済みのものを渡しても良い
  let comments = [
    {comment: "test", scroll: 123},
  ];

  // スクロール時のイベント登録
  $(window).scroll(() => {
    if (comments.length === 0) return;
    const scroll = $(window).scrollTop();

    const targets = [];
    for (let comment of comments) {
      if (comment.scroll > scroll) break; // ソート済み想定なのでこうすれば速度が出る
      targets.push(comment)
    }
    if (targets.length === 0) return;

    for (let comment of targets) {
      // TODO:ここにコメントを画面上に表示するコードを書く
    }

    // 色々案はあるが、複数回shift実行するのは遅かったと思うので今回はsliceを活用
    comments = comments.slice(targets.length);
  })
})

未確認ですがざっとこんな感じになるでしょう。
細部多少変なところはあるかと思いますが、そんなに速度面でダメージになることはないと思います。

DOM操作に関してですが、
予めコメントをdisplay: hiddenleft: 100%等で隠しておき、クラス付与によるCSSアニメーションを活用すればパフォーマンスをあまり損ねないかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/08 19:33

    はい、まさしくニコニコ系のコメントをJSで行う方法を考えておりました。(アイデアがまんまパクリなのでどうかと思いましたが、最初から名前を出せばイメージが伝わりやすかったですね。申し訳ありません。)
    添付していただいたサイトやソースを参考に、開発を進めたいと思います。
    実行環境の違いなど、課題点が多いことも学べましたのでもう一度基礎部分から学習いたします。。。
    ご回答頂きありがとうございました。

    キャンセル

+1

全体構成が質問からはわかりませんが、私のイメージとして

「一定量スクロールしたら、次のコメントを表示する」みたいな簡単な処理では、ダメですか?(もちろん文字数や各コメントのheightは考慮して)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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