iOSとandroidアプリを同時に開発!一石二鳥なスマホアプリフレームワークreact-nativeの使い方

iphoneやandroidのスマホアプリを開発する為に、それぞれの言語を学んで開発するのはとても大変ですよね。今回は、iosとandroidアプリをまとめて一気に開発できるreact-nativeというjavascriptのライブラリをご紹介します。

react-native

react-nativeは、javascript言語を使ってスマホネイティブアプリケーションの開発が行えるfacebookが開発したシステムです。react-nativeは名前の通りほぼreactと同じように開発を進めることが出来ます。

使い方

使える機能だということがわかったら、とにかく何か作ってみましょう!

今回は、簡単にreact-nativeの開発を始められるcreate-react-native-appというフレームワークを使ってやって見たいと思います。パッケージはyarnコマンドを使って進めて行きます。

https://github.com/react-community/create-react-native-app

// まずはグローバルにcreate-react-native-appをインストール
yarn global add  create-react-native-app

//create-react-native-appでプロジェクトを作成
create-react-native-app (your_app_name)

//プロジェクトのディレクトリに移動
cd (your_app_name)

// 起動
yarn install
yarn start

 

以上でアプリケーション側の起動は完成です!!!

それではiosシミュレータを使ってどのように起動されているか確認して見ましょう。

動作確認

macユーザーの方はiosシミュレーターで動作を確認する為に、xcodeというアプリ開発の為のソフトをダウンロードする必要があります。ダウンロードがお済みでない方は、app storeからダウンロードしてください。

expo

create-react-native-appでは、expo https://expo.io/ というシステムを使うことによって、xcode上でworkspaceを開かなくても実機テストができるようになっています。xcodeを開くと、PCのかなりの負荷がかかるので、この機能はかなり重宝されます。

先ほどのyarn startによる起動画面で、表示されているexp://から始まるurlをクリップボードにコピーするかどこかにメモるようにしてください。いくつかコマンドを入力するような選択肢が現れていると思いますが、今回はiosでシミュレーションを行うので、ターミナル上でiと入力してください。すぐに新しい画面に切り替わり、実機テストの準備がされます。

続いて、iosシミュレーターの操作に移ります。safariを開いて、先ほどメモしておいたurlを検索ボックスに貼り付けてください。expoのアプリケーションが起動してbuildが始まるはずです。

buildが完了するとアプリのデフォルト画面が表示されます。うまく表示できたら、これでcreate-react-narive-appで作ったアプリを実際に動かすテストは完了です!これ以降はreact同様にソースコードを書いて行けばアプリケーションを作っていくことが出来ます。

開発の注意点

react-nativeは、ほとんどreactと同じように開発を行うことが出来ますが、<div>タグなどは使えず、react-nativeで用意されている<View>タグ等を使う必要があります。https://facebook.github.io/react-native/docs/getting-started.html このあたりはreact-nativeの公式ドキュメントを読んだ方がわかりやすいと思うので、英語に抵抗のない方はこちらも参照して見てください。

typescript

開発の際にtypescriptを使用したい場合、create-react-native-appの起動時に以下のようなオプションをつけることで簡単に使いことが出来ます。

create-react-native-app my-app --scripts-version=react-native-scripts-ts

 

まとめ

create-react-native-appを使ったreact-nativeの簡単な使い方はいかがだったでしょうか?

もちろん僕も色々と作っていますが、react-nativeを使った新しいアプリケーションがどんどん生まれてくることがとても楽しみです。