JavaScriptでオブジェクト内の配列から特定のオブジェクトの値を取得する方法
プログラミングをしていると、オブジェクトの中に配列があり、その配列の中に更にオブジェクトがある、という複雑なデータ構造を扱う場面に遭遇することがあります。 今回は、そのような場合にJavaScriptで特定のオブジェクトの値を効率良く取得する方法について説明します。 サンプルデータ まずは、以下のようなユーザーデータを例に取ります。 const data = { users: [ { id: 1, name: '太郎' }, { id: 2, name: '次郎' }, { id: 3, name: '三郎' } ] }; このデータから、特定の条件を満たすユーザーの情報を取得する方法を見ていきましょう。 方法1: 直接アクセス 一番簡単で直感的な方法は、配列のインデックスを使って直接アクセスすることです。例えば、2番目のユーザーの名前を取得するには以下のように書きます。 const name = data.users[1].name; // "次郎" 方法2: findメソッドを使用 findメソッドを使うと、特定の条件に一致する最初の要素を配列から検索できます。例えば、idが2のユーザーの名前を取得するには以下のようにします。 const user = data.users.find(user => user.id === 2); const name = user […]
ローカルストレージの使い方
概要 ローカルストレージとは検証ツールで「アプリケーション」を選択すると見れる、ドメイン毎のストレージで、最大5MBまでの情報を格納できます。 テキストベースの簡単なアプリケーション開発や、JSON、DBとのやりとりのイメージが湧くので、最初に突いてみるには最高の場所だと言えますね。 また、ローカルストレージに保存されている情報は、そのユーザーが削除しない限り残るので、ログインが不要なのにユーザーの入力情報を保持するという特徴があります。 小さい規模でそういうアプリケーションを作成するにはもってこいの場であると言えますね。 ローカルストレージに値を入れてみる localStorage.setItem() ローカルストレージに値を入れる際はlocalStorageオブジェクトのsetItem()メソッドを用います。 setItemメソッドの引数に対し // (キー,値) const setItem = localStorage.setItem("key","value"); という形でキーと値を入れてあげることで、キーと値がセットになってlocalStorageに保存されます。 ローカルストレージの値を取り出してみる localStorage.getItem() ローカルストレージから値を取り出すには、localStorageオブジェクトのgetItem()メソッドを用います。 getItemメソッドの引数に対し // (キー) const getItem = localStorage.getItem("key"); console.log(getItem); //出力結果 "value" となります。 という形でキーを入れてあげることで、そのキーと一緒に登録された値が取り出されます。 ただ、上記だと1つのキーに対し、1つの値しか入れられないじゃん！！ と思いますよね？ はい、その通りです。 しかし、値をJSONにするとどうでしょうか？ オブジェクトを突っ込むことができるので、沢山の値を入れることが可能となります。 JSON形式を値に入れてみる まず、JSON形式を作ってみましょう。 JSON形式の扱いについては下記で触れていますので、参考にしてみてください。 https://www.p-digital.online/json%e6%93%8d%e4%bd%9c/ //オブジェクトを作る const obj = {"name":"Taro","age":24}; //JSON形式に変換する const jsonObj = JSON.stringify(obj); //ローカルストレージに保存する const setItem = localStorage.setItem("key",jsonObj); 上記で、二つの値をもつオブジェクトをJSON形式にしてローカルストレージに保管できました！ 続いてはその値を取り出してみようではありませんか！ JSON形式の値を取り出してみる […]
JSON操作
JSON.parse()とは JSONの基本的な使い方であるparse()とstringify()メソッドについて解説します JSON形式のファイル内容をJavaScriptで使用できるオブジェクトの形に変換し、js側から操作ができるようにする為のオブジェクト（JSON）とメソッド（parse()）で、メソッドの引数にjsオブジェクトに変換したいものを入れてあげることで処理が実行されます。 const json = '{"name":"Taro","age":24}'; const jsonToObject = JSON.parse(json); // 出力指示 console.log(jsonToObject.name); // 出力結果: Taro 必ずJson形式のファイルが正しいことが前提のものとなります。 扱うJsonファイルの最後に余計な記号がついていたりすると動きません。 また、全体が文字列として扱われていることを前提とし、文字列の値はダブルクオーテーション等で囲われている必要があります。（数値箇所は数値として扱いたい場合において、囲われていなくても問題ありません。） JSON.stringify()とは jsのオブジェクトを上記で扱っているようなJSON形式の文字列に変換するためのオブジェクト（JSON）とメソッド（stringify()）でメソッドの引数にはJSON形式に変換したいものを入れてあげることで処理が実行されます。 const jsObject = {name:"Taro",age:24}; const jsObjectToJson = JSON.stringify(jsObject); console.log(jsObjectToJson); 要約してまとめると、 JSON.parse(variable)：JSON形式の文字列をJavaScriptのオブジェクトに変換 JSON.stringify(variable)：JavaScriptのオブジェクトをJSON形式の文字列に変換 上記のような認識となります。 JSONは非常に柔軟なデータ形式であり、構造化されたデータを表現するのに適しています。 そのため、様々な種類のデータを1つのカラムに保存する必要がある場合や、スキーマが頻繁に変更される場合などに、JSON形式のデータを使用することが便利です。 例えば、ウェブアプリケーションの場合、ユーザーが入力したフォームデータや設定情報をJSON形式でデータベースに保存することがよくあります。 また、APIから受け取ったデータをJSON形式で保存することもあります。
