読み込み中...
投稿日
フロント開発経験ゼロの新人がReact Nativeでモバイルアプリ開発できるようになった話
もくじ
はじめに
こんにちは。デザイン＆エンジニアリング部の中村です。
私は新卒でTISに入社し3カ月間モバイルアプリ開発を学習した後、実際の案件を経験しました。
本記事では、現場で開発経験のない新人が、モバイルアプリ開発の実践的なスキルをどのように身に付けていったのかを紹介します。
利用した学習コンテンツ（React Nativeの学習）は本サイトに無料で公開しています。
これからモバイルアプリ開発を始めたいという方の一助になれば幸いです。
前提
新人研修後、React Nativeのモバイルアプリ開発のプロジェクトに参加することになりましたが、React Nativeは全くの未経験でした。当時は以下のような状態でした。
- JavaのWebアプリ開発を新人研修で学んだ程度
- フロントエンドやモバイルアプリの開発は未経験
開発現場では以下のようなReact Nativeの実装スキルが求められていました。
- 画面を構成する表示部品（ボタンやテキスト、カード）を作成できる
- 表示部品を配置し、デザイン資料通りの画面を作成できる
- 操作に応じて画面遷移やAPI通信を行う機能を実装できる
上記のスキルを身に着けるために業務時間を使って学ぶ期間をもらったので、JavaScriptの基本的な文法といったフロントエンド開発の基礎を学んだ後に、実践的なモバイルアプリ開発を勉強することにしました。
使用した学習コンテンツ
FintanにはReact Nativeのハンズオンや実装例、環境構築、アーキテクチャの解説などが公開されています。
この中のReact Nativeの学習を主に使用して学習を進めました。このコンテンツは以下の特徴があります。
- 前提知識から着実にステップアップできるように構成されている
- ソースコード解説付きの実装ハンズオン（ToDoアプリ）でReact Nativeアプリ開発の基礎学習が可能である
- 開発現場と同様のデザイン資料を使った実装ハンズオン（Q&Aアプリ）で実践練習が可能である
前半はガイドとして実装方法の解説が用意されており、後半は公式ドキュメントや過去の実装を参照し情報を集めながら進めていくように設計されています。3カ月間学習した結果、参加するプロジェクトに必要なReact Nativeの実装スキルを習得することができました。
学習してみて以下のことを感じました。
- 前提知識はTypeScriptとReactの基本構文を知っている程度の状態でToDoアプリの学習に進んで良い
- ToDoアプリは解説が丁寧なので初学者でも独力で実装を進めていくことができる
- 解説が少ないQ&Aアプリの実装を始めた途端理解不足を痛感することになるが、ToDoアプリに続けてQ&Aアプリの実装を行うことにより実装力を高められる
学習の流れ
フロントエンド知識の習得
最初に前提知識で紹介されているサイトを半月程度かけて読み込み、以下のことを学びました。
- JavaScript、TypeScriptの基本文法
- Reactの基本文法、Hooksの基本的な使い方
ToDoアプリ実装：丁寧な解説でアプリ開発の流れを理解した
実装のハンズオンとしてまず用意されているのが、このToDoアプリです。
ひとつひとつ丁寧に実装方法が解説されています。実装する部品ごとにソースコードの模範解答が付いているので、理解しながらモバイルアプリの開発を進めることができます。最後にはバックエンドと接続し、ToDoの作成や削除ができるモバイルアプリが完成します。
Q&Aアプリ実装：考えながら実装することで実践力を養った
実装のハンズオンとしてQ&Aアプリも用意されています。ToDoアプリより難易度が高く、より実践的な学習コンテンツになります。
画面要件とデザイナーが作成したFigmaのデザイン資料を見ながら質問の投稿や削除ができるアプリを実装します。
学習で苦戦したこと
ナビゲーション構造の実装
タブやモーダルの実装がハンズオンに登場します。これを実装するには適切なナビゲーション構造が必要になります。ナビゲーション構造と実際の画面遷移を紐づけて理解して、ナビゲーションの構成図を画面遷移図やデザイン資料から作るところが難しかったです。
React Navigationの基本を読み、コードの意味を理解してから実装するという作業を繰り返すことで、以下の観点がナビゲーション作成において重要であると分かりました。
- どの画面をどのナビゲーターに所属させるか
- 使うナビゲーターはstackナビゲーターかtabナビゲーターか
- ナビゲーター同士の関係は入れ子にするか並列にするか
スタイルの実装
表示部品の作成では、指定すべきスタイルが分からなかったり、指定したものの想定通りの表示にならないという問題に直面しました。問題解決に役立ったことは以下の2点です。
スタイルに指定できるPropsを知る
例えば、React NativeのTextInputコンポーネントのスタイルはTextコンポーネントのスタイルを継承していますが（React Native: Core Components and APIs）、継承したPropsの中でも一部指定できないものがあります。
指定できるPropsを確認することで、どのようなカスタマイズができるのか分かりました。そして、実現したい実装がそのコンポーネントのカスタマイズ範囲外なら、親のコンポーネントのスタイルで実装するか別のライブラリを使う必要があると考えられるようになりました。
backgroundColorを指定する
backgroundColorを指定すると自分の修正が画面上のどの領域に反映されているか知ることができます。flexが指定されていないことや親コンポーネントに位置を決められていることが原因で、スタイルを指定したコンポーネントの領域が想定と異なることに気付けました。
ライブラリが提供する機能の活用
FormikとYupの2つのライブラリを用いた入力フォームの実装に時間がかかりました。
公式ドキュメントには指定できるPropsが多くあり、説明は詳細で初心者の私にはどれを使えばいいか悩みました。さらに入力フォーム自体のFormikとその中でバリデーションを行うYupを組み合わせる必要があり、どのように実装すればいいのか分かりませんでした。
この問題に対し以下のステップで実装を進めることで対処しました。
- 完成イメージに近い実装例を公式ドキュメントで探す
- 実装例で使われていたPropsの中から完成イメージの実現に必要なPropsを見つける
- Propsの役割や仕様を確認する
- 実装に組み込み、思った通りの挙動になっているか確認する
- 1から4を繰り返し正解に辿り着く
開発現場で感じた学習成果
Q&Aアプリ基本編の実装が完了したときには、モバイルアプリ開発で必要な以下のスキルを身に着けることができていました。
- 画面を構成する表示部品（ボタンやテキスト、カード）を作成できる
- 表示部品を配置し、デザイン資料通りの画面を作成できる
- 操作に応じて画面遷移やAPI通信を行う機能を実装できる
3カ月の学習を終えた後、React NativeでAndroidアプリを開発するチームメンバー3名のプロジェクトに参画しました。
私はアプリの9画面のうち3画面を実装しました。実装した画面にはDB登録、ファイル出力、画面遷移の制御といった複数の機能をもった画面もあり実装難易度は低いものではなく、新人ながらエンジニアの一戦力となることができました！
このように活躍できた理由は以下の3つだと考えています。
- 表示部品の実装や画面の作成で悩まなかった
- 実装中に効率的な調査ができた
- 既存コードを読み解き活用することができた
表示部品の実装や画面の作成で悩まなかった
実装を2回行ったことで、画面の見た目や、画面遷移、ボタン押下時の機能など基本的なアプリ開発は悩まずできるようになっていました。
特に画面デザインを実現するためにスタイルを調整する作業は、Q&Aアプリの実装ハンズオンで時間をかけて習得したスキルでした。ToDoアプリ実装ではスタイルが調整されたコードを書き移して実装を進めることができましたが、Q&Aアプリ実装ではデザイン資料からどのようなスタイルをどのコンポーネントに当てるかを読み解く必要がありました。この作業の積み重ねによって、現場では素早く画面デザインを設計書通りに作れるようになっていました。
実装中に効率的な調査ができた
Q&Aアプリの実装でライブラリの公式ドキュメントを調べながらアプリを実装していくことを経験していたため、困ったときも自力で調べ解決できるようになっていました。
現場で学習期間内に経験しなかったグラフ表示の実装を行いました。目盛りを表示する設定が必要になりましたが、公式ドキュメント（Getting Started with Victory Native）から関連する項目を探し、必要な設定を自力で行うことができました！
また実装のなかで各種ライブラリに対する理解が深まっていたため、思った通りの実装になっていないときに画面遷移ならReact Navigation、レンダリングのタイミングならReactのHooksを用いた実装箇所に原因がありそうだということが分かるようになっていました。
既存コードを読み解き活用することができた
現場で開発中に実装方法が分からなくなったときに、学習コンテンツを参照していました。この学習コンテンツは一般的な機能の実装が多く含まれています。さらにサンプルアプリにはユースケースとしてより実践的なコードが収められています。
開発現場で実装するとき、リスト、ダイアログ、テキストファイルの表示、ログ出力などの機能を参考に実装することができました。
初心者を脱するために必要なこと
現場で学習効果を感じましたが、それと同時に足りないスキルも見えてきました。脱初心者に向けて必要だと感じたスキルを紹介します。
ReactのHooksを正しく理解する
開発現場の実装で適切にHooksを使うことができないため、レンダリング回数が多くなり適切な計算結果が得られないことがありました。またテストで検出された不具合の原因にHooksが関係していました。
効率性を高めるにはHooksの適切な使用が必要で、開発中は以下の方法で不具合を修正しました。
- useEffectの依存関係が増えレンダリング回数が上がったときは、同じファイル内に存在しなくても問題ない変数や関数をファイル外に切り出した
- useStateの使用は最低限にして、別のstateから導出できる値はuseMemoで生成した
保守性の高いコードを書く
実装ハンズオンでは、TypeScriptによる型の定義を軽視して実装していました。型エラーが出ても動くからそのままにしてしまうことや使い回せる型を複数回定義してしまうことがありました。自習で学習コンテンツを進めていたので、コードレビューがなく綺麗なコードを書けるようになっていませんでした。
開発現場では、型の定義を別ファイルに集約してほかの実装でインポートして使い回すことで保守性を高めており、参考にしたいと感じました。
要件に合わせたコンポーネントを設計する
開発現場で共通部品化した入力フォームの実装を担当した時に、共通部品が何を親コンポーネントから受け取れるようにするべきか悩みました。
外部設計書から入力フォームが使われる画面を探し、画面ごとに変化させなければならない部分を見極めた結果、今回の開発では呼び出される画面側で入力フォームの横幅を変える必要があったので、実装方針を以下のようにしました。
- 横幅は親コンポーネントから指定できるようにした
- 枠線の色や文字サイズは共通部品側で設定した
実装ハンズオンの中では画面の実装をしているときに、共通部品にできるコンポーネントを見つけ、外部に切り出していたため、個々の画面の実装の前に設計書から共通部品を設計するという作業ができていませんでした。現場ではコンポーネント設計のスキルが求められることが分かりました。
まとめ
Fintanのコンテンツで3カ月学習した結果、モバイルアプリ開発の現場で即戦力として戦える実装力が身に付きました。
できるようになったことをまとめると以下の通りです。
- 画面を構成する表示部品（ボタンやテキスト、カード）を作成できる
- 表示部品を配置し、デザイン資料通りの画面を作成できる
- 操作に応じて画面遷移やAPI通信を行う機能を実装できる
もし学習コンテンツをやらなかったら現場で以下のような状態になっていたと考えられます。
- TypeScriptの知識がないので既存のソースコードを読み解けない
- スタイルの調整に時間がかかる
- 機能実装や不具合の調査に膨大な時間がかかる
今後、以下のようなスキルを身に付けたいと考えています。
- ReactのHooksを正しく理解する
- 保守性の高いコードを書く
- 要件に合わせたコンポーネントを設計する
あなたもモバイルアプリ開発を始めてみませんか？
Fintanには必要な教材がそろっています。ぜひご活用ください。
