「ReactNative」の記事 - Crieit

React NavigationをTypescriptと一緒に使う際につまづいたところ

2021-10-12T09:52:01+09:00

最近業務でReact Nativeを書いているのですが、ナビゲーションのライブラリとして
React NavigationをTypescriptと一緒に使う際に色々大変だったので（主にドキュメントを読んでいないせい）
まとめておこうと思いこの記事を書いています。質問や気になる点があれば@kmgk21444557までご連絡ください。

アプリの作成、実行にはExpoを使っています。

サンプルアプリのリポジトリ：https://github.com/kmgk/ReactNavigationExample

環境

node: v16.10.0
yarn: 1.22.4
expo-cli: 4.12.1
OS: android (Pixel 3a XL API R)

package.json

{
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.7",
    "@react-navigation/native-stack": "^6.2.2",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@react-navigation/native": "^6.0.4",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
}

テスト用アプリの作成

expo-cliを用いてアプリを作成します。テンプレートはblank (Typescript)を選択しました。

$ expo init ReactNavigationExample

必要なパッケージをインストール

yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs
expo install react-native-screens react-native-safe-area-context react-native-pager-view

Hello React Navigationを参考に、
HomeScreenとHogeScreenの2画面作成し、createNativeStackNavigatorでナビゲーションを作成します。

