ReactComponentにおけるkeyは結構大事

ReactComponentでhtmlをレンダリングしていて,コンソールにwarningが出ていることがある. 無視しても大丈夫なものもあるのかもしれないが,エラーが出ることもあるので,気になって調べてみた.

こんな感じのエラー.

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`. See https://fb.me/react-warning-keys for more information.

mapしているところで発生している

いろいろと自分のコードを消したりしてみると,どうやらrender内でmapしている部分で発生している.具体的にはこんなコード.

{list.map(function(list, i) {
  return (
    <div className="list">
      <div ...></div>
    </div>
  )
}, this)}

この部分をごっそり消すと,見事warningは両方共でなくなる.

mapに問題があるのか? とか,forEachで表示したほうがいいのか? とか,やってみたものの特に変化はない.

keyを指定したらwarningが消えた

unique "key"と書いてあるのが気になって,keyについて調べてみた. そこで,試しにkeyを入れてみたら,見事にwarningが消えた.

{list.map(function(list, i) {
  return (
    <div key={i} className="list">
      <div ...></div>
    </div>
  )
}, this)}

keyの役割

具体的なkeyの役割についてはこちらの記事が詳しい.

qiita.com

つまりは,mapするようなレンダリングをやると,繰り返し内で描画されるオブジェクトの区別がつかなくなり,差分レンダリングができなくなってしまう. そのために,繰り返しで同じオブジェクトをいっぱい生成するにしても,React側で区別がつくkeyを設定して欲しいと.

意外にもかなり重要な役割を担っていたくせに,今まで全然知らなかった.

key大事.

でもなぜ,setStateのwarningが消えたのかは謎

keyを設定しろって言ってるwarningが消えるのは理解できるが,setStaterender内にあると言っていたwarningが,この修正だけでなぜ消えるのかは,不明です. 誰か知ってたら教えてください.

クラウドワークスを支えてないページネーション技術

この記事は Crowdworks Advent Calendar 2015 20日目の記事になります.

みなさんRailsのページネーションは何を使っていますか? kaminari ? will_paginate ? どちらも使い勝手の良いページネーションライブラリですが,僕が入った時,クラウドワークスでは will_paginate が使われていました.

ページネーション用のクエリが重い

ページネーションはページ下部にページング用のビューを出力していますが,その内部ではレコード件数のカウントをします.

f:id:h3poteto:20200327214209p:plain

このような見せ方をしているため,どうしても最終ページのページ番号を知る必要があります. ページに表示するレコードを取得するクエリには,OFFSETLIMIT をつけていますが,最終ページを知るためにはどうしても OFFSETLIMIT のついていないクエリで COUNT する必要があります.

というわけで kaminariwill_paginate もカウントしています.

絞り込みが複雑なページが重くなる

クラウドワークス内にもページネーションをしている場所がいくつもあります. そういうページで一部,やたら重いページが見受けられました.

これ,絞込のSQLクエリがやたら複雑で,それについてのカウントクエリを投げていて,現状一番のボトルネックになっているのはそこなんです. もちろんそのカウントクエリとは,ページネーションの中で呼び出している COUNT でした.

もちろん表示する分のレコードを取得するのも重いわけですが,LIMITOFFSETがついているのでCOUNT ほどではない.

キャッシュする?

一番最初に思いつくのはキャッシュです.ページ数をキャッシュしてしまえば,速そうな気がします. ただ,単純なページ数のキャッシュには問題もあります.

レコード数が増えた時にどうするか

レコード数が増えた時に,ページ数をキャッシュしてしまっていると,最後のページへのリンクが生成されずに,全件にアクセスできなくなってしまいます. これはページに載せているコンテンツにもよるでしょうけど,あまり望ましくありません.

であるならば……

載せるコンテンツが増えた時にキャッシュを再生成する

これは確かに手段としてはありです. ただし,結構な複雑度になります.なにせこれだけ重いページなのだから,同期処理でキャッシュの再生成はできない.レコードが増えた時に,非同期でキャッシュクリア&再生成をしなければならない. さらに言うなら,こういうカウントクエリ原因で重いページはいくつもあります. なので,対象になるレコードについてはすべて create 時にキャッシュの処理をしてやらなきゃいけない.

いや,めんどくさくないですか? それ,表示側だけでなんとかならんの?

そもそもそのページ数,正確に出す必要あるの?

たいてい,そういう重いページネーションをしているページは,そもそもレコード件数が多く,強敵の中には4000ページを超える奴らが潜んでいます. これって,1ページ目を見た時に最終ページが何ページなのか正確に知りたいですか? それを知りたい人ってどのくらいいるんですか?

googleの検索結果などをみていただけるとわかると思うんですが,最終ページのページ数を正確に出す必要ってないんですよ,たぶん.概算の数を出しておいて,いざ最終ページアクセスがあったときに,「あ,ごめん,これしかなかったわ」と出せばいいんじゃないでしょうか.

f:id:h3poteto:20200327214223p:plain

これは感覚なんですが,ページ数の表記において有効数字は3桁程度あればいいと思うんですよね. 4561ページだろうが,4562ページだろうが,そんな大差ないと思うんですよ.

じゃぁ概算のページ数だけ出しておこう

方針

  1. 本当に一番最初に1ページ目を表示したときに,ページ数をCOUNT クエリ発行してカウントする
  2. その値を(クエリをKeyとして)Redisに保存しておく
  3. ラストページの値は,最初にカウントした値を元に,多めに見積もって適当にceil して出しておく
  4. アクセスされたとき,もしレコード件数が0件だったら,もう一度COUNT クエリを発行して正確なラストページの値を算出し,ラストのレコードを表示する
  5. そのとき,Redisに保存されている値と違う値になっていたら,Redisの値を更新する

Redisじゃなくてmemcacheとかに保存してもいいんですが…….もちろんキャッシュの値が消えていた時はカウントしなおします.だけど,別に消える必要もなくて,expireを設定するようなものでもない.必要なときには値を更新していくので,勝手に消えてもらうとむしろパフォーマンスが下がるだけなんですね.なのでmemcacheはあんまり適切ではないです.

この方式でカウントクエリにより重くなるのは,本当に初回の一人目と,ラストページを見に来た人だけです. Redisの値が吹っ飛ぶことを想定しないのであれば,稼働後はラストページを見に来るときだけ COUNT クエリを発行します.

Gemにした

というわけでこんな機能をもつページネーションライブラリを作りました.

github.com

使い方

redisの設定

config/initializers/redis.rb みたいなのを用意します.

GuessPaging::RedisClient.setup do |config|
  config.redis_host = '127.0.0.1'
  config.redis_port = 6379
end

controllers

class RecordsController < ApplicationController
  def search
    @guess = GuessPaging::Paginate.new(
      query: Record.where(category_id: params[:category_id].to_i),
      per_page: 10,
      essential: 3)
    @guess.guess(
      page_params: params[:page]
    )
  end
end

kaminari のように ActiveRecord の拡張にはしていません.ページネーション用のオブジェクトなのに,ActiveRecord にいるのって,なんか変な感じしません?

per_page はわかると思うんですが,essential という設定は,ページ数を丸めるときの有効数字の桁数になります.この設定だど3桁なんで,ラストが4561ページだとすると,4570ページと表示されますね.

views

<% @guess.records.each do |record| %>
  <%= record.hoge %>
<% end %>
<%= paging(@guess) %>

ActiveRecord の拡張にしていないので,GuessPaging のオブジェクトからレコードを取り出してやります.records で取り出されるのは,ActiveRecord のオブジェクトなので,この先はいつもどおりに使えます.

<%= @guess.count %>

これでレコードが何件あるのかを表示できますが,ここで表示するのはあくまで概算の数です.ページ数と同じで,カウントクエリを発行せずに概算を出すので,ラストページに行くまでは正確な数値はわかりません.

assets

app/assets/stylesheets/application.css に以下の行を追加します.

//= require 'guess_paging'

速い

ちょっと手元で複雑なJOIN をするレコードを構成するのがめんどくさかったので,適当に10万件くらいのレコードでページネーションしました.なので差が微妙ですが…….

  • kaminrai f:id:h3poteto:20200327214250p:plain f:id:h3poteto:20200327214258p:plain

  • guess_paging f:id:h3poteto:20200327214311p:plain f:id:h3poteto:20200327214320p:plain

というわけでクラウドワークスではこんなページネーションの技術が使われて・・・・・・いません! タイトルにもある通り,全然支えてないです.今も will_paginate してます.毎日NewRelicに「重いよこれ」って怒られる日々です.

なにこれ.

巨大レコードのページネーション用gemを作った

Railsにおいて,kaminariwill_paginateのようなページネーションライブラリは非常に強力だ. というか,あまりページネーションというものを意識せずとも使えてしまうので,便利だ.

ページネーション時のカウントクエリが重い

便利ではあるのだが,すべての場合において無敵なわけではない. 複雑なJOIN を繰り返すことによりインデックスが効かなくなった状態で,レコード数が大量にあるような場合.そんなときに,これらのページネーションを使っていると,重くなる場合がある.

ページネーションライブラリは,ページの下部にページネーションのビューを表示している. そして,ここにはラストページの番号が書かれている.

f:id:h3poteto:20151219205701p:plain

この数字は,ページネーションライブラリ内部でカウントクエリを発行して,条件に合致するレコード数をカウントしている.

複雑で重いクエリの場合,このカウントクエリが非常に重くなってしまう場合がある.

大量のレコードがある場合のページネーション

gemにした

このような場合のページネーションを上手いこと解決してくれるgemを作った.

github.com

方針

そもそもそのページ数,正確である必要は?

カウントクエリが重くなるような状態では,たいていの場合はレコード数が多い.例えば4000ページくらいあったとしよう.果たして1ページ目を訪れる人のどのくらいが,最終ページにいくだろうか? そして最終ページにいくとき,そのページ数が正確である必要性はあるのだろうか?

これは俺の個人的意見なのだが,ページ数もレコード件数も,そこまで正確である必要はないと思っている.だいたい有効桁数3桁くらいまで出ていれば,その先はなんであろうと変わらない. そもそも天下のgoogleだって,検索件数を正確には出していないじゃないですか.

f:id:h3poteto:20151219205638p:plain

どう実現するか

  1. 本当に一番最初に1ページ目を表示したときに,ページ数をCOUNT クエリ発行してカウントする
  2. その値を(クエリをKeyとして)Redisに保存しておく
  3. ラストページの値は,最初にカウントした値を元に,多めに見積もって適当にceil して出しておく
  4. アクセスされたとき,もしレコード件数が0件だったら,もう一度COUNT クエリを発行して正確なラストページの値を算出し,ラストのレコードを表示する
  5. そのとき,Redisに保存されている値と違う値になっていたら,Redisの値を更新する

使い方

READMEに書いてあることとほとんど同じですが.

Redisの設定

config/initalizers/redis.rb みたいなファイルを作ってください.

GuessPaging::RedisClient.setup do |config|
  config.redis_host = '127.0.0.1'
  config.redis_port = 6379
end

Controllers

class RecordsController < ApplicationController
  def search
    @guess = GuessPaging::Paginate.new(
      query: Record.where(category_id: params[:category_id].to_i),
      per_page: 10,
      essential: 3)
    @guess.guess(
      page_params: params[:page]
    )
  end
end

per_page はわかると思います.ちなみにデフォルトで10が設定されているので,省略可能なオプションです. essential は,ページ数を適当に丸めて表示するときの有効桁数です.この例で言うと,ラストが4561ページだったら,4570と表示されることになります.この値も,デフォルト値として3が設定されているので,省略可能なオプションになります.

Views

<% @guess.records.each do |r| %>
  <%= r.hogehoge %>
<% end %>
<%= paging(@guess) %>

元のActiveRecord オブジェクトはrecordsというインスタンス変数に格納されています.ここから取り出せば,今までと同じように使えます.

Assets

app/assets/stylesheets/application.css に以下の行を追加します.

//= require 'guess_paging'

これでこんな感じのビューデザインになります.

f:id:h3poteto:20151219205735p:plain

Helpers

  • ページネーションのビューを表示する

    <%= paging(@guess) %>

  • 現在のページ番号

    @guess.current_page

  • ラストページの番号(概数)

    @guess.max_page

  • レコード件数(概算)

    @guess.count

速くなるよ

あまり複雑なDBを即席で作れなかったので,適当に10万件くらいの軽いレコードなので,そこまで大きな差は出ていませんが.

  • kaminari f:id:h3poteto:20151219205819p:plain f:id:h3poteto:20151219205825p:plain

  • guess_paging f:id:h3poteto:20151219205833p:plain f:id:h3poteto:20151219205841p:plain

できていないこと

  • localeによるビューの変更 kaminari のようにlocaleの設定でページネーションビューの表示文字を変更することについては,対応していません.

  • デザイン変更 これは使う側で適当なcssを作ってもらえばもちろん上書きできます.デフォルトだと,//= require 'guess_paging' したものがそのまま適応されます.

思うところ

今回のgemはActiveRecord の拡張として作ってはいません.どうもページネーションの機能がActiveRecord に拡張されて入るというのは,違う気がしていてい,ページネーションはページネーションのオブジェクトを生成するように作りました. ただ,これにもちょっとだけ不便なところがあって,ActiveRecord の拡張として作ると,呼び出された時に初めてDBアクセスしてARのオブジェクトが生成されます. なので,コントローラでクエリを書いておくと,ビューで呼び出すときに初めてDBアクセスされますよね.そのため,kaminari のようなページネーションでは,ページネーション用のカウントクエリはビューで呼び出した際に初めてクエリが呼ばれます.

それに対して,guess_paging は,ARで書いたクエリを一度GuessPaging に渡して,そこでオブジェクト化しているので,guessメソッドを読んだ時点でARのオブジェクト生成が走り,必要なクエリが呼ばれます. なるほど,ARの拡張として作るというのにはそういう意味があるんですね.

もうひとつ考えたこととしては,おそらくこのgemってレコード件数が少ないページにはあんまり使い勝手が良くないんですよね. だって,勝手にページ数保持するじゃないですか,正確じゃないでしょ. これを10ページとかでやられたら,むしろ邪魔なわけですよ.

そうなると kaminariwill_paginate と同居するってことは十分に考えられて,その際にARの拡張にしているとメソッド名被りそうだな……と. であるならオブジェクトからして別の方が取り回しが楽な予感がしました.

S3+CloudFrontだけでリダイレクト設定を作る

サービスをリニューアルするときに、ドメインも新しく作りなおしていて、どうしてもリダイレクトしておきたい場合があります。でも、そのリダイレクトってサービスの仕様ではないし、それなりに時間経ったら不要になるだろうから消したい。

そんなことのために、本体サービスのnginxにリダイレクト設定を書いたり、リダイレクトのためだけにEC2を立てるのは非常にだるい。

というわけで手抜きをして、S3でリダイレクト設定を書いてみる。

StaticWebHostでリダイレクト

例:old.hoge.comをnew.fuga.comにリダイレクトする場合

  1. old.hoge.comというバケットをS3で作る
  2. バケットの設定からStaticWebHostで、new.fuga.comへのリダイレクトを設定する f:id:h3poteto:20200326144948p:plain

  3. Endpointをメモっておく

この段階でEndpointにアクセスするとリダイレクトされるのが確認できると思う。

httpsを含まないような場合には、このままこのEndpointをRoute53に登録してやれば良い。 ただ、httpsを含む場合は、このままではhttps経由のアクセスがリダイレクトされないので、以下の作業が必要になる。

httpsを含む場合にはCloudFrontを経由する

httpsを含む場合には、CloudFront経由でS3のEndpointにアクセスさせて、そのCloudFrontに適切な証明書を設定してやれば、httpsのままリダイレクトされる。

  1. CloudFrontを新規作成する
  2. Originにはバケット名ではなくS3のEndpointを入れる f:id:h3poteto:20200326145005p:plain

  3. 証明書を設定する(CloudFront用の証明書しかリストアップされないので、ない場合は必要な証明書をCloudFront用に登録し直す)

  4. S3のold.hoge.comのPermissionに、Everyone: Listを追加する f:id:h3poteto:20200326145019p:plain

Route53に登録する

前述のhttpsを使わないパターンの場合は、S3のEndpointを直接、httpsを使う場合はCloudFrontのEndpointをCNAMEに登録してやる。 f:id:h3poteto:20200326145030p:plain

というところまでやると、無事リダイレクトされた。

golangでrecoverしたときの戻り値

この記事は Crowdworks Advent Calendar 2015 13日目の記事になります. クラウドワークスの業務では全然goを使っていないけど,goの話をします.

panicとrecover

goには例外がないと言われているし,そもそもあんまり panic を使う機会はないと思う.もし頻繁に panic していたら,おそらくその panic の使い方,goではあまり推奨されることじゃないので「本当にそれpanic必要なの?」と疑ったほうがいい. golangのpanicは例外ではないのか?

そして,さらにはrecover というものがあり,こいつは panic が起きた時の処理をハンドリングできる.

func hoge() {
    defer func() {
        if err := recover(); err != nil {
            fmt.Printf("recoverd!\n")
            // Do something
        }
    }    
    panic("hogehoge")
}

としておくと,hoge()panic に陥らない.

できれば,あまり panic を使わないで欲しいし,ましてや recover なんてもっと使わないでほしい. recover については以下の記事が詳しい. panicはともかくrecoverに使いどころはほとんどない

わかっていても使わなきゃいけない場合もある

直近で困ったのは,sql パッケージを使った時のトランザクションだった. トランザクションなので,panic が発生した場合は Rollback してもらわないと困る.

func hoge(tx *sql.Tx) {
    defer func() {
        if err := recover(); err != nil {
            tx.Rollback()
        }
    }()
    // Do something
    tx.Exec(…)
}

[Go言語] database/sqlパッケージを使ってみた

もちろん,SQLの実行結果としてエラーを受け取れる場合は多々ある.

err := tx.QueryRow("SELECT name FROM users WHERE id = ?;", id).Scan(&name)
if err != nil {
    tx.Rollback()
}

その場合は,ちゃんと Rollback を呼びだせばいいのだけれど,その他のコードで panic が呼ばれる可能性は否定できない.

そういった場合でもちゃんとトランザクションロールバックしてほしい.というわけでどうしても recover せざるを得ない.

recoverしたときの戻り値どうなるの?

戻り値を宣言しているにもかかわらず,return しなかった場合には,ふつうコンパイラに怒られる.では,recover したときは return しなくていいのだろうか? 一応コンパイラからは怒られていない.では、一体どんな値が返ってくるんだろうか?

boolの戻り値

以下のように関数を定義していたとする.

func hoge() bool {
    defer func() {
        if err := recover(); err != nil {
            fmt.Printf("recoverd!\n")
        }
    }()
    // Do something
    return true
}

このとき,panicrecover されたらこの関数の戻り値はどうなるのか? やってみた.

package main

import (
    "fmt"
)

func main() {
    fmt.Printf("rescue return: %+v\n", rescue())  // => rescue return: false
}

func rescue() bool {
    defer func() {
        if err := recover(); err != nil {
            fmt.Printf("panic: %+v\n", err)  // => panic: error
        }
    }()

    panic("error")

    return true
}

へー,false になるらしい.

intの場合は?

func main() {
    fmt.Printf("rescue return: %+v\n", rescue())  // => rescue return: 0
}

func rescue() int {
    defer func() {
        if err := recover(); err != nil {
            fmt.Printf("panic: %+v\n", err)  // => panic: error
        }
    }()

    panic("error")

    return 10
}

つまり定義時の値を返している

上記のような例の場合,処理の流れ的にどこにも return する場所がないまま,panic / recover になってしまっている. そのときにどうやら,その型で定義したときの値を返している様子.

var i int    // => 0
var s string // => ""
var b bool   // => false

というわけで,recover で拾う場合はこのことを覚えておきましょう.何も考えずにrecover していると,うっかり正常に終了しているように見えるような値を返しているかもしれない.

そして例外的に使っているからこそ,できるだけ何が起こったかは把握しておいた方が良くて,recover した時にログくらい出しておかないとわからなくなる.

recover時に戻り値を指定する

defer 内で return しようとすると……

func main() {
    fmt.Printf("rescue return: %+v\n", rescue())  // => rescue return: false
}

func rescue() bool {
    defer func() bool {
        if err := recover(); err != nil {
            fmt.Printf("panic: %+v\n", err)    // => panic: error
            return true
        }
        return true
    }()
    return true
}

特に考慮はしてくれないらしい.というか,defer で呼び出した関数の戻り値は,親の関数の戻り値と何ら関係ないのか……. さすがに以下のようなことはできない

func rescue() bool {
    defer return func() bool {    // => syntax error: unexpected return
        if err := recover(); err != nil {
            fmt.Printf("panic: %+v\n", err)
            return true
        }
        return true
    }()
    return true
}

いや,そもそも deferreturn を呼ぶなんて無理か…….

ドキュメントを探すと,やり方はあるらしい.

func main() {
    fmt.Printf("rescue return: %+v\n", rescue())  // => rescue return: true
}

func rescue() (b bool) {
    defer func() {
        if err := recover(); err != nil {
            fmt.Printf("panic: %+v\n", err)
            b = true
        }
    }()

    panic("error")    // => panic: error

    return true
}

Defer, Panic, and Recover

Deferred functions may read and assign to the returning function's named return values.

なるほど,return はできないけど,return の値を書き換えることはできると…….

returnの書き換えを使うパターン

先のトランザクションの例で,例えば以下のようにちゃんと error を返すコードを書いていたとする.

func hoge(tx *sql.Tx) (bool, error) {
    defer func() {
        if err := recover(); err != nil {
            tx.Rollback()
        }
    }()
    // Do something
    tx.Exec(…)
    return true, nil
}

この場合,recover されると,errornil で返さる.エラーが起こっているにもかかわらず,以下のようなエラーチェックをしていると(goではすごく一般的なエラーチェックコード),呼び出し元でうまいことエラーチェックできない可能性がある.

func main() {
    result, err := hoge(tx)
    if err != nil {
        log.Fatal("error: ", err.Error())
    }
    // Do something
}

こんなコードを書いていたら,全然ハンドリングされないかもしれない. なので,error はやはりきっちり返したい.というようなときに,先ほどのreturn値の書き換えを使うしかなくなる.

func hoge(tx *sql.Tx) (r bool, e error) {
    defer func() {
        if err := recover(); err != nil {
            tx.Rollback()
            r = false
            e = errors.New("unexpected error!")
        }
    }()
    // Do something
    tx.Exec(…)
    return true, nil
}

っていうかできるだけrecover使わないで書こう

上記のような例は仕方ないにしても,できる限り,recover することや,その戻り値をアテにすることは避けたほうが良い.できることなら,goの一般的な関数らしく,戻り値にerror を含めて,何か起こったらpanic するのではなくerrors.New() した方がいい.

というのは,どこで聞いても言われることらしい. http://stackoverflow.com/questions/19934641/golang-returning-from-defer