{"id":7407,"date":"2020-03-23T21:17:55","date_gmt":"2020-03-23T12:17:55","guid":{"rendered":"https:\/\/www.vincentina.net\/?p=7407"},"modified":"2020-03-23T21:30:25","modified_gmt":"2020-03-23T12:30:25","slug":"react-native%e3%81%a7%e3%82%a2%e3%83%97%e3%83%aa%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%88%e3%83%91%e3%83%bc%e3%83%883","status":"publish","type":"post","link":"https:\/\/www.vincentina.net\/?p=7407","title":{"rendered":"React Native\u3067\u30a2\u30d7\u30ea\u4f5c\u3063\u3066\u307f\u305f\u3088\u30d1\u30fc\u30c83"},"content":{"rendered":"<div class=\"small-margin\">\n<h2>React Native\u3067\u30a2\u30d7\u30ea\u4f5c\u3063\u3066\u307f\u305f\u3088\u30d1\u30fc\u30c83<\/h2>\n<p>\u30d1\u30fc\u30c83\u306f\u524d\u56de\u304b\u30892\u5e74\u307b\u3069\u304c\u7d4c\u3063\u3066\u304a\u308a\u307e\u3059\u3002\u524d\u56de\u306e\u306fJava\u306e\u30b3\u30fc\u30c9\u3092\u79fb\u3057\u305f\u305b\u3044\u304b\u306a\u3093\u304b\u5909\u306aJS\u3067\u3001\u4eca\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u898b\u308b\u3068\u300c.TS\u307b\u306b\u3083\u307b\u306b\u3083\u306a\u30a8\u30e9\u30fc\u300d\u306e\u6570\u304c\u3059\u3054\u3044\u3002\u4eca\u56de\u3082\u5143\u3005\u306fNuxt.js\u3067\u306a\u3093\u304b\u3084\u308d\u7684\u306a\u30a2\u30d7\u30ea\u3067\u3001Template\u30bf\u30b0\u306f\u4f7f\u308f\u306a\u3044\u3067Render\u95a2\u6570\u3067\u66f8\u304d\u305f\u304b\u3063\u305f\u3093\u3067\u301c\u3001\u305d\u3093\u306a\u611f\u3058\u3067\u66f8\u3044\u3066\u308b\u3046\u3061\u306b\u3001\u306a\u3093\u304b\u3053\u308c\u3063\u3066ReactNative\u3067\u3044\u3044\u3084\u3093\u3002\u3068\u3044\u3046\u3075\u3046\u306b\u306a\u3063\u3066\u3001\u305d\u3093\u306a\u3053\u3093\u306a\u3067\u4eca\u306b\u81f3\u308a\u307e\u3059\u3002\n<\/p><\/div>\n<div class=\"small-margin\">\n\u4eca\u56de\u306fBltblog\u3055\u3093\u306e<a href=\"https:\/\/b1tblog.com\/2019\/12\/24\/nuxt-app1\/\" rel=\"noopener noreferrer\" target=\"_blank\">\u3010Nuxt.js\u3067\u8fd1\u304f\u306e\u304a\u5e97\u3092\u63a2\u3059\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3011#1 \u958b\u767a\u6e96\u5099<\/a>\u3092\u53c2\u8003\u306b\u66f8\u3044\u3066\u3044\u305f\u305f\u3081\u3001\u3010\u8fd1\u304f\u3067\u6e08\u307e\u3059\u30a2\u30d7\u30ea\u3011\u3068\u3044\u3046\u30a2\u30d7\u30ea\u306b\u3057\u307e\u3057\u305f\u3002\u305d\u306e\u307e\u307e\u3084\u3093\u7684\u306a\u3002\n<\/div>\n<div class=\"small-margin\">\n\u4ed5\u69d8\u306e\u65b9\u3067\u3059\u304c\u3001\u30db\u30c3\u30c8\u30da\u30c3\u30d1\u3055\u3093\u306eAPI\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306fBltblog\u3055\u3093\u304c\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u3082\u306e\u3092\u305d\u306e\u307e\u307e\u4f7f\u308f\u305b\u3066\u3044\u305f\u3060\u3044\u3066\u3001\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u542b\u3081\u308b\u3088\u3046\u306b\u5909\u6570\u30921\u3064\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u306b\u306fExpo\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u4f7f\u3063\u305f\u6a5f\u80fd\u306f\u4ee5\u4e0b\u3002<\/p>\n<table>\n<tbody>\n<tr>\n<th>axios<\/th>\n<td>axios<\/td>\n<\/tr>\n<tr>\n<th>react-navigation\/native<\/th>\n<td>NavigationContainer<\/td>\n<\/tr>\n<tr>\n<th>react-navigation\/stack<\/th>\n<td>createStackNavigator<\/td>\n<\/tr>\n<tr>\n<th>react<\/th>\n<td>React, useState, userEffect<\/td>\n<\/tr>\n<tr>\n<th>react-native<\/th>\n<td>View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, TextInput<\/td>\n<\/tr>\n<tr>\n<th>react-native-elements<\/th>\n<td>Catd, Button, Overlay<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u516c\u5f0f\u306b\u66f8\u3044\u3066\u3042\u308bUSAGE\u306e\u307b\u307c\u305d\u306e\u307e\u307e\u3067\u5b9f\u88c5\u3057\u3066\u3001\u3053\u3093\u306a\u96f0\u56f2\u6c17\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<div style=\"width: 360px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-7407-1\" width=\"360\" height=\"640\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.vincentina.net\/wp-content\/uploads\/2020\/03\/chikasuma.mp4?_=1\" \/><a href=\"https:\/\/www.vincentina.net\/wp-content\/uploads\/2020\/03\/chikasuma.mp4\">https:\/\/www.vincentina.net\/wp-content\/uploads\/2020\/03\/chikasuma.mp4<\/a><\/video><\/div><\/div>\n<div class=\"small-margin\">\n\u305d\u3082\u305d\u3082\u306e\u59cb\u307e\u308a\u306fRender\u95a2\u6570\u3092\u4f7f\u304a\u3046\u3068\u601d\u3063\u305f\u3068\u8a00\u3044\u306a\u304c\u3089\u3082\uff57\u3001\u3059\u3079\u3066\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u4ed5\u4e0a\u3052\u3066(Render\u4f7f\u308f\u306a\u3044)\u3001\u30ca\u30d3\u3001\u30bf\u30a4\u30c8\u30eb\u3001\u304a\u5e97\u306e\u4e00\u89a7\u3068\u8a73\u7d30\u306e\u8a084\u679a\u3002<br \/>\nNavigationContainer\u3001createStackNavigator\u3092\u4f7f\u3063\u3066\u30d8\u30c3\u30c0\u30fc\u8868\u793a\u3068\u30da\u30fc\u30b8\u9077\u79fb\u306a\u3093\u304b\u3092\u3084\u3063\u3066\u307e\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30b9\u30bf\u30c3\u30af(\u7a4d\u307f\u91cd\u306d\u308b)\u3057\u3066\u3044\u304f\u611f\u3058\u306b\u611f\u3058\u307e\u3059\u3002<\/p>\n<p>app.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nexport default function App() {\r\n  return (\r\n    &lt;NavigationContainer&gt;\r\n      &lt;Navi \/&gt;\r\n    &lt;\/NavigationContainer&gt;\r\n  );\r\n}\r\n<\/pre>\n<p>components\/Navi.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nconst Stack = createStackNavigator();\r\n\r\nconst Navi = () =&gt; (\r\n  &lt;Stack.Navigator\r\n    screenOptions={{\r\n      headerTitle: &quot;\u8fd1\u304f\u3067\u6e08\u307e\u3059\u30a2\u30d7\u30ea&quot;\r\n    }}\r\n  &gt;\r\n    &lt;Stack.Screen\r\n      options={{\r\n        headerShown: false\r\n      }}\r\n      name=&quot;title&quot;\r\n      component={title}\r\n    \/&gt;\r\n    &lt;Stack.Screen name=&quot;menu&quot; component={menu} \/&gt;\r\n    &lt;Stack.Screen name=&quot;shop&quot; component={shop} \/&gt;\r\n  &lt;\/Stack.Navigator&gt;\r\n);\r\n\r\nexport default Navi;\r\n<\/pre>\n<\/div>\n<div class=\"small-margin\">\n\u81ea\u5df1\u6e80\u3067\u30bf\u30a4\u30c8\u30eb\u753b\u9762\u3092\u4f5c\u3063\u3066\u3001\u304a\u5e97\u4e00\u89a7\u3067\u30ad\u30fc\u30ef\u30fc\u30c9\u306a\u3057\u3067\u691c\u7d22\u3002\u30d8\u30c3\u30c0\u30fc\u306e\u30dc\u30bf\u30f3\u304b\u3089\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3067\u691c\u7d22\u67a0\u304c\u51fa\u307e\u3059\u3002ReactNative\u3067\u306fReact-Native-Elements\u3068\u3044\u3046\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u7c21\u5358\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3084\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u304c\u5b9f\u88c5\u3067\u304d\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u30bf\u30a4\u30c8\u30eb\u306f\u6700\u8fd1\u305f\u307e\u306b\u3084\u3063\u3066\u3044\u308b\u30b2\u30fc\u30e0\u30a2\u30d7\u30ea\u3063\u307d\u98a8\u306b\u3001TauchableOpacity\u3092\u4f7f\u3063\u3066\u753b\u9762\u5168\u4f53\u3092\u30bf\u30c3\u30d7\u3057\u3066\u30e1\u30a4\u30f3\u753b\u9762\u306b\u9077\u79fb\u3057\u307e\u3059\u3002<\/p>\n<p>components\/title.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nexport default function Title({ navigation }) {\r\n  return (\r\n    &lt;TouchableOpacity\r\n      style={{ flex: 1 }}\r\n      onPress={() =&gt; navigation.navigate(&quot;menu&quot;)}\r\n    &gt;\r\n      &lt;View\r\n        style={{\r\n          backgroundColor: &quot;lightyellow&quot;,\r\n          flex: 1,\r\n          alignItems: &quot;center&quot;,\r\n          justifyContent: &quot;center&quot;\r\n        }}\r\n      &gt;\r\n        &lt;Image\r\n          resizeMode=&quot;contain&quot;\r\n          style={{ width: 300, height: 58 }}\r\n          source={require(&quot;..\/assets\/title.png&quot;)}\r\n        \/&gt;\r\n        &lt;Text color=&quot;#841584&quot;&gt;TAP TO START&lt;\/Text&gt;\r\n      &lt;\/View&gt;\r\n    &lt;\/TouchableOpacity&gt;\r\n  );\r\n}\r\n<\/pre>\n<p>components\/menu.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\nconst getShops = keyword =&gt; {\r\n  return api.getShops(keyword).then(res =&gt; {\r\n    return res.data.results;\r\n  });\r\n};\r\n\r\nconst Menu = ({ navigation }) =&gt; {\r\n  navigation.setOptions({\r\n    headerRight: () =&gt; (\r\n      &lt;Button\r\n        type=&quot;clear&quot;\r\n        onPress={() =&gt; setIsVisible(true)}\r\n        title=&quot;Keyword&quot;\r\n        color=&quot;#fff&quot;\r\n      \/&gt;\r\n    )\r\n  });\r\n  const &#x5B;shops, setShops] = useState(&#x5B;]);\r\n  const &#x5B;isVisible, setIsVisible] = useState(false);\r\n  const &#x5B;keyword, setKeyword] = useState(&quot;&quot;);\r\n\r\n  const setKeywordSearch = keyword =&gt; {\r\n    (async () =&gt; {\r\n      api.getShops(keyword).then(res =&gt; {\r\n        const data = res.data.results;\r\n        setShops({\r\n          data\r\n        });\r\n      });\r\n    })();\r\n    setIsVisible(false);\r\n  };\r\n\r\n  useEffect(() =&gt; {\r\n    (async () =&gt; {\r\n      const data = await getShops();\r\n      await setShops({\r\n        data\r\n      });\r\n    })();\r\n  }, &#x5B;]);\r\n\r\n  return (\r\n    &lt;ScrollView style={{ flex: 1 }}&gt;\r\n      &lt;Overlay\r\n        height=&quot;auto&quot;\r\n        isVisible={isVisible}\r\n        onBackdropPress={() =&gt; setIsVisible(false)}\r\n      &gt;\r\n        &lt;View&gt;\r\n          &lt;Text&gt;\u691c\u7d22\u306b\u542b\u307e\u305b\u305f\u3044\u30ad\u30fc\u30ef\u30fc\u30c9\u304c\u3042\u308c\u3070\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002&lt;\/Text&gt;\r\n          &lt;TextInput\r\n            style={{\r\n              marginTop: 10,\r\n              marginBottom: 10,\r\n              height: 30,\r\n              borderColor: &quot;black&quot;,\r\n              borderWidth: 1\r\n            }}\r\n            onChangeText={keyword =&gt; setKeyword(keyword)}\r\n            value={keyword}\r\n          \/&gt;\r\n          &lt;Button\r\n            type=&quot;clear&quot;\r\n            color=&quot;#009488&quot;\r\n            title=&quot;\u691c\u7d22\u3059\u308b&quot;\r\n            onPress={() =&gt; setKeywordSearch(keyword)}\r\n          \/&gt;\r\n        &lt;\/View&gt;\r\n      &lt;\/Overlay&gt;\r\n      &lt;View style={styles.container}&gt;\r\n        {shops.data &amp;&amp;\r\n          shops.data.shop.map((data, i) =&gt; (\r\n            &lt;Card key={i}&gt;\r\n              &lt;View style={{ width: 280, flex: 1 }}&gt;\r\n                &lt;View style={{ flex: 1, flexDirection: &quot;row&quot; }}&gt;\r\n                  &lt;View style={{ flex: 3, flexDirection: &quot;column&quot; }}&gt;\r\n                    &lt;Text&gt;{data.name}&lt;\/Text&gt;\r\n                    &lt;Text&gt;{data.genre.name}&lt;\/Text&gt;\r\n                  &lt;\/View&gt;\r\n                  &lt;View\r\n                    style={{\r\n                      flex: 2,\r\n                      justifyContent: &quot;flex-end&quot;,\r\n                      alignItems: &quot;flex-end&quot;\r\n                    }}\r\n                  &gt;\r\n                    &lt;TouchableOpacity\r\n                      onPress={() =&gt;\r\n                        navigation.navigate(&quot;shop&quot;, {\r\n                          Data: { shop: data.id }\r\n                        })\r\n                      }\r\n                    &gt;\r\n                      &lt;Image\r\n                        style={{ width: 100, height: 100 }}\r\n                        source={{ uri: data.photo.mobile.l }}\r\n                      \/&gt;\r\n                    &lt;\/TouchableOpacity&gt;\r\n                  &lt;\/View&gt;\r\n                &lt;\/View&gt;\r\n              &lt;\/View&gt;\r\n            &lt;\/Card&gt;\r\n          ))}\r\n      &lt;\/View&gt;\r\n    &lt;\/ScrollView&gt;\r\n  );\r\n};\r\nconst styles = StyleSheet.create({});\r\n\r\nexport default Menu;\r\n<\/pre>\n<\/div>\n<div class=\"small-margin\">\n\u304a\u5e97\u4e00\u89a7\u3067\u306f\u753b\u50cf\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3068\u304a\u5e97\u306e\u8a73\u7d30\u3078\u79fb\u52d5\u3057\u307e\u3059\u3002\u691c\u7d22\u306b\u542b\u307e\u305b\u305f\u3044\u30ad\u30fc\u30ef\u30fc\u30c9\u304c\u3042\u308c\u3070\u53f3\u4e0a\u306eKeyword\u304b\u3089\u7a93\u3092\u51fa\u3057\u3066\u5165\u529b\u3059\u308b\u611f\u3058\u3067\u3059\u306d\u3002<br \/>\n\u4f55\u308c\u3082\u3053\u3093\u306a\u753b\u9762\u306b\u3057\u305f\u3044\u306a\u301c\u3063\u3066\u3044\u3046\u3088\u308a\u304b\u3053\u308c\u66f8\u304d\u305f\u3044\u306a\u306b\u8fd1\u3044\u753b\u9762\uff08Usage\u306e\u8aac\u660e\u304c\u5206\u304b\u308a\u3084\u3059\u304b\u3063\u305f\u306e\u3082\u3042\u308b\u3051\u308c\u3069\u3082\uff09\u3067\u3059\u3002<\/p>\n<p>\u524d\u56de\u3084\u3063\u305f\u3068\u304d\u306fReactNative\u304c\u3061\u3087\u3063\u3068\u66f8\u304d\u8f9b\u3044\u3088\u3046\u306b\u611f\u3058\u308b\u3068\u3053\u308d\u304c\u591a\u304b\u3063\u305f\u3051\u3069\u3082\u3044\u308d\u3044\u308d\u3068\u9032\u6b69\u3057\u305f\u306e\u304b\u30b7\u30f3\u30d7\u30eb\u306b\u307e\u3068\u3081\u3066\u66f8\u3051\u308b\u3088\u3046\u306a\u6c17\u304c\u3057\u307e\u3057\u305f\u3002<br \/>\n\u304a\u5e97\u306e\u8a73\u7d30\u753b\u9762\u306e\u30ea\u30b9\u30c8\u8868\u793a\u306e\u3068\u3053\u308d\u3060\u3051<span class=\"middle-font\">\u30b4\u30c1\u30e3<\/span>\u3063\u3068\u3057\u305f\u306e\u3067StyleSheet.create\u3067\u5206\u3051\u307e\u3057\u305f\u3002\u5c0f\u3055\u3044\u3082\u306e\u3060\u3068\u30b9\u30bf\u30a4\u30eb\u306f\u307e\u3068\u3081\u3066\u66f8\u3044\u3061\u3083\u3063\u3066\u30b5\u30af\u30c3\u3068\u66f8\u3051\u3066\u3057\u307e\u3046\u306e\u3067\u30b5\u30af\u30c3\u3068\u3084\u3063\u3061\u3083\u3046\u3093\u3060\u306a\u3002\u3053\u308c\u304c\u3002<\/p>\n<p>components\/Shop.js<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\nconst getDetail = id =&gt; {\r\n  return api.detailGet(id).then(res =&gt; {\r\n    return res.data.results;\r\n  });\r\n};\r\n\r\nconst ListView = ({ subtitle, data }) =&gt; {\r\n  return (\r\n    &lt;View style={styles.container}&gt;\r\n      &lt;View style={styles.subtitle}&gt;\r\n        &lt;Text&gt;{subtitle}&lt;\/Text&gt;\r\n      &lt;\/View&gt;\r\n      &lt;View style={styles.information}&gt;\r\n        &lt;Text&gt;{data}&lt;\/Text&gt;\r\n      &lt;\/View&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n};\r\n\r\nconst Shop = props =&gt; {\r\n  const &#x5B;shop, setShop] = useState(&#x5B;]);\r\n  useEffect(() =&gt; {\r\n    (async () =&gt; {\r\n      const data = await getDetail(props.route.params.Data.shop);\r\n      await setShop({ data });\r\n    })();\r\n  }, &#x5B;]);\r\n\r\n  return (\r\n    &lt;ScrollView style={{ flex: 1 }}&gt;\r\n      {shop.data &amp;&amp;\r\n        shop.data.shop.map((data, i) =&gt; (\r\n          &lt;Card key={i} title={data.name} image={{ uri: data.photo.mobile.l }}&gt;\r\n            &lt;View style={{ flex: 1 }}&gt;\r\n              &lt;ListView subtitle=&quot;\u4f4f\u6240&quot; data={data.address} \/&gt;\r\n              &lt;ListView subtitle=&quot;\u4ea4\u901a\u30a2\u30af\u30bb\u30b9&quot; data={data.access} \/&gt;\r\n              &lt;ListView subtitle=&quot;\u55b6\u696d\u6642\u9593&quot; data={data.open} \/&gt;\r\n              &lt;ListView subtitle=&quot;\u5b9a\u4f11\u65e5&quot; data={data.close} \/&gt;\r\n              &lt;ListView\r\n                subtitle=&quot;\u5e73\u5747\u4e88\u7b97&quot;\r\n                data={data.budget &amp;&amp; data.budget.average}\r\n              \/&gt;\r\n              &lt;ListView subtitle=&quot;\u5099\u8003&quot; data={data.budget_memo} \/&gt;\r\n              &lt;ListView subtitle=&quot;\u5e2d\u6570&quot; data={data.capacity} \/&gt;\r\n              &lt;ListView subtitle=&quot;\u30e1\u30e2&quot; data={data.shop_detail_memo} \/&gt;\r\n            &lt;\/View&gt;\r\n          &lt;\/Card&gt;\r\n        ))}\r\n    &lt;\/ScrollView&gt;\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    flexDirection: &quot;row&quot;\r\n  },\r\n  subtitle: {\r\n    flex: 2,\r\n    padding: 10\r\n  },\r\n  information: {\r\n    flex: 15,\r\n    padding: 10\r\n  }\r\n});\r\n\r\nexport default Shop;\r\n<\/pre>\n<\/div>\n<div class=\"small-margin\">\n<\/div>\n<div class=\"small-margin\">\n\u30d1\u30fc\u30c83\u306f\u3053\u3093\u306a\u98a8\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u63a8\u5968\u3068\u3044\u3046\u3053\u3068\u3067\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4e2d\u5fc3\u306b\u306a\u3063\u3066\u3044\u304d\u305d\u3046\u3067\u3059\u304c\u3001\u4ee5\u524d\u306e\u3088\u308a\u3082\u30b9\u30c3\u30ad\u30ea\u3068\u3057\u3066\u3044\u308b\u5370\u8c61\u3067\u3059\u306d\u3002\u306a\u3093\u304b\u540c\u3058\u3053\u3068\u30922\u56de\u66f8\u3044\u305f\u3088\u3046\u306a\u6c17\u3082\u3059\u308b\u3051\u3069\u3001\u4eca\u56de\u306f\u305d\u3093\u306a\u611f\u3058\u3067\u3059\u3002<br \/>\n\u3067\u306f\u6b21\u56de\u306f\u524d\u306b\u66f8\u3044\u3066\u305fNuxt.js\u306e\u65b9\u3082\u305b\u3063\u304b\u304f\u3084\u304b\u3089\u30a2\u30c3\u30d7\u3057\u3088\u3046\u304b\u3068\u601d\u3044\u307e\u3059\u3002\n<\/div>\n<div class='wp_social_bookmarking_light'>        <div class=\"wsbl_twitter\"><a href=\"https:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-url=\"https:\/\/www.vincentina.net\/?p=7407\" data-text=\"React Native\u3067\u30a2\u30d7\u30ea\u4f5c\u3063\u3066\u307f\u305f\u3088\u30d1\u30fc\u30c83\" data-via=\"TakekenTw\" data-lang=\"ja\">Tweet<\/a><\/div><\/div>\n<br class='wp_social_bookmarking_light_clear' \/>\n","protected":false},"excerpt":{"rendered":"<p>React Native\u3067\u30a2\u30d7\u30ea\u4f5c\u3063\u3066\u307f\u305f\u3088\u30d1\u30fc\u30c83 \u30d1\u30fc\u30c83\u306f\u524d\u56de\u304b\u30892\u5e74\u307b\u3069\u304c\u7d4c\u3063\u3066\u304a\u308a\u307e\u3059\u3002\u524d\u56de\u306e\u306fJava\u306e\u30b3\u30fc\u30c9\u3092\u79fb\u3057\u305f\u305b\u3044\u304b\u306a\u3093\u304b\u5909\u306aJS\u3067\u3001\u4eca\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u898b\u308b\u3068\u300c.TS\u307b\u306b\u3083\u307b\u306b\u3083\u306a\u30a8\u30e9\u30fc\u300d\u306e\u6570\u304c\u3059\u3054\u3044\u3002\u4eca &hellip; <a href=\"https:\/\/www.vincentina.net\/?p=7407\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;React Native\u3067\u30a2\u30d7\u30ea\u4f5c\u3063\u3066\u307f\u305f\u3088\u30d1\u30fc\u30c83&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[119],"tags":[],"class_list":["post-7407","post","type-post","status-publish","format-standard","hentry","category-apli"],"_links":{"self":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts\/7407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7407"}],"version-history":[{"count":0,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=\/wp\/v2\/posts\/7407\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vincentina.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}