WEBVTT

1
00:00:00.000 --> 00:00:00.910
こんにちは。

2
00:00:00.910 --> 00:00:04.552
今回はジェイソンのストリンギファイを紹介します。

3
00:00:04.552 --> 00:00:12.745
これは、ジャバスクリプトのオブジェクトや配列といった値を、ジェイソン形式の文字列へ変換する静的メソッドです。

4
00:00:12.745 --> 00:00:20.179
プログラムの中にあるデータは、そのままでは通信で送ったり、ファイルや保存領域に残したりできません。

5
00:00:20.179 --> 00:00:27.158
文字列に変えることで、エーピーアイへ渡す本文や、保存用のテキストとして扱えるようになります。

6
00:00:27.158 --> 00:00:31.963
この動画では、書き方と三つの引数、記事の基本例、アンディファインドの扱いの違い、

7
00:00:31.963 --> 00:00:36.767
キーや値を選ぶ変換の指定、整形の方法、情報が変わってしまう値、エラーになる条件まで、

8
00:00:36.767 --> 00:00:41.572
実行結果と一緒に学びます。

9
00:00:41.572 --> 00:00:43.481
まず動作環境を確認します。

10
00:00:43.481 --> 00:00:49.648
ストリンギファイはジェイソンオブジェクトに最初から備わる、歴史のとても長い機能です。

11
00:00:49.648 --> 00:00:53.538
クロームでは三以降、ファイアーフォックスでは三・五以降、サファリでは四以降、

12
00:00:53.538 --> 00:00:57.429
エッジでは十二以降で使えます。

13
00:00:57.429 --> 00:01:02.422
ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。

14
00:01:02.422 --> 00:01:06.680
記事の互換性情報はエムディーエヌのデータに基づく目安です。

15
00:01:06.680 --> 00:01:12.406
現在使われている環境であれば、ほぼどこでもそのまま使えると考えてよいでしょう。

16
00:01:12.406 --> 00:01:17.251
スライドの通り、関数として備わっていることを実機でも確認済みです。

17
00:01:17.251 --> 00:01:19.160
追加の読み込みは不要です。

18
00:01:19.160 --> 00:01:20.834
書き方を確認します。

19
00:01:20.834 --> 00:01:26.525
ジェイソンのあとにドットを書き、ストリンギファイとカッコを続けます。

20
00:01:26.525 --> 00:01:28.366
引数は最大で三つです。

21
00:01:28.366 --> 00:01:32.049
一つ目は変換したい値で、これだけは必須です。

22
00:01:32.049 --> 00:01:40.920
二つ目はリプレイサーと呼ばれる任意の引数で、変換の仕方を決める関数、または残したいキーの配列を指定します。

23
00:01:40.920 --> 00:01:47.783
三つ目はスペースと呼ばれる任意の引数で、読みやすく整形するための空白を指定します。

24
00:01:47.783 --> 00:01:50.294
戻り値はジェイソン文字列です。

25
00:01:50.294 --> 00:02:00.505
スライドの例では、名前と年齢を持つオブジェクトが、キーも値もダブルクォートで囲まれた文字列になることを実機で確認しました。

26
00:02:00.505 --> 00:02:04.020
まずは一つ目の引数だけを使う形が基本です。

27
00:02:04.020 --> 00:02:05.655
記事の基本例を見ます。

28
00:02:05.655 --> 00:02:09.742
タイトルが学習、完了フラグがフォールスというタスクのオブジェクトを作り、

29
00:02:09.742 --> 00:02:13.828
ストリンギファイで変換して表示します。

30
00:02:13.828 --> 00:02:17.841
実行結果は、タイトルと学習、ダンとフォールスが並んだジェイソン文字列で、

31
00:02:17.841 --> 00:02:21.854
ノードの実機結果とも一致しています。

32
00:02:21.854 --> 00:02:30.176
ポイントは、オブジェクトのキーがダブルクォートで囲まれることと、真偽値のフォールスがそのまま文字になることです。

33
00:02:30.176 --> 00:02:35.972
変換後の値は文字列なので、そのまま通信の本文や保存用のテキストとして渡せます。

34
00:02:35.972 --> 00:02:42.808
まずはこの例をコンソールで実行し、タイトルを変えたら結果がどう変わるか予測してみてください。

35
00:02:42.808 --> 00:02:47.238
境界条件として、アンディファインドの扱いを記事の例で確認します。

36
00:02:47.238 --> 00:02:52.221
オブジェクトの中で値がアンディファインドのキーは、キーごと省略されます。

37
00:02:52.221 --> 00:02:57.481
一方、配列の中のアンディファインドは、位置を保つためにヌルへ置き換わります。

38
00:02:57.481 --> 00:03:03.849
スライドの通り、ビーがヌルの項目だけが残り、配列ではヌル一つになることを実機で確認しました。

39
00:03:03.849 --> 00:03:10.493
さらに、値そのものにアンディファインドを渡すと、文字列ではなくアンディファインド自体が返ります。

40
00:03:10.493 --> 00:03:14.785
場所によって扱いが変わる代表例なので、未設定の値を含むデータを変換するときは、

41
00:03:14.785 --> 00:03:19.076
結果から項目が消えていないか注意してください。

42
00:03:19.076 --> 00:03:23.458
第二引数のリプレイサーに、キーの配列を渡す使い方を見ます。

43
00:03:23.458 --> 00:03:28.822
タイトルと完了フラグと、秘密の値を持つデータに対して、残したいキーだけを配列で指定すると、

