React におけるデータ型とデータ変換の実践ガイド

reactコンポーネントにおけるデータ型の解析 はじめに parse core機能の中心にはデータオブジェクト管理があります。parseは、sdkやapi（restまたはgraphql）を使用してデータを簡単に保存およびクエリすることを可能にします。すべてのデータオブジェクト機能は、 \<font color="#2166ae">parse object\</font> クラスを使用して構築されており、そのフィールドには複数のjson互換データ型のキーと値のペアを含めることができます。オブジェクトフィールドに割り当てることができる主なデータ型は以下の通りです \<font color="#2166ae">数値\</font> 整数（42）または浮動小数点（42 5）数値、‘ ’が小数点区切りである限り; \<font color="#2166ae">ブール値\</font> trueまたはfalseの値; \<font color="#2166ae">文字列\</font> 最大2147483647文字の文字列。これほど大きな値はデータ操作を遅くすることに注意してください; \<font color="#2166ae">日付時刻\</font> \<font color="#2166ae">日付時刻\</font> オブジェクトはデフォルトでutc形式で保存されます。別のタイムゾーンを使用する必要がある場合は、手動で変換する必要があります; \<font color="#2166ae">配列\</font> すべてのparse互換データを含む配列。 オブジェクト jsonオブジェクトで、他のparseデータも含まれています。sdkで利用可能な場合、 \<font color="#2166ae">include()\</font> 呼び出しはオブジェクトプロパティから詳細を取得します。 array型を使用することを選択した場合、配列オブジェクトは小さく保つことをお勧めします。これはデータ操作の全体的なパフォーマンスに影響を与える可能性があります。私たちの推奨は、要素が20を超えず、時間とともに増加しない場合にarray型を使用することです。array型の代わりに、ポインタ型やリレーション型を代替として使用できます。 このガイドでは、上記の基本データ型のそれぞれにデータを保存する方法を学びます。reactで製品登録コンポーネントを構築し、データをフォーマット、変換、保存する方法をparse serverに対してreactで示します。 parseは、地理位置情報リソースの力を利用するためのデータ型 \<font color="#2166ae">geopoint \</font> や、 \<font color="#2166ae">pointer \</font> または \<font color="#2166ae">relation\</font> を使用して、parse特有のリレーショナルデータを提供しています。次のガイドで両方を取り上げます。 前提条件 このチュートリアルを完了するには、次のものが必要です 作成されたreactアプリと back4appに接続された https //www back4app com/docs/react/quickstart このガイドで提供されている画面レイアウトをテスト/使用したい場合は、次のように設定する必要があります。 ライブラリ https //ant design/docs/react/introduce 目標 parse互換の基本データ型を理解し、reactコンポーネントからparseに各データ型を保存すること。 1 プロダクト作成コンポーネント let’s first create the component structure let’s make it simple and create a form screen with one text input to each data type, one checkbox, and a submit button to save the object these inputs will collect your \<font color="#2166ae">product \</font> field values name ( \<font color="#2166ae">string\</font> ), quantity ( \<font color="#2166ae">number\</font> ), price ( \<font color="#2166ae">number\</font> ), available ( \<font color="#2166ae">boolean\</font> ), expiration date ( \<font color="#2166ae">datetime\</font> ), and categories( \<font color="#2166ae">array\</font> ) also, you will save an additional \<font color="#2166ae">object \</font> type field in your saving method as well, but this one won’t need an input field create a separate component in a file called \<font color="#2166ae">productcreation js/productcreation tsx\</font> including the following code, or add it to your main application file ( \<font color="#2166ae">app js/app tsx\</font> ) you can use this layout with complete stylings using \<font color="#2166ae">ant design\</font> and adding the css code to your \<font color="#2166ae">app css\</font> file or set up your own custom form productcreation js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, checkbox, input } from 'antd'; 5 import { plusoutlined } from '@ant design/icons'; 6 7 export const productcreation = () => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 return ( 17 \<div> 18 \<div classname="header"> 19 \<img 20 classname="header logo" 21 alt="back4app logo" 22 src={ 23 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 24 } 25 /> 26 \<p classname="header text bold">{'react on back4app'}\</p> 27 \<p classname="header text">{'product creation'}\</p> 28 \</div> 29 \<div classname="container"> 30 {/ product field inputs /} 31 \<div classname="flex between"> 32 \<h2 classname="list heading">available?\</h2> 33 \<checkbox 34 onchange={(e) => setproductavailable(e target checked)} 35 >\</checkbox> 36 \</div> 37 \<div classname="form wrapper"> 38 \<input 39 classname="form input" 40 value={productname} 41 onchange={(event) => setproductname(event target value)} 42 placeholder="name" 43 size="large" 44 /> 45 \<input 46 classname="form input" 47 value={productquantity} 48 onchange={(event) => setproductquantity(event target value)} 49 placeholder="quantity" 50 size="large" 51 /> 52 \<input 53 classname="form input" 54 value={productprice} 55 onchange={(event) => setproductprice(event target value)} 56 placeholder="price" 57 size="large" 58 /> 59 \<input 60 classname="form input" 61 value={productexpirationdate} 62 onchange={(event) => setproductexpirationdate(event target value)} 63 placeholder="expiration date (mm/dd/yyyy)" 64 size="large" 65 /> 66 \<input 67 classname="form input" 68 value={productcategories} 69 onchange={(event) => setproductcategories(event target value)} 70 placeholder="categories (separated by comma)" 71 size="large" 72 /> 73 {/ add product button /} 74 \<button 75 type="primary" 76 classname="form button" 77 color={'#208aec'} 78 size={'large'} 79 onclick={createproduct} 80 icon={\<plusoutlined />} 81 > 82 create product 83 \</button> 84 \</div> 85 \</div> 86 \</div> 87 ); 88 }; productcreation tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, checkbox, input } from 'antd'; 4 import { plusoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6 7 export const productcreation fc<{}> = () reactelement => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 const createproduct = async function () promise\<boolean> { 17 try { 18 // these values come from state variables 19 // convert data values to corresponding data types 20 const productnamevalue string = productname; 21 const productquantityvalue number = number(productquantity); 22 const productpricevalue number = number(productprice); 23 const productavailablevalue boolean = productavailable; 24 const productexpirationdatevalue date = new date(productexpirationdate); 25 const productcategoriesvalue string\[] = productcategories split(','); 26 27 // creates a new product parse object instance 28 let product parse object = new parse object('product'); 29 30 // set data to parse object 31 product set('name', productnamevalue); 32 product set('quantity', productquantityvalue); 33 product set('price', productpricevalue); 34 product set('available', productavailablevalue); 35 product set('expirationdate', productexpirationdatevalue); 36 product set('categories', productcategoriesvalue); 37 product set('completedata', { 38 name productnamevalue, 39 quantity productquantityvalue, 40 price productpricevalue, 41 available productavailablevalue, 42 expirationdate productexpirationdatevalue, 43 categories productcategoriesvalue, 44 }); 45 46 // after setting the values, save it on the server 47 try { 48 let savedproduct parse object = await product save(); 49 // success 50 alert(`success! ${json stringify(savedproduct)}`); 51 return true; 52 } catch (error) { 53 // error can be caused by lack of internet connection 54 alert(`error! ${error message}`); 55 return false; 56 } 57 } catch (error any) { 58 // error can be caused by wrong type of values in fields 59 alert(`error! ${error message}`); 60 return false; 61 } 62 }; 63 64 return ( 65 \<div> 66 \<div classname="header"> 67 \<img 68 classname="header logo" 69 alt="back4app logo" 70 src={ 71 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 72 } 73 /> 74 \<p classname="header text bold">{'react on back4app'}\</p> 75 \<p classname="header text">{'product creation'}\</p> 76 \</div> 77 \<div classname="container"> 78 {/ product field inputs /} 79 \<div classname="flex between"> 80 \<h2 classname="list heading">available?\</h2> 81 \<checkbox 82 onchange={(e) => setproductavailable(e target checked)} 83 >\</checkbox> 84 \</div> 85 \<div classname="form wrapper"> 86 \<input 87 classname="form input" 88 value={productname} 89 onchange={(event) => setproductname(event target value)} 90 placeholder="name" 91 size="large" 92 /> 93 \<input 94 classname="form input" 95 value={productquantity} 96 onchange={(event) => setproductquantity(event target value)} 97 placeholder="quantity" 98 size="large" 99 /> 100 \<input 101 classname="form input" 102 value={productprice} 103 onchange={(event) => setproductprice(event target value)} 104 placeholder="price" 105 size="large" 106 /> 107 \<input 108 classname="form input" 109 value={productexpirationdate} 110 onchange={(event) => setproductexpirationdate(event target value)} 111 placeholder="expiration date (mm/dd/yyyy)" 112 size="large" 113 /> 114 \<input 115 classname="form input" 116 value={productcategories} 117 onchange={(event) => setproductcategories(event target value)} 118 placeholder="categories (separated by comma)" 119 size="large" 120 /> 121 {/ add product button /} 122 \<button 123 type="primary" 124 classname="form button" 125 color={'#208aec'} 126 size={'large'} 127 onclick={createproduct} 128 icon={\<plusoutlined />} 129 > 130 create product 131 \</button> 132 \</div> 133 \</div> 134 \</div> 135 ); 136 }; 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 } 23 24 p { 25 margin 0; 26 } 27 28 body { 29 margin 0; 30 background color #fff; 31 } 32 33 container { 34 width 100%; 35 max width 600px; 36 margin auto; 37 padding 20px 0; 38 } 39 40 header { 41 align items center; 42 padding 25px 0; 43 background color #208aec; 44 } 45 46 header logo { 47 height 55px; 48 margin bottom 20px; 49 object fit contain; 50 } 51 52 header text bold { 53 margin bottom 3px; 54 color rgba(255, 255, 255, 0 9); 55 font size 16px; 56 font weight bold; 57 } 58 59 header text { 60 color rgba(255, 255, 255, 0 9); 61 font size 15px; 62 } 63 64 flex between { 65 display flex; 66 align items center; 67 justify content space between; 68 } 69 70 list heading { 71 font weight bold; 72 } 73 74 form wrapper { 75 margin top 20px; 76 margin bottom 10px; 77 } 78 79 form input { 80 margin bottom 20px; 81 } 82 83 form button { 84 width 100%; 85 } この画面を設定した後、あなたのアプリケーションは次のようになります 各 \<font color="#2166ae">製品 \</font> 属性にはテキスト入力フィールドがあり、ブール値のチェックボックス入力を除いて、保存する前にそれらのデータを対応するデータ型に変換する必要があります。 2 入力データの変換 データを \<font color="#2166ae">parse object\</font> に保存する前に、 \<font color="#2166ae">number\</font> 、 \<font color="#2166ae">datetime\</font> 、および \<font color="#2166ae">array \</font> の入力を正しくフォーマットする必要があります。次に、状態変数からデータを取得し、適切なデータ変換を適用する保存関数を作成しましょう productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; productcreation tsx 1 const createproduct = async function () promise\<boolean> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error any) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; 数値 \<font color="#2166ae">データ変換は、値を \</font> としてキャストされます。 \<font color="#2166ae">number\</font> javascriptオブジェクトとして。 \<font color="#2166ae">datetime \</font> は、 \<font color="#2166ae">date \</font> javascriptオブジェクトコンストラクタを使用して変換されます。 \<font color="#2166ae">配列 \</font> は、 \<font color="#2166ae">string split\</font> メソッドを使用して作成され、カテゴリフィールドの各エントリがカンマで区切られた配列が作成されます。 あなたのデータは現在、単一のオブジェクト内に含まれていることに注意してください。これは、新しいp \<font color="#2166ae">arse object \</font> インスタンスに設定され、 \<font color="#2166ae">parse object set()\</font> メソッドを使用してサーバーに保存されます。このメソッドは、2つの引数を取ります：フィールド名と設定する値です。また、 \<font color="#2166ae">completedata\</font> という新しいフィールドを設定しましょう。これはあなたの \<font color="#2166ae">オブジェクト \</font> タイプフィールドとなり、同じデータオブジェクトが割り当てられます。 続けて、以下の内容で \<font color="#2166ae">createproduct \</font> 関数を完成させてください productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 12 // creates a new product parse object instance 13 let product = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 } 42 } catch (error) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; productcreation tsx 1 const createproduct = async function () promise\<boolean> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 12 // creates a new product parse object instance 13 let product parse object = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct parse object = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error any) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 }; 42 } catch (error any) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; コンポーネントをテストできるようになりました。 \<font color="#2166ae">createproduct \</font> 関数を挿入し、フォームの送信ボタンの中でそれを呼び出します。 \<font color="#2166ae">onclick \</font> プロパティの中で。製品を作成した後、そのデータを含むアラートが表示されるはずです。 サーバーにデータが正しいデータ型を使用して保存されたことを確認するには、parseダッシュボードを確認できます。 \<font color="#2166ae">製品 \</font> データテーブルをクリックし、各列のヘッダーにそのデータ型が記載されていることに注意してください。あなたのクラスは次のようになります 結論 このガイドの最後に、reactコンポーネントを使用してparseで利用可能な基本データ型を保存する方法を学びました。次のガイドでは、parseのリレーショナルデータについて学びます。