ReactNativeでスマホ向けのアプリを作る ──仙台市主催の「ReactNative初心者向けハンズオン」レポート

仙台市をフィールドに先端技術と様々な産業を掛け合わせ、新事業の創出や先端IT人材の育成・交流によりイノベーションを生み出し、都市体験のアップデートを目指すプロジェクト「SENDAI X-TECH Innovation Project」。その第5弾企画として、2/16(土)～2/17（日）の2日に渡り、仙台市で「ReactNative初心者向けハンズオン」が開催されました。その取り組みとイベントの様子をご紹介します。

仙台でも最新技術を学べる場と交流するコミュニティを

まずは主催の仙台市産業振興課・荒木田理さんから、オープニングの挨拶と、仙台市がこれまで取り組んできた『SENDAI X-TECH Innovation Project』についての紹介がありました。

「仙台ではこれまで先端IT技術を学ぶ場や、エンジニアコミュニティが少なく、わざわざ東京まで行って参加している人もいました。これからは仙台でもそういう場を作っていきたい。このプロジェクトをきっかけにGoとGCPの仙台コミュニティは立ち上がっています。ぜひ、仙台でも先端IT技術を学び、交流できるコミュニティを盛り上げていきましょう」

▲仙台市 産業製作部 産業振興課 荒木田理さん

ReactNativeでスマホ向けのアプリを作ろう！

今回のハンズオンでは、ReactNativeというFacebook社が作ったツールキットを使って、JavaScriptだけでiPhone/Androidに対応したアプリを作ります。

講師を務めてくれたのは、「風呂グラマー」や「IT芸人」の愛称でも著名なProduct Founder & Engineer増井 雄一郎さんです。

▲Product Founder & Engineer増井 雄一郎さん
トレタやミイルを始めとしたB2C、B2Bプロダクトの開発を行う傍、業界著名人へのインタビューや年30回を超える講演、オープンソースへの関わりなど、外部へ向けた発信を積極的に行なっている。日米で計4回の起業をしたのち、2018年10月に独立し"Product Founder"として広くプロダクトの開発に関わる。趣味は、最近始めたDJ。

増井さんとメンターを務めてくれたのは、ReactNativeコミュニティを運営する中田一成さんと茂木亮太さんのお二人です。

▲中田 一成さん
新卒で株式会社オークファンにてエンジニアを担当。その後スタートアップにて一人目のエンジニアとして開発。その後フリーランスになり、ReactやReact Nativeの開発をメインで進める傍ら、ReactNativeコミュニティの運営も行う。

▲茂木 亮太さん
新卒でソーシャルゲーム系の会社に入社する。その後、トゥギャッター株式会社に転職し、ReactNativeで一からアプリを立ち上げ勉強会やコミュニティ運営を手伝うようになる。現在、株式会社サイバーエージェントに転職し、フロントエンドエンジニアとして従事している。

ReactNativeの開発環境を準備する

増井さんは今回のゴールとして、二日間だけでReactNativeを完全に覚えるのは難しいので、手を動かして、自分で書いたものが、自分のスマホで動くことを体験してもらい、自己学習のきっかけとしてもらえればと前置きし、講義を始めました。

「スマホアプリにはいろんな作り方があり、ネイティブの方がパフォーマンスもいいし、OS特有の機能も使えるが、開発が難しいなど、それぞれメリット・デメリットがある」と増井さんは語ります。

• ネイティブ
• Webアプリ
• PWA（Progressive Web Apps）
• がわアプリ（Cordova）
• マルチプラットフォーム（Unity、ReactNative）

今回ハンズオンで学ぶReactNativeは、React.jsをベースにしたマルチプラットフォーム開発環境で、JavaScript（ES6）とJSXで書くツールキットで提供されています。

主なメリット・デメリットは以下の通りです。

＜メリット＞

• 両方に向けて一度に作れる
• 使い慣れた言語を使える
• 開発ツールが使いやすい

＜デメリット＞

• 使えない機能がある
• 機能差を考えて実装する必要がある
• ツールの提供が終わると死ぬ

ReactNativeは、通常XcodeやAndroid Studioなどのnative開発環境やAppleIDなどを設定が必要ですが、expo.ioをインストールすれば必要ありません。expo.ioとは、ReactNative用の開発環境で、専用プレイヤーを入れればXcodeなしでも実機で稼働します。また、コードを書き換えるとリアルタイムに反映されます。

そこで今回のハンズオンではReactNativeの開発をより簡単に行うためにExpoとExpo Snackを利用します。expo snackを使うことで、ブラウザだけでReactNativeの開発環境を構築することができます。まずはexpo/expo snackを使うために、expoアカウントを作成し、expo clientをスマートフォンにインストールします。

午前中はこうしたReactNativeを開発するための環境を準備し、事務局で用意したお弁当を食べて、午後からはいよいよ手を動かしてのハンズオンに移ります。

必要なパッケージをインストールして、入力フォームを追加

午後からは実際にコードを書きながら、ReactNativeを学んでいきます。今回作るのは、TODO管理のアプリ。GoogleのFirebaseを使って、ネットワーク上のサーバーにTODOデータを保存し、他端末やネットでも共有できるようにします。また、ReactNative ElementsというエミュレータのライブラリでiPhoneやAndroidなど、様々な端末でも見た目が崩れないように、作っていきます。

