4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでアプリを開発できることを知り、環境構築し新規アプリ開発に臨むまで

Last updated at Posted at 2019-11-02

#概要
普段はReact NativeでiOSアプリを開発してます

今回は、初心に帰りiOSアプリを作る際あとあとAnd/roi/dでも作ることを見越してなにかいいフレームワークないかなと作る前に調べた結果ReactNativeを見つけiOSアプリ実装してきたことを思い出しつつその過程のメモを共有していきます

#環境構築...を行う前に
MacOSにて、
基本的にReactNativeに沿って構築していきます

が下記手順を行う前に長時間かかるであろう、[Xcode]
(https://apps.apple.com/jp/app/xcode/id497799835?mt=12)を並行してインストールし環境構築時間の短縮を試みましょう

#環境構築
では改めて構築していきます

ReactNativeを動かすためのライブラリをHomebrewでのインストールを行います
Homebrewがない場合はこのコマンドから

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

あればこれらのコマンドを打ちます

brew install yarn
brew install node
brew install watchman
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

続いて、npmでのインストールを行います 上記インストール時にはnpmは明記されてませんがnodeインストール時に一緒にされているので扱うことが可能です

npm install -g react-native-cli

上記インストールで全て必要なものが揃いました
以上でReactNativeの環境構築は終了です

#開発開始
ではさっそくReactNative製iOSアプリ開発の第一歩を踏んでいきます

mkdir rn_workspace ; cd $_ 
#rn_workspaceに移動する
react-native init FirstApp  --version 0.54.0
#rn_workspaceにてFirstAppという名前でReactNative構成フォルダを生成する

コマンドが終了したら、下記のようにコマンドを打ちアプリをMacOS内のXcodeシミュレータで起動します

cd FirstApp
react-native run-ios

以上で開発を行えるようになりました

以降は先ほど生成された構成フォルダをAtomSublime TextなどのReactNative言語に対応したプラグインの存在するテキストエディタで編集し円滑な開発をしていきましょう

#参考文献
React Native: getting-started

Homebrew

4
0
1

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
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?