【ReactNative】Expo Snack触ってみた【感動】

三行で

• スマホアプリ作ってみたい。

• この記事見つけた

• 実機で動いた

解説

ReactNativeとは

Facebook社が開発したアプリケーションフレームワークでクロスプラットフォームのひとつ。

chatGPTに聞いてみた

React Nativeは、JavaScriptとReactを使用して、iOSやAndroidなどのモバイルプラットフォームでネイティブなアプリケーションを構築することができるオープンソースのフレームワークです。React Nativeは、開発者にとって使いやすく、モバイルプラットフォームのユーザーエクスペリエンスを向上させることができます。

Expo Snackとは

Write code in Expo's online editor and instantly use it on your phone.

「Expoのオンラインエディタでコードを書き、即時にスマホで実行させよう。」とあります。
ブラウザ上のReactNative用実行環境です。

chatGPTに聞いてみた

Expo Snackは、React Nativeアプリを作成し、共有、実行するためのオンラインIDEです。Snackを使用すると、ブラウザ上でReact Nativeアプリを作成し、即座にデバッグしてプレビューすることができます。これにより、React Nativeアプリを開発するために必要な環境設定を手動で行う必要がなくなります。また、Expo Snackは、作成したアプリを簡単に共有できるようにするため、プロジェクトの共有リンクを生成する機能も提供しています。これにより、他の開発者と協力してアプリを開発したり、コードの共有やレビューが簡単になります。Expo Snackは、React Nativeアプリの初心者から中級者まで、さまざまな開発者にとって便利なツールです。

簡単にテスト

このサイトを開き、右のMyDeviceをクリック
スマホにExpoGoをインストールし、QRコードを読み取る

こんな画面が表示されればおｋ

試しに、App.jsの14行目付近を下のように修正してみる

  <Text style={styles.paragraph}>
-     Change code in the editor and watch it change on your phone! Save to get a shareable url.
+     同期できた
  </Text>

スマホの画面でも「同期できた」と表示されるはず！

冒頭の動画にあったカウンターを実装する。

Cardタグは今回使わないので削除する

useStateをimportする。

- import * as React from 'react';
+ import React, { useState } from 'react';

App関数に以下のように記述する。
状態変数num、状態を変更するための関数setNum、状態の初期値0として、

const [num, setNum] = useState(0);

+ボタンを設定する。
react-nativeからのimportにAlert, Buttonを追加する

- import { Text, View, StyleSheet } from 'react-native';
+ import {
+   StyleSheet,
+   Alert,
+   Text,
+   Button,
+   View
+ } from 'react-native';

Textタグの下に以下を追加する。
onClickではなくonPressであることに注意

<Button 
    onPress={()=>{increment()}}
    title="+">
</Button

increment関数を記述する

const increment = () => {
    setNum(num+1);
}

実際に変数numの値を画面上に表示する記述をする

<Text style={styles.paragraph}>
    {num} 回押したよ
</Text>

これで+ボタンはちゃんと動作し、目に見えるようになった。

---

他の-ボタンと0ボタンはついでみたいなものなので、雑に説明する。

<Button
  onPress={()=>{decrement()}}
  title="-">
</Button>
<Button
  onPress={()=>{returnToZero()}}
  title="o">
</Button>

それぞれのonPress関数も記述する

const decrement = () => {
if(num>0){
  setNum(num-1);
}else{
  Alert.alert('マイナス禁止')
}
}
const returnToZero = () => {
  setNum(0);
}

これで動画通りになったはずです。

コード全体を表示

App.jsx

import React, {useState} from 'react';
import {
  // Platform,
  StyleSheet,
  Alert,
  Text,
  Button,
  View
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';


export default function App() {
  const [num, setNum] = useState(0);
  const increment = () => {
    setNum(num+1);
  };
  const decrement = () => {
if(num>0){
  setNum(num-1);
}else{
  Alert.alert('マイナス禁止')
}
}
const returnToZero = () => {
  setNum(0);
}
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        同期できた
      </Text>
      <Text style={styles.paragraph}>
    {num} 回押したよ
</Text>
      <Button
        onPress={()=>{increment()}}
        title="+">
      </Button>
      <Button
  onPress={()=>{decrement()}}
  title="-">
</Button>
<Button
  onPress={()=>{returnToZero()}}
  title="o">
</Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

あとがき

環境構築も無しに自分のスマホで実行できるとは。
モバイルアプリエンジニアに一歩近づいたようだ
関係ないけどQiitaの記事にchatGPTの発言を引用するのは色々な意味でエンジニア志望として敗北している気がした

参考