1
2

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.

2019年度下期 React Nativeでアプリ作る①

Last updated at Posted at 2019-12-31

■ はじめに

ずっと手付かずだったアプリ作り。
年末年始の休みを利用して何か動くものを作ってみる。

以下のサイトを参考に進める。
https://dev.classmethod.jp/client-side/javascript/yuru-fuwa-react-native/

それに付随して、以下、ReactNative,Expoの公式ドキュメントを参照。
https://facebook.github.io/react-native/docs/getting-started
https://expo.io/

■ Node.js他もろもろの導入

最新化もしたかったので、下記サイトから最新安定板のNode.jsをダウンロード&インストール
https://nodejs.org/ja/
12.14.0 LTSを導入。
※後日追記:12.14.0だと、本記事後半のエラーにぶち当たるので12.4.0を推奨。
 下記URLからダウンロード可能。
https://nodejs.org/download/release/v12.4.0/

下図のようなインストーラになっているので、適宜チェックや必要事項を読んでインストールする。
image.png

インストール完了後、npmコマンドが使えるようになっているので確認。
image.png
インストールしたnode.jsは12.14.0なのに違うバージョンが表示されていると混乱しがちだが、node.jsとnpmはまた別ものなので問題なし。(Node.jsと一緒にインストールされるパッケージ管理ツールがnpm。詳細は割愛。)

次に下記サイトからPythonをダウンロード&インストールをする。
https://www.python.org/downloads/
なんとなく安定してそうな3.7.6を選択。
インストール過程は割愛。インストール時に「Pathに追加」にチェックを入れると、インストール完了後、コマンドプロンプトから呼び出せるようになる。はず。
image.png
とはいえ、今回Pythonは上記画像のような形では使用しないので、コマンドプロンプトから使用確認できなくても問題なし。
ReactNativeの開発ツールに必要っぽい?

次にnpmコマンドを使用し、実際のReactNative関連のツールを導入する。
image.png
いろいろ勝手にやってくれる。
image.png
なんか警告いっぱい出てるけど無視。
もうひとつWebViewも導入しておく。
image.png
image.png
すぐ終わった。

ツールの導入は以上。

■ Hello,World!する

とりあえずHello,World!がしたいので、プロジェクト作成する。
image.png
なんかいろいろ聞かれるけどblankを選択。
image.png
なんか名前を決めるらしい。
image.png
とりあえずStosiAppで。
image.png
いろいろ始まる。Git入ってないよって言われたが、時すでに遅し。
今回は使わない。今後の影響については不明。
image.png
プロジェクト準備OK!
image.png
cd SatosiAppしてnpm startする。
image.png

■ エラーった

なーにがいけないんでしょうねー。
image.png
本当であれば、ブラウザからいろいろ便利な奴が使えるらしいのだが。。。
image.png
ログ見てみた。
image.png

よくわからない。
cmdさかのぼってみたけど何かがダメなことしかわからない。
image.png
現在時刻は2020年1月1日 深夜2:30 頭も回らないので、今回はここまで。

■ まとめ

今回やったこと
・ツールの導入
・テストアプリの作成(未遂)

次回やること
・エラーの解消
・テストアプリの作成

以上

次回:https://qiita.com/satosingo5/items/eae80242c4e79e8388d0

1
2
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
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?