App.tsx

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
const HomeStack = createNativeStackNavigator();
export default function App() {
  return (
    
      
        
        
      
    
  );
}
const HomeScreen: React.FC = () => {
  const navigation = useNavigation()
  return (
    
      HomeScreen

`navigate('Hoge')`でエラーが出る

まずここでエラーが出ます。onPress={() => navigation.navigate('Hoge')}のnavigateの引数である文字列Hogeの型が正しくないようです。

型 'string' の引数を型 '{ key: string; params?: undefined; merge?: boolean | undefined; } | 
{ name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }' 
のパラメーターに割り当てることはできません

'Hoge'が割り当てられる予定のnameパラメータの型がneverになっています。なんで。

ここで公式にType checking with TypeScriptというページがあることに気が付きます。

To type check our route name and params, the first thing we need to do is to create an object type with mappings for route name to the params of the route. For example, say we have a route called Profile in our root navigator which should have a param userId:
とあるのでとりあえずルートをまとめたオブジェクトRootStackParamListを作成します。

type RootStackParamList = {
  Home: undefined;
  Hoge: undefined;
}

型にundefinedを指定するとナビゲーションからパラメータを与えられません。逆にパラメータが欲しい場合はそのパラメータのマッピングを指定する必要があります。

これをcreateNativeStackNavigatorに指定します。

const HomeStack = createNativeStackNavigator();

こうすることでNavigator内部のScreenでnameが制限されます。
定義したルート名しか使えないのでtypoの心配もなくなりました。

ただ、まだnavigate('Hoge')のエラーは出たままです。先程の記事のType checking screensを見ると

To type check our screens, we need to annotate the navigation prop and the route prop received by a screen. The navigator packages in React Navigation export a generic types to define types for both the navigation and route props from the corresponding navigator.
The type takes 2 generics, the param list object we defined earlier, and the name of the current route. This allows us to type check route names and params which you're navigating using navigate, push etc. The name of the current route is necessary to type check the params in route.params and when you call setParams.
また、useNavigationをよく見てみると

useNavigation



とあるので、いい感じにジェネリクスを指定します。今回はcreateNativeStackNavigatorで

StackNavigatorを作成したのでNativeStackNavigationPropを使用します。

const navigation = useNavigation>();


こうすることでエラーは消え、定義したルート名のみが指定できるようになりました。問題解決！

Bottom Tabs Navigator でヘッダーが二重に出る問題

まずはBottom Tabs Navigatorを

参考にBottom Tabsを用意します。

type TabParamList = {
  Tab1: undefined;
  Tab2: undefined;
  Tab3: undefined;
}
const TabNavigator: React.FC = () => {
  return (
    
      
      
      
    
  )
}
// Tab1Screenなどは省略・・・


先程のホーム画面からTabNavigatorへ遷移するよう設定し、いざ遷移！



なぜかヘッダーが二重になっています。まずは下のヘッダー（タイトルがTab1の方）を消してみます。

下のヘッダー(Tab.Screen)を消す

これはTab.NavigatorのオプションでheaderShownというパラメータがあるのでそれにfalseを渡してあげるだけです。

{{headerShown: false}}>


上のヘッダー(TabNavigator)を消す

次に上のヘッダー（タイトルがTabの方）を消します。

先程のTab.Navigatorに渡したheaderShownは一度削除して、再びヘッダーが二重になるようにします。

ここで、TabNavigationを呼び出しているNavigationContainerの方を見てみます。


  
    ...
    
  



HomeStack.Screenのヘッダーが表示されているので、それを消せば解決します。

先程と同様headerShownを渡します。Screenはoptionsでオプションを受け取るので注意。(NavigatorはscreenOptions)

{{
    headerShown: false
  }}
/>


これで上のヘッダーを削除することができました。ちなみに両方にheaderShown: falseを渡すとヘッダーがなくなります。当然ですね。

参考文献


Type checking with TypeScript - reactnavigation.org
Bottom Tabs Navigator - reactnavigation.org



モバイルアプリ開発フレームワーク
2021-04-13T16:45:08+09:00
現在、40億人を超えるモバイルユーザーがいるため、モバイルでオーディエンスとつながることができなければ、あなたは存在しません。人々はスマートフォンの使用をとても楽しんでいるので、技術のない日を過ごすために自分自身に挑戦する必要があります。スマートフォンは、電話、テキストメッセージ、メールのチェック、さらには娯楽まで、必要なものをすべて提供できます。そのため、モバイルアプリフレームワークが実現します。

このような陰謀的なアプリケーションの舞台裏には、何千ものモバイルアプリ開発フレームワークがあります。ただし、モバイルアプリをうまく作るには、適切なモバイルアプリ開発フレームワーク、関連技術、プラットフォーム、データベースが不可欠です。とはいうものの、あまりにも多くの選択肢があり、どれかひとつに絞るのはこれまで以上に難しい状況です。そこでこの記事では、iOSとAndroid両方のプラットフォームで最も人気の高いモバイルアプリ開発フレームワークについて説明します。その前に、効率的な モバイルアプリ開発フレームワーク とはどのようなものかを簡単に見ていきましょう。

1. React Native

React Nativeは、AndroidアプリとiOSアプリの両方向けに構築された非常に人気のあるフレームワークです。特に、モバイルアプリの開発者は、より短いビルドサイクルでより高速なデプロイ時間で高性能アプリをビルドでき、予算にやさしいオプションです。さらに、React Nativeは、ビュー、テキスト、画像など、プラットフォームに依存しないネイティブコンポーネントのコアセットを提供し、すべてプラットフォームのネイティブUIビルディングブロックにマップされます。また、フルスタックに必須のJavaScriptもサポートしています。

2. Flutter

FlutterはGoogle が作ったオープンソースのネイティブアプリケーション開発フレームワークです。Dart という共通言語で開発を行います。詳しいデバッグができるので React Native で感じる「隔靴掻痒」感は少ないです。

Flutterを使うことで同一のコードベースからAndroidやiOSアプリを構築でき、その見た目もネイティブアプリです。FlutterはGoogleによる導入が2015年でしたが、2018年12月の公式リリースまではベータ段階にとどまっていました。

Flutterのユーザーは、携帯電話、テレビ、タブレット、ウェアラブルデバイス、スマートディスプレイ用のアプリを作成できます。

ちなみに Flutter Studio は Flutter の UI 作成のために使えるサイトです。ビルドのためのものではありません。Flutter を採用するなら使うことになるのではないかと思われます。Flutter ではそれぞれの Native パートをプロジェクト含めることができる。

3. Ionic

Ionicは、クロスプラットフォームアプリケーションとともにインタラクティブハイブリッドおよびPWAを構築するのに役立ちます。このオープンソースフレームワークは、アプリケーションを作成するためのプレミアムサービスを提供します。さらに、Ionicは、Web、Android、およびiOS用のアプリケーションの構築をカバーしています。さらに、Ionicで作業している間は、常にアプリケーションを作成して、展開可能な場所に出荷できます。すぐに使用できる機能を備えているため、アプリケーション開発に最適です。

まとめ

以上挙げた３つのフレームワーク以外、他にもモバイルアプリ開発フレームワークがあります。どのフレームワークを選択するかは、要件、予算、技術的要件、そして短期的または長期的な成功の可能性に応じて、最も適したものを選ぶと良いでしょう。


React NativeでローカルデータベースRealmを使ったスマホアプリをつくる
2021-03-01T21:16:04+09:00



  本記事はブログ記事の転載です。


ユーザーが作成するデータをスマホにのみ保存し、サーバー上には保存しない React Native アプリを開発する場合、スマホ内のローカルデータベースにデータを保存することになります。本記事では、ローカルデータベースの1つである Realm を使った React Native アプリの開発方法を紹介します。

なぜサーバーではなくスマホに保存するのか

最近はFirebaseのようなmBaaS (Mobile Backend as a Service) が登場したことで、アプリ開発者がインフラを触るハードルが下がってきています。それでもなおサーバーではなくスマホにデータベースを保存するモチベーションとして、以下が挙げられます。


サーバーの障害によってアプリが使えなくなることがない
インターネットが使えない場所でもアプリを利用できる
アプリ開発者がサーバーを維持管理する必要がなくなる


FirebaseのようなmBaaSでも、ユーザー増に伴い金銭的な負担が生じる

大規模なデータ流出は起こらない


アプリ開発者のもとにユーザーのデータが集まらないため、データ流出の危険性は下がる



使用フレームワーク・ライブラリ

本記事では以下のフレームワーク、ライブラリを利用します。


React Native


クロスプラットフォーム対応のスマホアプリを開発できるフレームワーク。

Realm


オフラインデータベース。開発元はMongoDB社により2019年買収。MongoDB社が提供するMongoDB Realm(mBaaS)を使うことで、複数端末間でデータベースを同期することもできるが、本記事の対象外。



SQLiteとの比較

スマホ内にデータベースを保存する方法として、RealmのほかにSQLiteがあります。RealmとSQLiteをざっくり比較すると、以下のようになります。


RealmはSQLiteより軽い


Realmでは、クエリの結果は遅延読み込みされる

RealmではSQLを書く必要がない
ただし、RealmはExpoで使えない（SQLiteはExpoで使える）


本記事の前提

まだReact Native 開発環境のセットアップをしていない場合、Setting up the development environment(React Nativeドキュメント)にある "React Native CLI Quickstart" の内容を読み、指示に従ってください。

また、本記事の内容は、以下の環境で動作確認しています。


macOS Big Sur 11.2.1
React Native 0.63.4
Node.js v14.16.0
Xcode 12.4
Simulator 上の iPhone 11 / iOS 14.4


Realmの準備

React Native アプリの作成

ここでは、MyRealmAppという名前のReact Nativeアプリを作成してみます。なお、ExpoではRealmを使うことができませんので注意してください。

$ npx react-native init MyRealmApp


Realmのインストール

$ cd MyRealmApp
$ npm install realm
$ cd ios && pod install && cd ..


PCにインストールされているNode.jsのバージョンが古いとエラーになることがあります。

もし、上記のnpm install realmコマンドを実行した結果、The N-API version of this Node instance is (数値). This module supports N-API version(s) (数値). This Node instance cannot run this module. というエラーが表示された場合、Node.js のバージョンを上げてください。

スキーマの定義とRealmの初期化

本記事では例としてタスク管理アプリを設計してみます。タスクを表現するTask クラスと、各 Task にはサブタスクを設定できるよう、SubTask クラスを定義します。

まず、作成した React Native プロジェクト内に src フォルダを作成します。src フォルダは、 App.js と同階層のフォルダに作成してください。次に、src フォルダ内に以下のファイルを作成します。ファイル名は realm.js とします。

./src/realm.js

// Taskの定義
const taskSchema = {
  name: 'Task',
  primaryKey: '_id',
  properties: {
    _id: 'objectId', // 'string' や 'int' でも OK
    name: 'string',
    description: 'string?', // ?をつけると optional
    isDone: 'bool',
    createdAt: 'date',
    subTasks: 'SubTask[]', // クラス名 + '[]' で1対多のリレーションを設定できる
  },
};

// SubTaskの定義
const subTaskSchema = {
  name: 'SubTask',
  primaryKey: '_id',
  properties: {
    _id: 'objectId',
    name: 'string',
    isDone: 'bool',
    createdAt: 'date',
  },
};

// Realmの初期化
export const openRealm = () => {
  const config = {
    schema: [taskSchema, subTaskSchema],
    schemaVersion: 1, // スキーマを変更したらインクリメントする(後述)
  };

  return new Realm(config);
};

export {BSON} from 'realm';


データベースの操作

React NativeでRealmを使う前に、まずRealm単体でデータベースを操作する方法を見ていきます。

このセクションのコードは、作成した React Native プロジェクトのフォルダに入っている App.js 内の適当な場所に書いた上で npx react-native run-ios コマンドを実行すると Simulator 上で動作確認できます。

（npx react-native run-ios コマンドがエラーで失敗する場合、Flipperのバージョンを変更してみてください(Stack Overflow 英語版)）

オブジェクトの新規作成

import {openRealm, BSON} from './src/realm';

const realm = openRealm();

// 更新系はすべて realm.write(() => { }) (=トランザクション)内に書く
realm.write(() => {
  // サブタスクを作成しない場合
  realm.create('Task', {
    _id: new BSON.ObjectId(),
    name: 'タスクの名前',
    isDone: false,
    createdAt: new Date(),
  });

  // サブタスクを作成する場合
  realm.create('Task', {
    _id: new BSON.ObjectId(),
    name: 'タスクの名前',
    isDone: false,
    createdAt: new Date(),
    subTasks: [
      {
        _id: new BSON.ObjectId(),
        name: 'サブタスクの名前',
        isDone: false,
        createdAt: new Date(),
      },
    ],
  });
});


オブジェクトの取得

filtered で利用可能なクエリについては公式ドキュメントを参照してください。

import {openRealm} from './src/realm';

const realm = openRealm();

// タスクを全部取得
const tasks = realm.objects('Task');

console.log(tasks[0].name); // 「タスクの名前」と表示される
console.log(tasks[1].subTasks[0].name); // 「サブタスクの名前」と表示される

// フィルタの例 — 完了しているタスクのみ取得
const done = tasks.filtered('isDone == true');
console.log(`完了しているタスクは${done.length}件です。`);

// ソートの例 — 名前順で取得
const sorted = tasks.sorted('name');
console.log(sorted[0].name);


オブジェクトの更新

JavaScriptのオブジェクトを操作するのと同じ方法でRealm上のデータを更新できます。

import {openRealm} from './src/realm';

const realm = openRealm();

realm.write(() => {
  // 更新対象のタスク
  const task = realm.objects('Task')[0];

  // 更新
  task.name = '新しいタスクの名前';
  task.isDone = !task.isDone;
});


オブジェクトの削除

import {openRealm} from './src/realm';

const realm = openRealm();

realm.write(() => {
  // 削除対象のタスク
  const task = realm.objects('Task')[0];

  if (task) {
    // まずサブタスクを削除
    realm.delete(task.subTasks);

    // 削除
    realm.delete(task);
  }
});


React NativeでRealmを使う

React Nativeアプリ内でTaskを操作できるようにするためのコンテキストと React Hook を作ります。

以下の例は、GitHubの mongodb-university/realm-tutorial-react-native リポジトリ内のコードを参考に、本記事用に書き換えたものです。

まずsrc フォルダ内にproviders フォルダを作成します。providersフォルダ内にTaskProvider.jsという名前でファイルを作成し、以下のコードを書きます。このコードの詳細については、コード中のコメントを参照してください。

./src/providers/TasksProvider.js

import React, {useContext, useState, useEffect, useRef} from 'react';
import {openRealm, BSON} from '../realm';

const TasksContext = React.createContext(null);

const TasksProvider = ({children}) => {
  const [tasks, setTasks] = useState([]);

  const realmRef = useRef(null);

  useEffect(() => {
    realmRef.current = openRealm();

    const tasks = realmRef.current.objects('Task').sorted('createdAt', true);
    setTasks(tasks);

    // Task のデータが更新されたら setTasks する
    tasks.addListener(() => {
      const tasks = realmRef.current.objects('Task').sorted('createdAt', true);
      setTasks(tasks);
    });

    return () => {
      // クリーンアップ
      if (realmRef.current) {
        realmRef.current.close();
      }
    };
  }, []);

  // タスクの新規作成
  const createTask = (newTaskName) => {
    const projectRealm = realmRef.current;
    projectRealm.write(() => {
      projectRealm.create('Task', {
        _id: new BSON.ObjectId(),
        name: newTaskName || '新しいタスク',
        isDone: false,
        createdAt: new Date(),
      });
    });
  };

  // タスクの isDone を更新する
  const setIsTaskDone = (task, isDone) => {
    const projectRealm = realmRef.current;

    projectRealm.write(() => {
      task.isDone = isDone;
    });
  };

  // タスクを削除する
  const deleteTask = (task) => {
    const projectRealm = realmRef.current;
    projectRealm.write(() => {
      projectRealm.delete(task);
    });
  };

  // useTasks フックで Task を操作できるようにする
  return (
    {{
        createTask,
        deleteTask,
        setIsTaskDone,
        tasks,
      }}>
      {children}
    
  );
};

// Task を操作するための React Hook
const useTasks = () => {
  const task = useContext(TasksContext);
  if (task == null) {
    throw new Error('useTasks() called outside of a TasksProvider?');
  }
  return task;
};

export {TasksProvider, useTasks};


以上で作成したTasksProviderをApp.jsに追加し、useTasksフックをコンポーネント内で使ってみます。ここでは、src フォルダ内にcomponents フォルダを作成し、その中にMain.js というファイルでコンポーネントを定義します。

./App.js

import React from 'react';
import {TasksProvider} from './src/providers/TasksProvider';
import {Main} from './src/components/Main';
import {StatusBar} from 'react-native';

const App = () => {
  return (
    
      
      
    
  );
};

export default App;


./src/components/Main.js

import React, {useState, useCallback} from 'react';
import {
  SafeAreaView,
  FlatList,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
  StyleSheet,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import {useTasks} from '../providers/TasksProvider';

// コンポーネント間の余白を作るための関数
const spacer = (size) => {
  return {{height: size, width: size}} />;
};

export const Main = () => {
  const [inputText, setInputText] = useState('');
  const {createTask, deleteTask, setIsTaskDone, tasks} = useTasks();

  const onSubmitEditing = useCallback(
    (event) => {
      setInputText(event.nativeEvent.text);
      createTask(inputText);
      setInputText('');
    },
    [inputText, setInputText, createTask],
  );

  return (
    
      
        
        
          {spacer(15)}
          
            My Tasks
          
          {spacer(15)}
           setInputText(e.nativeEvent.text)}
            style={styles.headerInput}
          />
          {spacer(24)}
        
      
       Keyboard.dismiss()}>
        {tasks.length > 0 ? (
           item._id.toHexString()}
            renderItem={({item}) => (
              
                 setIsTaskDone(item, !item.isDone)}>
                  
                    {item.isDone && ✓}
                  
                
                
                  
                    {item.name}
                  
                
                 deleteTask(item)}>
                  
                    Delete
                  
                
              
            )}
          />
        ) : (
          
            No Tasks
          
        )}
      
    
  );
};

