この記事は、【Windowsユーザー&&実機のiphoneを持っている】という方向けの記事です。

iosアプリ開発してみたいんだけど、windows じゃなぁ...

そんなあなたに、React Native + expoをおすすめするよ!

以前、短期のインターンシップに行ったときに強い人にお勧めされたのでとりあえず開発環境を整えて、実機でテストできるところまでやってみました。

はじめに

windows subsystem for Linuxを使っていて、bash上でnpmなどのコマンド指示を出していたのですが、保存されるファイルの場所が悪いのか、pathがうまく設定できていないのか、wslじゃできないのか、errorが止まらなかったのでwindowsのcmdを使

また、学部3年の知識レベルなので所々抜けていたり間違っていたりするかもしれません。その際はご指摘お願いいたします。

超絶初心者記事になってしまいすみませんm(__)m

Node.js をインストール

Node.js

DOWNLOADS -> Windows Installerをクリック

f:id:michinoins:20180910180041p:plain

f:id:michinoins:20180910180255p:plain

特にデフォルトを変えることなくNextで進めていってインストールします。

f:id:michinoins:20180910180345p:plain

インストールが完了し、コマンドプロンプトでnode --versionでバージョンが見れればokです。

before

f:id:michinoins:20180910180221p:plain

after

f:id:michinoins:20180910180546p:plain

React Nativeの開発環境を作るのにとりあえずこれだけやりました。

f:id:michinoins:20180910205513p:plain

Expoとは

React Nativeを使ってiosandroidアプリ開発ができるサービスです。

Javascriptで書いてiosで動かせるってすごいですよね(小並感)

大きなポイントとしては、PC上でコードを変更すると即座にスマホ上に反映がされるという所です。

Expoをアカウント登録&ダウンロード

expo.io

サインアップをします。

Expo — Signup

デスクトップ用のアプリを用意します。

Releases · expo/xde · GitHub

ここから xde-Setup-2.24.4.exeをダウンロード(2018/09/10時点)します。

インストールが完了したら先ほど作ったアカウントでログインし、Projectを作成します。

f:id:michinoins:20180910181436p:plain

まぁまぁ時間がかかります。

f:id:michinoins:20180910183615p:plain

Projectを作成するとこのような画面になります。

f:id:michinoins:20180910181222p:plain

Expo Clientをダウンロード

実機でデモをするために、iphoneにExpo Clientをダウンロードします。

Expo Client on the App Store

そうしたら、デスクトップ側でShareボタンからe-mailか電話番号でiphoneと繋げます。

QRコードはうまく機能しません(2018/09/10)

f:id:michinoins:20180910184556p:plain

メールかSMSで送られてきたリンクに飛ぶとこのような画面が出てきます。

f:id:michinoins:20180910185558p:plain

bundleしてくれるので少し待ちます。(bundle=いくつかのファイルを一つにまとめてくれる)

f:id:michinoins:20180910185234p:plain

これで後はコードを書くだけです。

ちなみに、本体を振ると詳細ページに移ります。

f:id:michinoins:20180910185143p:plain

環境準備はこれでok...

コードをいじってみてリアルタイム変化を体験

試しにApp.jsの内容をいじってみます。

f:id:michinoins:20180910191239p:plain

テキストと、cssをいじってみると...

f:id:michinoins:20180910211835p:plain

iphone側も同時に表示が変わりました。

windowsでもiosアプリ作れるぞー!!すごい!!expo!

まとめ

iosアプリはSwift

androidアプリはJavaかKotlin

でしか書けないと思っていたので僕にとってはとても革新的な発見でした。

とはいえ、僕の説明がかなりガバガバなので、興味があればこちらの本で勉強すると良いと思います。僕も買いました。

環境構築から、エディター選びについても書いてあります。

初心者にとても易しい...!

 

人気記事セレクション

1. 2回目のTOEICで880点取れたので勉強法や使った参考書をうんぬんかんぬん
2. 大谷翔平選手と茂野五郎ってどっちが強い?? 経歴を比べてみた
3. 腰への負担が少ない座椅子を発見した!これでブログ作業もプログラミングも順調に...
4. 4ヶ月のアパレルバイトで身についたこと
5. 【大学編入】編入学でかかった費用まとめ...機会損失含めたら50万超える...??

おすすめの記事
SponsoredLink