WEBVTT

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

2
00:00:01.073 --> 00:00:04.469
今回はジェイソンのパースを紹介します。

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

4
00:00:14.122 --> 00:00:21.987
通信で受け取るデータや、保存領域から読み出したデータは、たいてい文字列の形をしています。

5
00:00:21.987 --> 00:00:27.707
そのままではプロパティを読んだり、要素を取り出したりできません。

6
00:00:27.707 --> 00:00:34.857
パースで値に戻すことで、プログラムの中で普通のデータとして扱えるようになります。

7
00:00:34.857 --> 00:00:41.739
この動画では、書き方と二つの引数、記事の基本例、変換される型の種類、値を復元するリバイバーの使い方、

8
00:00:41.739 --> 00:00:48.622
エラーと書き方の注意点まで、実行結果と一緒に学びます。

9
00:00:48.622 --> 00:00:56.308
前回のストリンギファイとちょうど逆向きの変換だと考えると、役割がつかみやすくなります。

10
00:00:56.308 --> 00:00:58.343
まず動作環境を確認します。

11
00:00:58.343 --> 00:01:04.135
パースはジェイソンオブジェクトに最初から備わる、歴史のとても長い機能です。

12
00:01:04.135 --> 00:01:08.283
クロームでは三以降、ファイアーフォックスでは三・五以降、サファリでは四以降、

13
00:01:08.283 --> 00:01:12.432
エッジでは十二以降で使えます。

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

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

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

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

18
00:01:33.565 --> 00:01:35.600
追加の読み込みは不要です。

19
00:01:35.600 --> 00:01:37.173
書き方を確認します。

20
00:01:37.173 --> 00:01:41.733
ジェイソンのあとにドットを書き、パースとカッコを続けます。

21
00:01:41.733 --> 00:01:43.463
引数は最大で二つです。

22
00:01:43.463 --> 00:01:48.024
一つ目は変換したいジェイソン文字列で、これだけは必須です。

23
00:01:48.024 --> 00:01:54.943
二つ目はリバイバーと呼ばれる任意の変換関数で、値を復元するときの加工ルールを指定します。

24
00:01:54.943 --> 00:02:01.549
戻り値は、ジェイソンが表すオブジェクト、配列、文字列、数値、真偽値、またはヌルです。

25
00:02:01.549 --> 00:02:10.355
スライドの例では、名前と年齢を持つ文字列がオブジェクトに戻り、ドットで名前を取り出せることを実機で確認しました。

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

27
00:02:13.658 --> 00:02:20.892
第二引数を省略した場合は、文字列の内容がそのまま値に変換されるだけの、素直な動きになります。

28
00:02:20.892 --> 00:02:22.643
記事の基本例を見ます。

29
00:02:22.643 --> 00:02:27.259
タイトルが学習、完了フラグがフォールスというタスクを表す文字列を、パースでオブジェクトへ戻し、

30
00:02:27.259 --> 00:02:31.876
タイトルを表示します。

31
00:02:31.876 --> 00:02:36.174
実行結果は学習で、ノードの実機結果とも一致しています。

32
00:02:36.174 --> 00:02:45.088
ポイントは、変換前はただの文字列だったものが、変換後はドット記法でプロパティを読めるオブジェクトになることです。

33
00:02:45.088 --> 00:02:50.023
保存しておいた文字列を復元する、というのが記事の想定場面です。

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

35
00:02:57.664 --> 00:03:00.299
パースが返す値の型を確認します。

36
00:03:00.299 --> 00:03:07.215
数値を表す文字列は数値に、トゥルーの文字列は真偽値に、ヌルの文字列はヌルになります。

37
00:03:07.215 --> 00:03:13.637
角括弧で始まる文字列は配列に、ダブルクォートで囲まれた内容は文字列になります。

38
00:03:13.637 --> 00:03:20.059
スライドの通り、一二三、トゥルー、三要素の配列になることを実機で確認しました。

39
00:03:20.059 --> 00:03:24.505
つまり、戻り値の型は入力のジェイソンの形で決まります。

40
00:03:24.505 --> 00:03:30.104
ただし、解析に成功しても、期待した形のデータである保証はありません。

41
00:03:30.104 --> 00:03:36.691
受け取ったあとに、必要なプロパティがあるかといった型の検証を行うことが大切です。

42
00:03:36.691 --> 00:03:44.924
オブジェクトの文字列であればオブジェクトに、というように、見た目の記号がそのまま手がかりになります。

43
00:03:44.924 --> 00:03:49.344
第二引数のリバイバーで、値を復元しながら加工する方法を見ます。

44
00:03:49.344 --> 00:03:56.331
前回のストリンギファイでは、日付は文字列に変わってしまい、そのままパースしても文字列のままでした。

45
00:03:56.331 --> 00:04:02.462
そこで、作成日時というキーのときだけ、値をデートオブジェクトへ作り直す関数を渡します。

46
00:04:02.462 --> 00:04:08.022
実行すると、日付が本物のデートオブジェクトとして戻ることを実機で確認しました。

47
00:04:08.022 --> 00:04:12.585
リバイバーは、すべてのキーと値に対して下から順に呼び出されます。

48
00:04:12.585 --> 00:04:15.864
関係ないキーは値をそのまま返すのが基本形です。