// スタイル
const styles = StyleSheet.create({
  container: {flex: 1},
  header: {
    backgroundColor: '#2563EB',
  },
  headerContent: {paddingHorizontal: 24},
  headerTitle: {color: 'white', fontSize: 32, fontWeight: 'bold'},
  headerInput: {
    borderRadius: 6,
    height: 40,
    paddingHorizontal: 12,
    marginHorizontal: -12,
    fontSize: 18,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2.5,
    },
    shadowOpacity: 0.3,
    shadowRadius: 2.4,
    elevation: 4,
  },
  tasksContainer: {flex: 1},
  tasksContentContainer: {paddingBottom: 20},
  taskItem: {
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
    flexDirection: 'row',
    alignItems: 'center',
  },
  chechboxContainer: {padding: 20},
  checkbox: {
    width: 25,
    height: 25,
    borderRadius: 12,
    borderWidth: 1.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkboxIcon: {color: 'white', fontWeight: 'bold', fontSize: 18},
  taskContent: {flex: 1},
  taskName: {
    fontSize: 20,
    fontWeight: '600',
  },
  deleteButton: {padding: 20},
  deleteButtonText: {color: '#EF4444'},
  emptyContent: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  emptyMessage: {
    fontSize: 20,
    fontWeight: '500',
    color: '#9CA3AF',
  },
});


