Follow US
facebook twitter
NO. 179
TECH BLOG

【React Native】ゼロからモバイルアプリを作った話

07.22.2022

はじめに

こんにちは。
ライフサポートDiv.で、リフォームマッチングサイト「リショップナビ」のエンジニアをしている山形と申します。
システム全般の改修・開発を行っております。

基本的にバックエンドの開発をメインにしてきた私が先日リショップナビモバイルアプリの実装からリリースまでの工程を全て行いました。今回は私が行った作業内容について書いていきます。

この記事で紹介している「リショップナビアプリ」は各ストアにて配信中です。是非ダウンロードしてみてください!
【iOS版】リショップナビ-リフォーム事例・会社の比較見積もり
【Android版】リショップナビ-リフォーム事例・会社の比較見積もり

作業内容について

1. 背景

まず私個人のバックグラウンドについてですが、PHPをメインにWebサイトのバックエンド・フロントコーディングの設計・実装が主な実務でした。その他、Swiftを利用したiOSアプリの開発、リリース作業を行なった経験はあるものの、チーム作業の一部を担った程度でしたので、一人でゼロからの実装やリリース作業を行ったことはありませんでした。

リショップナビの集客チャネルのひとつとして、モバイルアプリの実装の話が上がり、まずは小規模、最低限で試そうということで、開発は私一人でやることになりました。
モバイルアプリ実装・リリースの経験がチームの中で相対的にあったことと、普段からアプリのプロジェクトがあるならやりたいと言っていたこともあり、挑戦させてもらうことになりました。

2. 今回使用した技術について

使用言語

今回使用した言語はReact Nativeです。
React Nativeとは、Facebookが作成したクロスプラットフォームのアプリ開発用フレームワークです。

主に下記の理由でReact Nativeを採用しました。

  • iOS, Android両方のプラットフォームにリリースしたいという要件だったこと
  • 私個人としてもReact Nativeの勉強をしていたこと
  • チーム内でReact Native実装の経験を持った方がおり、レビューも可能だったこと

React Native で主に使用した技術・ライブラリ

実装で使用した主なライブラリは下記です。

英語のドキュメントが多かったですが、なんとか実装できました(笑)。

React Native実装開始の際にExpoというものを導入するか悩みました。
ExpoはReact Nativeの開発をより便利にしてくれるものです。Expo導入をすることで

  • 同一ネットワーク内であれば実機にQRコードでアプリを配布可能
  • 軽微なアップデートであればストア審査通さずにリリース可能(OTAアップデート)

等々のメリットがあります。
一方でReact Nativeの最新バージョンで使えるはずのライブラリが使えなかったり、Push通知を作り込みたい場合にはExpoは使用できないといったデメリットがあります。
実装開始時点でPush通知実装の予定があり、ejectすること(Expoを使用しないようにすること)が見えていたため、今回Expoは使用しませんでした。

3. リリースまでに行った作業

1.アプリの開発

・実装

先ほどから述べているように、React Nativeを使用してアプリ本体の実装を行いました。ゼロからの立ち上げですので、運用も考えながら進めております。

・デザイン

現在(2022.07)リリースされているver.1.1.0のホーム画面は私がデザインしたものです。
それまでデザイン業務をしたことはなかったのですが、やってみたかったデザイン業務にも、これを機に挑戦させてもらいました。無謀な挑戦に見えるかもしれませんが(笑)、私自身以前勤めていた会社でデザインの研修を受けていたこと、また普段の業務でデザイナーさんによく知見を聞いていたこと、 趣味でデザイン作業をしていたこともあり、挑戦させてもらいました。

リショップナビApp Home画面

2.リリース作業(iOS/Android)

リリースに関連して行った作業は下記です。
(具体的な方法はお調べください)

【iOS】
  • 証明書の作成
  • PC・アプリに証明書を設定
  • App Store Connectにてアプリの情報設定・その他プライバシーポリシー等の設定
  • 審査提出・通過後リリース
【Android】
  • 鍵ファイル作成
  • aabファイルの作成
  • Google Play Consoleにてアプリの情報設定・その他プライバシーポリシー等の設定
  • 審査提出・通過後リリース

悩んだ点・苦労した点

実装

React Nativeの実装は初めてでしたが、JavaScriptを普段使っており、また資料も豊富だったため、Reactの実装においては大きな抵抗感なく進められたと感じています。

そんな中で苦労したと感じた点は下記です。

  • iOSとAndroidの動作が異なる場合がある
  • ネイティブ側の実装(Objective-C, Java)

