CodeZine(コードジン)

特集ページ一覧

React Nativeでメモアプリを作ろう~セットアップと表示

基礎からはじめるReact Native入門 第10回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/05/20 11:00

 今回と次回の2回に分けて、メモアプリを作りながら、React Nativeでユーザーの入力を受け付けるほか、データを保存し、保存してあるデータを表示する方法について解説します。これまで解説してきたことを総合的に活用しながら、実践的なアプリ開発を行います。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Catalina 10.15.3
  • Node.js 12.16.1/npm 6.13.4
  • expo-cli 3.13.8
  • expo 36.0.2(React Native 0.61)
  • React 16.9.0

メモアプリを作る

 これまでの連載では、React Nativeでできることや、その周辺ツールについて広く学んできました。そろそろ、読者の皆さんも実用的なアプリを作ってみたくなってきた頃ですよね。今回と次回は、実践的なメモアプリを作りながら、UIコンポーネントの使い方や状態管理の方法、データの保存の方法について解説します。

 今回作成するメモアプリをイメージしてもらいやすくするために、簡単な画面デザインを作成しました(図1)。

図1:メモアプリのスケッチ
図1:メモアプリのスケッチ

 メモの一覧を表示する「メイン画面(MainScreen)」と、メモを作成する「作成画面(ComposeScreen)」の2画面で構成されるアプリです。画面遷移が発生する操作はオレンジ色の矢印で表しています。

 もう少し開発の流れをイメージしやすいように、作業の工程を箇条書きにしてみましょう。

  1. プロジェクトを作成する
  2. 使う予定のあるライブラリをインストールする
  3. メイン画面を仮組みする
    • アプリで扱うデータの構造を決める
    • サンプルデータを作る
    • サンプルデータを無加工でUIに表示する
    • データを加工し、レイアウトを調整して見た目を整える
  4. 作成画面を作る
    • UIを作成する
    • データを保存する
  5. メイン画面を完成させる
    • 作成画面で保存したデータを表示する

 メイン画面と作成画面のどちらを先に作るかは悩みどころですが、作成画面を先に作ってもデータを表示する場所が無いと動作確認をしづらい都合もあるため、今回はサンプルデータを使ってメイン画面の仮組みを先に行います。

 次回の記事で作成画面を作り終えたら、サンプルデータではなく実際に作成画面を使って生み出したデータでメイン画面を表示できるようにしましょう。

プロジェクトをセットアップする

 まずはプロジェクトを作成します。図2のように、Expo CLIでmemo-appプロジェクトを作成しましょう。テンプレートは blankを選択します。

図2:memo-appプロジェクトを作成する
図2:memo-appプロジェクトを作成する

 次に、今回のプロジェクトで使用するライブラリをセットアップしておきます。今回はreact-native-paperreact-navigationを使ってみましょう。個別のライブラリのセットアップ方法については前回までに詳しく解説してあるので、今回は解説しません。react-native-paperbabel.config.jsを修正する手順が抜けやすいので気をつけましょう。

 メイン画面として、srcフォルダの中にMainScreen.jsファイルを作成しておきます。セットアップが終わった時点で、App.jsMainScreen.jsがリスト1のようになっているとよいでしょう。

[リスト1]App.jsとMainScreen.jsをセットアップする
// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider as PaperProvider } from 'react-native-paper';
import { MainScreen } from './src/MainScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Main"
            component={MainScreen}
            options={{
              title: 'メモ帳' // (1)
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}


// MainScreen.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Title } from 'react-native-paper';

export const MainScreen = () => {
  return (
    <View style={styles.container}>
      <Title>ここはメイン画面です</Title>
    </View>
  );
}

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

 (1)で options属性のtitleパラメータを使って、ヘッダーに表示するための別名を定義しています。セットアップが終了した時点での状態を、ファイルエクスプローラで確認すると、図3の通りになります。

図3:ファイルの状態
図3:ファイルの状態

 また、Expo Clientアプリで実行すると、図4の通りになります。

図4:セットアップが完了した時点での見た目
図4:セットアップが完了した時点での見た目

 これでセットアップは完了しました。ここにアプリとしての機能を作り込んでいきます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:基礎からはじめるReact Native入門

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5