動作確認

ここまでできたら、一度動作確認してみます。今回は Simulator 上の iPhone で動作確認します。以下のコマンドで、シミュレータを立ち上げます。

（以下のコマンドがエラーで失敗する場合、Flipperのバージョンを変更してみてください(Stack Overflow 英語版)）

$ npx react-native run-ios


以下の動画のように動作すれば成功です。もしエラーが発生する場合、「DerivedDataの削除」「iosフォルダ内でpod install 再実行」などをお試しください（詳細はエラーメッセージでググってみてください）。



ここまで書いてきたコードでは、タスクの編集ができません。タスク名を自由に編集できるようにしてみると良いかもしれません（本記事では省略します）。

スキーマ変更時の注意点(schemaVersionとマイグレーション)

アプリストアで配信中のアプリをアップデートする際、データベースのスキーマが変更になる場合、schemaVersion をインクリメントする必要があります。また、必要に応じて、旧スキーマのデータを新スキーマのデータへ移行する処理(マイグレーション)を書く必要があります。

例として、TaskのisDone を変更してみます。ここまで、タスクの完了状況はisDoneで管理してきました。isDone はタスクの完了・未完了しか表すことができないため、新しくstatus として、タスクの状態を以下の3つに分類できるようにしてみます。


Open : タスク未着手
InProgress : タスク進行中
Complete : 完了


