VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:01今回はジェイソンのパースを紹介します。
0:04これは、ジェイソン形式の文字列を、ジャバスクリプトのオブジェクトや配列といった値へ変換する静的メソッドです。
0:14通信で受け取るデータや、保存領域から読み出したデータは、たいてい文字列の形をしています。
0:21そのままではプロパティを読んだり、要素を取り出したりできません。
0:27パースで値に戻すことで、プログラムの中で普通のデータとして扱えるようになります。
0:34この動画では、書き方と二つの引数、記事の基本例、変換される型の種類、値を復元するリバイバーの使い方、
0:41エラーと書き方の注意点まで、実行結果と一緒に学びます。
0:48前回のストリンギファイとちょうど逆向きの変換だと考えると、役割がつかみやすくなります。
0:56まず動作環境を確認します。
0:58パースはジェイソンオブジェクトに最初から備わる、歴史のとても長い機能です。
1:04クロームでは三以降、ファイアーフォックスでは三・五以降、サファリでは四以降、
1:08エッジでは十二以降で使えます。
1:12ノード・ジェイエスではゼロ・十・ゼロという古い版から対応しています。
1:17記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:22現在使われている環境であれば、ほぼどこでもそのまま使えると考えてよいでしょう。
1:28スライドの通り、関数として備わっていることを実機でも確認済みです。
1:33追加の読み込みは不要です。
1:35書き方を確認します。
1:37ジェイソンのあとにドットを書き、パースとカッコを続けます。
1:41引数は最大で二つです。
1:43一つ目は変換したいジェイソン文字列で、これだけは必須です。
1:48二つ目はリバイバーと呼ばれる任意の変換関数で、値を復元するときの加工ルールを指定します。
1:54戻り値は、ジェイソンが表すオブジェクト、配列、文字列、数値、真偽値、またはヌルです。
2:01スライドの例では、名前と年齢を持つ文字列がオブジェクトに戻り、ドットで名前を取り出せることを実機で確認しました。
2:10まずは一つ目の引数だけを使う形が基本です。
2:13第二引数を省略した場合は、文字列の内容がそのまま値に変換されるだけの、素直な動きになります。
2:20記事の基本例を見ます。
2:22タイトルが学習、完了フラグがフォールスというタスクを表す文字列を、パースでオブジェクトへ戻し、
2:27タイトルを表示します。
2:31実行結果は学習で、ノードの実機結果とも一致しています。
2:36ポイントは、変換前はただの文字列だったものが、変換後はドット記法でプロパティを読めるオブジェクトになることです。
2:45保存しておいた文字列を復元する、というのが記事の想定場面です。
2:50まずはこの例をコンソールで実行し、タイトル部分を変えたら結果がどう変わるか予測してみてください。
2:57パースが返す値の型を確認します。
3:00数値を表す文字列は数値に、トゥルーの文字列は真偽値に、ヌルの文字列はヌルになります。
3:07角括弧で始まる文字列は配列に、ダブルクォートで囲まれた内容は文字列になります。
3:13スライドの通り、一二三、トゥルー、三要素の配列になることを実機で確認しました。
3:20つまり、戻り値の型は入力のジェイソンの形で決まります。
3:24ただし、解析に成功しても、期待した形のデータである保証はありません。
3:30受け取ったあとに、必要なプロパティがあるかといった型の検証を行うことが大切です。
3:36オブジェクトの文字列であればオブジェクトに、というように、見た目の記号がそのまま手がかりになります。
3:44第二引数のリバイバーで、値を復元しながら加工する方法を見ます。
3:49前回のストリンギファイでは、日付は文字列に変わってしまい、そのままパースしても文字列のままでした。
3:56そこで、作成日時というキーのときだけ、値をデートオブジェクトへ作り直す関数を渡します。
4:02実行すると、日付が本物のデートオブジェクトとして戻ることを実機で確認しました。
4:08リバイバーは、すべてのキーと値に対して下から順に呼び出されます。
4:12関係ないキーは値をそのまま返すのが基本形です。
4:15文字列のままでは困る値を、受け取り側で型に戻したいときに役立ちます。
4:20リバイバーの応用として、値の加工と除外を見ます。
4:24スライドの例では、数値のときだけ二倍にして返す関数を渡し、価格の一〇〇が二〇〇になって戻ることを実機で確認しました。
4:34逆に、アンディファインドを返すと、そのキーは結果のオブジェクトから消えます。
4:41不要な項目を受け取り側で落とす、といった使い方もできます。
4:46ただし、リバイバーは入れ子の一番下から順に呼ばれるため、親のオブジェクトを加工するときは、
4:52子の変換が終わったあとの値を受け取る点に注意してください。
4:58変換ルールはシンプルに保つのがコツです。
5:02エラーになる条件を確認します。
5:04記事の境界例では、波括弧の中にそのまま文字を書いた不正な文字列を渡し、キャッチしたエラーの名前を表示しています。
5:12実行結果はシンタックスエラーで、実機とも一致しました。
5:17空の文字列や、ジェイソンではない普通の文章を渡しても、同じくエラーになります。
5:22外部から受け取る文字列は、壊れている可能性を前提に扱うべきです。
5:27パースは必ずトライとキャッチで囲み、失敗したときの代替処理を用意してください。
5:33値が返るのではなく例外が出る、という点が他の変換との大きな違いです。
5:38エラーのメッセージには、どこで解析に失敗したかの手がかりが含まれることもあります。
5:45ジェイソン自体の書き方のルールを確認します。
5:48キーと文字列は、必ずダブルクォートで囲みます。
5:51ジャバスクリプトでよく使うシングルクォートは、ジェイソンでは使えません。
5:56また、最後の項目の後ろに付ける末尾のカンマや、コメントも書けません。
6:01スライドの間違い例は、どちらも実機でシンタックスエラーになることを確認済みです。
6:07手で書いた設定文字列や、他の言語から受け取ったデータでつまずく原因の多くは、
6:11このルール違反です。
6:14エラーが出たら、まずクォートの種類と末尾のカンマを疑ってください。
6:19オブジェクトリテラルと似ているようで、ルールはジェイソンの方がずっと厳しい、
6:23という点も覚えておきましょう。
6:27代表的な応用は、保存と受信で文字列を復元する使い方です。
6:31前回のストリンギファイで文字列にして保存したデータは、読み出した時点ではまだ文字列です。
6:39パースでオブジェクトへ戻せば、スライドの通り、完了フラグのようなプロパティをそのまま読めることを実機で確認しました。
6:49エーピーアイの応答本文を扱うときも、手順はまったく同じです。
6:54変換はストリンギファイ、復元はパース、という対の関係で覚えておくと、データの行き来が整理しやすくなります。
7:03復元した直後に型の検証を挟むと、より安全です。
7:07まとめです。
7:08パースは、ジェイソン文字列をジャバスクリプトの値へ変換するメソッドです。
7:14導入時の判断は三つです。
7:16まず、外部から受け取る文字列は壊れているかもしれないと考え、必ず例外処理で囲むこと。
7:23次に、解析できても形が正しいとは限らないため、復元後に型やプロパティを検証すること。
7:30そして、日付のような型を戻したい場合や、値を整えたい場合はリバイバーを使うことです。
7:37まずは記事の基本例をコンソールで実行し、入力を一か所ずつ変えて結果を予測してみてください。
7:45お疲れさまでした。
7:46文字列のまま扱う場面と、値に戻して扱う場面を切り分けることが、読みやすいコードへの第一歩です。

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

この動画で学べること

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

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