実装したものをいざシミュレータで動かしてみると、iOSとAndroidで微妙に動きが異なることがありました。ただし、画面上の動きであれば多くの場合React側で書き分けが可能です。
Push通知等デバイス側の操作になってくるとネイティブでの実装が必要となり、特にObjective-Cについてはほとんど知らなかったため難しかったです。React Nativeでの開発でもネイティブへの理解の必要性を感じました。

運用

また(Webの方でも言えることですが)今後の運用を考えながら実装していく必要があり、そこに難しさを感じました。できるだけ負債を抱えないように現在も模索しながら最適化を図っております。

審査

全体通して最も悩んだところはiOS版の審査対策です。iOSアプリの審査は一定レベルの基準があるため、事例を検索すると沢山出てきますので是非調べてみてください。私自身、昔参加したプロジェクトで何度も審査に落ちたことがありました(笑)。

そのためここはかなり慎重に動き、ガイドラインや事例を見ながらチームで話し合いつつ仕様を決めていきました。結果として何度も落ちることはありませんでしたが、今後のアップデートの際も気を付けていきたいと思います。

まとめ

今回、私がアプリリリースまでに行った作業を紹介しました。

知らないことばかりでしたので始めるまでは不安でしたが、新しいことに挑戦させてくれる雰囲気・何を聞いても答えてくれる雰囲気がチームにあったので、安心して取り組むことが出来たと思います。

また、じげんでは毎月一度、社内に所属するエンジニアがなんでも気軽に作ったものや勉強していることの発表をできる場「TGIF(Thanks God it’s Friday)」という会があり、アウトプットの機会も用意されています。
アプリの実装が始まった時からTGIFでアプリ開発の内容を社内向けに発信し、チーム外からも温かく見守ってもらいました。参加自由な会ですが、アプリ実装開始してからは連続で出場しています(6ヶ月連続出場達成しました!)。普段開発業務のみで完結してしまうところを、自分で作ったものを発信する場、プレゼンテーションを練習する場としても大変有用で、チーム外メンバーとの会話の機会も広がります!

以上となります。
ここまでお読み頂きありがとうございました!


SHARE
  • facebook
  • twitter

