超初心者のためのSwiftUIチュートリアルまとめ

本

Apple公式のswiftUIチュートリアルを、プログラミングを始めたばかりの超初心者でもわかるように解説した記事のまとめ。

運営しているクリエイター: やこ

【Xcode】超初心者のためのSwiftUIチュートリアル1

1.SwiftUIって何？SwiftUIとは、2019年6月にAppleが発表した新しい開発フレームワーク（アプリを作るための機能・枠組）で、Xcode11から使えるようになりました。これまでの Storyboardよりもコードがシンプルで、画面作りもより簡単にできるようになりました。シミュレーターを立ち上げる必要がなく、プレビューだけで動作を確認できるようになったのも大きな変更点です（シミュレーターも従来通り使えます）。 2.経験の浅い人が学ぶときに留意することプログラミ

【Xcode】超初心者のためのSwiftUIチュートリアル2

今回は「Creating and Combining Views（ビューの作成と結合）」のセクション2「Customize the Text View（テキストビューをカスタマイズする）」とセクション3「Combine Views Using Stacks（スタックを使用してビューを結合する）」を進めていきます。 Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい方は自動翻訳機能のあるGoogleChromeなどのブラウザを使用するといいでしょう。

【Xcode】超初心者のためのSwiftUIチュートリアル3

今回は「Creating and Combining Views（ビューの作成と結合）」のセクション4「Customize the Text View（カスタム画像ビューを作成する）」とセクション5「Use UIKit and SwiftUI Views Together（UIKitビューとSwiftUIビューを一緒に使用する）」を進めていきます。 Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい方は、自動翻訳機能のあるGoogleChromeな

【Xcode】超初心者のためのSwiftUIチュートリアル4

今回は「Creating and Combining Views（ビューの作成と結合）」のラスト、セクション6「Compose the Detail View（詳細ビューを作成する）」を進めていきます。 Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい方は、自動翻訳機能のあるGoogleChromeなどのブラウザを使用するといいでしょう。 1.ContentViewファイルにVStackを付け加える今回は、ContentView.swiftファ

【Xcode】超初心者のためのSwiftUIチュートリアル5

Apple公式SwiftUIチュートリアルのやさしい解説を、プログラミング未経験または経験がごく浅い方を対象に書いています。初めて見る方は、このページを読む前に【Xcode】超初心者のためのSwiftUIチュートリアル1〜4を先に読んでおくのをおすすめします。今回から「Building Lists and Navigation（リスト作成とナビゲーション）」に入ります。1〜4までに作成したイメージ画像（imageView）や地図画像（mapView）、それらを組み合わせた

【Xcode】超初心者のためのSwiftUIチュートリアル6

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第6回。前回まとめた【Xcode】超初心者のためのSwiftUIチュートリアル5の続きです。ここでは「Building Lists and Navigation（リスト作成とナビゲーション）」に沿って前回作成した行のビューを使い、データを一覧できるリストと、リストをタップすると詳細画面に遷移する動きを作っていきます。 Appleの公式チュートリアルはこちらを参照してください

【Xcode】超初心者のためのSwiftUIチュートリアル7

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第7回。【Xcode】超初心者のためのSwiftUIチュートリアル6の続きです。前回は「Building Lists and Navigation（リスト作成とナビゲーション）」に沿ってセクション7まで終えました。ランドマークのリスト一覧を作成し、リストの行ををタップすると、その項目の詳細画面が表示されるようにコードを書いていきました。今回はアプリの動きを確認するさまざまなプレ

【Xcode】超初心者のためのSwiftUIチュートリアル8

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第8回。今回から「Handling User Input（ユーザー入力の処理）」に入りました。表示するランドマークを切り替えたり、お気に入りのランドマークをユーザーが自由に変更できる機能を付け加えていきます。 Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい場合は、自動翻訳機能のあるGoogleChromeなどのブラウザを使用するといいでしょう。

【Xcode】超初心者のためのSwiftUIチュートリアル9

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第9回。引き続き「Handling User Input（ユーザー入力の処理）」を進めていきます。前の第8回セクション3では、表示するランドマークの切り替えができるようになりました。今回はお気に入りのランドマークをユーザーが自由に変更できる機能を付け加えていきます。 Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい場合は、自動翻訳機能のあるGoog

【Xcode】超初心者のためのSwiftUIチュートリアル10

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第10回。今回から「Drawing Paths and Shapes（パスとシェイプの描画）」に入ります。この章ではアプリ内で使うバッジ画像を作ります。SwiftUIでも角度、大きさ、色などをコードで指定して、ビューにさまざまな形を描くことができます。その一例としてチュートリアルでは六角形や山型のシンボルの描き方を紹介しているので、手順を確認していきましょう。今回は、下のよう

【Xcode】超初心者のためのSwiftUIチュートリアル11

手を骨折したため更新の間が空いてしまいました。 Apple公式のSwiftUIチュートリアルをプログラミング超初心者向けに優しく解説するシリーズ第11回。今回は「Drawing Paths and Shapes（パスとシェイプの描画）」の後半、セクション3・4を進めていきます。第10回ではバッジ画像の背景となる六角形のグラデーション画像を作りました。今回の作業は次のような流れになります。セクション3 ・六角形を描いたBadge.swiftの名前を変更して、新たなBad

【Xcode】超初心者のためのSwiftUIチュートリアル12

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第12回。今回から「Animating Views and Transitions（ビューと遷移のアニメーション化）」に入ります。この章では、さまざまなビューのアニメーションを作っていきます。ビューの色やサイズの変化、回転などのさまざまな動きをanimation(_:)の修飾子で作ることが可能になります。今回の作業は以下の通り。Appleの公式チュートリアルはこちらを参照して

【Xcode】超初心者のためのSwiftUIチュートリアル13

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第13回。今回は「Animating Views and Transitions（ビューと遷移のアニメーション化）」の続きで、セクション3からです（前回の記事はこちら）。この章では、さまざまなアニメーションを作っていきます。ビューの色やサイズの変化、回転などの多様な動きをanimation(_:)の修飾子で作ることが可能になります。 Appleの公式チュートリアルはこちらを

【Xcode】超初心者のためのSwiftUIチュートリアル14

Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第14回。今回から「Composing Complex Interfaces（複雑なインターフェースの作成）」に入ります（前回の記事はこちら）。この章ではアプリのホーム画面を作っていきます。データベースに入っているそれぞれのランドマークが、Lakes、Mountains、Riversの3つのカテゴリーに分かれて水平方向にスクロール表示されるビューができあがります。 Appl