49
00:04:15.864 --> 00:04:20.712
文字列のままでは困る値を、受け取り側で型に戻したいときに役立ちます。

50
00:04:20.712 --> 00:04:24.806
リバイバーの応用として、値の加工と除外を見ます。

51
00:04:24.806 --> 00:04:34.700
スライドの例では、数値のときだけ二倍にして返す関数を渡し、価格の一〇〇が二〇〇になって戻ることを実機で確認しました。

52
00:04:34.700 --> 00:04:41.182
逆に、アンディファインドを返すと、そのキーは結果のオブジェクトから消えます。

53
00:04:41.182 --> 00:04:46.129
不要な項目を受け取り側で落とす、といった使い方もできます。

54
00:04:46.129 --> 00:04:52.441
ただし、リバイバーは入れ子の一番下から順に呼ばれるため、親のオブジェクトを加工するときは、

55
00:04:52.441 --> 00:04:58.752
子の変換が終わったあとの値を受け取る点に注意してください。

56
00:04:58.752 --> 00:05:02.164
変換ルールはシンプルに保つのがコツです。

57
00:05:02.164 --> 00:05:04.436
エラーになる条件を確認します。

58
00:05:04.436 --> 00:05:12.919
記事の境界例では、波括弧の中にそのまま文字を書いた不正な文字列を渡し、キャッチしたエラーの名前を表示しています。

59
00:05:12.919 --> 00:05:17.009
実行結果はシンタックスエラーで、実機とも一致しました。

60
00:05:17.009 --> 00:05:22.916
空の文字列や、ジェイソンではない普通の文章を渡しても、同じくエラーになります。

61
00:05:22.916 --> 00:05:27.764
外部から受け取る文字列は、壊れている可能性を前提に扱うべきです。

62
00:05:27.764 --> 00:05:33.671
パースは必ずトライとキャッチで囲み、失敗したときの代替処理を用意してください。

63
00:05:33.671 --> 00:05:38.821
値が返るのではなく例外が出る、という点が他の変換との大きな違いです。

64
00:05:38.821 --> 00:05:45.032
エラーのメッセージには、どこで解析に失敗したかの手がかりが含まれることもあります。

65
00:05:45.032 --> 00:05:48.231
ジェイソン自体の書き方のルールを確認します。

66
00:05:48.231 --> 00:05:51.576
キーと文字列は、必ずダブルクォートで囲みます。

67
00:05:51.576 --> 00:05:56.811
ジャバスクリプトでよく使うシングルクォートは、ジェイソンでは使えません。

68
00:05:56.811 --> 00:06:01.756
また、最後の項目の後ろに付ける末尾のカンマや、コメントも書けません。

69
00:06:01.756 --> 00:06:07.573
スライドの間違い例は、どちらも実機でシンタックスエラーになることを確認済みです。

70
00:06:07.573 --> 00:06:11.063
手で書いた設定文字列や、他の言語から受け取ったデータでつまずく原因の多くは、

71
00:06:11.063 --> 00:06:14.553
このルール違反です。

72
00:06:14.553 --> 00:06:19.352
エラーが出たら、まずクォートの種類と末尾のカンマを疑ってください。

73
00:06:19.352 --> 00:06:23.206
オブジェクトリテラルと似ているようで、ルールはジェイソンの方がずっと厳しい、

74
00:06:23.206 --> 00:06:27.060
という点も覚えておきましょう。

75
00:06:27.060 --> 00:06:31.890
代表的な応用は、保存と受信で文字列を復元する使い方です。

76
00:06:31.890 --> 00:06:39.479
前回のストリンギファイで文字列にして保存したデータは、読み出した時点ではまだ文字列です。

77
00:06:39.479 --> 00:06:49.484
パースでオブジェクトへ戻せば、スライドの通り、完了フラグのようなプロパティをそのまま読めることを実機で確認しました。

78
00:06:49.484 --> 00:06:54.659
エーピーアイの応答本文を扱うときも、手順はまったく同じです。

79
00:06:54.659 --> 00:07:03.801
変換はストリンギファイ、復元はパース、という対の関係で覚えておくと、データの行き来が整理しやすくなります。

80
00:07:03.801 --> 00:07:07.768
復元した直後に型の検証を挟むと、より安全です。

81
00:07:07.768 --> 00:07:08.773
まとめです。

82
00:07:08.773 --> 00:07:14.803
パースは、ジェイソン文字列をジャバスクリプトの値へ変換するメソッドです。

83
00:07:14.803 --> 00:07:16.813
導入時の判断は三つです。

84
00:07:16.813 --> 00:07:23.848
まず、外部から受け取る文字列は壊れているかもしれないと考え、必ず例外処理で囲むこと。

85
00:07:23.848 --> 00:07:30.883
次に、解析できても形が正しいとは限らないため、復元後に型やプロパティを検証すること。

86
00:07:30.883 --> 00:07:37.918
そして、日付のような型を戻したい場合や、値を整えたい場合はリバイバーを使うことです。

87
00:07:37.918 --> 00:07:45.456
まずは記事の基本例をコンソールで実行し、入力を一か所ずつ変えて結果を予測してみてください。

88
00:07:45.456 --> 00:07:46.963
お疲れさまでした。

89
00:07:46.963 --> 00:07:54.836
文字列のまま扱う場面と、値に戻して扱う場面を切り分けることが、読みやすいコードへの第一歩です。