はじめに

この記事は、スマートフォンアプリ(主にiOSを主体として説明します)の開発を始める方向けの入門記事となります。

記事の目的は、nativeアプリの開発手法や大まかな流れを知ることによって概要を掴むこと。
初めて出てくる用語などに対してふわっと理解しておくこと。
ゆくゆくひとりでnativeアプリを作成する時にも何をしなければいけないかの流れを理解することを目的としています。

そのため、本記事を対象とする方はネイティブアプリ開発が初めての方、web開発はあるがネイティブアプリは初めてといった方を対象としております。

ネイティブアプリを作成するための４つの手法

ネイティブアプリを作りましょう。といっても、実は方法はいくつかあります。

それらは大きく４つに分けることができます。

ネイティブ言語を使用する方法、クロスプラットフォームのフレームワークを使用する方法、ハイブリットアプリ開発、PWAを使用する方法の４つです。

上記の４つの手法について簡単に説明します。

ネイティブ言語による開発

OS標準の開発言語による開発手法となります。
iOSの場合、Swift,Objective-Cといった言語を使用し、XCodeという開発環境上で行います。
Androidの場合、Java,Kotlinといった言語を使用し、Android Studioという開発環境上で行います。

OS標準の言語のため機能性が高くOS固有の機能を活かしたアプリの開発が可能ですが
iOS版、Android版をリリースする場合はそれぞれの言語で別のソースコードを用意しなければいけない点、それぞれの言語に対しての学習コストが発生するデメリットもあります。

iOSで言うと最近はSwiftUIといった比較的学習コストが低い手法も主流となってきているため、OSを限定していて、ネイティブ言語に触れたいといった場合は選択してもいいかもしれません。

クロスプラットフォームフレームワークによる開発

ReactNativeや、Flutterの２つが主流です。これらはいずれもクロスプラットフォームに対応しているフレームワークという位置付けですが、開発元が違います。

ReactNativeはMeta(旧Facebook)が開発しており、JavaScript(またはTypeScript)によってソースコードを作ります。
FlutterはGoogleが開発しており、Dartという言語でソースコードを作っていきます。

どちらも人気がありますのでどっちでやるべきという正解はなさそうなので、自身がこれから触れる機会が多くなりそうな方を選択するといいかと思います。

クロスプラットフォームというのは、一つのソースコードでiOS,Androidどちらの端末上でも動くアプリを作ることができる(厳密には一つのソースコードからそれぞれの言語のコードを生成してくれる)ので、開発効率がとてもよい手法となります。

ハイブリットアプリによる開発

Monaca等のプラットフォームを利用して行う開発手法となります。
上記で説明した方法よりもより早く、より低コストでのアプリ開発に適していますが
細かい箇所のカスタマイズは不得意であったり、頼り切ってしまうとそれらのプラットフォームを使わない開発をするとなった時に全然わからず困ってしまうなんて事にもなり得ます。

ネイティブアプリを作る目的として、とりあえず動くものだったり、モックアップとしてのアプリ、一般的な機能で事足りるECサイトのアプリ等の場合は有効な手法かもしれません。

PWAを使用する開発

ネイティブアプリ開発とは外れてしまいますが、Webアプリを作り、それをProgressive Web Appsとして対応させることで、ネィティブアプリのような振る舞い(ホーム画面への追加、プッシュ通知、オフライン操作など)をさせることが可能になります。

あくまでもWebアプリなのでネイティブアプリのような審査の行程も不要ですし、ストアから入手する必要もありません。

ただ、ネイティブアプリの全ての機能が使えるわけではないので、選択する際は自身が作りたいと思っている機能が実現できるかどうかの事前調査はしっかりと行った方が良いでしょう。

以上がネイティブアプリ開発を始めるにあたっての主な手法４つとなります。
今後の目的などにもよるため一概には言えませんが、最近ではReact Nativeを使った手法が選択されやすい傾向にあるかと思います。

言語が決まったら！開発環境を準備しよう

