2019/11/27Expo + React Nativeによるアプリ開発環境
今までにいくつかスマホアプリを作成しました。 今回はスマホアプリ開発に使っているいくつかのサービスや環境を紹介します。
ざっくりとは以下を使っている感想やおすすめポイントの紹介です。
- React Native
- expo
スマホアプリの開発を簡単にでも初めたい人にとって参考になる情報です。 ちょっと不便に思うことやアイデアがあり、アプリを作ってみようと考えている人におすすめです。
作成したアプリの例
スマホアプリは結構たくさん作成しました。大小全部数えれば10個以上あります。
例えば以下のものがあります。どれもiOS・Android両方で公開しているアプリです。
- コミュニティバス「のっティ」の時刻表アプリ
クロスプラットフォームで開発したアプリです。特別な機能はありませんが、一番最初に作ったアプリです。 - Foldest Note 階層を作って管理できるノートアプリ
sqliteというRDBを使っています。ノートアプリもかんたんに作成できます。 - Coffee memo シンプルメモ帳アプリ
メモごとにテーマを変えられるようにしたり、簡単なシェア機能やクリップボードなどの機能を搭載しました。 メモ帳アプリで利用できそうな機能をいろいろ試してみたものです。
これらすべてのアプリは以下に紹介する環境で作成しています。どれも導入が簡単なのでおすすめです。
React Native
クロスプラットフォーム、すなわちiPhoneとAndroidの両方で動作するアプリを開発できます。
クロスプラットフォーム
以前はそれぞれのOSで使用するプログラミング言語が異なるため、同じアプリを2つの言語で作る必要がありました。現在ではクロスプラットフォーム開発向けの言語や仕組みが整ってきており、とても便利です。
ネイティブでの実装が必要であれば、それぞれの言語に分ける必要がありますが、新しく始める際の入門や、簡単な機能やプロトタイプとして作るのであれば、React Nativeで十分に開発ができます。
Web開発で得た知識を使える
JavaScriptを使ってプログラミングすることになります。 アプリのため、Webとは性質や動作が異なりますが言語そのものの動作は同じです。知識を流用することが出来ます。JavaScriptの基本構文はもちろん、パッケージもアプリ開発に利用することができます。
JSXというHTMLに近いタグベースの構文でUIを作成していくので、その点もわかりやすいです。 要素のスタイルをCSSに似たルールで指定するところも、Webライクですぐに理解できると思います。
Atomic designとの相性が良い
React NativeはReactというJavaScriptのフロントエンドフレームワークを元にして、アプリ開発に対応したものとして作られています。
そのためコンポーネント・ベースの設計に相性がよいです。「Atomic Design」という考え方に沿ってデザインやUIを設計していくと、整理された設計で構築ができ運用・改修もしやすくなるのでおすすめです。
以下の本がとても参考になります。コンポーネント設計はもちろんテストのことなども書かれてました。
expo
React Nativeでの開発を手助けするパッケージ群、ざっくりとはSDKです。
expo
利用するパッケージの例
例えばexpoには以下のパッケージがあります。必要なものをimportして実装できます。 端末の機能へのアクセスも簡単にできるためとても便利です。
- カメラ expo-camera
- 広告 expo-ads-admob
- 位置情報 expo-location
- バーコードスキャナー expo-barcode-scanner
開発がかんたん
expoを利用していると端末での実機テストも簡単になります。
expoが提供するクライアントアプリをストアから端末にインストールしておくと、開発中のアプリのソースをPCからLAN経由で端末に送って動かすことができます。ホットリロードの機能により、ビルドせずとも保存のたびに変更が反映され動作を実機で確認しながら開発できます。
ブラウザで確認しながらWebシステムのコーディングを行うようなイメージです。
エミュレータを使って確認することもできるのですが、私は実機でアプリを動かして確認しています。 AndroidもiOSも両方の端末で動作を確認できます。操作も実際の動作が確認できますし、ログ出力も確認できます。PCの画面も圧迫しなくて済むのでおすすめです。ただ、電池の消耗は激しいです。
ビルドもかんたん
expoはSDKだけでなくオンライン上で利用できるサービスがあり、とても便利です。
アプリのビルドをexpoのオンラインサーバ上でやってもらうことができます。自分のPCやビルド用マシンでビルドする必要がないので、他の作業をしながらでも快適にできます。ただし、expoのサイトにてアカウントを作る必要があります。無料です。
ストアのキーであったり、各ストアのアカウント情報なども管理してくれますので簡単にビルドできます。管理画面から作成されたAAB・APK・IPAをダウンロードできます。
ビルドしたものはオンライン上に公開されており、他の人の作ったアプリなどを専用のクライアントアプリを使うことでストアからダウンロードすることなしに試すことができます。
容量は大きくなりがち
ただし、上記の実機でのホットリロードを利用した確認、expoサーバでのビルドを行うために、expoのSDKをアプリに含める必要があります。その分アプリの容量が大きくなりがちです。
npm
詳細な説明は不要でしょうか。React NativeはJavaScriptのパッケージですので、パッケージ管理ツールとしてnpmを使います。 expoも同様にnpm経由でinstallします。
github
バージョン管理にgithubを使います。こちらも詳細な説明は不要でしょう。
Vim
エディタはVimです。個人的なお気に入りですが、なんでもVimを使っています。 React Nativeで役に立つプラグイン等もそのうち紹介したいと思います。
PCはLinux
OSではUbuntuです。MacやWindowsも利用できるPCを持っていますが、Linuxが一番好きです。
Webシステムであれば利用するサーバーとOSを揃えておくのがおすすめです。ですので、Windowsサーバを使うならWindows使うといいです。
今回はアプリ開発なので、ズバリ何でもよいです。React NativeはJavaScriptを使うので、どのOSでも問題ないです。
あとはワードやエクセルなどのオフィスを使う必要があるのであれば考えたほうがいいです。 そうでなければLinuxがおすすめです。さまざまなアプリケーションがスッキリ動きます。 iOSアプリのapp storeへのipaのアップロードの際にのみMacを使います。
おわりに
React Nativeとexpoの開発環境の紹介でした。
他にも「こんなプラグイン使うと便利だよ」とか実際の画面の動作とかも紹介していこうと思います。 何より日本語の情報が少ないので、敷居の高さを感じている人もいるかもしれません。 試してみるとすごく簡単なのでおすすめです。Webにも対応したり、開発も盛んなのでこれからの発展にも期待しています。
