BlogRELATIONS株式会社の開発ブログです。Storybookこんにちは。RELATIONS株式会社の久原です。弊社では「ええ会社をつくる」というミッション実現のために、様々な新規事業の仮説検証を行っています。この度、とある検証のためのスマホアプリを開発することとなり、私が開発を担当をすることになりました。私はWebのフロントエンドエンジニアではありますが、スマホアプリの開発経験はほぼゼロの人です。そこで今回は「自分のフロントエンドスキルセットを活かしつつ、最速でスマホアプリをリリースするためには、どうすればよいか?」を色々と試行錯誤した結果を綴ってみたいと思います。Apps)じゃダメなの?Web技術でスマホ対応と聞いて、Webエンジニアとして真っ先に思いつくのは、「PWAで実装できるんじゃない?」という話なのですが、今回の要件として「iOSでのリリース」「プッシュ通知が仮説検証のためのコア機能」という2点があり、アプリとしての実装が必須でした。近い将来、プッシュ通知などを含めたPWAが実現できる環境が(特にiOS側に!)整っていると良いなぁ...と思っています。NativeとExpoを採用しました。これによって必要な知識の多くをWeb技術でまかなえたことから、素振り0.5ヶ月、フロント1ヶ月、バックエンドを含めても合計2ヶ月ほどで、ドッグフーディング版をリリースできました。NativeとExpoを使って、開発がとても早くできたよ!という事例も、数多く見かけるようになってきたと思います。NativeとExpoを採用した場合、Webエンジニアとしては、どのあたりの知識が差分になり、どこを学習すれば良いか、という勘所を中心にお伝えできればと思います。「最速で仮説検証するために、最小のコストでリリースできる」ことを技術の選定基準としました。私はWebのエンジニアなので、特に「可能な限りネイティブの知識を学ばずに済む」ようにすることがコストの削減につながると考えました。ここをWebの知識(HTML/CSS/JS)だけで済ませたい。Cordovaなどの環境が挙げられるかと思います。NativeとExpoを使用することを選択しました。Native(以下、RN)はFacebook製のフレームワークで、JavaScript(以下、JS)記述のみでiOSやAndroid向けのスマホアプリを開発することができるものです。ベースはReactであり、その主要知識であるJSX・state/props・ライフサイクルメソッド・イベントハンドリングなどは、RNでもReactと同じ知識で実装が可能です。Webエンジニアとしては、Reactに関する知識があれば、ただ「ビルドターゲットをスマホに向けるだけ」という感覚で開発が可能になります。コードはすべてJS記述になるので、ロジック部分はそのまま流用でき、多くのコードベースを活かすことができます。ExpoはRNの開発環境です。CLIとライブラリ群を提供しています。CLIとしてのExpoは、スケルトン生成から、ビルド、ライブリロード、デプロイ、実機テスト、リリースまでの開発のすべてのフローをサポートしてくれる、強力なツールチェインになっています。Webエンジニアとしては、create-react-appのnative版+リリースツールだと認識いただければ、ビルドやリリースなどの部分をwebpackやcreate-react-appに任せて、自身はアプリの機能開発に集中できることが想像できると思います。加えてライブラリとしてのExpoは、ネイティブUI、プッシュ通知などのラッパーを、JSのインターフェースにて提供しています。これひとつで多くのネイティブ機能がJS記述だけで追加できるという、非常に便利なライブラリになっています。まとめると、RNとExpoを使えば、開発フロー全体はExpoに任せつつ、全体の記述をJSで、UIの記述をReactベースで行えることになります。多くの知識をWeb技術から流用できそうです。PrettierRNとExpoによって、ReactでのUI記述や、JS記述のロジックなど、多くの技術がそのままスマホアプリへ転用できることがわかります。Firebaseネイティブ固有のUIやナビゲーション、メディアの活用、デバッグ手法など、Webの概念と微妙に異なる知識もあります。次章では、この知識の差分を埋めるために学習した、32のコトをご紹介していきます。NativeExpo前述の通りです。インストールは非常に簡単で、npmコマンドだけで終わります。作成するだけで、すぐに開発が開始できます。留意点として、Expoはアカウント登録が必要になりますが、登録するとExpoサーバへデプロイが可能になり、実機テストやコードのパブリッシュも容易になりますので、メリットのほうが強いです。Navigationは、アプリ内での遷移部分を担当します(react-routerのポジション)。URLリンクでの遷移ではなく、アクションを起動してスクリーン間を遷移させるような記述法になります。Middlewareで紐つけておいてSagaなどから叩く」かになります。みたいな指示が実質的に可能です。});}ナビゲーションの種類としては、push遷移型のスタック(戻れる)と、replace遷移型のドロワー、タブ、スイッチなどがあり、それらをネストさせて組み上げることが可能です。RootNavigator;ナビゲーション用のUIも提供されます。ドロワー・ヘッダ・タブなどがあり、Navigatorコンポーネントに自動付与されます。Navigationの非常に良い点でした。react-native-loading-spinner-overlayNativeBaseは、ReactベースのUIフレームワークです。Material-UIやSemantic-UIをご存知であれば、同様の書き心地で記述ができます。環境ごとのネイティブUIを適切に使ってくれますし、テーマの設定や、styled-componentsによる個別上書きも可能でした。JSを使うことになります。styled-componentsがRNに正式対応しており、CSS的な記法でスタイリングが可能です。レイアウトについてWebとアプリで考え方が異なる点は、Webの場合は溢れた要素を縦方向に流しますが、アプリの場合は一画面に収まるように要素全体をスケーリングする場合が多いことです。react-native-responsive-fontsizeの2点を使って、画面幅基準の%指定によるレイアウトを行うようにしました。}};`;ログインボタンモーダルについては、Webでは擬似的なものなので無限に重ねられますが、アプリの場合はシステムモーダルを使う関係で、RN側で1枚制限などがかかります。表示切り替え時にアニメーションを入れた場合は、切り替え後のモーダルが表示制限に引っかかって表示されず、waitが必要だった、なんていう問題が出たりしますので注意が必要でした。etc.画像やアイコン、フォントなどについては、Webと同じように遅延読み込みされます。気をつけたい点としては、Webの世界では初期レンダリング時にコンテンツが完全表示されないことは一般的な事象ですが、アプリの場合はアセットをすべてダウンロードしてから画面を表示することが多いでしょう。待ち受けてから表示する、というような実装が必要でした。JSでは記述できず、ネイティブ機能に頼ることになります。ExpoがLinearGradientコンポーネントを提供していますので、私はそれを使用しました。アニメーションについてはLottieが推奨されています。</SafeAreaView>);続きは後編にて!まだ半分ほどのご紹介ですが、続きは後編にてご紹介していきたいと思います。コンテンツは以下のものを予定しております。BoltでTODOア...こんにちは。最近RELATIONSにジョインしました鍋山です。RELAT...2019-03-27Webエンジニアがスマホアプリをリリースするまでに学んだ32のコト(後編)こんにちは。RELATIONS株式会社の久原です。使ってジオフェンスとプッシュ通知を組み合わせてみましたこんにちは、RELATIONS株式会社の大川です。U...2019-01-23ExpoとFirebaseを使った、サーバーレスでのプッシュ通知配信の検証続きあけましておめでとうございます!RELATIONS株式会社の大川です...2018-12-28マネジメント支援のSaaSプロダクト「Wistant」のバックエンド技術スタックを紹介しますこんにちは、RELATIONS奥宮です。今年も残りあとわずか。はてなブログProRELATIONS株式会社のエンジニアメンバーによる開発ブログです。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。