スキーマを書き換える

./realm.js に書いた Task のスキーマ定義を以下のように変更します。この作業はスキーマ定義を直接書き換えます。

// 略
const taskSchema = {
  name: "Task",
  primaryKey: "_id",
  properties: {
    _id: "objectId",
    name: "string",
    description: "string?",
    // isDone: 'bool',
    status: "string", // isDone を削除し status を追加
    createdAt: "date",
    subTasks: "SubTask[]",
  },
};
// 略


マイグレーション処理を書く

./realm.js ファイルを保存し、React Native開発環境を再度実行すると、コンソールに以下のようなエラーが表示されます。

Error: Migration is required due to the following errors:
- Property 'Task.isDone' has been removed.
- Property 'Task.status' has been added.


このエラーメッセージを日本語に訳すと以下のようになります。


  エラー: 以下のエラーのため、マイグレーションが必要です

  - プロパティ 'Task.isDone' が削除されました

  - プロパティ 'Task.status' が追加されました


このようなエラーが表示された場合、./realm.js ファイルにある openRealm 関数内の config 定数を以下のように書き換えます。

// 略

// Realmの初期化
export const openRealm = () => {
  const config = {
    schema: [taskSchema, subTaskSchema],
    // schemaVersion: 1,
    schemaVersion: 2, // ① schemaVersion を 1 → 2 へ変更

    // ②マイグレーション処理を追加
    migration: (oldRealm, newRealm) => {
      // 現在保存されているデータの schemaVersion が 2 未満の場合に実行
      if (oldRealm.schemaVersion < 2) {
        const oldObjects = oldRealm.objects('Task');
        const newObjects = newRealm.objects('Task');
        // 全TaskデータのisDoneをstatusに変換
        for (const objectIndex in oldObjects) {
          const oldObject = oldObjects[objectIndex];
          const newObject = newObjects[objectIndex];
          newObject.status = oldObject.isDone ? 'Complete' : 'Open';
        }
      }
    },
  };

  return new Realm(config);
};