前項にあるようにネイティブアプリ開発には様々な開発手法がありますが、開発手法が決まったあとは開発環境の準備が必要となります。

この記事ではReact Nativeでの開発をベースに解説します。

VSCode

ハイブリッドアプリ開発では様々なIDEを使うことが可能ですが、VSCodeの使用がおすすめとなります。他の開発環境を使う場合はIntelliJ IDEA等の選択肢があります。

React Nativeで開発する場合ネイティブ言語を書かなければいけないことはありませんが、デバイスのシュミレーター(仮想環境)を起動する必要があるためXcode,AndroidStudioのインストールは別途必要となります。

開発言語の知識以外に必要なことなど

ネイティブアプリの開発手法、言語、開発環境が決まったら実際にソースコードを書いてアプリ開発を進めていくことができますが、言語の知識以外にも知っておくと便利なツールや知識についていくつかご紹介します。

ソースコード管理

プロジェクトのソースコードを管理するためにGitというツールがとてもよく使われます。

Gitは、開発者がソフトウェアのバージョンを管理するための分散型バージョン管理システムです。2005年にLinuxの創設者、リーナス・トーバルズによって作られ、その能力と効率性からすぐにソフトウェア開発の世界で広く受け入れられました。

Gitの主な機能

• バージョン管理: Gitは、ファイルのすべての変更を詳細に記録します。これにより、開発者はいつでも以前のバージョンに戻ったり、何が変更されたかを確認したりすることができます。
• ブランチとマージ: Gitのブランチ機能により、開発者は安全に新しい機能を開発したり、バグを修正したりすることができます。作業が終われば、そのブランチをメインブランチにマージすることで、変更を統合できます。
• 分散開発: Gitは分散型のシステムであり、各開発者はローカルにリポジトリの完全なコピーを持つことができます。これにより、インターネット接続がない場所でも作業が可能で、変更は後でリモートリポジトリにプッシュできます。

なぜGitが重要なのか？

ソフトウェア開発では、コードの変更を追跡し、必要に応じて以前のバージョンに戻すことが非常に重要です。これにより、新しい機能を追加したり、バグを修正したりした結果、新たな問題が発生した場合でも、開発者は問題の原因を特定しやすくなります。また、複数の人が同じプロジェクトで作業している場合、各々の作業を調整し、コードの変更を統合するのが容易になります。

CI/CD

デプロイの自動化等を担うことができます。
代表的なツールの一つとしてGithub Actionsがあります。

GitHub Actionsは、ソフトウェア開発ワークフローの自動化を可能にするツールで、GitHubが提供しています。GitHubのリポジトリに直接統合されており、コードのpushやプルリクエストの作成といった様々なGitHubイベントをトリガーに、自動的にCI/CDワークフロー（Continuous Integration/Continuous Deployment）を実行することが可能です。

GitHub Actionsの主な機能

1. ワークフローの自動化: GitHub Actionsを使うと、テストの実行、ビルドの生成、デプロイメント、issueやプルリクエストの管理といったタスクを自動化できます。これらのタスクはワークフローファイル内に定義し、GitHubイベントが発生したときに実行されます。
2. 複数のプラットフォームへの対応: GitHub ActionsはLinux、macOS、Windows、コンテナ上で動作し、様々なランタイムバージョンやプラットフォーム間でのテストもサポートしています。
3. 組み込みのシークレットストア: 環境変数やAPIキーといったセンシティブなデータは、シークレットとして安全に保存できます。これらのシークレットはワークフロー内で使用でき、ログには表示されません。
4. 再利用と共有: 作成したアクションはリポジトリ内で再利用したり、他のGitHubユーザーと共有することも可能です。また、マーケットプレイスにはすでに数多くのアクションが公開されており、自分のワークフローに組み込むことができます。

GitHub Actionsは、コードのビルド、テスト、デプロイ、リリースといったプロセスを簡単に自動化することができ、開発チームがより効率的に作業を進められるようにするツールです。これにより、開発者は複雑なCI/CDのセットアップやメンテナンスに時間を割くことなく、より重要なタスク、つまりソフトウェアの開発に集中することができます。

