Expo CLIを使ってnativeアプリ開発入門編④axiosでAPI取得

はじめに

前回の記事で、ボタンを押したときに決め打ちの情報を表示させるというところをやりました。
今回は郵便番号検索APIを叩いて、入力した郵便番号から住所を取得しアプリで表示するというのをやってみます。

Expo CLIを使ってnativeアプリ開発入門編③

axiosのパッケージを追加する

公式のドキュメントを読むと、fetchするだけで良いと書いてありますが、ここではaxiosを使ってAPIリクエストを送ります。
まずはプロジェクトがあるディレクトリ下でコマンドを叩きaxiosのパッケージを追加します。

npm i axios

axiosをimportし、リクエストの処理を書く

前回の記事のMain.jsを編集します
※前回の記事ではボタンの処理をFooter.jsに書いていましたが、ボタンの処理もMain.jsに移動させています。

import React, { Component }  from 'react';
import { StyleSheet, Text, View, Button, Alert, TextInput } from 'react-native';
// axiosのインポート
import axios from 'axios';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: '',
        };
    }

    _onPressButton() {
        // ボタンが押されたときに、入力した番号をパラメータにし
        // APIリクエストを送る
        axios.get('http://zipcloud.ibsnet.co.jp/api/search', {
            params: {
                zipcode: this.state.code
            }
        })
        .then(response => {
            let address = response.data.results
            var addList = ''
            for(i=0;address.length>i;i++){
                addList += address[i].address1 + address[i].address2 + address[i].address3
            }

            Alert.alert(addList)
            return

        }).catch(err => {
            console.log('err:', err);
            return
        })
        
    }

    
    render() {
        return (
            <View style={styles.container}>
                <Text style={{padding: 10, fontSize: 20}}>
                    郵便番号を入れてね
                </Text>
                <TextInput
                    style={{height: 50}}
                    placeholder="例）0010001"
                    onChangeText={(code) => this.setState({code})}
                />
                <Text>
                    プレビュー：{this.state.code}
                </Text>
                <Button
                    onPress={this._onPressButton.bind(this)}
                    title="Press Me"
                    color="red"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor: 'powderblue',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

解説

流れ的には以下のようになります。
①テキストエリアに数字を入力＝stateの値が書き換わる
②ボタンを押す＝stateの値をパラメータに、APIリクエストを送る
③ダイアログ表示＝郵便番号に一致する住所がアラートで表示される

取得した結果をstateに格納し、画面に表示させるとしたほうが現実的ですが、少し横着した結果です。。
もう少しレイアウト周りに慣れてからやってみたいと思います。

ひとまずこれで、郵便番号から住所を検索するnativeアプリの機能部分が完成しました。
これを作りこんでいくとすると、バリデーション処理を追加したり、取得した住所をもとに今度は天気予報のAPIと組み合わせて天気も一緒に表示するようにしてみたり、といった感じでしょうか。

今回はreact nativeに慣れる目的でこの機能を作ってみましたが、次回はこれは使わずにもう少し違うことをやってみたいと思います。