44
00:03:28.822 --> 00:03:34.187
指定しなかったシークレットの項目が出力から外れます。

45
00:03:34.187 --> 00:03:36.755
実行結果は実機とも一致しています。

46
00:03:36.755 --> 00:03:41.137
この仕組みは、外部へ送るデータから、パスワードのような見せたくない項目や、

47
00:03:41.137 --> 00:03:45.519
不要な項目を取り除きたい場面で役立ちます。

48
00:03:45.519 --> 00:03:50.355
ただし、キーの指定を間違えると、必要な項目まで消えてしまいます。

49
00:03:50.355 --> 00:03:54.888
変換前に、残すべきキーの一覧を確認する習慣をつけてください。

50
00:03:54.888 --> 00:03:59.777
第三引数のスペースで、結果を読みやすく整形する方法を見ます。

51
00:03:59.777 --> 00:04:04.991
第二引数にヌルを渡して変換ルールを変えず、第三引数に二を指定すると、各項目が改行され、

52
00:04:04.991 --> 00:04:10.206
二文字分の字下げが入った文字列になります。

53
00:04:10.206 --> 00:04:12.976
実行結果は実機とも一致しています。

54
00:04:12.976 --> 00:04:19.006
整形した文字列は、ログや画面で人が確認する場面ではとても見やすくなります。

55
00:04:19.006 --> 00:04:25.850
一方、通信で送る本文では、空白が増えてデータ量が大きくなるため、通常は整形しません。

56
00:04:25.850 --> 00:04:31.716
用途に合わせて、確認するときだけ整形する、という使い分けがポイントです。

57
00:04:31.716 --> 00:04:37.420
スペースには文字列を指定して、タブのような字下げにすることもできます。

58
00:04:37.420 --> 00:04:40.908
変換で情報が変わってしまう値を確認します。

59
00:04:40.908 --> 00:04:46.224
日付オブジェクトは、アイエスオー形式の日時の文字列に変わります。

60
00:04:46.224 --> 00:04:55.361
また、関数やシンボルがオブジェクトの値になっている場合は、アンディファインドと同じように項目ごと省略されます。

61
00:04:55.361 --> 00:05:02.504
スライドの通り、エーが一の項目だけが残り、日付は文字列になることを実機で確認しました。

62
00:05:02.504 --> 00:05:07.321
つまり、ストリンギファイは万能なコピー手段ではありません。

63
00:05:07.321 --> 00:05:14.963
文字列にしたあとパースで戻しても、日付は日付オブジェクトには戻らず、関数は失われたままです。

64
00:05:14.963 --> 00:05:19.448
変換で何が残り、何が消えるかを意識して使ってください。

65
00:05:19.448 --> 00:05:21.841
エラーになる条件を確認します。

66
00:05:21.841 --> 00:05:23.596
代表例が循環参照です。

67
00:05:23.596 --> 00:05:29.180
スライドのように、オブジェクトが自分自身をプロパティとして参照している構造は、

68
00:05:29.180 --> 00:05:34.764
たどる先が無限に続くため変換できず、タイプエラーが発生します。

69
00:05:34.764 --> 00:05:42.422
もう一つ、大きな整数を扱うビッグイントも、そのままでは変換できず、同じくタイプエラーになります。

70
00:05:42.422 --> 00:05:45.135
実行結果は実機とも一致しています。

71
00:05:45.135 --> 00:05:53.750
利用者の入力や外部データなど、構造が予測できない値を変換するときは、トライとキャッチで例外に備えてください。

72
00:05:53.750 --> 00:06:00.132
ビッグイントを扱いたい場合は、事前に文字列や数値へ変換するなどの工夫が必要です。

73
00:06:00.132 --> 00:06:04.974
代表的な応用は、送信と保存のために文字列を作る使い方です。

74
00:06:04.974 --> 00:06:14.157
エーピーアイへデータを送るときの本文は文字列である必要があり、ブラウザーの保存領域も文字列しか保存できません。

75
00:06:14.157 --> 00:06:22.505
ストリンギファイの戻り値は文字列なので、スライドの通り、そのまま本文や保存用テキストとして渡せます。

76
00:06:22.505 --> 00:06:29.183
読み戻すときは、相棒のメソッドであるパースで、文字列からオブジェクトへ戻します。

77
00:06:29.183 --> 00:06:33.774
次回の動画で扱うパースと対になるメソッドだという位置づけを覚えておくと、

78
00:06:33.774 --> 00:06:38.366
データの行き来が整理しやすくなります。

79
00:06:38.366 --> 00:06:41.872
変換と復元は、常に対で考えるのがコツです。

80
00:06:41.872 --> 00:06:42.829
まとめです。

81
00:06:42.829 --> 00:06:49.367
ストリンギファイは、ジャバスクリプトの値をジェイソン文字列へ変換するメソッドです。

82
00:06:49.367 --> 00:06:51.281
導入時の判断は三つです。

83
00:06:51.281 --> 00:07:00.849
まず、変換したい値の中に、アンディファインドや関数、日付など、消えたり変わったりする値が含まれていないかを確認すること。

84
00:07:00.849 --> 00:07:07.866
次に、外部へ送る項目を絞りたい場合はリプレイサー、人が読む場合はスペースで整形すること。

85
00:07:07.866 --> 00:07:13.447
そして、循環参照やビッグイントでエラーにならないかを確かめることです。

86
00:07:13.447 --> 00:07:20.305
まずは記事の基本例をコンソールで実行し、値を一つずつ変えて結果を予測してみてください。

87
00:07:20.305 --> 00:07:21.740
お疲れさまでした。