SwiftUI Academy · レッスン

ライブプレビューキャンバス

Q: 「ライブプレビュー キャンバス」レッスンは無料ですか？

はい。「ライブプレビュー キャンバス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

Q: 「ライブプレビュー キャンバス」で何を学びますか？

Xcode のプレビューを使用して、UI の変更をすぐに確認します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Xcode のプレビューを使用して、UI の変更をすぐに確認します。

レッスン 3/413 ステップ

「ライブプレビューキャンバス」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。

Canvasを知る

Xcodeではコードの横に、ビューをリアルタイムで描画するcanvasが表示されます。アプリ全体をビルドして起動しなくても、UIを確認できます。👀

表示と非表示を切り替える

Canvasが表示されない場合は、Editorメニューを開いてCanvasを有効にします。Swiftコードの隣、右側に表示されます。

#Previewブロック

ファイルの下部にある小さな#Previewブロックが、Canvasに何を描画するかを伝えます。テンプレートではContentView用のブロックが自動的に追加されます。

#Preview {
    ContentView()
}

ライブ更新

コードを変更すると、Canvasがほぼ瞬時に更新されます。このlive updateの繰り返しによって、SwiftUIでは素早く楽しく開発できます。⚡

編集してみる

Textビューの文言を編集し、入力中にCanvasが変化する様子を見てみましょう。結果をすぐ確認できるので、安心してexperimentingできます。

Text("Hello, SwiftUI!")

プレビューを再開する

Canvasが一時停止し、Resumeボタンが表示されることがあります。ライブ更新で適用できなかった変更の後にクリックすると、プレビューが再開されます。

インタラクティブモード

再生ボタンのようなlive modeでは、Canvas上で直接タップやスクロールができます。シミュレータを使わずにボタンやジェスチャーをテストできます。

プレビューするデバイス

iPhone SEのように、特定のdeviceをプレビューの対象に指定できます。小さな画面でレイアウトがどのように見えるか確認するのに役立ちます。

複数のプレビュー

複数の#Previewブロックを追加すると、状態を横並びで比較できます。たとえば、ライトモードとダークモードを同時に表示できます。

プレビューは配布されない

プレビュー用コードはdevelopment専用です。ユーザー向けアプリに含まれることはないため、プレビューには自由にサンプルデータを使えます。

ビルドより高速

Canvasは完全なビルドよりはるかに高速です。設計中は主な開発サイクルとして使い、より詳しいテストが必要なときだけsimulatorを利用しましょう。

理解度チェック

ファイル内で、Canvasに何を描画するかを伝えるブロックはどれですか？

対話的なレッスンで答える

まとめ

canvasは#Previewブロックを通じてビューをリアルタイムに描画し、入力に合わせて更新します。設計と試行錯誤を最速で行う方法です。🎨

無料で開始

AI チューターと学ぶ Swift — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 30
レッスン: 120

無料で学習を始めるコース全体を表示

よくある質問