JavaScriptオブジェクトの分割代入を簡単に理解！【js】
普段からjsを用いた制作や開発を行わない場合、分割代入ってなんだっけ？ となります。 名前は難しそうですが、とても簡単なので紹介させて頂きます。 何に使う？ 基本的には取得したオブジェクトの更新などに使用することが多いです。 例えばJsonで取得したオブジェクトのプロパティを変数に保管して、その変数に対し違う値を代入してあげる、などといった感じですね。 分割代入って何？ オブジェクトに存在しているプロパティを変数に入れてあげる事です。 どうやる？ まずオブジェクトを用意してあげます。 const testObj = { name:"taro", age:25, job:"developer" } このように定義したオブジェクトのnameと、ageプロパティを変数として扱いたい、そうなったときに下記「分割代入」を用います //先ほど定義したオブジェクト const testObj = { name:"taro", age:25, job:"developer" } //name変数とage変数に各種プロパティの値が取得されます const { name , age } = testObj; この処理によって、name変数とage変数が用意され、その中には先ほど定義したオブジェクト（testObj）のnameプロパティとageプロパティの値が代入されています。 追加したnama変数=nameプロパティの値 追加したage変数=ageプロパティの値 といったイメージになります。 入れる変数の名前をプロパティの名前と違うものにしたい！ あまりこういうケースに遭遇したことがないのですが、違う変数として代入することも可能です。 取得したいプロパティ名:代入したい変数名 といったイメージです。 //先ほど定義したオブジェクト const testObj = { name:"taro", age:25, job:"developer" } const […]
取得したJSONの値をオブジェクトとして返す
APIから取得したJSONデータをオブジェクトにし、それを別ファイルで使用するという状況が発生したので、まとめさせて頂きます。 また、配列内にあるオブジェクトを返すという認識が曖昧だったので、これを機にしっかりキャッチアップします。 オブジェクト（パース済である前提）の値を各種変数に格納 変数に格納することで、ES6から可能となった、オブジェクトの名称と値が同じなら記載するのはプロパティだけで良いという恩恵を受けることが出来ます。 //JSON形式で受け取ったものをパースしている状態である前提 const obj = { "id": 1, "name": "taro", "age": 25, "skill": [ { "skill": "javascript", "deadWeek": "1month" }, { "skill": "php", "deadWeek": "9month" }, ] }; //各種変数に格納 const id = obj.id; const name = obj.name; const age = obj.age; //skillは配列なので、後ほどmapメソッドで使用します const skills = obj.skill; 格納した変数をオブジェクトで返す return { id, name, age, […]
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形式で保存することもあります。
