発表者:

山西とうやさん

マルチプラットフォームとは

一つのコードベースで複数のプラットフォーム（iOS、Android、Webなど）に対応するアプリケーション。

Webの代表的な言語

HTML/CSS/JavaScript: Web開発の基本言語。

iOSの代表的な言語

Swift: Appleが開発したiOSアプリ用の言語。

Androidの代表的な言語

Kotlin: Googleが推奨するAndroidアプリ用の言語。

効率的な開発の方法案

複数のプラットフォームで個別に開発するのではなく、一つのコードベースでiOS、Androidなどに対応することで、開発効率を大幅に向上。

React Nativeとは

Facebookが開発したオープンソースのフレームワークで、Reactと同じコンポーネントベースのアーキテクチャを使用してネイティブアプリを構築。

Expoとは

React Nativeアプリの開発を簡素化するためのツールセットで、ネイティブ機能を簡単に使えるAPIを提供。

Expo SDK

Expoの利点と課題

利点: Reactと同じコンポーネントベースで作れるため、学習コストが低い。
課題: ライブラリ管理が大変で、依存関係の管理が複雑。

Expoの活用方法

Expo SDK: ネイティブ機能を簡単に使えるAPIを提供。
サンドボックスツール: 開発中のExpoアプリをリアルタイムで確認できるモバイルアプリ。エミュレータが不要。

EAS (Expo Application Services)

EAS Build: ビルド配信を行うクラウドサービス。
EAS Submit: アプリの提出を自動化するツール。
EAS Update: アプリの更新を簡単に行うためのサービス。

Expo Routerとは

React Nativeのルーティングライブラリで、Webアプリライクにラップされたライブラリ。ファイルベースルーティングが可能で、ダイナミックルーティングやLayout機能も備えています。

Platform.OS

React Nativeの**Platform.OS**は、アプリケーションが実行されているプラットフォーム（オペレーティングシステム）を識別するために使用されるプロパティです。これにより、プラットフォームごとに異なるコードを実行することができます。

**Platform.OS**は以下の値を返します：

'ios'：iOSデバイス

'android'：Androidデバイス

サンプルコード

以下は、**Platform.OS**を使用してプラットフォームごとに異なるスタイルを適用するサンプルコードです。

import { Platform, StyleSheet, View, Text } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {Platform.OS === 'ios' ? 'This is iOS' : 'This is Android'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    color: Platform.OS === 'ios' ? 'blue' : 'green',
  },
});

export default App;

このコードでは、**Platform.OS**を使用して、iOSでは青色のテキスト、Androidでは緑色のテキストを表示します。また、表示されるテキストの内容もプラットフォームに応じて変更されています。

Back to list

Fusic Tech Live Vol.21