json_encodeでJavaScriptのオブジェクトに変換をうまくできない

Question

以下のような情報をPHPでfetchAll(PDO::FETCH_ASSOC);しております。

//$loansの内容
Array
(
    [0] => Array
        (
            [id] => 1 //mysqlの型:INT
            [name] => loan_A //mysqlの型:STRING
            [ttl] => 9000000000 //mysqlの型:BIGINT
            [edate] => 2021-04-28 //mysqlの型:DATE
            [mdate] => 2030-04-26 //mysqlの型:DATE
            [type] => 変動 //mysqlの型:STRING
            [spread] => 0.275 //mysqlの型:DOUBLE
        )
    [1] => Array
        (
            [id] => 2 //mysqlの型:INT
            [name] => loan_B //mysqlの型:STRING
            [ttl] => 5000000000 //mysqlの型:BIGINT
            [edate] => 2022-04-28 //mysqlの型:DATE
            [mdate] => 2031-04-26 //mysqlの型:DATE
            [type] =>  //mysqlの型:STRING
            [spread] => 0.222 //mysqlの型:DOUBLE
        )
)

これをJavaScriptでオブジェクトとして利用してく以下のようにHTMLに出力することを考えました。

//output.php
<script type="text/javascript">
 var loans =<?=json_encode($loans,JSON_UNESCAPED_UNICODE)?>;
</script>

