Zenn
😀

React Nativeハンズオン〜事前準備編

2021/03/26に公開
React Native
初心者
tech

初めに

この資料はReact Native ハンズオンの第一回目の資料の事前準備編として書いています。
イベントに参加した人が後から見返せるように、イベントに参加していない人も読めるようにテキスト形式で書きます！！

本編はこちら！

React Native？

ハンズオンでみなさんに覚えて帰ってもらうものですね！！

Reactというweb界隈で大人気のライブラリを使ってアプリを作ることのできるフレームワークです。

昔の小話

ひと昔前にはHTML5アプリとかが流行ることがありました。これらはブラウザの仕組みそのものを使ってアプリを作るアプローチなので、webの画面を使っているという意味ではwebなんですよね。
また、世の中にはガワネイティブと呼ばれる、webViewを使ってwebページをバンバンアプリの中に使っていくような作り方をしているアプリもあります。

要するにこれらはアプリ・・・・なんだけどweb・・・・？　といった少し不思議な立ち位置のものになります。

React Nativeは？

通常のアプリ開発は、

  • iOS -> swift, Objective-C
  • Android -> Kotlin, Java

という言語を使うことが多いです。これらを使うとそれぞれのOSにある部品を使うことができるようになります。たとえばボタンだったり、ドラムロールだったり、カレンダーだったり・・・・。なんかiOSならいかにもiOSっぽいもの。AndroidだったらいかにもAndroidっぽいものってありますよね。それっぽくなるっていうのはOS側が用意してくれているものを使っているからなんです。

それらに対してReact Nativeがとっているアプローチは違います。
小話のところで少し触れたアプリたちはブラウザの仕組み（DOMとよばれるものになります）を使っていました。
しかし、今日学ぶReact Nativeはなんと、JavaScriptからネイティブのコンポーネントを呼び出します。

なので画面上に描画されるものはまごうことなきアプリなのです！！
といった感じでJavaScriptを書くだけで、ちゃんとしたアプリを作ることができる。それもiOSとAndroidをほぼ同時に・・！！という夢のようなフレームワークがReact Nativeなのです。

How to setup ?

React Nativeの開発に必要なものは

  • エディタ
  • node
  • emulator(または実機）

の三つだけです！！

エディタ

VSCode


多くの開発者はVisual Studio Code(VSCode)を使っています。
ダウンロードはこちらから！！
無料で使うことができ、高機能で一般的なweb開発でも使われることの多いメジャーとも言えるエディターです。

JetBrains


お金を使ってもいい人、あるいは学生はJetBrains製品を検討してもいいかもしれません。
この記事を書いている僕はJetBrains愛好者です（お金はないけど節約しながらかろうじて使っています・・！！）。学生は特定の条件を満たせば無料で使うことできます。
色々な種類がありますが、React Nativeをやる分にはWebStormで十分です（こちらは年間5000円ほどかかりますが、３年目までは年々安くなっていきます）。
初めてプロジェクトを開く時にマシンパワーを必要とするとデメリットと引き換えに、強力すぎる補完機能とサポート機能が魅力の高性能IDEです。使うともう戻れなくなるという最悪な副作用があるかもしれませんが、試用期間が30日ほどあるので使ってみるのも悪くないかもしれません。
ダウンロードはこちらからできます！！

エディタに正解はないのでこれ以外にも試してみたいものがある場合はご自由に！！
よくわからない人は上に紹介してる２つのうちのどちらかを選ぶと間違いありません！！

node

続いてはnodeのインストール手順です。
nodeについては、インストール方法がたくさんあるんですが、絶対的におすすめなのはバージョン管理ツールを入れることです！！
ハンズオンをやっていると古い記事を見て入れたがためにとんでもなく古のnodeが入っている方もいるので気をつけてください。

nodeのバージョン管理ツールもなんでもよくて、割と使われるツールはnodenvなんですが、インストールが簡単（windowsもいける）という点でvoltaで進めていきたいと思います（僕も最近はvoltaを使っています）。

Getting Started

簡単に手順だけ書いておくと

mac

  1. curl https://get.volta.sh | bash をターミナルで実行する
  2. echo 'export VOLTA_HOME="$HOME/.volta"' >> ~/.~/.zshrc　をターミナルで実行
  3. echo 'export PATH="$VOLTA_HOME/bin:$PATH"' >> ~/.~/.zshrc　をターミナルで実行

windows

インストーラー
を入れてインストーラーに従うことでインストールできます。

nodenvを試したい方はこちら

ターミナルってなんですか？

いい質問です！！
よくエンジニアが触っている、通称『黒い画面』ってやつです。
macの場合は実は最初は白い画面なんですが、エンジニアの方は心が黒く染まっているので、ターミナルもエディタもslackも全部黒く染まっていくみたいです・・・。
『コマンド打つ』って言われたら大体この画面のことを指すので覚えておきましょう。

macの人は『LunchPad』から『ターミナル』って検索すると出てきます。
windowsではコマンドプロンプトと呼ばれ、検索窓から検索すると出てきます。
参考までにこんな感じの画面です。

これにファッションセンスみたいなものを問う人もいるので慣れてきたらガンガンかっこよくしていきましょう。

voltaを使ったインストール

ターミナルでvoltaと打ってみましょう。

このような画面が出たらインストールは完了しています。

次に
volta install node@ltsと打ちます。
nodeのインストールはこれで完了です。
nodeがインストールされていることを確認するためにnode -vと打ってみましょう。

このような表示になればセットアップは完了です。

emulator

今回のハンズオンではexpoという超絶便利なツールを使うので、今すぐにでも実機で動かすことができます。
ですが、エミュレーターがあった方が何かと便利なのでぜひ入れておきましょう！！

iOS

iOSのエミュレーターのインストーるはものすごく簡単です。
XcodeをAppStoreからインストールするだけで完了です！！
ただし、めちゃめちゃ時間かかるのでそこだけは注意してください。
またmac以外のPCを使っている人はインストールすることができません。

XCode

Android

Androidのインストールはやや複雑です・・・。
ハンズオンで扱う分にはどちらかのエミュレーターだけ起動すればいいのでこれをやって体力を消耗しそうだなと思った方は、iOSの方を進めていただければ問題ありません！！
またM1マックを使っている人はより一層の注意が必要になります。

Android Studio のインストール

こちらを参考に進めてください。
またM1マックを使っている人は、M1 MacでAndroidエミュレータを動かす

こちらを参考にしてください！！

本編はこちら！

Discussion