SwiftUI100本ノック iOS16バージョン
SwiftUI(と関連知識)を習得するための100本ノックのiOS16バージョンです
「SwiftUIチュートリアルの次に何をすれば良いかわからない」という人向けに作ってみました。
もっと良い解答例があればコメントでどんどん教えてください m(_ _)m
Githubで管理してます。スターください。100knocks-SwiftUI
TODO: iOS16バージョンといいつつ警告が出ているものはなるはやで修正します。
TODO: 難易度順には並んでいないですがなる早で難易度順に並べます。
Xcode Version 14.1
Swift version 5.7.1
シミュレーターはiPhone14でサイズはcommand+1のPhysical Size
かんたん(SwiftUIの簡単な構文だけで実装可能)
1. 画像をリサイズして表示(fit)
150✖︎200サイズに画像をリサイズして表示させてください。
アスペクト比が異なる場合は余白を赤色で表示してください。
![画像をリサイズして表示(fit)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fb211decc-ebfd-1f15-ecbf-a3cbcb4248b3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bbf36fdfb30fe1d80a2f8103ec7d3a5d)
2. 画像をリサイズして表示(clip)
150✖︎200サイズに画像をリサイズして表示させてください。
アスペクト比が異なる場合ははみ出た箇所を切り取って表示してください。
![画像をリサイズして表示(clip)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F863f7053-2723-f9f7-fc35-b5e51ca99256.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7d6e6473e08e0d4169beb5e93e3e23ec)
参考
【SwiftUI】画像(Image)の使い方
SwiftUIにおけるscaledToFill()とかscaledToFit()とかaspectRatio(_:contentMode:)等の使い分け
3. 画像を丸く切り取る
150✖︎150サイズに画像をリサイズし、丸く切り取って表示させてください。
![画像を丸く切り取る](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F5f3c040b-3def-938f-484b-4405ac03af9d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=72d079d7d41542ae54784fcbb3a65e2c)
4. 画像を丸く切り取り、枠を付ける
150✖︎150サイズに画像をリサイズし、丸く切り取り、黒い枠を付けて表示させてください。
![画像を丸く切り取り、枠を付ける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F35095787-18c2-0df5-906a-36ab15970ae8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6f23b6c82bcf98f9a487f07360372fe8)
5. 画像を等間隔で横に並べる
画像を等間隔で横に並べてください。
![画像を等間隔で横に並べる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F0eaceb7e-137f-e148-41cc-67cd06048a78.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eeb3d7b6c4fe616ea45f044235f7a81e)
6. NavigationViewを使いラージタイトルを表示する
NavigationViewを使いラージタイトルを表示してください。
![NavigationViewを使いタイトルを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F2f3446f9-d02a-3af8-d1d5-52a47a03b0f9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e7720936e97d6ca73f7cde3d320266a7)
7. Pickerを表示する
Pickerを使いポケモンを表示してください。
![Pickerを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F830898a0-8d47-45fc-8a0a-0b3a1718bf96.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9fb25e4ee8fff33dd7c37eec649937dc)
8. TabViewを使って画面を切り替える
TabViewを使って画面を切り替えてください。
![TabViewを使って画面を切り替える](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F30d349e6-f3cb-3ddc-637d-1b26303c958c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a318b4dee965c2408b0304e076b94d7b)
9. Buttonが押されたら文字を変える
Buttonが押されたら文字を変えてください。
![Buttonが押されたら文字を変える](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F47b35fb1-6605-f3f9-ebf1-75e6c43bdddb.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d71dd4e0d1dfe5b412e293f61876e49d)
10. Listを使ってセクションごとに表示する
Listを使ってセクションごとに表示する
![Listを使ってセクションごとに表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4782c125-b807-e029-774d-8a36fc534bee.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=03bbea1c9aec91ff7066287dd2e08807)
11. 画面遷移時に値を渡す
画面遷移時に値を渡してください。
![画面遷移時に値を渡す](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F10b43ffc-8520-1c90-80ba-37fa413ba6bd.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d616bfedb2278094fc80af4658117f1a)
12. NavigationViewの戻るボタンを非表示にする
NavigationViewの戻るボタンを非表示にしてください。
![NavigationViewの戻るボタンを非表示にする](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fa43e1eec-851f-db94-8537-501ddebe7c36.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c472a008d7435e2b24f2a2d3ea71fb9)
13. Listのスタイルを変更する
ListのスタイルをPlainListStyleに変更してください。
![Listのスタイルを変更する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F348c9cfa-f252-9910-367d-c4fc4daba7f8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=29268f4f994ee0e5b4d2b7ac258e8caf)
14. アラートを表示する(その1)
iOS14以前でも使用できる方法でアラートを表示させてください。
![SwiftUIでアラートを表示する(その1)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fefe3cccd-30f4-ae7e-99b2-7051785352ab.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c0bedfb2bad5bac5e87184dcb3daf0e0)
15. アラートを表示する(その2)
iOS15以降で使用できる方法でアラートを表示させてください。
![SwiftUIでアラートを表示する(その2)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1f6d69bd-53b9-5e5e-69d7-7890e1225566.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8e48d86eca4ca3eb93911cc6a0d8082b)
16. アラートを出し分ける(その1)
ボタン1が押されたらアラート1を、ボタン2が押されたらアラート2を表示してください
![アラートを出し分ける(その1)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F9a72127c-217d-e333-7bf2-681595f0a001.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f697eacf2a06c3678e3db9fd19def759)
17. アラートを出し分ける(その2)
ボタン1が押されたらアラート1を、ボタン2が押されたらアラート2を表示してください。
iOS14以下でも使用できる方法です。
![アラートを出し分ける(その2)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fc0b8a770-0f86-c263-46e8-b4bb59894c56.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c26b830569d9b463147c08970e6a8024)
18. Button内の画像やテキストの色を変えない
Buttonが押されたら文字を変えてください。
Button内の画像やテキストの色を変えないでください。
![Button内の画像やテキストの色を変えない](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F7254ef6f-0b40-f45b-c8e0-fa7915e4e312.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6d4243c78565046dfd09428dab84a7a9)
19. SwiftUIでアラートとシートを出し分ける
数字が入力されたらシートを表示してください。
数字以外が入力されたらアラートを表示してください。
![SwiftUIでアラートとシートを出し分ける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fce9ce44c-9c1b-3d12-11af-9babba006651.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=086972d8f4abdad794b04f81c081bc58)
20. NavigationLinkではなくButtonを押して画面遷移する
NavigationLink内のテキストではなく、Button内のテキストが押されたら画面遷移をしてください。
![NavigationLinkではなくButtonを押して画面遷移する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F306eafd2-a0c8-8797-eee4-d63448aa64b0.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f3614c03f0eceec86f4b22ddb5850fbe)
21. 続きを読む。。。ボタンがあるViewを実装する
SwiftUIで続きを読む。。。ボタンがあるViewを実装してください。
![続きを読む。。。ボタンがあるViewを実装する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fea16de50-b2e0-b393-4e81-c3a5e2294778.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1f286a29b5235c123248fb54fc23d96d)
22. Text中の文字の太さや色を変える
Text中の文字の太さや色を変えてください。
![Text中の文字の太さや色を変える](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F68dcb98b-e7a6-49d0-a3c8-04d612106d02.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=61c90c749415e7052d8eca01464ac861)
23. FunctionBuilderを使ってViewに影をつける
FunctionBuilderを使ってViewに影をつけてください。
![FunctionBuilderを使ってViewに影をつける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F3265aab1-ea6a-b3f5-7c8c-ce6060ce6f0c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=73123319d1ffef618613ee211825888e)
24. ViewModifierを使ってViewに影をつける
ViewModifierを使ってViewに影をつけてください。
![ViewModifierを使ってViewに影をつける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1e4d91d8-f381-862c-6b18-9f54d153970d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eb2df52d7f753e7ad7768a3e01b03d2c)
25. リストを編集する
リストを編集してください。
![リストを編集する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fc9f965df-d613-7900-dae3-bd5693e4869a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=be9722d53deada265205f211056e8266)
26. リストのセルをタップするとアラートが表示させる
リストのセルをタップするとアラートが表示させてください。
![リストのセルをタップするとアラートが表示させる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fc6d609b7-f5c4-1704-5f19-de6babccf69c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c22d21a98363718860276f37b689b741)
27. 画面遷移先のViewから遷移元のメソッドを呼び出す
画面遷移先の View から遷移元のメソッドを呼び出してください。
![画面遷移先のViewから遷移元のメソッドを呼び出す](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4c3d464f-b44c-353f-14f0-7c82e7f11271.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9b2c4180b2518951fc9e6a00fa71ccb9)
28. ListViewからそれぞれ別のViewに遷移する
ListViewからそれぞれ別のViewに遷移する
![ListViewからそれぞれ別のViewに遷移する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F61e5b55e-d5a3-2d7f-874f-cdfa0a554e97.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=532b86c341446c3f2a9fbb2dac6b360f)
29. 複数行のPickerを作成する
複数行のPickerを作成する
![複数行のPickerを作成する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F09654c53-2b85-aebd-2c69-5fcda53e3697.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=40dec8659a9c318edac021bdc2d373b3)
30. Sheetを表示する
Sheetを表示する
![Sheetを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F29405eb3-5e6a-6031-dbd9-7066f11ebdf3.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0e9dbeace17cc7202abc8d2a957e2a3d)
31. 全画面でSheetを表示する
全画面でSheetを表示する
![全画面でSheetを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F6a1c80f2-6838-211a-2f94-40bf215d62bf.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fa5d0185caa3b25c4681e2aba6b24eef)
32. NavigationBarを隠す
TextをNavigationViewの中に入れつつNavigationBarを表示しないでください
![NavigationBarを隠す](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fc4110b9b-d999-b7ab-aeb6-946fbc2eb3b7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b20db3970ebbc5fce0ae9d311659d682)
33. Previewを横向きにする
Previewを横向きにしてください。
![NavigationBarを隠す](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F8ed84f42-d0ff-6f0c-88cc-726db74241a8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=01b92f4a936b0e4f7501169f7b933668)
解答
TODO: 記事の内容が古いからコードに合わせて
34. 端末のシェイクを検知する
端末のシェイクを検知して@Stateを更新してください
![NavigationBarを隠す](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fab90a6ee-0645-8737-f57d-ecd82496617c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c29442a6db953bcf3c998191cad8497d)
35. UICollectionViewのようにViewを並べる
UICollectionViewのようにViewを並べてください。
TODO: 警告出てるので直す。
![UICollectionViewのようにViewを並べる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F0acf3542-679c-7d1f-aed3-d633ea18c478.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=95fa6e948f016eb5a2f51cfdab60edee)
36. アプリ起動時に画面を遷移させる
アプリ起動時に画面を遷移させてください。
![アプリ起動時に画面を遷移させる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Ff30a6aa7-b6ef-38d0-8da3-459ecd1a7ea5.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fbd38e5a302f770c2cb7bfa6873e83fe)
37. よくあるチュートリアル画面をUIPageViewControllerとSwiftUIで作る
画像のような良くあるウェークスルー画面を実装してください。
![アプリ起動時に画面を遷移させる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F77eb4eaf-5c50-8707-df53-99fb0fd06299.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5d42d72a0ad96c02ede7cc2fe22c3ec7)
38. 閉じることができないモーダルを表示する
SwiftUIで閉じることができないモーダルを表示してください。
![閉じることができないモーダルを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fbe788614-302f-b741-0f8f-0c10470663a1.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ac57f10495438631331002ce701eb168)
39. モーダルからフルモーダルを表示する
モーダルからフルモーダルを表示する
40. フルスクリーンモーダルを表示する
フルスクリーンモーダルを表示してください。
![フルスクリーンモーダルを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F2677a810-3858-5e37-9c04-a1d06525f64e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5399b9fb1256af8564e6d420612cae65)
iOS14では簡単に実装できるようになりました。
41. 文字列中にタップ可能なリンクを追加する
文字列中にタップ可能なリンクを追加してください。
![文字列中にタップ可能なリンクを追加する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1ac60523-00ed-48a7-7f25-42dddab39737.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=13541c1c34a51685a5e7ef7163426479)
42. GithubのAPIを叩き、リポジトリの情報をリストに表示する(Closure)
GithubのAPIを叩き、リポジトリの情報をリストに表示する(Closure)
![GithubのAPIを叩き、リポジトリの情報をリストに表示する(Closure)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F2ec3195d-b43f-9503-51a1-908bf72053bd.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=97e1fd92af3078a00332fc60ccd09147)
参考
Infinite List Scroll with SwiftUI and Combine
43. GithubのAPIを叩き、リポジトリの情報をリストに表示する(Combine)
GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
Combineを使用してください。
![GithubのAPIを叩き、リポジトリの情報をリストに表示する(Closure)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F21edf1a5-a2c6-d916-4adb-17686226bd65.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c80286958396a1915adb3ff600cf8367)
参考
Infinite List Scroll with SwiftUI and Combine
44. GithubのAPIを叩き、リポジトリの情報をリストに表示する。一番下までスクロールされたら追加で取得してください。
GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
一番下までスクロールされたら追加で取得してください。
![GithubのAPIを叩き、リポジトリの情報をリストに表示する(Closure)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fb358650a-a10e-89af-e979-5c4e1c34c9cb.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1b8ecaab06cb2aeb264d91a29ea3da4a)
参考
Infinite List Scroll with SwiftUI and Combine
45. GithubのAPIを叩き、リポジトリの情報をリストに表示する。一番下までスクロールされたら追加で取得してください。Indicator も表示してください。
GithubのAPI( https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30 )を叩きリポジトリの情報をリストに表示してください。
一番下までスクロールされたら追加で取得してください。
![GithubのAPIを叩き、リポジトリの情報をリストに表示する(Closure)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F51805a6b-28dd-709d-c6af-9fd7eb6b7541.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=282a967d23331ccf48fb9afc19152c59)
参考
Infinite List Scroll with SwiftUI and Combine
46. SwiftUIのTextFieldで編集中と編集完了を検知する
SwiftUIのTextFieldで編集中と編集完了を検知する
![SwiftUIのTextFieldで編集中と編集完了を検知する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F384f7440-afe1-0643-bfda-7efcb7c00238.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ea93c9e413762683d00bab3f7c4aafff)
47. SwiftUIのTextFieldで編集中と編集完了を検知する
SwiftUIのTextFieldで編集中と編集完了を検知する
![SwiftUIのTextFieldで編集中と編集完了を検知する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1c32923c-2d97-724a-5dcd-039f3e1cf9c4.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8a7e209f50a0252373999d0090dff605)
48. SwiftUIでAppStorageを使ってUserDefaultの値を監視する
SwiftUIでAppStorageを使ってUserDefaultの値を監視する
![SwiftUIでAppStorageを使ってUserDefaultの値を監視する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F91c6546e-6594-c3c9-0894-6a49a7551511.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8f32f9478f5a2a213efe728dc07d31fd)
49. SwiftUIでViewの上にViewを重ねる
SwiftUIでViewの上にViewを重ねる
![SwiftUIでViewの上にViewを重ねる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F92e9f8a0-0843-340f-f8e9-476a4ffb1909.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1a6416b37993eb4b32dafec84c425475)
50. SwiftUIでMapを使う。Mapにピンを立てる
SwiftUIでMapを使う。Mapにピンを立てる
![SwiftUIでMapを使う。Mapにピンを立てる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fbece6082-4167-37f1-9768-9a005664b450.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dda4909f085421e44e2f430b1357a050)
51. SwiftUIでImageを長押しするとContextMenuを表示する
SwiftUIでImageを長押しするとContextMenuを表示する
![SwiftUIでImageを長押しするとContextMenuを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F095f075d-05a5-81fe-99c7-0496c9bdf275.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b9a1e144c3d4c2a5dc949c34f2f0273a)
52. SwiftUIを使ったTODOアプリのサンプル
SwiftUIを使ったTODOアプリのサンプル
![SwiftUIを使ったTODOアプリのサンプル](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F8b437043-1ac9-9c37-b32e-3fbbf04cfa09.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ee6544e1588b4f02bd09bda0df83d2f1)
![SwiftUIを使ったTODOアプリのサンプル](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F075e4daf-846b-1708-cf0f-424c1be4562e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3960b5c2f272c03c2b270bbe0aa57b0c)
53. SwiftUIでAVAudioPlayerで音楽を再生し、再生終了を検知する
SwiftUIでAVAudioPlayerで音楽を再生し、再生終了を検知する
![SwiftUIでAVAudioPlayerで音楽を再生し、再生終了を検知する](53.gif)
54. SwiftUIでモーダルを表示する時に値を渡す
SwiftUIでモーダルを表示する時に値を渡す
![SwiftUIでモーダルを表示する時に値を渡す](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1b522ff7-73bb-fae7-6a61-ef8851dae5f6.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=76aead8f91edaa40baf67d7c3cd78598)
55. SwiftUIで複数のモーダルをEnumで出し分ける
SwiftUIで複数のモーダルをEnumで出し分ける
![SwiftUIで複数のモーダルをEnumで出し分ける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F044d95cf-027f-c86d-6fc5-841ddd8a0d7e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4974cd000396d76c9d876f5a8468a62e)
56. @Stateと@Bindingの使い分け
![@Stateと@Bindingの使い分け](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fb8abaf74-0686-234b-96e2-91bb745cb452.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=be9ffcca698af5b3b54ca4f01c5838b7)
57. SwiftUIでBMIを計算し、結果を別のViewで表示する
SwiftUIでBMIを計算し、結果を別のViewで表示する
![SwiftUIでBMIを計算し、結果を別のViewで表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Ff1ffbe63-52c3-a7f8-f7ac-5d0a5f1a92e6.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=46f4b6e45f888301b3b3b2c27ee0cbcd)
58. SwiftUIでボタンを押すとポップアップを表示する
SwiftUIでボタンを押すとポップアップを表示する
![SwiftUIでボタンを押すとポップアップを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F76958b05-bf67-b53d-0089-c0652933e586.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=105547a21313063510cf2a1a0a05dfcf)
59. SwiftUIでアラートを入れ子にして使うことができない
SwiftUIでアラートを入れ子にして使うことができない
![SwiftUIでアラートを入れ子にして使うことができない](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4d7266f6-bccc-21df-5ebc-652b6c24a820.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e9f847a03422becddaf6a1f648c76e99)
60. QGridを使ってCollectionViewを実装する
QGridを使ってCollectionViewを実装する
![QGridを使ってCollectionViewを実装する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Ffec6b80b-de1c-9647-60af-b843dbc8ef3d.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ad4037f2336402a92fec6edb01eb2cb2)
61. SwiftUIでViewを横スクロールで表示する
SwiftUIでViewを横スクロールで表示する
![SwiftUIでViewを横スクロールで表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fbb7fce83-bb1f-e54e-c947-fe012460837e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d54a0f3218e72f6e0c57e84f6d9195fa)
62. SwiftUIでButtonを有効にしたり無効にしたりする
SwiftUIでButtonを有効にしたり無効にしたりする
![SwiftUIでButtonを有効にしたり無効にしたりする](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4b07ba4f-0aa9-3a60-9cad-af4daee53d36.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5c4a06463bbb6dd25b8839f22be4eab7)
63. SwiftUIのTextFieldで表示するキーボードを指定する
SwiftUIのTextFieldで表示するキーボードを指定する
![SwiftUIのTextFieldで表示するキーボードを指定する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F97011374-7ebf-6b8d-4507-e48a94d427cc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bd0170b735b2faa28b29a2a596ac0f00)
64. SwiftUIで初めの画面に遷移する(popToRootViewController)
SwiftUIで初めの画面に遷移する(popToRootViewController)
![SwiftUIで初めの画面に遷移する(popToRootViewController)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F8121509c-784f-2c61-eaf7-d2493f29648a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cca94bb9045c121edead51d0c5bdcff4)
65. SwiftUIでシートを表示し、プッシュ遷移後にシートを閉じる
SwiftUIでシートを表示し、プッシュ遷移後にシートを閉じる
![SwiftUIでシートを表示し、プッシュ遷移後にシートを閉じる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F8c27d783-ea0b-633c-4447-21ffa2bb606e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b9604bd6ab3d873c82d0a93a02f99172)
66. SwiftUIでListをEditModeにして並び替える
SwiftUIでListをEditModeにして並び替える
![SwiftUIでListをEditModeにして並び替える](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fc9e8c783-a186-6116-b4ef-7e000e4b33bd.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7065430e76a7dca7fb2f05fc2eb23877)
67. SwiftUIのListでSpacerの部分にもタップ判定をつける
SwiftUIのListでSpacerの部分にもタップ判定をつける
![SwiftUIのListでSpacerの部分にもタップ判定をつける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fba06db71-1e7f-2f22-4dd7-ec5c6ac5b4f1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=32ab0613786d9419baee713a716518d2)
68. SwiftUIのListの中にボタンを複数設置する
SwiftUIのListの中にボタンを複数設置する
![SwiftUIのListの中にボタンを複数設置する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fa6cf8163-c27a-7956-884e-b8e1b9be6e87.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8bc61460fc7ca75ea7cb3bef5f9e6d80)
69. SwiftUIでSearchBar(TextField)を使って検索する
SwiftUIでSearchBar(TextField)を使って検索する
![SwiftUIでSearchBar(TextField)を使って検索する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4991b11d-094e-5bb2-4890-9dee1c466f9c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a1a42b128e4f0fca9ff937c466d65bd2)
70. SwiftUIでSearchBar(TextField)にクリアボタンをつける
SwiftUIでSearchBar(TextField)にクリアボタンをつける
![SwiftUIでSearchBar(TextField)にクリアボタンをつける](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F921fc3ab-20b3-c9e9-f109-255f79713479.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8d17e5f3a2380c2473921f2f241e4691)
71. SwiftUIでUIActivityViewControllerを表示する
SwiftUIでUIActivityViewControllerを表示する
![SwiftUIでUIActivityViewControllerを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F04713f01-b09b-205a-b557-3b07b70dcf24.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e43dcf84a1cafaedaf17d1499011994c)
72. SwiftUIでActivityIndicatorを表示する
SwiftUIでActivityIndicatorを表示する
![SwiftUIでActivityIndicatorを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F51e397e4-0dc7-9d73-8240-45c4485068cb.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c5063a32097d086247471bd491320708)
73. SwiftUIで少しカスタマイズしたActivityIndicatorを表示する
SwiftUIで少しカスタマイズしたActivityIndicatorを表示する
![SwiftUIで少しカスタマイズしたActivityIndicatorを表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fe94b20c2-6685-3473-8b13-423e3b1fe1ac.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=baae819771f6de4010d098dc1965a64d)
74. SwiftUIでListにButtonを設定してパラメーターの違う画面に遷移する
SwiftUIでListにButtonを設定してパラメーターの違う画面に遷移する
![SwiftUIでListにButtonを設定してパラメーターの違う画面に遷移する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fe95679d1-7413-fa8f-c0ed-b0e8c3a50d1e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=21db7a6a1a9e88cb849dfe7240341eda)
75. SwiftUIのTabViewのタブをコードから動的に切り替える
SwiftUIのTabViewのタブをコードから動的に切り替える
![SwiftUIのTabViewのタブをコードから動的に切り替える](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F386a9379-5818-e9b2-64ee-dbb24bce7650.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eff479c6c6581d117f17de2ac29d0e82)
76. Identifiableに適合していないStructでListを使う
Identifiableに適合していないStructでListを使う
![Identifiableに適合していないStructでListを使う](76.gif)
77. SwiftUIでカメラを使う
SwiftUIでカメラを使う
![SwiftUIでカメラを使う](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F5e24c871-d483-dace-106a-d6c33a90cbfd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c13433fa831a27f0410cb6ddb302fde2)
78. SwiftUIでスライダーとスクロールを連動させる
SwiftUIでスライダーとスクロールを連動させる
![SwiftUIでスライダーとスクロールを連動させる](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fa1f410da-0a12-8ac9-59b5-13ef72dca395.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5cafb696d64388acfa71885d50525ba0)
79. SwiftUIでPHPickerViewControllerを使って画像を選択する
SwiftUIでPHPickerViewControllerを使って画像を選択する
![SwiftUIでPHPickerViewControllerを使って画像を選択する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1c5cdc28-15ce-be6b-3050-fa28ac537124.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=af58f54b2e6ba23e741b385b326eb28b)
80. SwiftUIでMapViewの中央に十字を用意し、その中央の座標を取得する
SwiftUIでMapViewの中央に十字を用意し、その中央の座標を取得する
![SwiftUIでMapViewの中央に十字を用意し、その中央の座標を取得する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F2c68ca78-f056-f8fe-9bca-97d06bb9bccc.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=63fda5ee2432cfe392b751c45d168a8e)
81. SwiftUIでMapViewを使い複数の位置情報を選択する
SwiftUIでMapViewを使い複数の位置情報を選択する
![SwiftUIでMapViewを使い複数の位置情報を選択する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fe340a7b2-633f-e08a-5e7f-95a31fe6cba0.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=07c01d8818aa34c978e6edd5d88f9f0b)
82. SwiftUIで画像をピンチで拡大する(MagnificationGesture)
SwiftUIで画像をピンチで拡大する(MagnificationGesture)
![SwiftUIで画像をピンチで拡大する(MagnificationGesture)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4892a7a8-3470-46f2-60e1-c388d791d418.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aaef1603c4e829a4ee923bbb5153824b)
83. SwiftUIで画像をピンチで拡大する(PDFView)
SwiftUIで画像をピンチで拡大する(PDFView)
![SwiftUIで画像をピンチで拡大する(PDFView)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F4e5d9ef1-6fbb-a5c8-1c77-011e65d41074.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f99305a5808202e331eb64d156bd5ac9)
84. SwiftUIで画像をピンチで拡大する(UIImageView + UIScrollView)
SwiftUIで画像をピンチで拡大する(UIImageView + UIScrollView)
![SwiftUIで画像をピンチで拡大する(UIImageView + UIScrollView)](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F25de2c26-f505-2e19-87b3-b90cf2ec7522.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f500ee5f8e6598a6c655367cf2dd5aaa)
85. iOSのファイルアプリ(UIDocumentPickerViewController)を開いてドキュメントフォルダに保存したファイルを開く
iOSのファイルアプリ(UIDocumentPickerViewController)を開いてドキュメントフォルダに保存したファイルを開く
![iOSのファイルアプリ(UIDocumentPickerViewController)を開いてドキュメントフォルダに保存したファイルを開く](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F5691a03c-ef81-3178-535d-84f891de4b23.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8701fdaf4b7a1500acfd442491cfbbf4)
86. SwiftUIでObservableObjectの@publishedなプロパティとBindingをする
SwiftUIでObservableObjectの@publishedなプロパティとBindingをする
![SwiftUIでObservableObjectの@publishedなプロパティとBindingをする](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2Fe7b1200b-1f1b-a350-b301-25b4fd15f3da.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4fe08730b5295bcd319ac821c01c9066)
87. Swiftのasync,awaitを使ってAPIをフェッチする
Swiftのasync,awaitを使ってAPIをフェッチする
![Swiftのasync,awaitを使ってAPIをフェッチする](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F2e5a6d7d-2b87-4a9c-6a80-5502690c4d76.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8a86225335bc3bd21c6060d995420bac)
88. Swiftのasync,awaitを使ってAPIと画像を取得し、全てが揃ってから表示する
Swiftのasync,awaitを使ってAPIと画像を取得し、全てが揃ってから表示する
![Swiftのasync,awaitを使ってAPIと画像を取得し、全てが揃ってから表示する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F72f1362a-af68-920f-b394-ee6ebcb55c2f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fa36317f0f1d6ca6cc164540db84177f)
89. SwiftUIでさまざまなデバイスのプレビューを確認する
SwiftUIでさまざまなデバイスのプレビューを確認する
![SwiftUIでさまざまなデバイスのプレビューを確認する](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F63855%2F1f358776-29ff-aea0-20fb-a4e057b412c0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=08191d3d9e50785e59350fcd5377c73e)