いにしえの昔、スマートフォンアプリの開発には iOS向けアプリでは Objective-C が、Android向けでは Java が使われていました。現在ではだいぶ様子が変わっていますので、開発トレンドを整理してみます。
スマートフォン向けアプリケーションの開発スタイル
スマートフォン向けアプリケーション開発手法には大きく分けて以下の２つがある。
Native 開発
- iOS の場合は Swift、Android の場合は Kotlin が採用されるのが主流となる
Cross platform 開発
- React-native で開発するスタイルと、Flutter（フラッター）で開発スタイルが主流となる
- 1つの言語、1つのプロジェクトで iOS アプリと Android アプリが同時にできてしまうのが魅力である
- React-native の場合は TypeScript ですべての開発ができてしまう
- React の Webアプリ開発のノウハウを活用することができるので弊社の場合は採用しやすい
- Flutter は Google製の開発プラットフォームで Dart という言語を用いる
- Dart は JavaScript の代替言語として開発されたが普及せず、Google社内でも TypeScript が標準言語になってしまった
- Flutter の普及にともなって Dart がふたたび注目されるようになった
Cross platform 開発のデメリット
Native レベルの詳細な設定をすることはできない。
React-native の採用例
なんとなくこれが主流なように思われる。
React-native 開発の Tech stack
- TypeScript
- Redux Toolkit
- グローバルな状態管理に使用する
- Expo
- React-native の開発を支援してくれるツール
- 開発環境の構築やビルドの際に使用する
- FireBase や Supabase などの BaaS
開発環境構築
Node.jp
macOS に LTS版をインストールする。Docker コンテナでの運用を試したがうまくいかず、今のところはコンテナなしで利用している。
VSCode
Firebase と Supabase
アカウントを用意してプロジェクトをつくっておく。
Xcode
AppStore よりインストール
yarn
- sudo npm i -g yarn
expo-cli
- sudo npm i -g expo-cli
- expo init (プロジェクト名)
Redux Toolkit
- yarn add @reduxjs/toolkit
- yarn add react-redux
tailwind-rn
- yarn add tailwind-rn
React native navigation
- yarn add @react-navigation/native
- yarn add @react-navigation/native-stack
- expo install react-native-screens react-native-safe-area-context
- yarn add react-native-gesture-handler
- yarn add react-native-elements
開発サーバ、シミュレータ起動
- expo start
- localhost:19002 にブラウザからアクセス
- ブラウザから iOS simulator、web browser を起動