まずはExpoの設定などを行い、ReactNativeElementsをインストール。その後、入力フォームを追加し、App.jsの文章を書き換えるなどの体験を行いました。実際にコードを書いた後に、増井さんから詳しいコードの解説をしてもらうことで、より理解を深めていくスタイルでハンズオンは進んでいきます。

続いて、入力ボタン用のカスタムアイコンライブラリ「react-native-vector-icons」をインストールし、入力フォームを追加。必要なライブラリを読み込み、必要なコードやconstructorやrenderに必要な関数を追記したり、スタイルの変更なども実践しました。メンターの中田さん、茂木さんの熱心なサポートもあり、順調にハンズオンの課題を進めていく参加者の皆さん。

TODOリスト表示のフォームを追加する

次のステップでは、TODOリストにタスクを追加するためのフォームを追加する手順を学びました。複数のタスクを表示させるためには、App.jsにライブラリを追記し、表示確認用のダミーデータを追記します。リスト表示の関数とチェックボックスやリストなどのスタイルを追加します。

Firebaseのプロジェクトを作成する

続いてのハンズオンは、Firebaseの設定とプロジェクトの作成について。Google Cloud Platformでプロジェクトを作成し、Firebaseのプロジェクトを追加していきます。ウェブアプリにFirebaseを追加で設定情報を取得し、Cloud Firestoreでデータベースを作成。firebase packageをインストールします。さらに、Firebase Cloudstoreを設定し、データベースが作成できたことを確認する作業を行いました。

1日目のハンズオンメニューが予定よりも早めに終わったため、終了時間までReactNativeに関する参加者からの質疑応答コーナーを展開。参考書籍やReactNativeを使ったアプリ実績など、様々な質問が寄せられ、増井さんや中田さん、茂木さんから丁寧に回答をしていただきました。

ハンズオン終了後は、ビールで乾杯！

1日目のハンズオン終了後は、懇親会が開催されました。講師の増井さん、メンターの中田さん、茂木さん、仙台市役所の荒木田さん・佐藤さん、TECH PLAY運営事務局・スタッフを交えてビールで乾杯！参加者同士の交流も積極的に行われ、仙台でも今後こうしたハンズオンやコミュニティをアップデートしていこうと盛り上がりました。

TODOタスクを表示・追加・削除してみる

二日目の午前中は、昨日のハンズオンで行ったFirebaseにデータを保存したり、テキストを表示する手順や動作確認などについて、復習を兼ねて、改めて詳しく解説されました。

続いては、TODOアプリ画面に追加したテキストを表示する手順について、App.jsとfirebase.jsのコードを修正し、Simulatorで動作確認するところまでをハンズオン。さらに、終わったタスクをアプリ画面のチェックボックスをタップしたときに、アイテム削除する手順、スタイルシートをいじってデザインを変える作業などについても実践しました。

午前中最後は、増井さんが普段アプリのデザインを考えるときの参考にしているサイトとして、以下のサイトを紹介してくれました。

• Dribbble
• Pinterest
• COLOURlovers

Dribbbleはデザイナーがデザインリソースを公開しているサイトで、アプリのデザインやUI/UXなどの参考にしているのだそう。Pinterestは、自分の好きな画像を集めて編集・共有ができるサービスで、増井さんは好きなクルマの写真やアプリのアイデアなどの参考にしているそうです。イメージに近い色を探すときによく使っているサイトは、COLOURloversが紹介されました。

ReactNativeでカメラアプリ機能を作ってみる

二日目のお昼も事務局で用意したお弁当でランチ休憩した後、午後からは参加者からの要望で、ReactNativeとExpoというライブラリを使ってカメラアプリの機能に追加するハンズオンが行われました。

二日間のハンズオンを終えた参加者の感想は？

今回の参加者の皆さんに感想を聞いてみたところ、「ReactNativeに対する理解が深まった」「環境設定などを丁寧に教えてもらえてよかった」「今後も学んでいきたい」といったコメントを多数いただきました。

「1人でやるとめげてしまう環境設定の部分（Expo、Firebase）を教えてもらえてよかったです」
「GitHubの資料もわかりやすく用意してくれてあり、後の復習にも活用できて良いと思います」
「サンプルアプリとドキュメントがしっかり用意されていてとてもよかったです」
「実際に2日かけてスマホアプリのハンズオンをやってくれる勉強会はなかなかないので、参加できて本当によかったと思います」
「解説がとても道筋の通ったもので大変わかりやすかったです。サポート体制に関しても十分にフォローしていただける 状況でよかった」
「iOSやAndroid対応のアプリを開発するモチベーションが上がりました」

仙台市では、今後もこうしたハンズオンや勉強会を開催していく予定です。参加してみたいと思った方は、ぜひ、仙台市のグループをチェックしてみてください。 また、Google Cloud Platform（GCP）のユーザーグループでは、GCPUG仙台を立ち上げましたので、興味のある方は、ぜひこちらもチェックを！