Xcodeのインストール方法と使い方!終わらない時の対処法!

この記事からわかること

  • Xcodeインストール方法と使い方
  • インストールが終わらない時の対処法
  • インスペクタビルド、新規プロジェクトの作成方法など

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

iOSアプリを作ってみたいと思いSwiftを学び出した時に最初に必要となる専用エディタ「Xcode」。今回はインストール方法から使い方までをまとめていきたいと思います。

Xcodeをインストールする方法

XcodeはiOSアプリ開発を行うための統合開発環境(IDE)です。ソースコード自体を記述する場所でもあり、ビルドからテスト、プレビューなど様々な機能がXcodeには備わってます。

インストールは通常のiOSアプリと同じく、「App Store」からダウンロードします。

App Storeを開いたら「Xcode」と検索し「GET」ボタンをクリックしてインストールします。

App storeの中のxcode

インストール時にApple IDのパスとMac自体のパスを求められるので入力して進めます。一度ここでXcodeが「予期しない理由で終了しました」といったエラーのようなものが出ましたが気にせず「再度開く」をクリックすればOKでした。

Xcodeインストール時に発生したエラー

インストールが終わらない場合

「GET」ボタンを押してからインストールがなかなか終わらず大丈夫かなと思いましたが、完了までに1時間〜くらいかかるのがデフォのようです。

インストール中のXcodeのプログレスバー

アプリのプログレスバーをみていれば少しずつですが導入できていることを確認できるので指標にしてください。

Macの「Launchpad」内に「Xcode.app」が作成されていればインストールは完了です。

Xcodeの使い方

Xcodeアプリを立ち上げると以下のような画面になります。最初にユーザー登録をしておきます。

Xcodeのユーザー登録画面

ユーザ登録をするにはMac左上 横の「Xcode」>「preferences」をクリックすると以下の画面に切り替わります。その中の「Accounts」タブを開き一番左下の「+」からアカウントを追加します。既存のApple IDを紐付けすればOKです。

Xcodeの新規プロジェクト作成画面

新規プロジェクトの作成方法

ユーザ登録ができたら マークの「Create a new Xcode project」をクリックすると新規プロジェクトを作成することができます。

続いて作成するプロジェクトの設定を決めていきます。「使用想定の機種(Multiplatform/iOS/macOS...)」と「アプリ形態(APP/Document APP/GAME...)」を選択して「Next」をクリックします。

Xcodeの新規プロジェクト作成画面

必要事項を記入していきます。

項目 入力値
Product Name アプリ名
Team チーム名
Organization identifier(組織ID) 適当な値(※)
Bundle Identifier(アプリ識別ID) (※)
Interface Swift UI
Language Swift
Xcodeの新規プロジェクト作成画面

必要事項を入力し「Next」を押すとプロジェクトが作成されるので保存先を選択します。すると「プロジェクト名」のフォルダが指定の保存先に生成されます。

Organization identifierとBundle Identifierとは?

※:「Organization identifier」とは組織IDのことで値は自由に設定することができます。しかし全世界のアプリの中から作成するアプリを識別するための「Bundle Identifier(アプリ識別ID)」 とリンクしているので値の入力には注意してください。他のアプリと重複しない必要があるためドメインを逆から並べることが推奨されています。

例:amefure.com(ドメイン)→com.amefure(Organization identifier)

ワークスペースの各名称

指定した保存先にプロジェクトディレクトリが作成され、その中に実際に開発に必要なファイルがまとめられています。

├── Swiftプロジェクト
│   ├── .git
│   ├── プロジェクト名
│        ├──  Assets.xcassets
│        ├──  ContentView.swift
│        ├──  プロジェクト名.swift
│        └──  Preview Content
│          // ↓プロジェクトのIDEを開くファイル
│   └── プロジェクト名.xcodeproj

その中の「プロジェクト名.xcodeproj」というファイルがXcodeの統合開発環境(IDE)を開くファイルになります。開くと以下のような画面になり、細かく作業スペースが分かれています。

Xcodeの新規プロジェクト編集画面
エリア名 概要
ツールバー プレビュー機種の変更
iPhone実機へのリンク
Runボタン( )など
ナビゲータ フォルダ階層とは異なるファイル構造
エディタ ソースコードの記述場所
キャンバス プレビュー画面(※)
インスペクタ アクティブになっている
ファイルやコードなどの設定情報が表示

あとはこのIDEを使いながらアプリを開発していくだけです。VS codeなどの他のエディタと同様に補完機能やcommand + / でコメントアウトなどの機能もあるのでスムーズに開発することができそうです。

キャンバス

表示させるためのPreviewProviderプロトコルが書かれている場合にキャンバスにプレビューが表示されます。そのままではプレビューは表示されないので「Resume」ボタンをクリックしてビルドさせることでキャンバスに表示されるようになります。

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

非表示になってしまった場合は以下の2通りで表示させることができます。

  1. エディタ画面右上のメニューから「Canvas」を選択
  2. command + option + Enter

playground

Xcodeには「playground」と呼ばれる、構文が正しいかや変数や配列などのデータの中身の変化を簡単に確認できる機能が備わっています。

「playground」のビルドできずに右側に表示されないエラーを解決し解決できた画像

使い方と起動時に発生したエラーの解決法は以下の記事をご覧ください。

SwiftUI:Apple公式ページ

SwiftUI チュートリアル:Apple公式ページ

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index