フロントエンドを構築

解説動画

YouTubeに解説動画を公開しています。 こちらもあわせて、ぜひご覧ください。

Expoを導入する

1. リポジトリをクローンする

以前、Expoから、Expo Router、NativeWindまでの開発環境構築を前回の記事で紹介しています。 そこで、構築したリポジトリをクローンして使います。

https://blog.engineer-ba-sulto.com/blog/7

git clone https://github.com/arafipro/2025-newest-expo-setup.git apps/frontend

リポジトリをクローンしたら、apps/frontendディレクトリに移動して、.gitファイルを削除します。 モノレポでは、すべてのプロジェクトを一括管理しているため、個別のプロジェクトの.gitファイルを削除する必要があります。

cd apps/frontend
rm -rf .git

2. パッケージをインストールする

リポジトリをクローンしたら、パッケージをインストールする必要があります。 そこで、bun installでパッケージをインストールします。

bun install

3. プロジェクト名を変更する

app.jsonとpackage.jsonを開いて、プロジェクト名を2025-newest-expo-setupからfrontendに変更します。

- "name": "2025-newest-expo-setup",
- "slug": "2025-newest-expo-setup",
- "scheme": "2025-newest-expo-setup-scheme",
+ "name": "frontend",
+ "slug": "frontend",
+ "scheme": "frontend-scheme",

- "name": "2025-newest-expo-setup",
+ "name": "frontend",

gluestack-uiを導入する

https://gluestack.io/ui/docs/home/getting-started/installation

1. gluestack-uiを初期化する

次のコマンドを実行して、gluestack-uiを初期化します。

npx gluestack-ui init

質問されるので、次のように答えます。 Detected an Expo project, continue?は、Yesを選択します。 Proceed with caution. Make sure to commit your changes before proceeding. Continue?は、Yesを選択します。 No lockfile detected. Please select a package manager to install dependencies:は、bunを選択します。 もう一度、No lockfile detected. Please select a package manager to install dependencies:は、bunを選択します。

2. babel.config.jsを修正する

babel.config.jsを開くと、gluestack-uiの初期化で変更が加えられて、2つの設定が二重になっています。 このままだと、エラーになってしまうので、babel.config.jsを修正します。

  module.exports = function (api) {
-   api.cache(true);
    api.cache(true);
    return {
      presets: [
        ["babel-preset-expo", { jsxImportSource: "nativewind" }],
-       "nativewind/babel",
        "nativewind/babel"
      ],
      plugins: [["module-resolver", {
        root: ["./"],
        alias: {
          "@": "./",
          "tailwind.config": "./tailwind.config.js"
        }
      }]]
    };
  };

3. global.cssを修正する

global.cssのディレクティブが二重になっているので、修正します。

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
- @tailwind base;
- @tailwind components;
- @tailwind utilities;

4. gluestack-uiのboxコンポーネントを追加する

次のコマンドを実行して、gluestack-uiのboxコンポーネントを追加します。

npx gluestack-ui add box

質問されるので、次のように答えます。 No lockfile detected. Please select a package manager to install dependencies:は、bunを選択します。 もう一度、No lockfile detected. Please select a package manager to install dependencies:は、bunを選択します。

5. gluestack-uiのboxコンポーネントを使ってみる

まずは、エミュレーターを使って、変化を確認しながら進めます。 エミュレーターを起動します。 次のコマンドを実行します。

cd apps/frontend && bun start

エミュレーターが起動したら、Boxコンポーネントを使ってみます。 Boxコンポーネントは、Viewコンポーネントの代わりとなるものです。 そこで、ViewコンポーネントをBoxコンポーネントに変更します。

- import { Text, View } from "react-native";
+ import { Box } from "@/components/ui/box";
+ import { Text } from "react-native";
 
  export default function Tab() {
    return (
-     <View className="bg-red-500 flex-1 justify-center items-center">
+     <Box className="bg-red-500 flex-1 justify-center items-center">
        <Text>Home</Text>
-     </View>
+     </Box>
    );
  }

変更しましたが、そもそも見た目は変わりませんね。 今後のUIの作成で、色んなコンポーネントを使っていくので、それまでお楽しみに。

react-native-gifted-chartsを導入する

https://gifted-charts.web.app/ https://www.npmjs.com/package/react-native-gifted-charts

1. パッケージをインストールする

まずは、以下のパッケージをインストールします。

• react-native-gifted-charts
• expo-linear-gradient
• react-native-svg

次のコマンドを実行します。

cd apps/frontend
bun expo install react-native-gifted-charts expo-linear-gradient react-native-svg

2. react-native-gifted-chartsを使ってみる

react-native-gifted-chartsを使って、チャートを表示してみましょう。 パイチャートを表示しましょう。 パイチャートは、円グラフのことです。

  import { Box } from "@/components/ui/box";
  import { Text } from "react-native";
+ import { PieChart } from "react-native-gifted-charts";
  
  export default function Tab() {
    return (
      <Box className="bg-red-500 flex-1 justify-center items-center">
        <Text>Home</Text>
+       <PieChart
+         data={[{ value: 15 }, { value: 30 }, { value: 26 }, { value: 40 }]}
+       />
      </Box>
    );
  }

PieChartコンポーネントは、パイチャートを表示するコンポーネントです。 dataプロパティは、パイチャートのデータを指定します。 valueプロパティは、パイチャートの値を指定します。 パイチャートのデータは配列で指定して、その中に値を数値で指定します。