Macで学ぶSwift　Lesson 2 (アプリ開発）Chapter 1

さていよいよアプリ開発の講座です。
プログラミングを学ぶ時の定番”Hello world !!”の表示アプリ？を作りながらXcodeの使い方を最初に学んでみましょう。

基本中の基本の解説になりますのでプログラミングというよりも、最初はXcodoの操作が大半になるかと思いますが、仕組みの理解と慣れが大切なのでじっくりとご一緒に学んでいきましょう。

以下はXcodeのスタート画面です。
バージョンは13.3です。

Create a new Xcode project　をクリックして新規プロジェクトを作成します。

画面遷移したら最上部はiOSを選択し、Application項目のAppを選択してNextをクリックします。

Product Name:（プロダクトネーム）は貴方が作る製品名です。
簡単なアプリ名を自由につけましょう。

Team:はNoneのままで良いでしょう。複数人で開発する場合の識別子になります。

Organization Identifier:（オーガニゼーション・アイデンティファール）は組織の識別子になります。　貴方のサイトアドレスやメールアドレスを逆順で並べたものを記載します。

Interface:はSwiftUIを選択します。

Language:はSwiftのみしか選択できません。以前はC#も使えました。

Use Core Data（ユーズ・コア・データ）とは作成したアプリから入力されたデータ等を外部ファイルに保存するための機能を提供するものです。
大量のユーザー管理などデータベースへのアクセスをが必要な場合などには必要になりますが、初期学習の段階では必要は無いので、チェックは入れません。

Include Tests: （インクルード・テスツ）は独自の関数等を作成した時に自動テストができるようにするものです。　（プロジェクト名）.Testsというファイルが作られます。
ここにはチェックを入れておきましょう。

完了しましたらNextをクリックして進みましょう。

上記の画面に遷移したでしょうか？
ここでは作成するアプリの保存先を選択します。

筆者の場合はデスクトップにswiftappというフォルダを作って、その中にproject1というフォルダを作り、その中に保存するようにしています。

保存先が決まりましたらCreateをクリックして先に進みます。

このような画面が表示されているでしょうか？
ざっとですが各エリアの説明をしていきます。

・ツールバー

Xcode画面の最上部に▶️のマークがありますが、これは実行ボタンになっています。

それから右へ移動すると筆者の場合iphone 13と出ています。
ここをクリックするとシュミレーターでテストできる機種を選択できます。
これをScheme（スキーム）と呼びます。

その右の＋マークはライブラリボタンになっています。
色々なUI部品やコード補完してくれるスニペットなどが選択できます。
コード補完とはコードの記述を楽にしてくれる機能のことです。

一番右と左のアイコンはインスペクタエリアとナビゲータエリアを閉じるアイコンです。

・ナビゲータエリア

このエリアの最上部に９つのアイコンが並んでいます。

左のアイコンから順に簡単な説明をします。

この中で重要なのはプロジェクトナビゲータです。
学習を進めていく中で主にContentView.swiftファイルでコードを書いていきます。

・エディタエリア

プロジェクトナビゲータで選択したファイルを操作・記述する場所です。
選択したファイルによっては表示形態が変わります。

・シュミレーター

シュミレータエリアまたはキャンバスと呼ばれる画面です。
機種に応じた表示をしてくれます。
以前はこのキャンパス上にライブプレビューボタンがありましたが、現在ではありません。
とても便利だったのですが残念です。

・インスペクタエリア

エディタエリアに表示されているファイルの設定を行う場所です。

ではシュミレータ（キャンバス）にiPhone画面を表示させてみましょう。
このエリアの右上にresumeボタンがありますのでクリックしてください。
少し表示に時間がかかる場合がありますが、表示されるまで待ちましょう。

表示されましたら、キャンバスのiPhone画面内にあるHello world!の文字をクリックしてください。

文字をクリックするとエディタエリアに該当箇所が反転表示され、インスペクタエリアの５つ並んだアイコンの最も右（モディファイヤライブラリ）をクリックして上図のようにしてみましょう。

モディファイヤライブラリのText項目にHello world!と書かれているところを書き換えてみましょう。

エディタエリアが変更され、プレビューも文字が変更されているのが確認できました。
モディファイヤライブラリは直感的に画面を操作でき、コードの書き込みも同時に行ってくれるので、とても重宝します。

次はキャンバスのプレビューに出ている文字のフォントを変更してみましょう。
Xcode最上部のツールバーにあるライブラリボタン（＋記号）をクリックしてライブラリを開きます。
以前はインスペクタエリアの右下に表示できたのですが、現在はポップアップ式になっていて使用しないと消えてしまいます。
常時表示したい場合はキーボードのoptionボタンと同時にライブラリボタンをクリックすると常時表示できます。

ライブラリウィンドウのViewsと出ているところにfontと入力するとFontコントロールが出ますのでそれをドラッグ&ドロップで”こんにちは世界！”の上にドロップします。
ドロップする際iPhoneプレビューの下部にAdd Font to Textと出たところでドロップします。
最初はぎこちなくなってしまいますが、慣れてくるとスイスイ行けるようになりますよ。

次は文字の色を変えてみましょう。
先ほどと同じように今度はforeと検索してForeground Colorエフェクトをドラッグ&ドロップします。
先ほどのようにAdd Foreground Color to Textと表示されたらドロップしてくださいね。

エディタエリアにまた一つ書き加えられて、キャンバスのプレビューの文字に色がつきました。
青い枠線が入っていますが、その外側をクリックすると消えます。
この枠線はpadding（パディング）といって文字列からの余白を指定している部分になります。
通常は実機の画面には見えませんが、部品が増えてくると注意が必要になります。

ひとまず部品の変更と装飾を兼ねて、画面の操作を理解して頂ければOKです。
次回はファイル操作について学習していきましょう。
お疲れ様でした。