0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React Nativeでスマホアプリ開発【まずやったこと】

Posted at

ほぼ初心者でスマホアプリの開発してます。
プログラムに辿り着く前の環境構築に手間取ったので残しておきます。

〜使用するソフトをMacPCにインストール〜

【アプリのUIデザイン】Figma
【コーディング】VisualStudioCode
【シミュレーター】ExpoGo(iphoneにインストール)or XcodeでiOS版のシミュレーターが可能。
※AndroidStudioでAndroid版のシミュレーターも利用できる。
【開発ログ】Gitで適時コードのログを残す。少しの書き足しでエラーになるため頻繁にログを取って引き返していた。

〜アカウント登録が必要〜

Figma、Expo、Git

〜それぞれの機能〜

ReactNative:様々なプラットフォームに対応する言語。iOS、Android、WEBのいずれも共通言語で開発できる。ただし細かい部分では気をつける点もある。
Expo:ReactNativeで開発をするうえで便利なプラットフォーム。
まずシミュレーター機能がある。これ以外にもReactNativeの「React Navigationライブラリ」を派生させた「Expo Routerライブラリ」があったりする。

〜大まかな流れ〜

1.まず「Figma」でスマホアプリのデザインを具体的に描写する。画面遷移まで詳しく考えておくと「アイコン(戻るボタンとか)」が必要なページに気づける。
2.実際にコーディングして、結果をシミュレーターで確認する。
3.完成したらビルド(コードを元に実行可能なアプリとして組み立てられる作業)してリリースする。

〜環境構築〜

・開発用のフォルダを新規作成
・Expo:新規パッケージインストール(template:TypeScript)
 ※インストール後は中身に不足がないか確認しておく。
・必要になりそうなライブラリをインストール(expo routerとか主要なものはまとめてインストールした)
・Git:ログを連携して遡れるようにする。
・Node.js:JavaScriptの実行環境(NVSでバージョン管理すると後々便利)
・VSCodeを開いてコーディング作業に入る。(新パッケージで起動すると信頼できるフォルダなのかポップアップで確認される)

〜注意点〜

【Gitログ関係】
メールアドレスがログの一部として公開されるため、ダミーのアドレスを生成することもできる。
ログをパブリック設定にした場合はKEYやID関係を「.env」にまとめてGitの追跡対象から外す。

〜よかった点〜

色んなライブラリがあり、探せば望むものが見つかりそう。
比較的楽に環境環境が用意できた。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?