8
Help us understand the problem. What are the problem?

posted at

updated at

第1回iPhoneアプリ開発入門

はじめに

この記事では簡単なカウンターアプリを作成して、プログラミング初心者向けにiPhoneアプリの作り方を解説します。
スクリーンショット 2022-05-01 20.13.57.jpeg

必要なもの

  • Mac

Xcodeのダウンロード

まず、MacにXcodeというアプリをダウンロードします。このアプリを使ってアプリ開発を進めていきます。

上記のリンクをクリックして、App Storeでダウンロードしてください。これには時間がかかります。
スクリーンショット 2022-04-22 18.54.44.png

Xcodeを起動

初めてXcodeを起動すると、規約のWindowが表示されると思うので、「Agree」をクリックして次に進みます。パスワードが求められる画面では、Macのパスワードを入力して、OKを押します。
インストールが終わると、このような画面が表示されます。
スクリーンショット 2022-04-22 19.13.52.png
この画面の、矢印で示した「Create a new Xcode project」をクリックして、プロジェクトを作成します。この操作は、キーボードショートカットの「コマンド+シフト+ N」でもできます。

プロジェクトの作成

プロジェクトを作成すると、この画面になります。iOSを選択した後、Appを選択してNextを押します。
スクリーンショット 2022-04-22 19.29.19.png

次に、プロジェクトの設定をしていきます。
スクリーンショット 2022-04-22 19.34.24.png

  • Product Nameには「CountApp」と入力。
  • Teamは、すでにある場合は選択、ない場合は「Add account...」をクリックして、Apple IDでサインインします。サインインできたら、元の画面に戻ります。
  • Organization Identifierは、他の人とはかぶらないidを設定します。例えば、メールアドレスが「〇〇〇@gmail.com」の場合、「com.gmail.〇〇〇」とするとよいでしょう。
  • Bundle Identifierは、Organization Identifierを入力すると、自動で設定されます。
  • InterfaceはSwiftUIを選択します。
  • LanguageはSwiftを選択します。
  • その他の項目はチェックを外して、Nextを押します。

この画面では、プロジェクトを保存するフォルダを選択します。すでにあるフォルダを選択するか、「New Folder」を押して新しいフォルダを作成します。Source Controlの項目はチェックを外して、「Create」をクリックします。

初めてのプロジェクト

プロジェクトを作成すると、このようになります。赤く囲った左がアプリのソースコード、右がアプリのプレビューになっています。プレビューが表示されない場合は、「Resume」をクリックして、表示されるまで待ちましょう。プレビューが表示されたら、右下にある、虫眼鏡にプラス、マイナスがかかれているアイコンをクリックしてプレビューが画面に収まるようにサイズを調整しましょう。
スクリーンショット 2022-04-22 21.04.48.png

iPhoneを選択する

スクリーンショット 2022-05-08 23.50.25.png
赤で囲んだ部分をクリックして、iPhoneを選択します。ここでは、iPhone13を選択します。

テキストを書き換える

プレビューが表示されたら、ソースコードの12行目にある「Hello, world!」を「こんにちは」と書き換えてみましょう。そうすると、右側のプレビューにも「こんにちは」と表示されます。
スクリーンショット 2022-04-23 10.33.38.png

View

先ほどの「Text("こんにちは")」のようなものを、「View」と言います。「View」は、アプリの画面を構成する部品です。アプリの画面を構築するときは、この「View」を並べていきます。

VStack

コマンドキーを押しながら、12行目の「Text」をクリックしましょう。メニューが表示されるので、「Embed in VStack」をクリックします。そうすると、「Text」が「VStack」に囲まれます。「VStack」はViewを縦に並べるViewです。これで、次に追加する「Button」と「Text」を並べられます。
スクリーンショット 2022-04-23 10.52.50.png

Button

Textの下にButtonを追加します。まず、.paddingと書かれている行の次に改行を加えます。
スクリーンショット 2022-05-05 13.55.10.png

次に、Xcodeの右上のプラスボタンを押します。プラスボタンを押すと出てくるウィンドウからButtonをドラッグし、先ほど追加した行にドロップします。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323336363234392f39636531643330372d663762332d666366612d613331342d6662643463386263356563632e706e67.png
Buttonを追加したら、プレビューの上の再生ボタンを押します。プレビューが動いたら、プレビュー上のButtonを押してみましょう。ボタンを押すと少し色が薄くなって、押した感覚が得られるはずです。

変数

変数とは、データを入れる箱のようなものです。次のように書き換えてみましょう。
スクリーンショット 2022-05-05 14.11.49.png
変数は、「var 名前 = 値」のように定義します。今回の場合、変数「count」が0であることを表しています。変数の前に@Stateとつけると、その変数の値が変更されたときに関係するViewの表示が更新されるようになります。

文字列に変数を埋め込む

"こんにちは"のようなものを文字列といいます。この文字列には、変数を埋め込むことができます。"(count)"のように書くと文字列の中に変数を埋め込めます。コードを下のように書き換えてみましょう。
スクリーンショット 2022-05-05 15.02.01.png
Textでcount変数に代入されている0を表示できたはずです。

カウンターアプリを完成させる

コードを下のように書き換えましょう。
スクリーンショット 2022-05-05 15.18.52.png
「count += 1」は、「count変数に1を足す」という意味です。プレビューで実行してみましょう。ボタンを押すと数字が1ずつ足されていくことがわかります。
これでアプリを完成させることができました、おめでとうございます。次回は、このカウンターアプリを改良していきます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
8
Help us understand the problem. What are the problem?