VIDEO LESSON

JavaScriptのJSON.stringify()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:22動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジェイソンのストリンギファイを紹介します。
0:04これは、ジャバスクリプトのオブジェクトや配列といった値を、ジェイソン形式の文字列へ変換する静的メソッドです。
0:12プログラムの中にあるデータは、そのままでは通信で送ったり、ファイルや保存領域に残したりできません。
0:20文字列に変えることで、エーピーアイへ渡す本文や、保存用のテキストとして扱えるようになります。
0:27この動画では、書き方と三つの引数、記事の基本例、アンディファインドの扱いの違い、
0:31キーや値を選ぶ変換の指定、整形の方法、情報が変わってしまう値、エラーになる条件まで、
0:36実行結果と一緒に学びます。
0:41まず動作環境を確認します。
0:43ストリンギファイはジェイソンオブジェクトに最初から備わる、歴史のとても長い機能です。
0:49クロームでは三以降、ファイアーフォックスでは三・五以降、サファリでは四以降、
0:53エッジでは十二以降で使えます。
0:57ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
1:02記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:06現在使われている環境であれば、ほぼどこでもそのまま使えると考えてよいでしょう。
1:12スライドの通り、関数として備わっていることを実機でも確認済みです。
1:17追加の読み込みは不要です。
1:19書き方を確認します。
1:20ジェイソンのあとにドットを書き、ストリンギファイとカッコを続けます。
1:26引数は最大で三つです。
1:28一つ目は変換したい値で、これだけは必須です。
1:32二つ目はリプレイサーと呼ばれる任意の引数で、変換の仕方を決める関数、または残したいキーの配列を指定します。
1:40三つ目はスペースと呼ばれる任意の引数で、読みやすく整形するための空白を指定します。
1:47戻り値はジェイソン文字列です。
1:50スライドの例では、名前と年齢を持つオブジェクトが、キーも値もダブルクォートで囲まれた文字列になることを実機で確認しました。
2:00まずは一つ目の引数だけを使う形が基本です。
2:04記事の基本例を見ます。
2:05タイトルが学習、完了フラグがフォールスというタスクのオブジェクトを作り、
2:09ストリンギファイで変換して表示します。
2:13実行結果は、タイトルと学習、ダンとフォールスが並んだジェイソン文字列で、
2:17ノードの実機結果とも一致しています。
2:21ポイントは、オブジェクトのキーがダブルクォートで囲まれることと、真偽値のフォールスがそのまま文字になることです。
2:30変換後の値は文字列なので、そのまま通信の本文や保存用のテキストとして渡せます。
2:35まずはこの例をコンソールで実行し、タイトルを変えたら結果がどう変わるか予測してみてください。
2:42境界条件として、アンディファインドの扱いを記事の例で確認します。
2:47オブジェクトの中で値がアンディファインドのキーは、キーごと省略されます。
2:52一方、配列の中のアンディファインドは、位置を保つためにヌルへ置き換わります。
2:57スライドの通り、ビーがヌルの項目だけが残り、配列ではヌル一つになることを実機で確認しました。
3:03さらに、値そのものにアンディファインドを渡すと、文字列ではなくアンディファインド自体が返ります。
3:10場所によって扱いが変わる代表例なので、未設定の値を含むデータを変換するときは、
3:14結果から項目が消えていないか注意してください。
3:19第二引数のリプレイサーに、キーの配列を渡す使い方を見ます。
3:23タイトルと完了フラグと、秘密の値を持つデータに対して、残したいキーだけを配列で指定すると、
3:28指定しなかったシークレットの項目が出力から外れます。
3:34実行結果は実機とも一致しています。
3:36この仕組みは、外部へ送るデータから、パスワードのような見せたくない項目や、
3:41不要な項目を取り除きたい場面で役立ちます。
3:45ただし、キーの指定を間違えると、必要な項目まで消えてしまいます。
3:50変換前に、残すべきキーの一覧を確認する習慣をつけてください。
3:54第三引数のスペースで、結果を読みやすく整形する方法を見ます。
3:59第二引数にヌルを渡して変換ルールを変えず、第三引数に二を指定すると、各項目が改行され、
4:04二文字分の字下げが入った文字列になります。
4:10実行結果は実機とも一致しています。
4:12整形した文字列は、ログや画面で人が確認する場面ではとても見やすくなります。
4:19一方、通信で送る本文では、空白が増えてデータ量が大きくなるため、通常は整形しません。
4:25用途に合わせて、確認するときだけ整形する、という使い分けがポイントです。
4:31スペースには文字列を指定して、タブのような字下げにすることもできます。
4:37変換で情報が変わってしまう値を確認します。
4:40日付オブジェクトは、アイエスオー形式の日時の文字列に変わります。
4:46また、関数やシンボルがオブジェクトの値になっている場合は、アンディファインドと同じように項目ごと省略されます。
4:55スライドの通り、エーが一の項目だけが残り、日付は文字列になることを実機で確認しました。
5:02つまり、ストリンギファイは万能なコピー手段ではありません。
5:07文字列にしたあとパースで戻しても、日付は日付オブジェクトには戻らず、関数は失われたままです。
5:14変換で何が残り、何が消えるかを意識して使ってください。
5:19エラーになる条件を確認します。
5:21代表例が循環参照です。
5:23スライドのように、オブジェクトが自分自身をプロパティとして参照している構造は、
5:29たどる先が無限に続くため変換できず、タイプエラーが発生します。
5:34もう一つ、大きな整数を扱うビッグイントも、そのままでは変換できず、同じくタイプエラーになります。
5:42実行結果は実機とも一致しています。
5:45利用者の入力や外部データなど、構造が予測できない値を変換するときは、トライとキャッチで例外に備えてください。
5:53ビッグイントを扱いたい場合は、事前に文字列や数値へ変換するなどの工夫が必要です。
6:00代表的な応用は、送信と保存のために文字列を作る使い方です。
6:04エーピーアイへデータを送るときの本文は文字列である必要があり、ブラウザーの保存領域も文字列しか保存できません。
6:14ストリンギファイの戻り値は文字列なので、スライドの通り、そのまま本文や保存用テキストとして渡せます。
6:22読み戻すときは、相棒のメソッドであるパースで、文字列からオブジェクトへ戻します。
6:29次回の動画で扱うパースと対になるメソッドだという位置づけを覚えておくと、
6:33データの行き来が整理しやすくなります。
6:38変換と復元は、常に対で考えるのがコツです。
6:41まとめです。
6:42ストリンギファイは、ジャバスクリプトの値をジェイソン文字列へ変換するメソッドです。
6:49導入時の判断は三つです。
6:51まず、変換したい値の中に、アンディファインドや関数、日付など、消えたり変わったりする値が含まれていないかを確認すること。
7:00次に、外部へ送る項目を絞りたい場合はリプレイサー、人が読む場合はスペースで整形すること。
7:07そして、循環参照やビッグイントでエラーにならないかを確かめることです。
7:13まずは記事の基本例をコンソールで実行し、値を一つずつ変えて結果を予測してみてください。
7:20お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

JSON.stringify()でJavaScriptの値をJSON文字列へ変換する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのJSON.stringify()の使い方：引数・戻り値・実例と注意点 →