ウェブインパクトエンジニア IT番長ブログ

自己紹介

東京コアののムンと申します。
マレーシアクアラルンプール出身です、現在東京に在住しております。
当ブログは自分が担当した当社のアプリ開発の記事を述べています。
宜しくお願い致します。

---

新雲堂

入社後に初めて上司に任せて頂いた作業は「雲堂」というアプリのiOS版を開発することになりました。 その後、お客様から、新しいバージョンのご依頼があり「新雲堂」プロジェクトが開始しました。今回、アプリを着手するにあたり、どのようなモバイルアプリフレームワークがよいかを、上司やエンジニアたちで検討がされました。その結果、「React Native」を採用することにしました。

---

React Native

Facebookが開発したiOSとAndroidのアプリが作られるJavaScriptのフレームワークです。JavaScript言語一つだけで、OSに関わらず両方のプラットフォームで動くものが作れます。私は当社のReactJSを使っている別の案件をやったことがありましたので、Reactの経験がある人にとって勉強しやすく長い時間が必要ありません。また、JavaScriptはWeb界隈ではよく使う言語なので、他の言語と比べると開発メンバーが集めやすく学習コストも低いです。

---

開発環境構築

React Nativeの公式サイトによるとプロジェクトの作成は「Expo」と「Building Projects with Native Code」の二つの方法があります。最初は「Expo」の方法を使いましたが、仕組と使い方の勉強はかなり時間がかかりますので、「Building Projects with Native Code」の方式でプロジェクトを始めました。

プロジェクトの作成手順は基本的に以下の通りです（macOS端末向け）。

1. npmでreact-native-cliをインストール

   npm install -g react-native-cli

   ＊「Building Projects with Native Code」の場合は予めXcodeとAndroid Studioのインストールが必要です。

2. ターミナルでプロジェクトを作成

   react-native init New_Undo

3. 実行＆デバッグ

   react-native run-ios

   react-native run-android

   この二つコマンドどちらを入力しても動くはず、または各プラットフォームのIDEでネイティブ方式のように実行することも可能です。

   ＊Androidの場合はアプリ起動する前、エミュレータが起動中の状態が必要です。

   React Nativeはアプリ起動中でもリロードする機能があります。

   • Xcodeのシミュレータで、Command+Rで実行します。
   • Android Studioのエミュレータで、Control+M（macOSの場合はCommand+R）で設定を呼び出して「Enable Hot Reloading」を選択し、ホットリロードを有効にします。

---

開発体験

React Nativeは基本的にフロントエンドの技術ですが、一部のライブラリを使う時に少しネイティブコードを書くこと場合もあります。ネイティブのコードと言っても、GitHubでそれらのライブラリを作られていた開発者のREADMEに記載があるのでそれに従えば問題ないと思います。

JavaScript開発者が今まで使っていたライブラリはReact Native開発でも適用可能なので、これはJavaScript開発経験がある私にとって優しく親しみがある環境です。この点はReact Native開発において、かなり楽な点だと思います。さらに、Viewのコードを少しだけ変更した場合は再ビルドせず、React NativeのHot reloadingを使うと、コードの変更はシミュレータに伝達され、直ぐ変更後の結果が確認できます。海外だけでなく、日本国内にもReact Nativeのコミュニティが拡がっています。国内は勉強会が常に行っていて、問題に直面し悩む時に、世界中の開発者と意見を交換したり手伝って貰ったりできます。

意外にReact Nativeのアプリを開発する時に足りない部分が多いです。iOSは充実していますが、Android側の方が少なく、コンポーネントが両方でも対応できるライブラリを追加しなければいけないです。例えば、各プラットフォームのUIを補助したければ、UIコンポーネントがまとまった「Native Base」を使います。但し、開発中はライブラリを入れすぎましたら、将来的にどのライブラリがメンテナンスするか、結構大変だと思います。

元々React Nativeは生JavaScript用に開発されましたが、今回は型付きのTypeScriptを使うことにしました。TypeScriptでコードを書くと、当社の他のエンジニアにとってコードを読みやすくなり、良くないコードを未然に防げます。これは将来のプロジェクトメンテナンスに対して、非常に便利で有利です。今回は、TypeScriptを導入する方法として「react-native-typescript-transformer」というライブラリを使いました。

「雲堂」の開発で使っている主なライブラリは以下の通りです：

• Native Base – UI補助
• React Native Safe Area View – iPhoneX端末対応
• React Native Sound – 音声を流す
• React Native Splash Screen – スプラッシュ画面
• React Native TypeScript Transformer – TypeScript対応
• React Navigation – 画面遷移
• Redux – 状態管理

---

注意点

React Nativeを使う時に注意しなければいけないこともあります。個人の開発体験によって簡単に説明します。

慎重にライブラリを選ぶ

相応しい高質なライブラリを選ぶことは検討が必要です。例えば、不具合の発生が多かったり頻繁にメンテナンスしていないライブラリは開発者にとって少し不安があります。他の開発者が勧める人気があるライブラリを採用した方がいいです。その上、ライブラリの使い方がドキュメントではっきり書いてあることも重要です。

各端末のUI対応

端末によって縦横の大きさは違いますので、UIが崩れる場合があります。タブレットとやスマホに関わらず、ユーザに快適なアプリ体験をさせるため、違和感がないUIを表示することは大事です。

画面遷移の設計

XcodeやAndroid Studioを用いたネイティブ開発と違って、Interface Builderや、画面遷移を定義できるツールなどは提供されていません。なので、画面のナビゲーションやデータの渡し方はどういう風に動作するかわかりにくいです。開発を始める前に、予め画面遷移のモックアップを設計した方がいいと思います。それをしなければ、アプリの規模が大きくなると各画面の対応が難しくなってしまいます。

ファイルやディレクトリ構成

プロジェクト作成の最初は垂直分割の構造でしたが、ファイルが散らかっていて、大規模な構成になった時に管理しづらく大変です。水平分割の構造をすると、ファイルがページごとのディレクトリ配下にまとめて管理しやすくなります。ファイルの役割もわかりやすいし、プロジェクトの構造も整理整頓に見えます。

---

まとめ

近年ではReact Nativeの人気が上がっていますので、経験がある開発者は結構多いです。雲堂の基本実装は二週間程をかかりました。開発完了の時間は思ったより早かったです。自分のフロントエンド能力はあまり得意ではなく、一番難しかったところはReact NativeのLayoutを調整することです。コードから反映した結果は各プラットフォームのUI表示が異なる場合がよく発生します。それだけでなく、アプリの状態管理「Redux」の実装も上手くいかなかったです。公式ドキュメントを読んでも、その仕組をなかなか理解できませんでした。しかし、実際にコードを書くことによって理解することができました。

初めてクロスプラットフォームのアプリを作ったので、開発の過程で色々な知識を身につけました。特にTypeScriptの書き方やデータの状態管理は元々私がやったことがなかったものです。React Nativeを全く触ったことがない私にとっては今回のアプリが作れたことはすごく達成感があります。