🐕‍🦺

【ReactNative,Expo,ハリーポッタAPI】久しぶりReactNative ！とりあえずハリーポッタ図鑑作ってみるか〜🤪

2024/05/19に公開

Android

はじめに

こんにちは！
てるし〜です！

本日はReactNativeの記事になります。

社会人になって初めてアサインされた案件がReactNativeでそこから約一年が経ちました(現在2024/5)。
案件終了後触ることがなくずっとNext.jsを触っていました。
しかし、React conf 2024を見てかなりReactNativeの発表が多く「久々に触って遊ぶか〜」と思ったので触ってみたら色々変わってて目が飛び出ました🤯

作ったものとしてはハリーポッタ図鑑です。
ReactNativeとExpoを使って作りました。

以前、Next.jsで作った記事があるのでそちらも是非ご覧ください！

今回の記事は「作った〜」記事になります。
それではゆっくりして行ってください！

作ったもの

ios版

android版

ReactNativeとは

公式引用

React Native allows developers who know React to create native apps.

https://reactnative.dev/

ReactNativeはiosとandroid、両方のアプリを同時に開発できるものです。
iosとandroid両方を同時に開発できるものをクロスプラットフォームとも呼ばれたりします。
クロスプラットフォームの例としてFlutterも挙げられます。

https://flutter.dev/

個人的な意見になるのですが、ReactNativeはベースがReactになるのでReactをやっていた方あれば比較的入りやすいかなと思っています(ビルド周りの設定は苦戦すると思うが🫠)。

Expoとは

公式引用

Expo is a framework that makes developing Android and iOS apps easier.

Expoを使うことでより簡単なandroid、ios開発ができるようになります。ReactNative公式もExpoを使うことを推奨としています。

Expoではandroid、iosのエミュレータだけではなくExpo Goというアプリを入れて手元の実機で簡単に動作検証をすることも可能です。
エミュレータと実機で違う動きをすることがあるのでこれはありがたいものかもしれないですね！

恒例ディレクトリ構造閲覧タイム

.
├── android・・・androidのソースコード(ビルド時に自動生成)
├── app・・・ルーティング用(Next.jsのPages Routerに似た仕組み)
│   ├── +html.tsx
│   ├── +not-found.tsx
│   ├── _layout.tsx
│   ├── detail
│   │   └── [character].tsx
│   └── index.tsx
├── app.json・・・アプリのスプラッシュ画面等の設定
├── assets
│   ├── fonts・・・フォントファイル
│   └── images・・・画像ファイル
├── components・・・部品等
├── eas.json・・・Expoの設定ファイル
├── hooks・・・カスタムhook等
├── model・・・API通信部分
├── scripts
│   └── reset-project.js・・・プロジェクトをリセットするときに実行するスクリプト
└── view・・・画面コンポーネント

Next.jsのディレクトリ構造を知っている方なら「!?!?🫨」って思うかもしれませんが「滅茶苦茶似てる、、、😟」と思う人が多いかもしれません。
1年前はこんな構造じゃありませんでした。
私もいつの間にこんな構造になっているんだ！と思いました。

参考までに初めて触った時のReactNativeのリポジトリを共有しておきます。
Expoでインストールして少しホジホジした程度ですが、現在の構造と全く違います。

すこ〜しソースコード閲覧

`tsx`のソース

例としてhome.tsxのコードを閲覧してみる。

home.tsx

import { Link } from "expo-router"
import { View, Text, Image, ScrollView, Button, Pressable } from "react-native"
import styles from "./style.css"
import { useGetAllCharacters } from "@/hooks"

export const Home = () => {
    const { data, isLoading } = useGetAllCharacters()

    if (isLoading)
        return (
            <View style={styles.container}>
                <Text>Loading Now.....</Text>
            </View>
        )

    return (
        <>
            <View style={styles.container}>
                <View>
                    <Image
                        source={require("@/assets/images/backgroundImage.png")}
                        style={styles.titleImage}
                    />
                </View>
                <ScrollView style={styles.scrollBox}>
                    {data?.map((item, index) => (
                        <View key={index}>
                            <Image
                                source={{ uri: item.image }}
                                style={{ width: 105 * 1.5, height: 150 }}
                            />
                            <View style={styles.buttonBox}>
                                <Link href={`/detail/${item.fullName}`} asChild>
                                    <Pressable style={styles.button}>
                                        <Text style={styles.buttonFont}>
                                            Go To Detail
                                        </Text>
                                    </Pressable>
                                </Link>
                            </View>
                        </View>
                    ))}
                </ScrollView>
                <View style={styles.bottomStyle} />
            </View>
        </>
    )
}

ハリーポッタAPIを叩いて取得したデータを画面に表示するソースコードです。

初めてReactNativeを閲覧する人は思うかもしれません。
「タグは違うけどほぼReactやんけ〜😆」
久々に触る人は思うかもしれません。
「!? Linkなんてあったのか🤨」

どうやら触ってない間に中身もかなり変わってたみたいです。
Linkを見るとNext.jsを思い浮かべます。
ExpoはNext.jsに近づけていっている感じがします。
さらにルーティングをパスで指定できるのは良いなと思いました。

気がつけばReactNative for Webとかもできていましたし、その辺からなのでしょうかね🧐

スタイルシート

home.tsxを装飾するスタイルシートのソースコードをみてみます。

style.css.ts

import { StyleSheet } from "react-native"

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 100
    },
    titleImage: {
        width: 261,
        height: 130
    },
    scrollBox: {
        width: 105 * 1.5
    },
    buttonBox: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    button: {
        width: 100,
        height: 25,
        backgroundColor: "white",
        marginTop: 5,
        marginBottom: 5,
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 4
    },
    buttonFont: {
        color: "black"
    },
    bottomStyle: {
        height: 100
    }
})

export default styles

ほとんどcssですね。
ただし、Viewに対してcolorを与えることができないなど制約は多いです。

ReactやNext.jsをやった後にReactNativeのスタイルシートを設定すると色々と脳みそが混乱してバグる時がありますね🤪

リポジトリ

リポジトリを共有しておきます。
余談ですが、pnpm installをしたら謎にビルドエラーになってしまい起動できなくなってしまいました。

リポジトリにpushしてからやらかしたので助かりましたが、pnpmやyarnを使わないようにした方が良いでしょう。
npmでもそこまで遅いとは感じなかったので「まぁ〜いっか」となりました🙃

まとめ

「ReactNative+Expo+ハリーポッタAPIでハリーポッタ図鑑を作ったよ〜」という記事でした。
1年前に案件で使ってから久々に触りましたが、かなり色々なものが変わっていたので自身もびっくり。
実はこれでバージョンが1.0.0に達していないということに衝撃ですね😳

ただ、欠点を言えば「ビルドがなげ〜😢」
ネイティブアプリ開発をするときはみんなそうなんですかね、、、🧐

今後のReactNativeの成長に期待ですね。

皆さんもReactNativeとExpoを使って何かiosとAndroidアプリの開発をしてみてはいかがでしょうか？

今回も読んでいただきありがとうございます🙇🏻‍♂️