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

# 三行で

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

+ この記事見つけた

https://qiita.com/HorieH/items/b0d05db95633c86fba7b

+ 実機で動いた

https://twitter.com/Scythercas/status/1628653230128533505?s=20

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

https://vitalify.jp/app-lab/app-development/react-native/

:arrow_down:  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用実行環境です。

https://honmushi.com/2019/01/31/react-native/

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


## 簡単にテスト
https://snack.expo.dev/

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

![expotest.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2666100/d924768f-faa1-7142-a3eb-118829c3ffb6.jpeg)

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

試しに、`App.js`の14行目付近を下のように修正してみる
```diff_jsx
  <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`する。
```diff_jsx
- import * as React from 'react';
+ import React, { useState } from 'react';
```

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

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

`+`ボタンを設定する。
`react-native`からの`import`に`Alert`, `Button`を追加する
```diff_jsx
- import { Text, View, StyleSheet } from 'react-native';
+ import {
+   StyleSheet,
+   Alert,
+   Text,
+   Button,
+   View
+ } from 'react-native';
```
Textタグの下に以下を追加する。
`onClick`ではなく`onPress`であることに注意
```jsx
<Button 
    onPress={()=>{increment()}}
    title="+">
</Button
```
`increment`関数を記述する
```jsx
const increment = () => {
    setNum(num+1);
}
```
実際に変数`num`の値を画面上に表示する記述をする
```jsx
<Text style={styles.paragraph}>
    {num} 回押したよ
</Text>
```
これで`+`ボタンはちゃんと動作し、目に見えるようになった。

---
他の`-`ボタンと`0`ボタンはついでみたいなものなので、雑に説明する。
```jsx
<Button
  onPress={()=>{decrement()}}
  title="-">
</Button>
<Button
  onPress={()=>{returnToZero()}}
  title="o">
</Button>
```
それぞれの`onPress`関数も記述する
```jsx
const decrement = () => {
if(num>0){
  setNum(num-1);
}else{
  Alert.alert('マイナス禁止')
}
}
const returnToZero = () => {
  setNum(0);
}
```
これで動画通りになったはずです。
<details><summary>コード全体を表示</summary>

```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',
  },
});

```
</details>

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

# 参考

https://qiita.com/seira/items/f063e262b1d57d7e78b4

https://qiita.com/HorieH/items/b0d05db95633c86fba7b