ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

ゆっくり始めるReact Native① ~環境構築①~

先週、3日ほど掛けて簡単な英単語アプリをReactNativeで作成しました。

ざっくり環境を説明すればexpoCLI+スマホの内部ストレージ(AsyncStorage)でほぼUdemy教材の写経しました。

ただか写経されど写経と言った感じで、現在まだV0.61という若さなのでとてつもない速度で情報が古くなる。

僕が今回教材として選んだのは、https://www.udemy.com/course/react-native-ios-android/

めちゃくちゃ良い教材で、かなりオススメできます。

理由は

①プロのデバッグが見れる

②プロのコーディングが見れる

③公式のドキュメントからコードを引っ張ってくる

等の生の操作が見られることです。

最終的には自分が必要な処理を公式のドキュメントから探さないといけないけど、「入り口として最強」だと思います。

なぜPWAが流行っている中、スマホアプリなのかというと、音声とかタッチとか最終的にスマホの機能を最大限に引き出せるものが作れたら面白いと思うからです。

実は今現在G’sではPHPに入ったところなのですが、スマホアプリ作りたかったので、課題をそこそこにして全力でアプリ開発にチャレンジしてみました。

完成品

ReactNative初アプリ画像

初マイアプリ・・・嬉しい。

ってことで環境構築いってみましょう。

最初に、僕が書く記事は初学者として、「こう捉えた」という、感想みたいな部分がありますので、気になった部分は調べてみてください。

1Node.jsのインストール

公式サイトから「Node.js」のダウンロードしてインストールしてください。

ダウンロードするのは安定している方のバージョン(数字が小さい方)がオススメみたいです。

ちなみに僕の環境は

$ node -v

v12.4.0

Node.jsはよくjavascriptのバックエンドみたいな言われ方で耳にしたことが多かったです。

色々なところでCDNで取り込んで使ってきたライブラリなどは、実はnpmというコマンドを使ってインストールすることができます。

Nodeをインストールするとそいつが使えるようになります。

パッケージっていうのは、ようは「アプリケーション」のことで、それをインストールすると便利な機能が実装できますよっていうことです。

2ReactNativeのひな形(expo)をインストール

expo cliのインストール

$ npm install -g expo-cli
$ expo --version

3.4.1

expoはReactNativeの開発やビルドを支援してくれるサービスです。

https://expo.io/

最初困惑したのですが、React-native-cliと、expoではできることが違うというか、文法とかコンポーネント以外は別物という考えで情報を得ないと1つを実装するのにもえらい時間がかかってしまいます。

たかが英単語アプリ1日で終わる・・・と思っていた時期が私にはありました。

ドキュメントは友達。

とりあえず1回目はここまで。ご視聴ありがとうございました。