バックエンドアプリのと結合

開発案件であればバックエンドとフロントエンドで開発スコープが明確に分かれているかと思いますが、個人開発をする場合などは全て一人でやらなくてはいけないので、徐々に覚えていくことでプロジェクトの全体像をより把握することができるようになります。

UI/UXデザインツール

FigmaやadobeのXDなどが該当します。

Figmaは、クラウドベースのデザインツールで、ユーザーがリアルタイムで協力してデジタルプロダクトのデザインやプロトタイピングを行うことができます。複数の人が同時に作業できる共同作業機能と、プロジェクトをブラウザ上で全て管理できるクラウドベースのアプローチが特徴です。

1. リアルタイムコラボレーション: Figmaの最大の特徴は、複数のデザイナーが同じデザインファイルをリアルタイムで同時に編集できることです。これにより、チームメンバー間のフィードバックを即時に共有したり、協力してデザインを進めたりすることが可能となります。
2. ブラウザベース: Figmaは完全にクラウドベースで動作します。そのため、特別なソフトウェアをインストールする必要なく、ウェブブラウザからアクセスするだけでデザイン作業を開始できます。また、デザインファイルはクラウドに保存されるため、どこからでもアクセスできます。
3. プロトタイピング: Figmaでは、デザインから直接プロトタイプを作成することが可能です。画面間の遷移やインタラクティブな要素を追加することで、アプリやウェブサイトの実際の動きをシミュレートできます。
4. コンポーネントとスタイル: デザインシステムを作成し、再利用可能なコンポーネントとスタイルを設定することで、デザインの一貫性を維持しながら作業の効率を向上させることができます。
5. 共有とフィードバック: Figmaでは、デザインファイルやプロトタイプを簡単に共有できます。共有リンクを通じて他のメンバーやステークホルダーとデザインを共有し、直接コメントを付けてフィードバックを得ることができます。

プロジェクト管理ツール

トレロなどが該当します。

トレロとは？

トレロは、個人やチームがプロジェクトを管理し、作業を追跡するための視覚的な協調ツールです。トレロのビジュアルなインターフェースは、Kanban方式に基づいています。Kanban方式は、作業を「カード」として表現し、それらを「リスト」の中で管理します。各リストは作業の進行段階（例：「未着手」、「進行中」、「完了」）を表します。

トレロの主な特徴

1. カードとリスト: トレロの主要なコンセプトは、「カード」と「リスト」です。カードはタスクやアイデアを表し、リストはこれらのカードを組織化するための方法です。カードはリスト間で自由に移動でき、そのプロジェクトまたはタスクの状態を視覚的に表現します。
2. リアルタイムのコラボレーション: チームメンバーは同じボードをリアルタイムで更新し、他のメンバーが何に取り組んでいるかをすぐに確認できます。
3. 添付ファイルとコメント: 各カードには詳細な情報、チェックリスト、期限、添付ファイル、コメントなどを追加できます。これにより、関連する全ての情報が一箇所に集約されます。
4. 通知と統合: トレロは他の多くのツール（例えば、Slack、Google Drive、Jiraなど）と統合でき、ワークフローを自動化するのに役立ちます。また、自分が関与するアクティビティについて通知を受け取ることができます。
5. 可用性とアクセシビリティ: トレロはクラウドベースのサービスであり、Webブラウザ、スマートフォンやタブレットのアプリを通じていつでもどこでもアクセスできます。

以上のように、トレロはその視覚性、直感性、柔軟性により、さまざまな種類のプロジェクトやタスク管理において非常に便利なツールとなっています。

さいごに

以上、初めてnativeアプリを作る際に知っておきたいこと、必要なツール等についてのご紹介でした。

アプリを作るといっても開発自体が初めての場合その他覚えなければならないことがたくさんあるのがわかると思いますので、個人開発の場合はまずは開発難易度の低いアプリを土台とし、1~10までやってみると、全体の流れも把握できていいのではと思います。

最後まで閲覧いただきありがとうございました。