ここで、Reactの重要な機能を1つ使います。

**useState**です。

ここまでは「現在の月」を表示していました。

ここからは、

「ボタンを押したら月を変更する」

という機能を追加します。

以下のコードに置き換えてください。

import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
  const [month, setMonth] = useState(new Date());

  const year = month.getFullYear();
  const m = month.getMonth();

  const days = new Date(year, m + 1, 0).getDate();
  const start = new Date(year, m, 1).getDay();

  const cells = Array(start).fill('').concat(
    Array.from({ length: days }, (_, i) => i + 1)
  );

  const week = ['日', '月', '火', '水', '木', '金', '土'];

  const prevMonth = () =>
    setMonth(new Date(year, m - 1, 1));

  const nextMonth = () =>
    setMonth(new Date(year, m + 1, 1));

  return (
    <View style={styles.container}>
      <Text style={styles.title}>カレンダー</Text>

      <View style={styles.header}>
        <Pressable onPress={prevMonth}>
          <Text style={styles.button}>‹</Text>
        </Pressable>

        <Text style={styles.month}>
          {year}年 {m + 1}月
        </Text>

        <Pressable onPress={nextMonth}>
          <Text style={styles.button}>›</Text>
        </Pressable>
      </View>

      <View style={styles.week}>
        {week.map(day => (
          <Text style={styles.weekText} key={day}>
            {day}
          </Text>
        ))}
      </View>

      <View style={styles.calendar}>
        {cells.map((day, i) => (
          <View style={styles.cell} key={i}>
            <Text>{day}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    paddingTop: 70,
  },

  title: {
    fontSize: 28,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 25,
  },

  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },

  month: {
    fontSize: 20,
    fontWeight: 'bold',
  },

  button: {
    fontSize: 35,
    paddingHorizontal: 15,
  },

  week: {
    flexDirection: 'row',
  },

  weekText: {
    width: '14.28%',
    textAlign: 'center',
    fontWeight: 'bold',
    padding: 10,
  },

  calendar: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },

  cell: {
    width: '14.28%',
    height: 55,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#eee',
  },
});

プレビューで、

‹    2026年10月    ›

のようになっていることを確認してください。

そして›を押してみましょう。

次の月に変われば成功です。

useStateとは？

ここが今回のReact学習で最も重要なところです。

const [month, setMonth] = useState(new Date());

少し難しそうに見えますが、まずは、

month
↓
現在表示している月

setMonth
↓
月を変更するための機能

と覚えてください。

最初は、

month = 現在の月

です。

そして、

setMonth(...)

を使うことで、月を変更できます。

ボタンを押したら何が起こる？

次月ボタンは、

<Pressable onPress={nextMonth}>

となっています。

これは、

「このボタンが押されたらnextMonthを実行する」

という意味です。

そして、

const nextMonth = () =>
  setMonth(new Date(year, m + 1, 1));

で、現在の月の次の月に変更しています。

例えば、

10月
 ↓
11月

という変更です。

前月ボタンは逆に、

const prevMonth = () =>
  setMonth(new Date(year, m - 1, 1));

となっています。

Reactが画面を更新してくれる

ここがReactの大事なところです。

ボタンを押す
 ↓
setMonth()
 ↓
monthが変わる
 ↓
Reactが変化を確認
 ↓
画面を更新

その結果、カレンダー全体が新しい月に変わります。

普通のJavaScriptでは、自分でHTMLを書き換える処理を考えることがあります。

Reactでは、

「データが変わったら、Reactが画面を更新してくれる」

という仕組みになっています。

Step 7　デザインを整えて完成