アプリチームの新人恒例アプリ開発研修

はじめに
目的
開発したアプリ
実装過程で苦労したこと
- 非同期処理の実装
多機能アプリの実装はできたが、、、
振り返り
まとめ

はじめに

ピクトリンク事業部でiOSアプリ開発を担当している牛尾と申します。私は今年の4月にフリュー株式会社に新卒入社しました🔰

本記事では、私が所属するアプリチームで新人恒例となっている、アプリ開発研修について紹介します。

目的

私は、アプリ開発・Git操作どちらも未経験で入社したため、研修を通してピクトリンクiOSアプリ開発に必要な基礎知識の獲得を目指しました。

具体的には次のような知識です。

iOSアプリ開発の基礎（Swift、Storyboard、API通信など）を習得する
アプリ開発を進めながら、Git操作の基本を習得する

開発したアプリ

指導者である先輩から与えられた題材は、モンスターをつかまえる某ゲームで登場するような図鑑アプリです。この図鑑アプリ開発研修は、アプリチームにjoinした新人は必ず取り組んでいる恒例の研修となっています。

実際に開発したアプリは次の通りです。

アプリを起動すると、図鑑のように一覧表示される画面（以下、一覧画面と記載します）が表示され、それぞれの画像をタップすると、詳しい情報が掲載された画面に遷移することができます。

その他の機能については、お気に入り登録機能、絞り込み機能などを実装しました。

アプリのデザインについては次の記事を参考にさせていただきました。

zenn.dev

実装過程で苦労したこと

実装過程では様々な苦労がありましたが、その中から1つをピックアップして紹介します。

非同期処理の実装

アプリに反映させる画像などのデータはAPI通信で取得するため、非同期処理*1の実装が必要でした。

API通信で取得したデータをアプリの画面に反映させるロジックを実装できたと思い、シミュレータを起動させると、

何も表示されていない真っ白な画面になってしまいました。当初、想定していた処理順は次のとおりです。

API通信でデータを取得し、データをリストに追加する
全てのデータを取得できたら、リストをreturnする
リストを使って画面にデータを反映させる

しかし、原因を探っていくと、私が作成したコードでは次のような処理順になっていました。

リストをreturnする
リストを使って画面にデータを反映させる
API通信でデータを取得し、データをリストに追加する

つまり、画面に反映させるためのデータがリストに追加されていないため、真っ白な画面になっていたことがわかりました💦

このように意図しない処理順になってしまったのは、非同期処理の開始と終了の合図をコードで記載していないことが原因でした。

今回は、API通信で取得するデータは複数であるため、複数の非同期処理を管理しなければならない状況でした。

複数の非同期処理を開始と終了の合図で管理し、終了の合図を受けることで次に実行したい処理を呼ぶように変更しました。

具体的な非同期処理のコード例は次のとおりです。

let dispatchGroup = DispatchGroup()
let dispatchQueue = DispatchQueue(label: "queue", attributes: .concurrent)

for id in 0..<10 {
   dispatchGroup.enter() // 非同期処理開始合図
   dispatchQueue.async(group: dispatchGroup) {

      /**
      API通信でデータを取得してリストに追加するロジック（長いので省略）
      /*

      dispatchGroup.leave() // 非同期処理終了合図
   }
}

// dispatchGroup.leave()の合図を受けて、以下が呼ばれる。
dispatchGroup.notify(queue: .main) {
   // 画面更新処理など
}

複数の非同期処理を管理するためのdispatchGroupを作成し、DispatchQueue()のattributesを.concurrentと指定することで、複数の非同期処理を並列処理*2で実行してくれます。

dispatchQueue.async()のクロージャー内にAPI通信でデータを取得してリストに追加するロジックを記載し、実行前に開始enter()、終了後にleave()を呼ぶことで複数の非同期処理を管理することができます。

そして、完了の合図であるleave()が呼ばれた後にdispatchGroup.notify()のクロージャが呼び出されます。

多機能アプリの実装はできたが、、、

今回、私が実装したアプリは、当初の計画よりも多くの機能を実装することができ、機能の数については過去最高でした👍

しかし、コードの質は決して良いものではありません。

例えば、アプリ起動時に表示される一覧画面のViewController*3のコードは600行ほどあり、その中にはViewController本来の役割以外のものが含まれてしまっています。

ViewController本来の役割以外のロジックを記載し、様々な責務を抱えてしまったViewControllerはFatViewControllerと呼ばれ、コードが読みづらい、バグを見つけづらいなどの問題があります。

そんなことを全く知らなかった私はViewControllerに様々な責務を抱えさせ、FatViewControllerを作り上げてしまいました💦

図鑑アプリ開発と並行して私はiOSアプリ設計パターン入門を読み、設計について学習していました。

そのため、今後は書籍で紹介されていたアーキテクチャの導入に挑戦し、FatViewControllerの状態が少しでも改善できればいいなと考えています。

FatViewControllerについては、次の記事が非常にわかりやすいのでぜひ読んでみてください。

dev.classmethod.jp

振り返り

改めて、今回のアプリ開発研修の目的をもう一度確認しておきます。

iOSアプリ開発の基礎（Swift、Storyboard、API通信など）を習得する
アプリ開発を進めながら、Git操作の基本を習得する

着手当初は参考書に頼る機会が多かったですが次第に減少していきました。

また、プロパティの一覧を眺めて、「これ使ってみれば実装できるかも？」というように、わからなくても何かしら試してみることもできるようになりました。

Git操作についてはcommitやpush、pullなどといった超基礎的なところは身についたと思います。

しかし、実装完了した作業ブランチをmergeし忘れ、別の実装をそのまま進めるというやらかしがありました。

実装は私1人で行っていたため、他のメンバーへの影響は全くありませんが、チームでの開発でこのようなことを起こさない、また、起きてしまった場合の対処方法などを身につける必要があると感じました。

まとめ

今回、私が所属するアプリチームで新人恒例となっている、アプリ開発研修について紹介させていただきました。

1人で多機能なアプリ（コードの質は置いといてw）を開発した経験は、今後のピクトリンクiOSアプリ開発に繋がると思います。

現在、チームに参画したばかりでわからないことだらけですが、ピクトリンクの機能開発を1人でできるように日々精進していきます！

*1:ある処理の完了を待たずに別の処理を実行できる仕組み。

*2:複数の処理を複数の主体が同時進行で実行すること。複数の主体で処理を実行するため、処理速度は速いが順序は保証されない。

*3:View（画面）を管理・操作（表示、ユーザーからの入力など）するためのクラス

FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。