// 略


このファイルを保存し、再度アプリを実行すると、マイグレーションが実行され、データベースが更新されます。まだ isDone がコード上で使われているため、必要に応じて status を使うように修正を行ってください（本記事では省略します）。

ここでのポイントは以下の2点です。

① schemaVersion を 1 → 2 へ変更

Realm にデータベーススキーマが変更になったことを伝えるため、schemaVersion をインクリメントします。schemaVersion は、データベーススキーマに変更がある場合のみ変更します。一度 schemaVersion の値を増やした場合、この数値を減らさないでください。

② マイグレーション処理を追加

ユーザーのスマホ内に保存されている古いスキーマのデータベース内のデータを、新しいスキーマのデータベースに変換する処理を書きます。多くの場合、oldRealmのデータをもとに、対応するnewRealm内のデータを全部書き換えるようなコードになると思います。もしくは、optional ではない新しいプロパティが追加された場合、そのプロパティの初期値を設定するコードになると思います。

RealmデータベースGUIで操作できる「Realm Studio」

最後に、Realm Studioを紹介します。Realm Studio はWindows、Linux、macOSに対応したRealmデータベースの管理アプリです。Realm Studio を使うことで、Realmデータベースの中身をGUI上で確認・操作することができます。

Realm Studioは、Realm 公式サイト内にあるRealm Studioのページからダウンロードできます。Realm Studio を初めて起動するとメールアドレスの登録画面が表示されるのでメールアドレスを登録します。その後、以下の画面が表示されます。



この画面が表示されたら [Open Realm file] をクリックし、Realm ファイルを開きます。Realm ファイルのパスは、以下のコードをApp.js等に書いて実行することで確認できます（コンソールにファイルパスが表示されます）。

import {openRealm} from './src/realm.js';
console.log(openRealm().path);


無事ファイルを開けると、以下のような画面になります。この画面から、データの確認・編集ができます。



おわりに

React Nativeアプリでオフラインデータを扱うライブラリとしてRealmを紹介してみました。クラウド上にデータを置かないアプリ開発の参考になれば幸いです。

参考文献


MongoDB Realm React Native SDK



ReactNativeアプリを多言語化する方法 (react-intl)
2020-04-29T12:27:54+09:00


はじめに

アプリの国際化に伴い、多言語に対応する必要が出てくると思います。

Reactを使っている場合、react-intlを利用すると簡単に実現することが可能です。

この記事では以下のことをやります。


React Nativeで作成したアプリを多言語に対応させる
端末の言語設定に沿って翻訳する
英語と日本語に対応する
英語の翻訳情報がない場合は日本語が表示されるようにする
サポート外言語が設定されている場合は日本語が表示されるようにする


react-intlとは？

Reactアプリを国際化するためのライブラリです。