var loans =[
{
id":1,
"name":"Facility_057",
"ttl":"9000000000",//here1
"edate":"2021-04-28",
"mdate":"2030-04-26",
"type":"変動",
"spread":0.27500000000000002220446049250313080847263336181640625//here2
},
{
id":1,
"name":"Facility_057",
"ttl":"9000000000",
"edate":"2022-04-28",
"mdate":"2031-04-26",
"type":null,
"spread":0.2250000000000000055511151231257827021181583404541015625
}

ここで、困っていることは//here1と//here2の箇所になります。
0. //here1について
金額の桁数が大きいのでMYSQL上INT型ではなくBIGINT型を指定しているのですが、json_encode()にかかわらず（var_dump($loans)したとしても）、STRING型でPHPは出力してしまいます。これはこのような仕様で、INT型としてJavascriptで使いたいのであれば、Javascript側でmap()などを利用してそれぞれのオブジェクトの該当要素について、それぞれINT型にキャストしなければならないのでしょうか？

1. //here2について

これは直接var_dump()やechoをすれば素直に、入力桁数で返ってくるのに、json_encode()をすると、厳密な浮動小数点で返してこようとします。例えば$loans[0]['spread']であれば、"spread":0.275を返してくれればいいのですが、これも出力後、一定桁数をJavaScript側でMath.floor()等で一定の桁数を切らなければならないのでしょうか？。

そもそも、PHPの連想配列をJavaScriptのオブジェクトに変換したいならjson_encode()よりもっと良い方法がある等を含めてアドバイスを頂けますと嬉しいです。
宜しくお願いいたします。

Answer 1

BigIntはjsでも変換できますのでttlは文字列で受け取ってBigIntに変換すればいいでしょう
小数点以下はNumberで変換ができますが、演算時に精度の影響をうけるため
変換しても正確な演算をすることはできません。
演算に利用できないなら普通に文字列でもっておけばいいでしょう

<?PHP
$loans=[
  [
    "id" => 1 ,
    "name" => "loan_A" ,
    "ttl" => "9000000000" ,
    "edate" => "2021-04-28" ,
    "mdate" => "2030-04-26" ,
    "type" => "変動" ,
    "spread" => "0.27500000000000002220446049250313080847263336181640625" ,
    ],
  [
    "id" => 2 ,
    "name" => "loan_B" ,
    "ttl" => "5000000000" ,
    "edate" => "2022-04-28" ,
    "mdate" => "2031-04-26" ,
    "type" =>  "",
    "spread" => "0.2250000000000000055511151231257827021181583404541015625" ,
    ],
  ];
print_r($loans);
?>
<script>
var loans =<?=json_encode($loans,JSON_UNESCAPED_UNICODE)?>;
loans.forEach(x=>x.ttl=BigInt(x.ttl));
console.log((loans[0]["ttl"]));
</script>

Answer 2

//here1について

doubleの精度は53ビットしかないので、巨大なBIGINTで異なる数が、doubleに変換したがゆえに同じになってしまうのを防ぐために、あえてこうなっている可能性があります。

//here2について

見た目はこうですが、データ的には0.275と全く同じ（むしろ、人間が0.275と入力した場合、内部的には0.27500000000000002220446049250313080847263336181640625になる）です。

0.275 === 0.27500000000000002220446049250313080847263336181640625 // true

（0.5のような2進法でキリの良い数ばかりを使う場合を別として）浮動小数点数を使うときは、常に「どこで丸めるか」は考えておく必要があります。

Comments

[SugiuraY]

なるほど、概ね理解することができました。ありがとうございます。
さて、では連想配列から出来上がった複数のJSのオブジェクトにおいて、これらのSTRING型の桁数の多い数字（here1）や内部的に受け付けた浮動小数点（here2）を意図した通り扱いたい場合には、map()などを使ってそれぞれNumber()でキャストしたり、Math.Floor()などで丸めようとしているところを指定して切り捨ててあげる、というやり方が一般的になるでしょうか？

[SugiuraY]

というのも、例えば、JSではなくPHP段階でこれらを処理すべきですよという考え方や、そもそもjson_encode()でJSのオブジェクトへ変換するなんてできたとしてもやるんじゃない！等の意見があればとも思ったのですが、よくあるアプローチであれば、上記の通り、そのまま扱えない要素はキャストするなりしてきれいにして利用しようかと考えております。

[maisumakun]

> これらのSTRING型の桁数の多い数字

こちらは使う側でハンドリングが必要です。JavaScript環境がサポートしているならbigintにしてもいいかもしれません（JSONにbigintは入れられません）。

> 内部的に受け付けた浮動小数点（here2）

こちらは、特別な対応をする必要がないものです。極論、console.log(0.27500000000000002220446049250313080847263336181640625)が「0.275」という出力を返したりもします。

[maisumakun]

> これは直接var_dump()やechoをすれば素直に、入力桁数で返ってくるのに、

実はこちらが「素直ではない」のです。適当な桁で丸めています。

[SugiuraY]

ありがとうございます。
まずbigintの件ですが、調べたらNumberは17桁ほど行けるみたいで、これを超える場合はbigintを検討せよとのことでした。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER

今回は、さすがにこれを超える可能性はなさそうなので、直にNumber型を使おうと思います。※すみませんところどころINT型を無差別に表現していましたが、厳密にJSの世界でプリミティブ型の中にはINT型というものは存在してませんでした。

[SugiuraY]

一方浮動小数点の扱いなのですが、
例えば、loans[0].spread*100000000すると
27500000.000000004
をJSは返してきます。「機械」的にはこれが正しいのかもしれませんが、こちら側の意図する答えは「27500000」です。

この場合には、では何が正しいのかというと難しいお話なのですが、最終的な計算結果として得たいものは「27500000」です。

ともすれば対応不要とは仰いましたが、0.27500000000000002220446049250313080847263336181640625を得た段階で丸めるべきではないのでしょうか？
それとも正確な計算という意味では、これを演算した結果の27500000.000000004を丸めるべきなのでしょうか？

[maisumakun]

> この場合には、では何が正しいのかというと難しいお話なのですが、最終的な計算結果として得たいものは「27500000」です。

それは、もとの値が「0.275」と書かれていたとしても同じ結果です。浮動小数点数を使う上で「常に」考えないといけない、というのはそういう意味です。

> 0.27500000000000002220446049250313080847263336181640625を得た段階で丸めるべきではないのでしょうか？

丸めることは不可能です（コンピューターにとっては、0.275を2進法で表せる数字として「丸めた結果」が0.27500000000000002220446049250313080847263336181640625なのです）。

[SugiuraY]

ありがとうございます。
>「常に」考えないといけない。
いやいや、そこをどうやって・・・と調べ始めたのですが、そんな単純な問題ではないことがようやっとわかりました！
桁数を上げてから計算してみたり、文字列かしてから計算してみたり、ライブラリが存在してみたり、なかなか一筋縄にはいかないことにようやくたどり着きました。
これらを調べてみて、自分の場合にはどうやったら誤差なく必要な値を得ることができるか手を動かしながら検討してみたいと思います。