こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。
今回はExpoとAndroid Studioを使って、シンプルなアプリケーションをエミュレータ上で立ち上げてみたいと思います。
用語
Expo
React Nativeのためのツールセット。
React Nativeでのアプリケーション開発を簡単にするためのもののようです。
React Native
Reactをベースにしたフレームワーク。モバイルアプリケーションをJavaScriptやTypeScriptで開発するためのものみたい。
React
Webアプリケーションの開発に使用されるものらしい。JavaScript/TypeScriptを使用していることから、PythonでいうDjangoと関係性は近いのかなぁ？ひとくくりでは表現出来なさそうですが。。。
HTML/CSSをJavaScript/TypeScriptに埋め込んで書けるみたいです。
・・・ふ～ん・・・なんのメリットがあるんや・・・埋め込めるようになったら可読性下がって逆に難しそうだが・・・まぁ触っていくうちにわかるか・・・？
この辺りの利便性云々は普段インフラしている側の人間にはわかりませんね汗
TypeScript
変数に型（数値とか文字とか）を定義できるようにしたものらしい。Javaで考えると変数を設定する際に"int"とか"char"とかを指定していたと記憶しているので、JavaScriptでそれを実装するためのものがTypeScriptなんだろうか？と思っておくことにします。
私のイメージの中では以下のような親子関係？がありそうだなぁと感じました。たぶんこんなきれいに切れないんじゃないかとは思っていますが。。。
手順
これはどこでもいいですが、私はWin11のDocumentフォルダ配下にexpoフォルダを作成しここに色々作っていきたいと思います。
まずNode.jsを有効にします。私はNVSを使っているのでそれで有効化。バージョンが出力されればOKです。
Expoを使用するためにはnpxというコマンドを使用する必要があるみたいです。これを使ってExpoCLIをインストールするようです。
npxは最初からNode.jsに含まれていそうです。またこのnpxですが"Node Package eXecute"の略だとかそうでないとか・・・
npx create-expo-app --templateと入力して実行。
対話形式で色々聞かれるので、templateをBlank (TypeScript)、アプリ名をmy-appと回答。
C:\Users\ohtsu\Documents\expo>npx create-expo-app --template
Need to install the following packages:
create-expo-app@2.1.1
Ok to proceed? (y) y
√ Choose a template: » Blank (TypeScript)
√ What is your app named? ... my-app
√ Downloaded and extracted project files.
> npm install
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated @babel/plugin-proposal-export-namespace-from@7.18.9: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead.
added 1218 packages, and audited 1219 packages in 47s
73 packages are looking for funding
run `npm fund` for details
5 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd my-app
- npm run android
- npm run ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac
- npm run web
npm notice
npm notice New patch version of npm available! 10.2.3 -> 10.2.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5
npm notice Run npm install -g npm@10.2.5 to update!
npm notice
アプリ名のフォルダが生成され、中に色々出来ていることが確認できます。なんかDjangoのdjango-admin startprojectコマンドみたいだなぁ（？）
作成されたフォルダに移動してnpx expo startコマンドを実行します。
C:\Users\ohtsu\Documents\expo>dir
ドライブ C のボリューム ラベルは Windows です
ボリューム シリアル番号は F2DC-C792 です
C:\Users\ohtsu\Documents\expo のディレクトリ
2023/12/07 21:58 <DIR> .
2023/12/07 21:49 <DIR> ..
2023/12/07 21:59 <DIR> my-app
0 個のファイル 0 バイト
3 個のディレクトリ 740,551,352,320 バイトの空き領域
C:\Users\ohtsu\Documents\expo>cd my-app
C:\Users\ohtsu\Documents\expo\my-app>npx expo start
初回なのでこんな警告が出てきました。許可を押下します。
CMD上で以下のような出力がされます。"a"を入力しAndroidをエミュレートしてみます。
Andoridが自動でエミュレートされます。またCMDを見てみるとDownload Expo Go App（Expoで作成されたアプリを検証するためのExpo公式モバイルアプリ）と書いていることからエミュレータ上にアプリをダウンロードしていることがわかります。
しばらく待つとAndroidエミュレータ上でExpo Goが起動しシンプルなアプリが立ち上がりました。
作成されたアプリ名のフォルダ内にある色々なファイルを編集したりすることで、アプリの内容を作りこむことが出来るようになるらしいです。
