【画像付き】プログラミング初心者でもできるアプリ開発の始め方!SwiftUI編

4 min
how to start developing application with SwiftUI & Xcode

こんにちは、たいちです(@taichi_swift_)

たかし

たかし

Macでアプリ開発を始めたいんだけど、なにから始めたらいいかな?

最初に答えをお伝えします

『Xcodeをダウンロードしよう!』

この記事ではXcodeのインストールから基本的な使い方までを画像付きで全て解説します!

ちなみにダウンロードから最初のプロジェクトを作るまでの所要時間は30分程度です(通信状況にもよります)

是非トライしてみてください。

記事の内容

・アプリを開発したいプログラミング初心者に向けたXcodeの使い方の解説

メリット

・アプリ開発の始め方を理解することで、第一歩を踏み出せる

・2020年最新版の情報なので間違いが少ない

僕は将来好きなことだけをして生きていきたいです。そのために今のうちから稼げるスキルを身に付けたいとの思いからプログラミングを始めました。
プログラミングに出会って、高校生でも自分の力で収入を得ることができました。

一緒に頑張っていきましょう!

アプリ開発環境の準備

アプリを開発する環境の準備に入ります。

OSを最新にする

現在、macOSの最新バージョンは

macOS Catalina (10.15.3)です。

最新でなければOSのアップデートを実行しましょう。

アプリ開発に必要な Xcode をインストールする

Xcodeとは、Apple社が提供しているアプリケーション開発ソフトウェアです。

そのため、以下のOSで動作するアプリを開発できます。

  • iOS (iPhone, iPad)
  • macOS (iMac, Mac Pro, MacBookシリーズ)
  • watchOS (Apple Watch)
  • tvOS (Apple TV)

Xcodeは無料のソフトウェアです。

しかし、Macにしかインストールできません。

さて、 Xcodeのインストールの仕方ですが、今回は2つ方法を紹介します。

どちらの方法でもApple IDが必要になります。持っていなければ作成しましょう。

AppStoreからXcodeをダウンロードする

App Store

AppStoreで、Xcodeと検索します。

こちらのリンクからもダウンロードできます。

(サイズが約11.2GBと結構デカイので、パソコンのストレージの容量が足りないとインストールできません。)

Apple Developer からインストール

AppStoreからインストールすると、必ず最新のバージョンがインストールされます。諸事情で過去の好きなバージョンをダウンロードしたいときは、AppleDeveloperのページからダウンロードしましょう。

https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Fdownload%2Fmore%2F%3Fname%3DXcode&rv=1

  1. STEP

    AppleIDでログイン

    もっていなければ作りましょう

  2. STEP

    Xcode12.0 (現在の最新ver.)をクリック

  3. STEP

    Xcode12.0 .xipをクリックしてダウンロード
    ※環境によっては結構時間がかかります。

英語のサイトですが、この画像を参考に進めてください

丸で囲っているところをクリックしてください
こんな感じでダウンロードされます。(20分ほどかかるかも)
このアイコンになったらダブルクリックして解凍しましょう。
これがXcodeのアイコンです

さっそくアプリを作ってみよう!

Xcodeのインストールができたら、アイコンをクリックして起動してみましょう!

赤丸で囲んだ「Create a new Xcode project」をクリックします。

パラメーター説明
Product Nameアプリの名前です。
TeamAppleIDで紐づけられたアカウントです
あとからでも設定・変更できます。
自分のiPhoneやシミュレーターなどでアプリを起動する場合は、Teamの設定が必須になります。
Organization Name開発者、組織の名前
Organization Identifier誰ともかぶらない文字列。Webサイトのドメインを逆にしたものがよく使われます
このWebサイトのドメインは、「apple-taichi.com」なので、
「com.apple-taichi」のように反転させたものを入力すれば問題ありません。
Languageプログラミング言語の選択です。
基本的にはSwiftで問題ありません。
User Interface学習コストの低いSwiftUIを選んでおくのが無難です。
Use Core Dataアプリ内部に大きなデータを保持する機能が必要な場合はチェックを入れます。
チェックを入れないでProjectを作った場合でも、
Core Dataを使うためのコードを書けば動作します。
User CloudKitiCloudを使ったデータ保存(Cloud Kit)を使用する場合はチェックを入れます。
Include Unit Tests,
Include UI Test
初心者のうちは基本的には使いません。

入力し終わったら、Nextをクリックします。

この画面ではプロジェクトファイルを保存する場所を選びます。

これがプロジェクトを作成して最初の画面です。

これがファイルを選択したり、文字列を検索できたりできるメニューです。

⌘ (command) キー + 0 〜 9で出し入れしたり、メニューを切り替えられます。

この部分でコードを書いたりします。

これがプレビュー(Canvas)と呼ばれるものです。左で書いたコードが即反映されます。

ちなみに、 option(alt)キー + command(⌘)キー + return キーで表示・非表示を切り替えられます。

以下のコードはプレビュー用のコードです。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ここではファイルの情報や階層などが表示されます。

この後は、あなたが作りたいものを自由に作ってみてください。

作ったアプリを実行するときはこのボタンを押します。

基本的にはこれだけでOKです!シンプルなアプリであればここから作ることができます!

まとめ

今回紹介した方法は、シンプルなアプリを作る方法です。

さらに実用的で本格的なアプリは、さらにいろんなものを組み合わせて作ります。

新しいことを覚えていく感覚が楽しいので、是非調べてみてください!

コードの文法などはこちらで紹介しています👍

ありがとうございました!

taichi_dm_

taichi_dm_

N高等学校の2年生です。人に価値を提供するプログラマーを目指して勉強中です。SwiftUIという言語を使うiOSアプリ開発が得意です!

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です