Mirucode — ブロックを組むようにSwiftUIを学べるアプリ

Mirucode とは

Mirucode(みるコード) は、SwiftUI の文法をまずコードから学ぶのではなく、「見て・触って・コードを読む」順 で習得できる学習アプリです。VStack や Text、Button といったコンポーネントを画面上でブロックのように組み立てると、対応する Swift コードが自動生成され、目標UIとの差分がリアルタイムで比較 される構成になっています。

こだわったポイント

1. 12個のレッスン×複数問題の段階学習

トップ画面には 12個のレッスン が3列グリッドで並びます。各レッスンには複数の問題が用意されていて、徐々に難易度が上がる設計。レッスンごとに違うシステムカラーが割り当てられており、「このレッスンはここまで進んだ」 という到達感を視覚で表現しています。

進捗バーは青→紫の線形グラデーションを Spring アニメーションで滑らかに描画。学習履歴はそのまま折線グラフで可視化されます。

2. ビジュアルビルダーでドラッグ&ドロップ

学習の中心は、ビジュアルコンポーネントビルダー。VStack / HStack / Text / Image / Button といったコンポーネントをドラッグして配置すると、ツリー構造のレイアウトが組み上がります。

• HStack の幅を超えそうになったら、自動的に追加可能性をチェック
• 各ノードを選択すると、対応するコード行がハイライト
• 6種のモディファイア (padding / foregroundStyle / font / shadow / frame / background) をパネルで適用

3. 自動生成された Swift コードがリアルタイムで見える

ビルダーで操作した内容が、即座に Swift の構文として右側エリアに表示。「こういう操作をすると、こういうコードになるんだ」という対応関係が、頭にストンと入ります。

4. 目標UIとの差分でゴールが明確

各問題には 目標UI が用意されており、自分が組んだUIと並べて表示。完成度が視覚で分かる ため、「次に何を直せば正解になるか」を考える集中力が保たれます。完了時には Spring アニメーションで次の問題へ遷移。

開発プロセス

工程	使用ツール
企画	ChatGPT
データ構造設計(ComponentNode のツリー)	Claude Code
実装	Claude Code (SwiftUI + SwiftData + StoreKit 2)

ドラッグ&ドロップとリアルタイムコード生成は、実装の山場でした。ComponentNode というツリー構造をベースに、親子関係を動的に構築・削除する仕組みを組んでいます。

レッスンと進捗は SwiftData で永続化。プレミアムレッスンは StoreKit 2 で課金管理しています。

振り返り

• 目で見て触って学ぶ 方式は、コード入門者の心理的ハードルを大きく下げる
• 「正解があり、視覚で差分が見える」設計は、学習者の達成感を最大化する
• 学習アプリの開発で一番の難関は 正解判定ロジック だが、AIと壁打ちしながら設計するとシンプルにまとまる
• リリース時には別の苦労(審査落ち連発)もありましたが、それは 別記事 で。

SwiftUI を学びたい人、UI コーディングをビジュアルから理解したい人は、ぜひ Mirucode を試してみてください。