文字列、日付、数字など様々なフォーマットに対応しています。

フックが用意されていたり、結構柔軟に対応できます。

環境情報


macOS
React Native (0.60.5) 
Typescript (^3.8.3)
react-intl (^4.1.1)
yarn
cocoapods


セットアップ

サンプルプロジェクト作成

$ npx react-native init LocalizationSample --version 0.60.5  --template react-native-template-typescript
$ yarn add react-intl
$ yarn add intl
$ yarn add lodash @types/lodash
$ yarn add react-native-localize
$ cd ios
$ pod install



intlは、ReactNativeでreact-intlを利用する時に必要なので入れます。
react-native-localizeは、端末から言語設定を取得するために入れます。
lodashは、あとでincludesメソッドを使いたいので入れます。


動作確認

$ cd LocalizationSample
$ npx react-native run-ios
$ npx react-native run-android


iosとandroidのシュミレーター で「Welcome to React」と表示されたらOKです。

※ androidは先にシュミレータを起動しておく必要があります

ロケールファイルを作成する

プロジェクト直下にja.jsonとen.jsonを作成してください。

ja.json

{
  "title": "ホーム",
  "name": "{name} 様",
  "message": "こんにちは"
}


en.json

{
  "title": "HOME",
  "name": "Mr/Ms {name}"
}



{}で文字列を囲むと、その文字列をkeyに値を外から差し込めるようになります。
en.json側にmessageが存在しませんが、あとで日本語にフォールバックされることを確認したいのでこうしています。


言語設定を取得する関数を用意する

プロジェクト直下にi18n.tsxを作成して、言語設定を取得するgetLocale()を記述します。

import * as React from 'react';
import * as RNLocalize from 'react-native-localize';
import {includes} from 'lodash';

const SUPPORTED_LOCALE = ['ja', 'en'];
const DEFAULT_LOCALE = 'ja';

const getLocale = (): string => {
  const locales = RNLocalize.getLocales();
  const languageCode = locales[0].languageCode;

  if (includes(SUPPORTED_LOCALE, languageCode)) {
    return languageCode;
  }

  return DEFAULT_LOCALE;
};



SUPPORTED_LOCALEの値がアプリで対応する言語です。
RNLocalize.getLocales() から端末の言語設定を取得しています。
取得した言語がサポート外ならばデフォルトロケールを返すようにしています。


翻訳情報を返す関数を用意する

まず、先ほど作成したi18n.tsxでロケールファイルをインポートします。

import ja from './ja.json';
import en from './en.json';
...


次に、翻訳情報を返すgetMesseges()を追記します。

...
const getMessages = (locale: string): {[key: string]: string} => {
  switch (locale) {
    case 'ja':
      return ja;
    case 'en':
      return {
        ...getMessages('ja'),
        ...en,
      };
    default:
      throw new Error('unknown locale');
  }
};
...



'ja'が引数に指定された場合、日本語の翻訳情報を返します。
'en'が引数に指定された場合、英語の翻訳情報を返します。ただ、欠落している部分は日本語が入るようになっています。こうすることで英語がないとき日本語にフォールバックすることができます。


IntlProviderを設定する

react-intlを利用するため、アプリのルートコンポーネントをでラップする必要があります。

また、Intlポリフィルも合わせてimportする必要があるので、i18n.tsxでをラップした作成して、それをApp.tsxで呼び出すようにしたいと思います。

まず、i18n.tsxの一行目でポリフィルをインポートします。

import 'intl';
import 'intl/locale-data/jsonp/ja';
import 'intl/locale-data/jsonp/en';
...



import 'intl/locale-data/jsonp/ja';は、サポートする言語が増えるたび、同様に追加する必要があります。今回は日本語(ja)と英語(en)だけです。これをインポートしないと起動したときにIntlが見つからないよと怒られます。


次に、i18n.tsxにをラップしたを返すコンポーネントを作成します。

childrenを受け取るようにするので、指定する型(ReactNode)をインポートしておきます。

...
import {ReactNode} from 'react';
...
export const IntlProviderWrapper = ({children}: {children: ReactNode}) => {
  const locale = getLocale();
  return (
    
      {children}
    
  );
};
...



localeには翻訳するロケールを指定します
messagesにはロケールファイルから取得したJSONオブジェクトを渡します。こうすることで、でラップしたコンポーネントで、keyに紐づく値を取得することができるようになります。


次に、App.tsxを開いて、作成したでルートコンポーネントをラップします。

import * as React from 'react';
import {SafeAreaView, Text} from 'react-native';
import {IntlProviderWrapper} from './i18n';

