SwiftUI100本ノック

SwiftUI（と関連知識）を習得するための100本ノックです。
「SwiftUIチュートリアルの次に何をすれば良いかわからない」という人向けに作ってみました。
100問無いので逐次追加します。
またもっと良い解答例があればコメントでどんどん教えてください m(_ _)m


#### 2023/01/06 更新

新しい記事を作成しました。
[SwiftUI100本ノック iOS16バージョン](https://qiita.com/takoikatakotako/items/886604570808bb8fc110)


## かんたん（SwiftUIの簡単な構文だけで実装可能）

### 画像をリサイズして表示（fit）

150✖︎200サイズに画像をリサイズして表示させてください。
アスペクト比が異なる場合は余白を赤色で表示してください。

<img width="300" alt="画像をリサイズして表示（fit）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/eacf27f7-cf58-6f02-70a9-bdb3e112c748.png">

[解答](https://swiswiswift.com/2020-09-05/)


### 画像をリサイズして表示（clip）

150✖︎200サイズに画像をリサイズして表示させてください。
アスペクト比が異なる場合ははみ出た箇所を切り取って表示してください。

<img width="300" alt="画像をリサイズして表示（clip）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/fb37fce5-ccbd-3697-bf4f-db4bf2fe488a.png">

[解答](https://swiswiswift.com/2020-09-06/)

参考
[【SwiftUI】画像（Image）の使い方](https://capibara1969.com/1861/)



### 画像を丸く切り取り、枠を付ける

150✖︎150サイズに画像をリサイズし、丸く切り取り、黒い枠を付けて表示させてください。

<img width="300" alt="画像を丸く切り取り、枠を付ける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/e99d63c8-037c-729c-5706-c9cf8b0f4750.png">


[解答](https://swiswiswift.com/2020-09-07/)



### 等間隔でViewを等間隔で横に並べる

画像を横に等間隔で横に並べてください。

<img width="300" alt="等間隔でViewを等間隔で横に並べる）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/9660bb65-c9c9-7c94-5e24-e6e4415386fa.png">

[解答](https://swiswiswift.com/2020-09-08/)


### NavigationViewを隠す

NavigationView を隠してください

<img width="300" alt="画像をリサイズして表示（fit）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/0e3426c4-26fe-6e94-0e43-3f9dd166f84a.png">

[解答](https://swiswiswift.com/2020-06-28/)



#### 画面遷移時に値を渡す

画面遷移時に値を渡してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/3215f4aa-efc4-ebe1-54e0-94341e75d225.gif)

[解答](https://swiswiswift.com/2020-09-13/)


### Picker を表示する

Picker を表示してください

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/883debb5-68d9-b325-f1f2-e09bb627ffb6.gif)

[解答](https://swiswiswift.com/2020-01-12/)


### TabViewを使って画面を切り替える

TabViewを使って画面を切り替えてください

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/44b2dd5b-3c96-4444-473a-61a2146238c3.gif)

[解答](https://swiswiswift.com/2019-11-21/)


#### Buttonが押されたら文字を変える

Buttonが押されたら文字を変えてください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/797b3e63-7f40-5983-49eb-8c40ab58bc29.gif)

[解答](https://swiswiswift.com/2020-09-04/)

参考
[SwiftUIにおけるscaledToFill()とかscaledToFit()とかaspectRatio(_:contentMode:)等の使い分け](https://qiita.com/Riscait/items/71a9492314b8424274f1)


### SwiftUI でアラートを表示する

SwiftUI でアラートを表示させてください

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/f0438608-a05e-3500-f77d-3786aa66a464.gif)

[解答](https://swiswiswift.com/2019-12-20/)


#### Button内の画像やテキストの色を変えない

Buttonが押されたら文字の色を変えてください。
Button内の画像やテキストの色を変えないでください。

![1.gif](https://swiswiswift.com/2020-09-14/1.gif)

[解答](https://swiswiswift.com/2020-09-14/)



## ふつう（SwiftUIだけで実装可能）

### SwiftUIでアラートとシートを出し分ける

数字が入力されたらシートを表示してください。
数字以外が入力されたらアラートを表示してください。

![1.gif](https://swiswiswift.com/2020-09-03/1.gif)

[解答](https://swiswiswift.com/2020-09-03/)


### Buttonからプッシュ遷移をする（NavigationLinkを無効にする）

NavigationLink内のテキストではなく、Button内のテキストが押されたら画面遷移をしてください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/58d22241-6794-0225-b4fc-7be37bac58d5.gif)

[解答](https://swiswiswift.com/2020-08-03/)


### SwiftUIで続きを読む。。。ボタンがあるViewを実装する

SwiftUIで続きを読む。。。ボタンがあるViewを実装してください。

![1.gif](https://swiswiswift.com/2020-06-20/1.gif)

[解答](https://swiswiswift.com/2020-06-20/)


### アプリ起動時に画面を遷移させる

アプリ起動時に画面を遷移させてください。

![アプリ起動時に画面を遷移させる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2cd1b0c2-b1ec-a5f2-9691-659095e22c81.gif)

[解答](https://swiswiswift.com/2020-05-12/)


### Text中の文字の太さや色を変える

Text中の文字の太さや色を変えてください。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/53e2a96d-b029-f744-2494-37e4277c7ade.png)

[解答](https://swiswiswift.com/2020-06-22/)


### FunctionBuilderを使ってViewに影をつける

FunctionBuilderを使ってViewに影をつけてください。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2c688138-c873-8621-6107-8d9a8640c297.png)

[解答](https://swiswiswift.com/2020-05-07/)


### ViewModifierを使ってViewに影をつける

ViewModifierを使ってViewに影をつけてください。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/f5e591a7-b88c-566b-9af3-9e92eae56f84.png)

[解答](https://swiswiswift.com/2020-05-06/)


### リストを編集する

リストを編集してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/25416261-b10e-1f52-a87b-fee40757c82d.gif)

[解答](https://swiswiswift.com/2019-12-17/)


### UICollectionViewのようにViewを並べる

UICollectionViewのようにViewを並べてください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/3d2fd773-f2d8-f18d-7352-43c626c6067a.gif)

[解答](https://swiswiswift.com/2020-02-09/)

参考
[Q-Mobile/QGrid](https://github.com/Q-Mobile/QGrid)


### 画面遷移先の View から遷移元のメソッドを呼び出す

画面遷移先の View から遷移元のメソッドを呼び出してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/20addb5f-6851-1136-413c-96935e21cecf.gif)

[解答](https://swiswiswift.com/2020-01-11/)


### リストのセルをタップするとアラートが表示させる

リストのセルをタップするとアラートが表示させてください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/da376f24-fc2a-f6ce-eb03-649ad5771a4a.gif)

[解答](https://swiswiswift.com/2019-12-18/)




## むずかしい（UIKitや他のフレームワークが必要）

### よくあるチュートリアル画面をUIPageViewControllerとSwiftUIで作る

画像のような良くあるウェークスルー画面を実装してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/0b9ca669-4014-1fb9-c065-e41b471e231c.gif)

[解答](https://swiswiswift.com/2020-08-02/)


### SwiftUIで閉じることができないモーダルを表示する

SwiftUIで閉じることができないモーダルを表示してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/f4c84112-5b99-3566-4d12-5861032d5edf.gif)

[解答](https://swiswiswift.com/2020-06-01/)


### フルスクリーンモーダルを表示する

フルスクリーンモーダルを表示してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/284c1475-f3f2-92d6-3ada-72d7c0e2c2a5.gif)

[解答](https://swiswiswift.com/2020-05-05/)

iOS14では簡単に実装できるようになりました。

[解答](https://swiswiswift.com/2021-02-02/)



### 文字列中にタップ可能なリンクを追加する

文字列中にタップ可能なリンクを追加してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/df0bb4b0-c09b-2c75-c0f6-4821248933ce.gif)

[解答](https://swiswiswift.com/2020-05-03/)


### GithubのAPIを叩き、リポジトリの情報をリストに表示する（Closure）

GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
Closureを使用してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/0f2bce27-2fa9-bb9e-722e-f43fc925c00d.gif)

[解答](https://swiswiswift.com/2020-09-09/)

参考
[Infinite List Scroll with SwiftUI and Combine](https://www.vadimbulavin.com/infinite-list-scroll-swiftui-combine/)


### GithubのAPIを叩き、リポジトリの情報をリストに表示する（Combine）

GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
Combineを使用してください。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/6120c8c8-a798-9139-0cad-e8bb0d9cf71e.gif)

[解答](https://swiswiswift.com/2020-09-10/)

参考
[Infinite List Scroll with SwiftUI and Combine](https://www.vadimbulavin.com/infinite-list-scroll-swiftui-combine/)


### GithubのAPIを叩き、リポジトリの情報をリストに表示する。一番下までスクロールされたら追加で取得してください。
GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
一番下までスクロールされたら追加で取得してください。

![1.gif](https://swiswiswift.com/2020-09-11/1.gif)

[解答](https://swiswiswift.com/2020-09-11/)

参考
[Infinite List Scroll with SwiftUI and Combine](https://www.vadimbulavin.com/infinite-list-scroll-swiftui-combine/)


### GithubのAPIを叩き、リポジトリの情報をリストに表示する。一番下までスクロールされたら追加で取得してください。Indicator も表示してください。
GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
一番下までスクロールされたら追加で取得してください。

![1.gif](https://swiswiswift.com/2020-09-12/1.gif)

[解答](https://swiswiswift.com/2020-09-12/)

参考
[Infinite List Scroll with SwiftUI and Combine](https://www.vadimbulavin.com/infinite-list-scroll-swiftui-combine/)