React Native/Expoに関する動画が多く再生されてを伸ばしています。 そこで、React Native/Expoの学習ロードマップを紹介します。 「TypeScriptでフルスタック開発マスターへの道・家計簿アプリ開発編」でわからないところがあれば、1度紹介している動画をすべて見ていただくと理解が深まります。

REST APIとExpo Routerを使って、スマートフォンのTODOアプリを作る

React Nativeを使ってスマートフォンのTODOアプリを作っています。 アプリで扱うデータは、REST APIを使って管理します。 現在、React Nativeでの開発ではExpoというフレームワークが使われています。 そして、ExpoにはNext.jsのApp Routerのような、Expo Routerという機能があります。 Next.jsのApp Routerを使っているので、Expo Routerを使っていきます。 また、NativeWindを使って、Tailwind CSSを導入します。

Expo SQLiteとExpo Routerを使って、スマートフォンのTODOアプリを作る

SQLiteを使って、スマートフォンのTODOアプリを作っていきます。 実は、TODOアプリを作るのは2回目なのですが、前回は外部APIを使ってデータを管理しました。 前回と違いは、SQLiteを使ってデータを管理することです。 APIとSQLiteの大きな違いは、APIに接続する場合はネット環境が必須ですが、SQLiteを使えばローカル環境でも使えます。 現在、React Nativeでの開発では、Expoというフレームワークが使われています。 そして、Expoには、Expo SQLiteというAPIが用意されています。

今回は、こちらを使って、使い方を見て行きます。 また、Expoには、Next.jsのApp Routerのような、Expo Routerという機能があります。 Next.jsのApp Routerを使っているので、Expo Routerを使っていきます。 また、ExpoがBunに対応しているので、Bunを使って開発します。 Bunは、Node.jsと比べてパッケージのインストールが速く、4倍速く起動できるので開発環境が改善されます。

Expo RouterのTabs layoutを使ってみる

今回はExpo Routerを使ったタブレイアウトの使い方を見ていきます。 以前、React Nativeを使ってスマートフォンのTODOアプリを作りました。 そこでは、Expo Routerという機能を使いました。 その中の機能で、タブレイアウトという機能があります。 これは、スマートフォンアプリの下部にある、メニューのようなものです。 よく使われているので、タブレイアウトを見ていきたいと思います。