const App = () => {
  return (
    
      {'Hello'}
    
  );
};

export default () => {
  return (
    
      
    
  );
};


これで設定DONE。

実際に翻訳してみる

を使うことで文字列の翻訳ができます。

FormattedMessageをインポートして、の中身を以下のように変更します。

...
import {FormattedMessage} from 'react-intl';
...
const App = () => {
  return (
    
      
        
      
      
        {{name: '太郎'}} />
      
      
        
      
    
  );
};
...



idには、keyを指定します。
valuesには、差し込む値を指定します。ちなみに、HTMLも差し込めます。

※ こちらには、文字列以外の対応方法も載っています。


実行結果

端末の言語設定を英語にして実行した場合のキャプチャです。

en.jsonには、messageというkeyがないので日本語にフォールバックされてます。



メソッドの引数などに翻訳した文字列を使いたい場合

useIntl()フックを使うことで実現できます。

import {useIntl} from 'react-intl';
...
const {formatMessage} = useIntl();
const name = formatMessage({id: 'name'}, {name: '太郎'})


みたいに使えます。

最後に

最後まで読んでいただきありがとうございます。

誰かの参考になれば嬉しいです。

この記事に書いたコードは、GitHubに全て上げました。

参考

https://github.com/formatjs/react-intl


ReactNativeアプリを作り始めました。
2019-05-18T21:52:15+09:00
背景

アニメ視聴遅れ管理サービスを作っているのですが、ReactNativeアプリで好きなアニメランキングを作りはじめました。

これがランキングを作る際の番組選択画面にあたります。

(warningが出てるのは許してください....。)



GraphQLでサーバからデータを取得する

以前、ReactでGraphQL APIにアクセスするという記事を書いたので今回は割愛します。

今回作成したクエリはこちら。

${year} で取得したい年を渡しています。

クエリの内容としては、${year}で指定した番組のタイトル、画像URL、annict上の番組ID、シーズンを視聴者数順にソートして返します。

let query = gql`{
        searchWorks(
          seasons:["${year}-spring","${year}-summer","${year}-autumn","${year}-winter"],
          orderBy: { field: WATCHERS_COUNT, direction: DESC }
          ){
          edges{
            node{
              title
              image{recommendedImageUrl}
              annictId
              seasonName
              seasonYear
            }
          }
        }
      }`


長すぎるタイトルを省略する

TextコンポーネントにこんなPropsがあるらしい。

【React Native】三点リーダーでテキストを省略

今回使ったProps。

numberOfLines={3}
ellipsizeMode="tail"


番組データを3カラムで表示する

deprecatedになっているListViewを使っているところは気になりますが、FlatListに読み替えてしまえばかなりの良記事だと思います。

React Native の ListView で２カラムの表示を簡単に

番組画像に作品タイトルをオーバーレイさせる

元々UIに疎かった私。

画像に半透明のレイヤーを被せてその上に文字を表示するのを何というかということも知らなかったので、「画像　文字　のせる」というところからググりはじめて「オーバーレイ」と呼ぶことを知ったので、「react native overlay text」でググると...。

How to place a text over image in react native?



Imageコンポーネントはchildrenを持てないようなので、

ImageBackGroundコンポーネントを使います。

実装まとめ

今回行った実装の一部です。

Imageコンポーネントに画像URLを渡していますが、

空文字やnullなどは怒られてしまうので条件分岐をさせて回避します。

これで作品画像にタイトルがオーバーレイしたリストを3カラムで表示させることができます。

return (
        {{ flex: 1, paddingTop: 20, backgroundColor: '#dddddd' }}
          contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
          data={store.getState().data}
          renderItem={(rowData)=>{
            let image
            if(rowData.item.node.image !== null){
              image = (
                
                  }}>
                    {{
                      fontWeight:'bold',
                      backgroundColor: 'rgba(255, 255, 255, 0.8)',
                      width:(Dimensions.get('window').width - 20) / 3 - 20

                    }}
                    numberOfLines={3}
                    ellipsizeMode="tail"
                  >{rowData.item.node.title}
                  
                  
              )
            }else{
              image = null
            }
            return (
              
                {image}
              
            )
          }}
          />
      )

「ReactNative」の記事 - Crieit

React NavigationをTypescriptと一緒に使う際につまづいたところ

navigate('Hoge')でエラーが出る

モバイルアプリ開発フレームワーク

React NativeでローカルデータベースRealmを使ったスマホアプリをつくる

ReactNativeアプリを多言語化する方法 (react-intl)

ReactNativeアプリを作り始めました。

`navigate('Hoge')`でエラーが出る