苦手なAPI対応について再入門する①

いろいろ『APIとは？』について説明しているページがありますが、実際手を動かしたほうがわかりやすいかもしれません。

 

まず、ここでは、1つ目として、Zip Cloud APIを利用します。

これは、郵便番号を入れて、APIをたたくと、住所他の情報が返ってくるAPIです。

コマンドプロンプトを開き（自動的にホームディレクトリ）、『<』の後に、下記を入力し、Enter.

curl -i https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060

 

すると、JSONファイル形式で情報が返ってきます。

ちなみに、JSONのJはJavaScriptのJです。

ネットがつながっていないと当然できません。

 

２つ目は、アメリカンジョークを返してくれるAPIです。

同様に、コマンドプロンプトで、下記入力し、Enter.

curl -i https://official-joke-api.appspot.com/jokes/random

 

すると、setupで問いかけし、punchlineで面白い返しをしてます。

英語圏でしかわからないものもありますが、、、

 

これらを、どのプログラミング言語でもいいので、プログラムで行うことも可能です。JavaScriptではfetch関数や、axiosライブラリ（オブジェクトリテラルとJSONの変換をしなくてよい）を使って行うことができるようです。

 

React Nativeで、後者を、setup 、punchlineを別々に表示できるようにし、webでブラウザで表示すると、翻訳で日本語に変えて見れるようにしたい！[axiosライブラリ使用］

ライブラリは下記

"axios": "^1.6.7",
    "expo": "~50.0.6",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-dom": "18.2.0",
    "react-native-web": "~0.19.6",
    "@expo/webpack-config": "~19.0.1"

 

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { useState, useEffect } from "react";
import axios from "axios";

export default function App() {
  const [joke, setJoke] = useState({ todos: null });

  const pressHandler = () => {
    axios
      .then((res) => {
        setJoke({ ...joke, todos: res.data });
      })
      .catch((err) => {
        console.log(err);
      });
  };

  if (!joke.todos) {
    return (
      <View style={styles.containerFirst}>
        <Text>取得中...</Text>
        <Button title="GET" onPress={pressHandler} />
      </View>
    );
  } else {
    return (
      <View style={styles.container}>
        <Text style={{ fontSize: 20 }}>setup:</Text>
        <Text>{joke.todos.setup}</Text>
        <Text style={{ fontSize: 20, marginTop: 50 }}>punchline:</Text>
        <Text>{joke.todos.punchline}</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "flex-start",
    justifyContent: "center",
  },
  containerFirst: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});