現在募集中の関連求人はこちら

  • Jobs 【中途】《ライフサポートDiv.》バックエンドエンジニア

    summary
    • 募集概要

      求人、自動車や住まいなど、ライフイベント領域における最良な意思決定をサポートするインターネットメディアを運営する弊社。
      中でも、2020年2月にM&Aによりじげんグループとなった株式会社アイアンドシー・クルーズは、同年7月に新しい組織「ライフサポートDivision」として、じげん本社のライフメディアプラットフォーム事業本部に統合。

      市場規模も大きくEC化、DX化の普及が追いついていないリフォーム・エネルギー業界を基軸に、新規領域にも積極的に進出し、「生活機会の最大化」を目指しています。

      今回はライフサポートDiv.でよりサービス改善を推進していくため、バックエンドエンジニアを募集致します。

    • 仕事内容

      ライフサポートDiv.で運営する「リショップナビ」のサービス改善における開発実装をお任せ致します。
      ・新規施策の実装
      ・A/Bテストを用いたデータ・ドリブンでの開発
      ・案件データベースのパフォーマンス改善


      ※スキル・ご経験により開発ディレクションやUI/UX改善等もお任せ致します。

       

      <扱う商材>
      「見積もり依頼件数、業界NO.1」のリフォームマッチングサービス
      リショップナビ
      リフォーム会社の比較検討メディア(見積もり依頼数:10,000件/月 累計加盟会社数:2,500社)

       

      <開発体制>
      事業の企画~開発、実装までを全てインハウスで進めており、多種多様な事業を少人数で開発している組織のため、状況に応じて複数のプロジェクトを同時進行で動かしています。
      タテ・ヨコ・ナナメ、エンジニアだけにとどまらず、様々な職種のメンバーとコミュニケーションを取りながら、自分自身で施策を推進し、成果を出すところまでの一連の流れに関わることができます。
      様々な業務を通してマルチに活躍できる人材へのステップアップが可能であり、エンジニアリングを強みとしつつ、技術サイドとビジネスサイドのバランスを取りながらスキルを伸ばしていける環境です。

      また、ベトナムには弊社グループのみに向けたオフショア開発を行っているZIGExN VeNturaという子会社があり、国内には開発の拠点として沖縄にも支店があり、それぞれ交流も活発に行いながら進めています。

       

      <仕事の魅力>
      ・フルスタックにスキルを身に付けることができます。
      ご志向によっては、バックエンドのみならずフロントエンド開発・インフラ・ディレクションと守備範囲広くご活躍頂くことが可能な環境です。
      フルスタックエンジニアを目指したい方には絶好の環境であり、キャリアパスの選択肢も幅広くご用意しています。

       

      ・ユーザーファーストに焦点を置いたサービス開発の考え方を学べます。
      技術だけでなくWebサービス全体を深く理解するために、Webマーケティング・UI/UXの視点や、データを元にした事業開発の視点が求められます。
      リリースで終わりではなくグロースまで裁量を持っていただき、分析・解析する力、他職種と柔軟に連携し、チームで企画立案・進行を行うスキルを身につけることが可能です。

       

      ・年功序列ではなく実力主義であり、新卒/中途に関係なく成果を出せば上位ポジションに登用される環境です。

       

      <主に使用している技術等>
      *言語
      PHP, JavaScript,TypeScript,SCSS
      *フレームワーク
      Laravel, CakePHP, jQuery, Vue.js
      *環境
      Linux, Nginx, AWS, Docker, GCP
      *データベース
      MySQL
      *プロジェクト管理
      GitHub
      *支給マシン
      MacBook Pro 16inch
      *開発手法
      アジャイル スクラム

    • 応募条件

      【必須スキル】
      ・PHP/Laravelによる開発経験2年以上

      (2年未満の方もスキル・業務経験によって考慮します)
      ・Dockerでの開発経験

       

      【歓迎スキル】
      ・AWS環境での開発経験
      ・html、css、sass、Javascriptなどによる開発経験
      ・アジャイル開発経験
      ・提案から設計及び実装まで一気通貫した開発経験
      ・ReactNativeを使用したアプリ開発
      ・React.js/Vue.js/Nuxt.jsなどモダンフレームワーク
      ・検索エンジン(SolrやElasticSearch)の知識/経験

    • 雇用形態

      正社員

    • 試用期間

      3カ月
      ※試用期間中の待遇などに変更はありません。

    • 勤務地

      東京都港区虎ノ門3-4-8

    • 勤務時間

      フレックスタイム制
      ・コアタイム:10:00~16:00
      ・フレキシブルタイム:(始業)7:00~10:00 (終業)16:00~22:00
      ・1日の標準労働時間:8時間
      ※所属長の判断により、10:00~19:00等の固定シフトとなる可能性がございます。

    • 休日・休暇

      完全週休2日制(土日祝)、夏季休暇、年末年始休暇
      年次有給休暇(時間単位での取得も可能)

    • 想定給与

      月給:333,334円~583,334円
      ※固定残業手当(45時間分):86,706円~151,735円を含む。

      ※45時間を超過した時間外労働の残業手当は追加支給。
      ※採用時のポジションにより、試用期間終了後、
      別途役職手当・管理監督者手当を支給する場合あり。

      上記はあくまで想定であり、ご経験・スキルを考慮して決定いたします。
      (給与改定年4回)

    • 待遇

      【保険】
      各種社会保険完備(雇用・労災・健康・厚生年金)

       

      【交通費】
      全額支給

       

      【受動喫煙防止のための取組み】
      屋内原則禁煙(喫煙室あり)

       

      【福利厚生・社内制度】
      ・関東ITソフトウェア健康保険組合
      ・ベネフィットステーション
      ・社内クラブ活動支援
      ・リファラル採用決定でインセンティブ支給
      ・誕生日月にAmazonギフトカード1万円分支給
      ・社内交流イベント(全社会、シャッフルランチ等)
      ・N-minutes(1日20分間昼寝ができる)
      ・資格補助制度
      ・服装自由

      ・在宅勤務制度有 等

    • 選考フロー

      書類選考 → 一次面接 → 適性検査+二次面接 →(最終面接)→ 内定

      ※面接はオンラインで実施いたします。
      ※適性検査については一次面接通過のご連絡後、最終面接までにオンラインで受験いただきます。(15分程度)
      また、選考の合否は適性検査結果のみで判断されることはありません。
      ※決裁権限者や特定のポジションでの採用の場合、内定通知前にリファレンスチェックを実施させて頂いております。ご理解頂けますと幸いです。

    • よくあるご質問

      こちらをご覧くださいFAQ

Top