iOSアプリの開発環境を整え、画面表示やボタン操作、画面遷移を練習する教材です。書籍レビューの表示を題材に、一覧と通信機能を段階的に実装します。

ビルド、シミュレータ実行、端末に合わせたレイアウトを学べます。画面間のデータ受け渡し、ライブラリ追加、一覧表示、通信結果の表示も練習します。

こんなことが学べる

プログラミング経験が少しあれば問題なくクリアできるレベルです。Swiftの基本を知っていると進めやすくなります。開発環境の設定に加え、画面の構成や通信後の表示更新を理解する必要があります。

むずかしさ

目安は25〜50時間です。全17問です。

どれくらいかかる？

Swift/Objective-CなどiOSに関する相談がしたい方

アプリを作る

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A3

Xcodeのバージョン画面をstation1.pngの名前でスクリーンショットし、ios-stations/testResourcesフォルダ直下に格納している

Swift

Install Xcode

開発環境を設定しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A6

jp.co.techbowl.ios-stations-userのbundle idが設定されている

Build iOS Project

iOSプロジェクトをビルドしてみよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A11

エラーがなく正しくビルドができ、起動ができる

iPhone 15 Proの解像度を持つシミュレータ画面のスクリーンショット（白い画像）を撮影し、「station3.png」の名前でios-stations/testResourcesフォルダ直下に格納している

Run App

アプリをiOSシミュレータで動かしてみよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A31

アプリ起動後の画面の背景色が指定した色で設定されている

Initialize App

画面表示に使用するクラスを理解しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A51

- 適切な箇所にjaのInfoPlist.stringsが作成されている

japaneseのBundle nameに適切なアプリ名が設定されている

適切なxcassetsにアイコンが設定されている

Configure Icon & Name

アプリアイコンとアプリ名を設定しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A65

起動時にFirstViewControllerが呼び出される

UILabelがStoryboard上に作成されている

UILabelの文字が`Hello World`に設定されている

Show Text

画面にテキストを表示しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A86

適切なConstraintsが追加されている

UILabelに適切な文字、色、フォントが設定されている

Learn Layout

様々な端末に対応した画面レイアウトについて学ぼう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A133

UIButtonの大きさや文字、フォントが指定した基準を満たす

適切なAutoLayoutが設定されている

Show Button

画面にボタンを表示してみよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A157

- @IBActionとして定義したメソッドをStoryboardのインスペクタ経由で接続するやり方を説明できる

UIColorをランダムで返すメソッドを実装できており、記法の意味を説明できる

Clickボタンのラベルのフォントを指定されたフォント（Helvetica Neue）、スタイル（Light）に変更できる

Change Button Color

ボタンを押すと色が変わるようにしてみよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A204

ボタンのタップイベントに、presentメソッドを使ってFirstViewControllerからSecondViewControllerへ遷移できる処理が関連付けされている

メソッド名がpresentSecondViewControllerとして定義されている

Create View

新しい画面を作成しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A231

- presentメソッドを使ってFirstViewControllerからSecondViewControllerへの遷移が実装されている

SecondViewControllerにhttps://techbowl.co.jp/という値を渡している

Pass by Value

画面遷移先にデータを渡してみよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A258

Book構造体に適切なプロパティが定義されている

Create Reader App

書籍レビューを表示するアプリを作ってみよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A262

指定したバージョンのパッケージを Swift Package Manager 経由でインストールできていること

Learn Package Manager

Swift Package Manager でライブラリを追加しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A266

Storyboard上で、FirstViewControllerにUITableViewとUITableViewCellが作成されている

BookCellを作成し、StoryboardでreuseIdentifierを指定して割り当てている

BookCellクラスにUIImageViewが1つ、UILabelが2つ作成され、適切な設定がされている

Learn List Component

一覧表示を実装しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A269

BookAPIClientクラスにAPIサーバと通信する処理が実装されている

通信結果をBook構造体の配列に変換し、completionHandler経由で呼び出し元に変換結果を返している
※ サーバとの通信に60秒以上かかる場合、サーバ側でAPI通信ができないエラーが起きている場合は、正しく実装できていてもテストが失敗します

Fetching data

データ通信機能を実装しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A273

取得したデータ数に応じてBookCellクラスが生成され、画面に表示されている

BookCellをタップした際、UITableViewDelegateのメソッド内でBookインスタンスのurlプロパティを渡してSecondViewControllerに画面遷移している

Show API Result

通信結果を画面に表示しよう

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fy85hnCapkivdFHzria2baS%2FNative-Railway%3Fnode-id%3D284%253A333

- UIButtonが配置され、ボタンのtouchUpInsideイベントにfetchBooksメソッドの関連付けが設定されている

UIRefreshControlがUITableViewに追加されている

UIRefreshControlにfetchBooksメソッドが関連付けされており、データ更新ができる

Fetching data by user action

ユーザアクションで通信する機能を実装しよう

日本語用InfoPlist.stringsが適切な場所にあり、日本語環境向けのアプリ表示名が設定されている。

完成画面の更新ボタンのtouchUpInsideイベントがfetchBooksへ接続され、その接続箇所をコードとStoryboardで示せる。

Swift Package Managerの依存設定に、教材指定のAlamofire 5.4.3が登録されている。

APIの書籍データをBook配列へ変換し、completionHandlerで呼び出し元へ渡している。

UIRefreshControlの操作でfetchBooksが呼ばれ、取得した書籍一覧が更新される。

iOS - Swift 初級編

こんなことが学べる

むずかしさ

どれくらいかかる？

この教材ではクリア判定面談があるよ