人気記事セレクション


Amazon プライムとPrime Studentがガチでメリットだらけ。【破格の月額204円】無料お試しもできる!

 

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

 

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

そんな君にはReactNativeをおすすめするよ!

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

はじめに

 

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

 

また、学部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を使ってiosやandroidのアプリ開発ができるサービスです。

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

 

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

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

 

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万超える...??



人気記事セレクション

1. TED Talksで英語学習をするのは割とおススメなのでやってみて欲しい!
2. 都会の大学か田舎の大学か、どちらも通った僕がメリットを挙げてみた
3. 人の話を聞いて一発で理解できない理由を考えてみた。
4. 1週間に渡る研究室バトルに決着がついた話
5. TOEIC860点の人間が英語力がどれくらいなのか調べてみた。診断サイトと言えば...

 

おすすめの記事
SponsoredLink