はじめに
こんにちは。 ピクトリンク事業部でwebアプリケーション開発を担当している西村です🧑💻
今回は「モバイルアプリケーションエンジニアがフロントエンド開発を通して感じたこと」というお題でおはなししてみようかと思います！
今までの経験
私はフリューに入社する前は4年間iOSのモバイルアプリ開発を担当しておりました🫡
フリューに入社してから半年間はAndroidのモバイルアプリケーション開発、それ以降は現在までの約1年間でwebアプリケーション開発のフロントエンド領域を担当しております！
4年間のモバイルアプリケーション開発では初回リリースから長い期間経っているアプリケーションの機能開発をすることが多かったので、
swiftUIやJetpack composeなどの宣言的UIでの開発ではなく、storyboard/xibやAndroidViewでの昔から存在する技術を採用したUI開発を行なっておりました。
テストに関してもテスト自動化は進んでおらず、ほとんどのテストを手動テストで行っていた状況でした。
逆に現在担当しているwebアプリケーション開発ではNext.jsを採用しているため、モダンな技術を使用しています。
またテスト自動化も進んでおり、ユニットテスト*1、インテグレーションテスト*2、E2Eテスト*3、ビジュアルリグレッションテスト*4のほとんどが自動化されている状態です。
こういった状況の中でwebアプリケーション開発を通じて、得たものや感じたことが多くあったので以降はそちらを紹介していこうと思います🙌
※以降モバイルアプリケーション開発=モバイル開発、webアプリケーション開発=web開発と省略します
宣言的UIでの開発
モバイル開発ではSwiftUIやJetpack Composeなどの宣言的UIでの開発が流行っていますが、
私が今までに参画したプロジェクトではまだ導入されておらず、StoryboardやAndroidViewで開発しておりました。
その状態でweb開発のUI実装を行った結果、慣れればすごく実装しやすいと感じました！
特にいいなと感じた部分は以下になります
- 可読性の向上
- コンフリクトの回避や解消が容易
可読性の向上
宣言的UIでは「何を表示したいか」に焦点を当てて記述しているので、実装ファイルを見るだけでどういった実装がされているのかを理解することができます。
そのため実装レビュー時に実装方法に問題がないか見やすいため、レビュー時間の短縮や不具合の見逃しが少なくなるなと感じました！
(AndroidViewはXMLなのでまだ見やすいですが、Storyboardやxibファイルをレビューする際には実装者に直接聞かないといけないことも多く辛い部分が多いですよね。。。)
コンフリクトの回避や解消が容易
宣言的UIではStoryboardやAndroidViewに比べてコード量が圧倒的に少ない印象です。
また前述通り、「何を表示したいか」に焦点を当てて記述するため、どのコードが何をしているのかが明確です。
そのため、複数人で同じファイルを触る際にどのコードを触ればいいのかが分かるので、コンフリクトを回避しやすいのかなと思います。
またコンフリクトが発生した際にも、コードを見ればどのような実装なのかが分かりやすいので、
コードが複雑なStoryboardやxibファイルよりコンフリクト解消が圧倒的に楽だと思います。
宣言的UIでの開発に慣れることで、恩恵がかなり大きいと感じたので、モバイル開発でも積極的に導入を進めていきたいと感じました🔥
テスト
「今までの経験」の章でも記述した通り、参画したモバイル開発ではほとんどテスト自動化がされていない状況でした。
その状況でテスト自動化が進んでいるweb開発に参画すると、テストを自動化することで得られる恩恵の多さにびっくりしました😶
細かい粒度でリリースすることができる
テストを手動で行うのと自動で行うのとではテストの実施時間が大きく異なります。
手動テストの場合はテスト実施の工数が毎回大きくなりやすいのでまとめてリリースすることが多く、ビックバンリリースになりがちな印象です。
テストの自動化を進めることでいつでもリリースできる環境を整えることができ、ユーザーに早く価値を届けることができるので開発者にとってもユーザーにとっても嬉しいことだと思いました！
リファクタリングしやすくなる
実装範囲とは違う箇所でリファクタリングしたい箇所を見つけても手動テストだとその分時間がかかるから
後回しにしてしまうなんてことはあるあるですよね😢
ただしテスト自動化が進んでいると変更を加えても修正が正しいかどうかはテストが検知してくれるので、
テスト自動化が進んでいる=リファクタリングしやすい環境
だと感じました！
機能開発だけ進めても可読性や保守性が悪くなり後々の開発速度に影響してくるので、
リファクタリングしやすい環境にしていくことはとても重要なことだと思いました✨
動作確認
モバイル開発ではシュミレーターや実機で確認する際にビルドにかなり時間がかかります。
プロジェクトの大きさや使用しているPCスペックに依存しますが、5分以上かかるのはザラにあるイメージです😢
動作確認したいだけなのに毎回5分以上かかるのはかなり辛いですよね。。。
web開発ではローカル起動がすぐにできるため、変更点がすぐに確認でき、開発体験が良いなと感じました！
モバイル開発でもビルド時間を短縮するための工夫や宣言的UIで開発することでホットリロードが活用できるので、
すぐに実装部分を確認できる環境を整えることが重要だとすごく感じました！
CI/CDの重要性
私が参画したweb開発ではテストのほとんどがCI/CDに組み込まれていたので、開発体験がすごくいいなと感じました！
CI/CDに通すべきテストが自動化されていると不具合にすぐ気づくことができるのでリリース後の障害発生率を下げられますし、
手動テストよりテスト実施時間が圧倒的に早くなるため、開発速度に大きく貢献します。
最後にまとめてテストして不具合が多く発生してスケジュールが崩れてしまう。。。
なんてことも少なくなるので、都度テストできる環境は素晴らしいと思います👏
次にアプリケーション開発のプロジェクトに参画することになったら、テストやCI/CDの環境を整えていきたいなと強く思いました！
その他感じたこと
フロントエンドの知見がつくことでwebViewでの開発がしやすくなる
webViewでの実装ではJavaScriptが動かない、期待する動作にならないみたいなことが度々あると思います。
フロントエンドの知見をつけることでアプリケーション側の問題なのかWeb側の問題なのかを判別することができ、
web開発側との整合もスムーズに行きやすいのかなと思いました！
まとめ
今回は「モバイルアプリケーションエンジニアがフロントエンド開発を通して感じたこと」というお題で記事を書かせていただきました！
参画するプロジェクトによる部分は大きいですが、フロントエンド開発を通してたくさん学ぶことがあったことをご紹介できたと思います🙏
私は今後もweb開発を続いていきますが、アプリケーション開発のプロジェクトに参画した際は学んだことをアウトプットしてより良い開発をして行けたらなと思います🔥
