SwiftUI100本ノック iOS16バージョン

# SwiftUI100本ノック iOS16バージョン

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

Githubで管理してます。スターください。[100knocks-SwiftUI](https://github.com/takoikatakotako/100knocks-SwiftUI)

TODO: iOS16バージョンといいつつ警告が出ているものはなるはやで修正します。
TODO: 難易度順には並んでいないですがなる早で難易度順に並べます。

Xcode Version 14.1
Swift version 5.7.1
シミュレーターはiPhone14でサイズはcommand+1のPhysical Size


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

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

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

<img width="300" alt="画像をリサイズして表示（fit）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/b211decc-ebfd-1f15-ecbf-a3cbcb4248b3.png">

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


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

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

<img width="300" alt="画像をリサイズして表示（clip）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/863f7053-2723-f9f7-fc35-b5e51ca99256.png">

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

参考
[【SwiftUI】画像（Image）の使い方](https://capibara1969.com/1861/)
[SwiftUIにおけるscaledToFill()とかscaledToFit()とかaspectRatio(_:contentMode:)等の使い分け](https://qiita.com/Riscait/items/71a9492314b8424274f1)


### 3. 画像を丸く切り取る

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

<img width="300" alt="画像を丸く切り取る" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/5f3c040b-3def-938f-484b-4405ac03af9d.png">


[解答](????)


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

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

<img width="300" alt="画像を丸く切り取り、枠を付ける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/35095787-18c2-0df5-906a-36ab15970ae8.png">



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


### 5. 画像を等間隔で横に並べる

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

<img width="300" alt="画像を等間隔で横に並べる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/0eaceb7e-137f-e148-41cc-67cd06048a78.png">

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


### 6. NavigationViewを使いラージタイトルを表示する

NavigationViewを使いラージタイトルを表示してください。

<img width="300" alt="NavigationViewを使いタイトルを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2f3446f9-d02a-3af8-d1d5-52a47a03b0f9.png">

[NavigationViewを使いラージタイトルを表示する](???)


### 7. Pickerを表示する

Pickerを使いポケモンを表示してください。

<img width="300" alt="Pickerを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/830898a0-8d47-45fc-8a0a-0b3a1718bf96.gif">

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


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

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

<img width="300" alt="TabViewを使って画面を切り替える" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/30d349e6-f3cb-3ddc-637d-1b26303c958c.gif">

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


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

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

<img width="300" alt="Buttonが押されたら文字を変える" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/47b35fb1-6605-f3f9-ebf1-75e6c43bdddb.gif">

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


### 10. Listを使ってセクションごとに表示する

Listを使ってセクションごとに表示する

<img width="300" alt="Listを使ってセクションごとに表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4782c125-b807-e029-774d-8a36fc534bee.png">

[解答](???)


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

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

<img width="300" alt="画面遷移時に値を渡す" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/10b43ffc-8520-1c90-80ba-37fa413ba6bd.gif">

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


### 12. NavigationViewの戻るボタンを非表示にする

NavigationViewの戻るボタンを非表示にしてください。

<img width="300" alt="NavigationViewの戻るボタンを非表示にする" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/a43e1eec-851f-db94-8537-501ddebe7c36.gif">

[解答](???)


### 13. Listのスタイルを変更する

ListのスタイルをPlainListStyleに変更してください。

<img width="300" alt="Listのスタイルを変更する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/348c9cfa-f252-9910-367d-c4fc4daba7f8.png">

[解答](???)


### 14. アラートを表示する（その1）

iOS14以前でも使用できる方法でアラートを表示させてください。

<img width="300" alt="SwiftUIでアラートを表示する（その1）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/efe3cccd-30f4-ae7e-99b2-7051785352ab.gif">

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


### 15. アラートを表示する（その2）

iOS15以降で使用できる方法でアラートを表示させてください。

<img width="300" alt="SwiftUIでアラートを表示する（その2）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1f6d69bd-53b9-5e5e-69d7-7890e1225566.gif">

[解答](???)


### 16. アラートを出し分ける（その1）

ボタン1が押されたらアラート1を、ボタン2が押されたらアラート2を表示してください

<img width="300" alt="アラートを出し分ける（その1）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/9a72127c-217d-e333-7bf2-681595f0a001.gif">

[解答](???)


### 17. アラートを出し分ける（その2）

ボタン1が押されたらアラート1を、ボタン2が押されたらアラート2を表示してください。
iOS14以下でも使用できる方法です。

<img width="300" alt="アラートを出し分ける（その2）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/c0b8a770-0f86-c263-46e8-b4bb59894c56.gif">

[解答](???)


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

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

<img width="300" alt="Button内の画像やテキストの色を変えない" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/7254ef6f-0b40-f45b-c8e0-fa7915e4e312.gif">

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


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

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

<img width="300" alt="SwiftUIでアラートとシートを出し分ける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/ce9ce44c-9c1b-3d12-11af-9babba006651.gif">

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


### 20. NavigationLinkではなくButtonを押して画面遷移する

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

<img width="300" alt="NavigationLinkではなくButtonを押して画面遷移する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/306eafd2-a0c8-8797-eee4-d63448aa64b0.gif">

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


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

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

<img width="300" alt="続きを読む。。。ボタンがあるViewを実装する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/ea16de50-b2e0-b393-4e81-c3a5e2294778.gif">

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


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

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

<img width="300" alt="Text中の文字の太さや色を変える" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/68dcb98b-e7a6-49d0-a3c8-04d612106d02.png">

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


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

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

<img width="300" alt="FunctionBuilderを使ってViewに影をつける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/3265aab1-ea6a-b3f5-7c8c-ce6060ce6f0c.png">

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


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

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

<img width="300" alt="ViewModifierを使ってViewに影をつける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1e4d91d8-f381-862c-6b18-9f54d153970d.png">

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


### 25. リストを編集する

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

<img width="300" alt="リストを編集する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/c9f965df-d613-7900-dae3-bd5693e4869a.gif">

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


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

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

<img width="300" alt="リストのセルをタップするとアラートが表示させる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/c6d609b7-f5c4-1704-5f19-de6babccf69c.gif">

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


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

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

<img width="300" alt="画面遷移先のViewから遷移元のメソッドを呼び出す" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4c3d464f-b44c-353f-14f0-7c82e7f11271.gif">

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


### 28. ListViewからそれぞれ別のViewに遷移する

ListViewからそれぞれ別のViewに遷移する

<img width="300" alt="ListViewからそれぞれ別のViewに遷移する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/61e5b55e-d5a3-2d7f-874f-cdfa0a554e97.gif">

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


### 29. 複数行のPickerを作成する

複数行のPickerを作成する

<img width="300" alt="複数行のPickerを作成する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/09654c53-2b85-aebd-2c69-5fcda53e3697.gif">

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


### 30. Sheetを表示する

Sheetを表示する

<img width="300" alt="Sheetを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/29405eb3-5e6a-6031-dbd9-7066f11ebdf3.gif">

[解答](???)


### 31. 全画面でSheetを表示する

全画面でSheetを表示する

<img width="300" alt="全画面でSheetを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/6a1c80f2-6838-211a-2f94-40bf215d62bf.gif">

[解答](???)


### 32. NavigationBarを隠す

TextをNavigationViewの中に入れつつNavigationBarを表示しないでください

<img width="300" alt="NavigationBarを隠す" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/c4110b9b-d999-b7ab-aeb6-946fbc2eb3b7.png">

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


### 33. Previewを横向きにする

Previewを横向きにしてください。

<img width="300" alt="NavigationBarを隠す" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/8ed84f42-d0ff-6f0c-88cc-726db74241a8.png">

[解答](https://swiswiswift.com/2020-08-04/)
TODO: 記事の内容が古いからコードに合わせて


## 34. 端末のシェイクを検知する

端末のシェイクを検知して@Stateを更新してください

<img width="300" alt="NavigationBarを隠す" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/ab90a6ee-0645-8737-f57d-ecd82496617c.gif">

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



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

UICollectionViewのようにViewを並べてください。
TODO: 警告出てるので直す。

<img width="300" alt="UICollectionViewのようにViewを並べる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/0acf3542-679c-7d1f-aed3-d633ea18c478.gif">

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

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


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

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

<img width="300" alt="アプリ起動時に画面を遷移させる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/f30a6aa7-b6ef-38d0-8da3-459ecd1a7ea5.gif">

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


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

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

<img width="300" alt="アプリ起動時に画面を遷移させる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/77eb4eaf-5c50-8707-df53-99fb0fd06299.gif">

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


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

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

<img width="300" alt="閉じることができないモーダルを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/be788614-302f-b741-0f8f-0c10470663a1.gif">

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


### 39. モーダルからフルモーダルを表示する

モーダルからフルモーダルを表示する

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


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

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

<img width="300" alt="フルスクリーンモーダルを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2677a810-3858-5e37-9c04-a1d06525f64e.gif">

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

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

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


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

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

<img width="300" alt="文字列中にタップ可能なリンクを追加する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1ac60523-00ed-48a7-7f25-42dddab39737.gif">

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


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

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

<img width="300" alt="GithubのAPIを叩き、リポジトリの情報をリストに表示する（Closure）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2ec3195d-b43f-9503-51a1-908bf72053bd.gif">

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

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


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

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

<img width="300" alt="GithubのAPIを叩き、リポジトリの情報をリストに表示する（Closure）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/21edf1a5-a2c6-d916-4adb-17686226bd65.gif">

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

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


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

<img width="300" alt="GithubのAPIを叩き、リポジトリの情報をリストに表示する（Closure）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/b358650a-a10e-89af-e979-5c4e1c34c9cb.gif">

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

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


### 45. 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)

<img width="300" alt="GithubのAPIを叩き、リポジトリの情報をリストに表示する（Closure）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/51805a6b-28dd-709d-c6af-9fd7eb6b7541.gif">

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

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


### 46. SwiftUIのTextFieldで編集中と編集完了を検知する

SwiftUIのTextFieldで編集中と編集完了を検知する

<img width="300" alt="SwiftUIのTextFieldで編集中と編集完了を検知する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/384f7440-afe1-0643-bfda-7efcb7c00238.gif">

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


### 47. SwiftUIのTextFieldで編集中と編集完了を検知する

SwiftUIのTextFieldで編集中と編集完了を検知する

<img width="300" alt="SwiftUIのTextFieldで編集中と編集完了を検知する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1c32923c-2d97-724a-5dcd-039f3e1cf9c4.gif">

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


### 48. SwiftUIでAppStorageを使ってUserDefaultの値を監視する

SwiftUIでAppStorageを使ってUserDefaultの値を監視する

<img width="300" alt="SwiftUIでAppStorageを使ってUserDefaultの値を監視する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/91c6546e-6594-c3c9-0894-6a49a7551511.gif">

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



### 49. SwiftUIでViewの上にViewを重ねる

SwiftUIでViewの上にViewを重ねる

<img width="300" alt="SwiftUIでViewの上にViewを重ねる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/92e9f8a0-0843-340f-f8e9-476a4ffb1909.png">

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



### 50. SwiftUIでMapを使う。Mapにピンを立てる

SwiftUIでMapを使う。Mapにピンを立てる

<img width="300" alt="SwiftUIでMapを使う。Mapにピンを立てる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/bece6082-4167-37f1-9768-9a005664b450.gif">

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




### 51. SwiftUIでImageを長押しするとContextMenuを表示する

SwiftUIでImageを長押しするとContextMenuを表示する

<img width="300" alt="SwiftUIでImageを長押しするとContextMenuを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/095f075d-05a5-81fe-99c7-0496c9bdf275.gif">

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



### 52. SwiftUIを使ったTODOアプリのサンプル

SwiftUIを使ったTODOアプリのサンプル

<img width="300" alt="SwiftUIを使ったTODOアプリのサンプル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/8b437043-1ac9-9c37-b32e-3fbbf04cfa09.gif">

<img width="300" alt="SwiftUIを使ったTODOアプリのサンプル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/075e4daf-846b-1708-cf0f-424c1be4562e.gif">

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



### 53. SwiftUIでAVAudioPlayerで音楽を再生し、再生終了を検知する

SwiftUIでAVAudioPlayerで音楽を再生し、再生終了を検知する

<img width="300" alt="SwiftUIでAVAudioPlayerで音楽を再生し、再生終了を検知する" src="53.gif">



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




### 54. SwiftUIでモーダルを表示する時に値を渡す

SwiftUIでモーダルを表示する時に値を渡す

<img width="300" alt="SwiftUIでモーダルを表示する時に値を渡す" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1b522ff7-73bb-fae7-6a61-ef8851dae5f6.gif">

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




### 55. SwiftUIで複数のモーダルをEnumで出し分ける

SwiftUIで複数のモーダルをEnumで出し分ける

<img width="300" alt="SwiftUIで複数のモーダルをEnumで出し分ける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/044d95cf-027f-c86d-6fc5-841ddd8a0d7e.gif">

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




### 56. @Stateと@Bindingの使い分け

@Stateと@Bindingの使い分け

<img width="300" alt="@Stateと@Bindingの使い分け" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/b8abaf74-0686-234b-96e2-91bb745cb452.gif">

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




### 57. SwiftUIでBMIを計算し、結果を別のViewで表示する

SwiftUIでBMIを計算し、結果を別のViewで表示する

<img width="300" alt="SwiftUIでBMIを計算し、結果を別のViewで表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/f1ffbe63-52c3-a7f8-f7ac-5d0a5f1a92e6.gif">

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




### 58. SwiftUIでボタンを押すとポップアップを表示する

SwiftUIでボタンを押すとポップアップを表示する

<img width="300" alt="SwiftUIでボタンを押すとポップアップを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/76958b05-bf67-b53d-0089-c0652933e586.gif">

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


### 59. SwiftUIでアラートを入れ子にして使うことができない

SwiftUIでアラートを入れ子にして使うことができない

<img width="300" alt="SwiftUIでアラートを入れ子にして使うことができない" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4d7266f6-bccc-21df-5ebc-652b6c24a820.gif">

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


### 60. QGridを使ってCollectionViewを実装する

QGridを使ってCollectionViewを実装する

<img width="300" alt="QGridを使ってCollectionViewを実装する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/fec6b80b-de1c-9647-60af-b843dbc8ef3d.gif">

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



### 61. SwiftUIでViewを横スクロールで表示する

SwiftUIでViewを横スクロールで表示する

<img width="300" alt="SwiftUIでViewを横スクロールで表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/bb7fce83-bb1f-e54e-c947-fe012460837e.gif">

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




### 62. SwiftUIでButtonを有効にしたり無効にしたりする

SwiftUIでButtonを有効にしたり無効にしたりする

<img width="300" alt="SwiftUIでButtonを有効にしたり無効にしたりする" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4b07ba4f-0aa9-3a60-9cad-af4daee53d36.gif">

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




### 63. SwiftUIのTextFieldで表示するキーボードを指定する

SwiftUIのTextFieldで表示するキーボードを指定する

<img width="300" alt="SwiftUIのTextFieldで表示するキーボードを指定する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/97011374-7ebf-6b8d-4507-e48a94d427cc.png">

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



### 64. SwiftUIで初めの画面に遷移する（popToRootViewController）

SwiftUIで初めの画面に遷移する（popToRootViewController）

<img width="300" alt="SwiftUIで初めの画面に遷移する（popToRootViewController）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/8121509c-784f-2c61-eaf7-d2493f29648a.gif">

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


### 65. SwiftUIでシートを表示し、プッシュ遷移後にシートを閉じる

SwiftUIでシートを表示し、プッシュ遷移後にシートを閉じる

<img width="300" alt="SwiftUIでシートを表示し、プッシュ遷移後にシートを閉じる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/8c27d783-ea0b-633c-4447-21ffa2bb606e.gif">


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


### 66. SwiftUIでListをEditModeにして並び替える

SwiftUIでListをEditModeにして並び替える

<img width="300" alt="SwiftUIでListをEditModeにして並び替える" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/c9e8c783-a186-6116-b4ef-7e000e4b33bd.gif">

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



### 67. SwiftUIのListでSpacerの部分にもタップ判定をつける

SwiftUIのListでSpacerの部分にもタップ判定をつける

<img width="300" alt="SwiftUIのListでSpacerの部分にもタップ判定をつける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/ba06db71-1e7f-2f22-4dd7-ec5c6ac5b4f1.png">


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



### 68. SwiftUIのListの中にボタンを複数設置する

SwiftUIのListの中にボタンを複数設置する

<img width="300" alt="SwiftUIのListの中にボタンを複数設置する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/a6cf8163-c27a-7956-884e-b8e1b9be6e87.png">

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




### 69. SwiftUIでSearchBar(TextField)を使って検索する

SwiftUIでSearchBar(TextField)を使って検索する

<img width="300" alt="SwiftUIでSearchBar(TextField)を使って検索する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4991b11d-094e-5bb2-4890-9dee1c466f9c.gif">

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



### 70. SwiftUIでSearchBar(TextField)にクリアボタンをつける

SwiftUIでSearchBar(TextField)にクリアボタンをつける

<img width="300" alt="SwiftUIでSearchBar(TextField)にクリアボタンをつける" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/921fc3ab-20b3-c9e9-f109-255f79713479.gif">

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



### 71. SwiftUIでUIActivityViewControllerを表示する

SwiftUIでUIActivityViewControllerを表示する

<img width="300" alt="SwiftUIでUIActivityViewControllerを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/04713f01-b09b-205a-b557-3b07b70dcf24.gif">

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




### 72. SwiftUIでActivityIndicatorを表示する

SwiftUIでActivityIndicatorを表示する

<img width="300" alt="SwiftUIでActivityIndicatorを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/51e397e4-0dc7-9d73-8240-45c4485068cb.gif">

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



### 73. SwiftUIで少しカスタマイズしたActivityIndicatorを表示する

SwiftUIで少しカスタマイズしたActivityIndicatorを表示する

<img width="300" alt="SwiftUIで少しカスタマイズしたActivityIndicatorを表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/e94b20c2-6685-3473-8b13-423e3b1fe1ac.gif">

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



### 74. SwiftUIでListにButtonを設定してパラメーターの違う画面に遷移する

SwiftUIでListにButtonを設定してパラメーターの違う画面に遷移する

<img width="300" alt="SwiftUIでListにButtonを設定してパラメーターの違う画面に遷移する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/e95679d1-7413-fa8f-c0ed-b0e8c3a50d1e.gif">

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



### 75. SwiftUIのTabViewのタブをコードから動的に切り替える

SwiftUIのTabViewのタブをコードから動的に切り替える

<img width="300" alt="SwiftUIのTabViewのタブをコードから動的に切り替える" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/386a9379-5818-e9b2-64ee-dbb24bce7650.gif">

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




### 76. Identifiableに適合していないStructでListを使う

Identifiableに適合していないStructでListを使う

<img width="300" alt="Identifiableに適合していないStructでListを使う" src="76.gif">

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




### 77. SwiftUIでカメラを使う

SwiftUIでカメラを使う

<img width="300" alt="SwiftUIでカメラを使う" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/5e24c871-d483-dace-106a-d6c33a90cbfd.png">

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




### 78. SwiftUIでスライダーとスクロールを連動させる

SwiftUIでスライダーとスクロールを連動させる

<img width="300" alt="SwiftUIでスライダーとスクロールを連動させる" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/a1f410da-0a12-8ac9-59b5-13ef72dca395.gif">

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





### 79. SwiftUIでPHPickerViewControllerを使って画像を選択する

SwiftUIでPHPickerViewControllerを使って画像を選択する

<img width="300" alt="SwiftUIでPHPickerViewControllerを使って画像を選択する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1c5cdc28-15ce-be6b-3050-fa28ac537124.gif">

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




### 80. SwiftUIでMapViewの中央に十字を用意し、その中央の座標を取得する

SwiftUIでMapViewの中央に十字を用意し、その中央の座標を取得する

<img width="300" alt="SwiftUIでMapViewの中央に十字を用意し、その中央の座標を取得する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2c68ca78-f056-f8fe-9bca-97d06bb9bccc.gif">

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




### 81. SwiftUIでMapViewを使い複数の位置情報を選択する

SwiftUIでMapViewを使い複数の位置情報を選択する

<img width="300" alt="SwiftUIでMapViewを使い複数の位置情報を選択する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/e340a7b2-633f-e08a-5e7f-95a31fe6cba0.gif">

[解答](https://swiswiswift.com/2022-03-07/)




### 82. SwiftUIで画像をピンチで拡大する（MagnificationGesture）

SwiftUIで画像をピンチで拡大する（MagnificationGesture）

<img width="300" alt="SwiftUIで画像をピンチで拡大する（MagnificationGesture）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4892a7a8-3470-46f2-60e1-c388d791d418.gif">

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




### 83. SwiftUIで画像をピンチで拡大する（PDFView）

SwiftUIで画像をピンチで拡大する（PDFView）

<img width="300" alt="SwiftUIで画像をピンチで拡大する（PDFView）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/4e5d9ef1-6fbb-a5c8-1c77-011e65d41074.gif">

[解答](https://swiswiswift.com/2022-04-06/)




### 84. SwiftUIで画像をピンチで拡大する（UIImageView + UIScrollView）

SwiftUIで画像をピンチで拡大する（UIImageView + UIScrollView）

<img width="300" alt="SwiftUIで画像をピンチで拡大する（UIImageView + UIScrollView）" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/25de2c26-f505-2e19-87b3-b90cf2ec7522.gif">

[解答](https://swiswiswift.com/2022-04-07/)



### 85. iOSのファイルアプリ（UIDocumentPickerViewController）を開いてドキュメントフォルダに保存したファイルを開く

iOSのファイルアプリ（UIDocumentPickerViewController）を開いてドキュメントフォルダに保存したファイルを開く

<img width="300" alt="iOSのファイルアプリ（UIDocumentPickerViewController）を開いてドキュメントフォルダに保存したファイルを開く" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/5691a03c-ef81-3178-535d-84f891de4b23.gif">

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


### 86. SwiftUIでObservableObjectの@publishedなプロパティとBindingをする

SwiftUIでObservableObjectの@publishedなプロパティとBindingをする

<img width="300" alt="SwiftUIでObservableObjectの@publishedなプロパティとBindingをする" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/e7b1200b-1f1b-a350-b301-25b4fd15f3da.gif">

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



### 87. Swiftのasync,awaitを使ってAPIをフェッチする

Swiftのasync,awaitを使ってAPIをフェッチする

<img width="300" alt="Swiftのasync,awaitを使ってAPIをフェッチする" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/2e5a6d7d-2b87-4a9c-6a80-5502690c4d76.png">

[解答](https://swiswiswift.com/2022-06-15/)



### 88. Swiftのasync,awaitを使ってAPIと画像を取得し、全てが揃ってから表示する

Swiftのasync,awaitを使ってAPIと画像を取得し、全てが揃ってから表示する

<img width="300" alt="Swiftのasync,awaitを使ってAPIと画像を取得し、全てが揃ってから表示する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/72f1362a-af68-920f-b394-ee6ebcb55c2f.png">

[解答](https://swiswiswift.com/2022-06-16/)


### 89. SwiftUIでさまざまなデバイスのプレビューを確認する

SwiftUIでさまざまなデバイスのプレビューを確認する

<img width="300" alt="SwiftUIでさまざまなデバイスのプレビューを確認する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63855/1f358776-29ff-aea0-20fb-a4e057b412c0.png">

[解答](https://swiswiswift.com/2022-01-03/)