こんにちは！モニクルのエンジニアの久慈です。
先日、モニクルの開発合宿にてReact Nativeを用いてアプリ開発する機会に恵まれたので、振り返りも兼ねてブログを書いています。
きっかけは？
モニクルでは2023年度から開発合宿を行なっています。(2023年度の開発合宿の詳細はこちら)
合宿で何をするかを計画する段階では、今年度の開発合宿では昨年同様、まずは開発部のメンバーが開発合宿で取り組みたいアイデアをブレストする形で始まりました。ちなみにブレストはfigjamで行いました。
そのブレストの最中に一つ「これをやってみたい！」と私に刺さるアイデアがありました。
それは同僚のなかざんさんの「React Nativeを使ってアプリ開発をしてみよう！」というものでした。私は早速このアイデアに賛同して、チームメンバーになる流れになりました。
- 実際のfigjam上でのブレストの様子
React Nativeを使ってアプリ開発をしてみたいと思った主な要因は以下の二つになります。
アプリ開発をしてみたい！
今までのキャリアを振り返ってみた時に、開発してきたのは全てWebで動作するアプリケーションでした。また、Webを中心にサービス提供を行っているモニクルでは、AndroidやiOS向けのアプリを作る機会というのはなかなかありません。
加えて、普段の生活ではiPhoneでさまざまなアプリを使用していることや、私がエンジニアであるということもあり、心の中では常にアプリ開発をしてみたいと考えていたので、今回の機会がとても貴重に感じられました。
Reactの知識・経験は生きるのか？
普段から業務で触っていて、自身の中では最も経験の長いJS/Reactの知識と経験をどれだけReact Nativeでのアプリ開発に活かせるのか？そういった興味が湧いてきていました。
何を作ったの？
ちょうど本社のエントランスで呼び鈴に使っているiPadアプリをリプレイスすることになっていたので、そちらを今回の開発を通して実装することになりました。
基本的な動作としては、アプリの画面上に出ているボタンを押すと、Slackの所定のチャンネルに「お客さんが来ているから迎えに出てね」と投稿する、といったものです。
開発合宿後、このアプリは無事にモニクル本社で利用され始めました！
ですので、出社すると自分達が作ったアプリが迎え入れてくれることになります！感動！
P.S. 後日、合宿の詳細についてはモニクル合宿レポート本が出ますのでお楽しみに！
React Native、触ってみてどうだった？
合宿初日では、まずは腕試しがてら簡単なコンポーネントや、少しばかりの状態管理をもったページを実装していきました。
少し書いてみて気づいたことは、、
「Reactじゃん！！！」
そうです。普段触っているReactと、初めて触ったReact Native。両者ともに名前にReactを冠しているだけあって、Reactなのです。もちろん普段使っているReactがデフォルトで提供しているuseEffectなどのフックは使え、カスタムフックの定義方法や呼び出し方などのデータの受渡に関する実装はReactとほとんど同じで、スムーズに実装することができました。
その流れのまま、画面に表示するコンポーネントの実装もスムーズに行くかなと思いきや、そうはいきませんでした。React Nativeに関して、事前に「React経験者はちょっとコンポーネントの種類にクセがある程度の違和感がある」となかざんさんからお伺いしていたように、クセがありました。例えば普段はMUIを利用してReactを実装していますが、そのコンポーネントとReact Nativeで用いるコンポーネントの命名が違っていたり、また名前から推測したコンポーネントの挙動とは違った振る��いをしてしまったり、、と、特に最初は要素の配置にてflex周りで手こずりました。
最初は手こずったものの、React Native公式ドキュメントのCore Components and APIsを確認しつつ、適宜試していくことで少しずつ慣れながら実装を進めていくことができました。その後、最終日には、大体このコンポーネントを使ってこんな画面表示ができる、ぐらいには頭の中で整理をすることができている状態に持っていくことができました。
今回のアプリ開発への挑戦を通じて、時々耳にする「Reactの知識や経験があればReact Nativeでアプリ開発がすぐできちゃうよ！」を身をもって体感することができました。
最後に
開発合宿を通じて、ずっとやってみたかったアプリ開発ができて嬉しかったです！
また、「自分たちで作ったアプリが人に使われる」、そんな体験をできて嬉しく思います！
作成したアプリに関しても、デザインチームの多大なる協力があり、見た目がとてもオシャレなアプリに仕上げることができたので、次回出社した時に呼び鈴アプリを使うのを心待ちにしています！
Discussion