EY-Office Blog

Claude CodeにiOSアプリをSwiftUIにアップデートしてもらった。良いね 😊

Thu, 04 Jun 2026 00:00:00 GMT

先週のブログそういえばClaude CodeでiOSアプリを開発出来るのだろか？出来ましたSwiftUIいいですねに書いたようにClaude CodeはSwift(Xcode)でiOSアプリが作れる事がわかました。またSwiftUIの良さを感じました。

以前ブログに書きましたが、私は自分専用のiOSアプリを作り、そのうち2つは今も使っています。→ TodoTask 、WebArchive
そして、たまに機能追加したいなぁ〜と思う事があるのですがXcode、とくにStorybordの面倒くさから躊躇していました（先週のブログの私の知っている昔のiOS開発にも書きましたね）。

ひょっとしてClaude Codeに頼んだらStoryboardベースからSwiftUIに変換できるのではと思いClaudeに聞いてみると

はい、できます。ただし「自動変換ツールを実行する」という類のものではなく、Claude Code（LLMによるエージェント）がコードを読んで書き直す作業になる、という点が重要です。UIKit/Storyboard → SwiftUI は単純な1:1の機械変換ではなく、設計パラダイムの移行だからです

と回答したのでTodoTaskアプリで試したら、すんなり出来てしまいました❗

今回のブログにもコード解説等が入っているので長いです、興味の無いところは適当に読み飛ばしてまとめを読んでください。

Nano Banana 2が生成した画像を使っています

今回のアプリ

このアプリはTODO管理アプリですが、特徴は

タスク詳細説明がMarkdownで書ける
バックエンドはRedmineを使っている（仕事関係のタスク管理にRedmineを使っています）

画面は以下のように、TODO一覧、表示、編集、編集（Markdownプレビュー）の4つです。

XcodeのStorybordは以下のような感じです。iOSアプリとしては簡単なアプリですね・・・

SwiftUI変換作業

プロンプト

このアプリは私専用ツールなので、UI(画面)は厳密に同じでなくて良いと指示しました。

このiOSアプリはUiKit/Storyboradで作られていますがSWiftUIに書き変えたいです。プランを考えてください。

- 画面は厳密に同じではなくても、機能的に同じなら良いです
- iPhone, iPadで適切に動作するようにしてください
- 難しい部分があれば教えてください

プラン

Claude Code (Opus 4.8)以下のようなプランを立ててくれました。Markdownの編集/プレビューの部分をどうするのかは気になっていましたが

(A) 現状ロジックを温存
(B) ネイティブ再実装
(C) 折衷

の3案を考え、選択するように言ってきました。さすがですね 😊

  --- 
  SwiftUI 移行プラン: TodoTasksProto 
   
  現状のアプリ構成（把握した内容） 
 
  Redmine をバックエンドにした ToDo 管理アプリです。 
 
  ┌─────────────────────────────┬─────────────────────────────────────────────────────────────────────────────────────┐ 
  │          ファイル        　   │                                        役割                                         │ 
  ├─────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────┤ 
  │ Redmine.swift               │ Config(plist読込) / Issue(モデル) / Projects(データ管理) / Redmine(APIクライアント) │ 
  ├─────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────┤ 
  │ MasterViewController        │ プロジェクトごとにセクション分けした課題一覧（UITableView）                         │ 
  ├─────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────┤ 
  │ DetailViewController        │ 課題の閲覧・編集。Markdownプレビューを WKWebView+marked.js で表示                   │ 
  ├─────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────┤ 
  │ AppDelegate / SceneDelegate │ 通知・バッジ・SplitView設定                                                         │ 
  ├─────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────┤ 
  │ Main.storyboard             │ SplitView + 2画面のUI                                                               │ 
  └─────────────────────────────┴─────────────────────────────────────────────────────────────────────────────────────┘ 
 
  機能の要点: 
  - iPad は2ペイン（一覧+詳細）、iPhone は遷移式 → UISplitViewController 
  - 一覧: プロジェクト別セクション / チェックボックスタップで状態切替 / スワイプで完了(削除) / 引っ張って更新 / 
  高優先度件数をアプリバッジに表示 / 新規追加 
  - 詳細: 件名・ステータス(セグメント)・優先度(セグメント)・説明文。説明文はMarkdownプレビューとエディタを切替。プレビュー内のチェックボックス 
  をタップすると元テキストの - [ ]/- [x] を書き換える（WebView↔ネイティブの双方向連携）。キーボード上部にMarkdown入力補助ツールバー。 
 
  --- 
  移行方針の全体像 
   
  そのまま再利用できる層（ロジック）と、作り直す層（UI）を明確に分けます。 
 
  - ✅ 再利用: Issue, IdNameValueTuple, IssueForUpdate, IssuesJson などのモデル / Config / Redmine のAPI呼び出しロジック 
  - 🔄 改修: Projects をコールバック式 → @Observable(または ObservableObject) + async/await に 
  - 🆕 新規作成: 全UI（Storyboard・2つのViewController を SwiftUI View へ） 
  - 🗑 削除: Main.storyboard, MasterViewController, DetailViewController, SceneDelegate(大幅縮小) 
 
  --- 
  ステップ別プラン 
 
  ステップ1: プロジェクト基盤の切替 
 
  - エントリポイントを @main struct TodoTasksApp: App (SwiftUI App lifecycle) に変更 
  - Info.plist から Storyboard 参照（UISceneStoryboardFile / Main storyboard base name）を削除 
  - AppDelegate は @UIApplicationDelegateAdaptor として残す（通知・リモート通知・バッジ更新に必要なため） 
  - 既存の Assets（カラー・チェック画像）はそのまま使用 
 
  ステップ2: データ層の近代化（Projects の書き換え） 
 
  - Redmine の getIssues/updateIssue/postIssue を async throws 化（URLSession.data(for:) を使用） 
  - Projects を @Observable class（iOS17ターゲットなので利用可）に変更し、names: [String], issues: [[Issue]] を監視可能プロパティに 
  - 各操作（更新・追加・完了・チェック切替）を async メソッド化。UI側は .task{} / Button の Task{} で呼ぶ 
  - 既存のビジネスロジック（セクション分け、Special を末尾へ、高優先度カウント）はそのまま移植 
 
  ステップ3: 一覧画面（Master）の SwiftUI 化 
 
  - NavigationSplitView を採用 → iPhone/iPad のアダプティブ対応を標準機能で実現（SceneDelegate の手動SplitView設定が不要に） 
  - List + Section(プロジェクト名ヘッダ) + 行ビュー 
    - 行: チェックボックス画像（タップで invertCheck）/ 件名 / 背景色は優先度カラー / Special は文字色変更 
    - .swipeActions で「完了」(旧スワイプ削除) 
    - .refreshable で引っ張って更新 
  - ツールバーに「＋」ボタン → 新規作成シートまたは詳細へ 
  - バッジ更新は UNUserNotificationCenter.setBadgeCount（iOS17の新API）で 
 
  ステップ4: 詳細画面（Detail）の SwiftUI 化 
 
  - Form または ScrollView ベースで件名 TextField/TextEditor、ステータス・優先度は Picker(.segmented) 
  - 閲覧/編集モードは @State var isEditing で切替（旧 editButtonItem 相当を EditButton か独自トグルで） 
  - Markdownプレビュー部分が最大の難所（後述） 
 
  ステップ5: 通知・バッジ・ライフサイクル 
 
  - フォアグラウンド復帰時の再読込: @Environment(\.scenePhase) の監視に置換（旧 willEnterForegroundNotification） 
  - リモート通知でのバッジ更新は AppDelegate に残す 
 
  ステップ6: 旧ファイル削除・クリーンアップ 
 
  - Storyboard / 2 ViewController / SceneDelegate を削除し、ビルド設定を整理 
 
  --- 
  ⚠️ 難しい部分（要判断ポイント） 
   
  1. Markdownプレビュー＋インタラクティブなチェックボックス（最難関） 
 
  現状は WKWebView + marked.js で描画し、チェックボックスのタップを JS→ネイティブに送って元テキストの - [ ] を書き換えています。SwiftUI 
  にはチェックボックス付きMarkdownをタップ操作できる標準機能がありません。 選択肢: 
 
  - (A) 現状ロジックを温存: WKWebView を UIViewRepresentable 
  でラップし、marked.js・JSブリッジ・正規表現での書き換えをそのまま移植。機能は完全互換で確実だが、SwiftUIらしさは薄い。 
  - (B) ネイティブ再実装: Markdownを自前パースしてSwiftUIの Toggle 
  等で描画。SwiftUIらしいが実装コストが高く、marked.js相当の表現力（コード/リスト/打消し等）を再現するのは大変。 
  - (C) 折衷: 表示は標準 AttributedString(markdown:)、チェックボックスだけ別UIで扱う。ただしGFMのタスクリストや複雑な記法は標準パーサが未対応。
 
  → 推奨は (A)。「機能的に同じならOK」という要件に最も低リスクで合致します。 
 
  2. SplitView の挙動の違い 
 
  NavigationSplitView は旧 UISplitViewController と細部の挙動（列幅 
  0.45、collapse時の詳細破棄ロジック）が異なります。機能同等は問題なく作れますが、見た目の細部は完全一致しません（要件上は許容範囲）。 
 
  3. 編集モードの状態管理 
 
  旧コードは setEditing のオーバーライド、viewDidAppear での遅延処理、Timer でのモード復帰など UIKit ライフサイクル依存の制御が多く、SwiftUI 
  の宣言的モデルへ素直に1対1変換できない箇所があります。状態を @State/@Observable に再設計する必要があります。 
 
  4. Markdownキーボードツールバー 
 
  inputAccessoryView のMarkdown補助ボタンは、SwiftUI の .toolbar(content:) の keyboard placement で再現可能。TextEditor へのカーソル位置挿入は 
  SwiftUI 単体だとやや扱いづらく、UITextView ラップが必要になる場合があります。 
 
  --- 
  推奨スコープ（最小リスク版） 
 
  1. データ層（Redmine/Projects）を async/@Observable 化 
  2. 一覧・詳細の主要UIを純SwiftUI（NavigationSplitView+List+Form）で実装 
  3. Markdownプレビューだけ既存 WKWebView を UIViewRepresentable で再利用（選択肢A） 
 
  これで「機能同等・iPhone/iPad対応・SwiftUI移行」を現実的な工数とリスクで達成できます。 
 
  --- 
  実装に進める前に、2点だけ確認させてください。 
 
⏺ User answered Claude's questions: 
  ⎿  · Markdownプレビュー（タップで完了チェックを切り替える機能）はどの方式で移行しますか？ → WebView再利用 (推奨) 
     · このプランで進めますか？それとも今は計画のみで実装は後ですか？ → 実装も開始 
 
⏺ 実装を開始します。WebView再利用方式で進めます。まずタスク管理を設定し、プロジェクト構成ファイルを確認します。

結果

編集画面の見た目は変わりましたが、問題なく使えます。

コードを読んでみましょう

SwiftUI／Storyborad版のTODO編集画面は以下のようになっています、SwiftUI版の編集画面のコードを読んでみましょう（Storyborad版のコードはブログの最後に付けておきます）。

実はTODO編集画面は、TODO表示、TODO新規作成、TODO編集で使われます。

① このViewの引数
- projects: TODOタスクの集まりをRedmineではProjectと呼んでいます、そのProjectの集まり
- issue: 1つのTODOタスク（RedmineではIssueと呼ばれています）のデータ
- isNew: trueなら新規作成
- onClose: このViewが閉じる際に呼び出される処理。現在は未使用
② ステータス等
- dismissはこのViewを閉じる為の機能
③ 件名の表示と入力欄
④ ステータス、優先度の表示と選択肢
⑤ 説明の表示と編集（入力）
- 表示はMarkdownを表示するMarkdownWebViewを使用。コードはブログ末に置きます
- MarkdownWebViewにはMarkdown内のCheckBoxをクリックした際の処理をブロックで渡せます
- 編集（入力）はテキスト入力欄＋αのMarkdownEditorViewを使用。コードはブログ末に置きます
⑥ Markdownの編集とプレビューの切り替え

import SwiftUI

struct IssueDetailView: View {
    let projects: Projects                           // ← ①
    let isNew: Bool
    var onClose: (() -> Void)?

    @State private var draft: Issue                  // ← ②
    @State private var isEditing: Bool
    @State private var showPreview = false
    @Environment(\.dismiss) private var dismiss
                                                     // ↓ ①
    init(projects: Projects, issue: Issue, isNew: Bool = false, onClose: (() -> Void)? = nil) {
        self.projects = projects
        self.isNew = isNew
        self.onClose = onClose
        _draft = State(initialValue: issue)
        _isEditing = State(initialValue: isNew)
    }

    var body: some View
        Form {
            Section("件名") {                         // ← ③
                if isEditing {
                    TextField("件名", text: $draft.subject, axis: .vertical)
                } else {
                    Text(draft.subject)
                }
            }

            if isEditing {                          // ← ④
                Section("ステータス") {
                    Picker("ステータス", selection: statusBinding) {
                        ForEach(Issue.StatusNames.indices, id: \.self) { i in
                            Text(Issue.StatusNames[i]).tag(i)
                        }
                    }
                    .pickerStyle(.segmented)
                }
                Section("優先度") {
                    Picker("優先度", selection: priorityBinding) {
                        ForEach(Issue.PrioptyNames.indices, id: \.self) { i in
                            Text(Issue.PrioptyNames[i]).tag(i)
                        }
                    }
                    .pickerStyle(.segmented)
                }
            } else {
                Section {
                    LabeledContent("ステータス", value: draft.statusName)
                    LabeledContent("優先度", value: draft.priortyName)
                }
            }

            Section("説明") {                           // ← ⑤
                if isEditing {
                    Picker("表示", selection: $showPreview) {
                        Text("エディタ").tag(false)
                        Text("プレビュー").tag(true)
                    }
                    .pickerStyle(.segmented)

                    if showPreview {                   // ← ⑥
                        MarkdownWebView(markdown: draft.description ?? "")
                            .frame(minHeight: 300)
                    } else {
                        MarkdownEditorView(text: descriptionBinding)
                            .frame(minHeight: 300)
                    }
                } else {
                    MarkdownWebView(markdown: draft.description ?? "") { position, checked in
                        toggleCheckbox(position: position, checked: checked)
                    }
                    .frame(minHeight: 300)
                }
            }
        }
        .navigationTitle(isNew ? "新規タスク" : "タスク")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar { toolbarContent }
    }

    @ToolbarContentBuilder                             // ← ⑦
    private var toolbarContent: some ToolbarContent {
        if isNew {
            ToolbarItem(placement: .cancellationAction) {
                Button("キャンセル") { close() }
            }
            ToolbarItem(placement: .confirmationAction) {
                Button("保存") {
                    Task {
                        await projects.add(draft)
                        close()
                    }
                }
                .disabled(draft.subject.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty)
            }
        } else {
            ToolbarItem(placement: .primaryAction) {
                Button(isEditing ? "完了" : "編集") {
                    if isEditing {
                        Task { await projects.update(draft) }
                    }
                    isEditing.toggle()
                }
            }
        }
    }

    private var statusBinding: Binding<Int> {       // ← ⑧
        Binding(get: { draft.statusIndex }, set: { draft.statusIndex = $0 })
    }

    private var priorityBinding: Binding<Int> {
        Binding(get: { draft.priortyIndex }, set: { draft.priortyIndex = $0 })
    }

    private var descriptionBinding: Binding<String> {
        Binding(get: { draft.description ?? "" }, set: { draft.description = $0 })
    }

    private func close() {                        // ← ⑨
        onClose?()
        dismiss()
    }

    private func toggleCheckbox(position: Int, checked: Bool) {   // ← ⑩
        var source = draft.description ?? ""
        let regexp = try! NSRegularExpression(pattern: #"- \[.\] "#)
        let matches = regexp.matches(in: source, range: NSRange(source.startIndex..., in: source))
        guard matches.count > position, let range = Range(matches[position].range, in: source) else { return }
        source.replaceSubrange(range, with: checked ? "- [x] " : "- [ ] ")
        draft.description = source
        Task { await projects.update(draft) }
    }
}

#Preview {                                       // ←  ⑪
    let issue: Issue = {
        var i = Issue()
        i.subject = "サンプルタスク"
        i.description = "# 説明\n\n- [x] 完了した項目\n- [ ] 未完了の項目"
        return i
    }()
    NavigationStack {
        IssueDetailView(projects: Projects(), issue: issue)
    }
}

#Preview("新規") {                               // ←  ⑫
    NavigationStack {
        IssueDetailView(projects: Projects(), issue: Issue(), isNew: true)
    }
}

⑦ ツールバーの作成
- 保存ボタンを押すとprojects.add(draft)でTODOが追加されます
- .disabled(draft.subject.trimming・・・は、件名が入力されて無い場合は保存ボタンを消します
⑧ Pickerでの値参照・設定を行う為のBinding処理
⑨ このViewが閉じる際に呼び出される処理
⑩ Markdown内のCheckBoxをクリックした際の処理
- Markdownのチェックボックス - [x] / - [ ]の切り替えを行い、TODOデータを変更しています
⑪ デフォルトのXcodeのプレビュー表示用のコード
- サンプルデータを作り編集用でプレビューを表示します
⑫ 新規作成用のプレビュー表示用のコード
- 名前を付けて他のデータでのプレビューも行えます

まとめ

Claude Code凄いですね❗

今回のUIKit + StoryboardベースからSwiftUIに変換作業のログを見ると、プラニング段階ではiOSシミュレータ等は起動していないので旧アプリの画面（UI）情報はStoryboardファイルから読み取っていると思われます。

Storyboardファイルは巨大なXMLファイルなので、人間が読んだり書いたりは（ほぼ）出来ませんが、AIはコンテキストウィンドウに入ればStoryboardファイルの内容を理解出来ているようです。

今後のプログラミングはAIが行う事がデフォルトになれば、人間の能力に妥協しなくても良いのかも知れませんね。

SwiftUI

前回からSwiftUIをまじめに勉強しだしたのですが、従来のUIKit + StoryboardはWebアプリで例えるとフレームやライブラリーを使わずにHTML + CSS + JSだけでレスポンシブウェブデザインのアプリを作っるような大変さがありました。

しかし、SwiftUIは BootstrapとReactを使ってWebアプリを作るように、簡単にiPhone/iPadに対応した良い感じのiOSアプリが作れます。ただし、標準とは違う凝ったUIや、凝ったアニメーションは苦手です。

そのような場合にはUIViewRepresentableというSwiftUIの中に従来のUIKitベースのViewを取り込むことで対応できます。今回のアプリではMarkdown表示やMarkdown編集（入力）用Viewで使われていました。

ほとんどのiOSアプリはSwift UIで作れる事が判りました、AIに聞いてみても新規iOSアプリのほとんどがSwift UIで作られているそうです。　　
　　
　　
　　
　　

DetailViewController.swift Storyborad版のTODO表示・編集

import UIKit
import WebKit

class DetailViewController: UIViewController, WKScriptMessageHandler {

    @IBOutlet weak var subjectText: UITextView!
    @IBOutlet weak var statusLabel: UILabel!
    @IBOutlet weak var statusText: UITextField!
    @IBOutlet weak var statusSegment: UISegmentedControl!
    @IBOutlet weak var priortyLabel: UILabel!
    @IBOutlet weak var priortySegment: UISegmentedControl!
    @IBOutlet weak var priortyText: UITextField!
    @IBOutlet weak var discriptionWeb: WKWebView!
    @IBOutlet weak var discriptionText: UITextView!
    @IBOutlet weak var previewButton: UIButton!

    var issueItem: Issue?
    var previewMode = true
    var toggleTimer: Timer?

    private let MarkdownKeys : [(title: String, text: String)] = [
        ("TAB", "   "),
        ("- list", "- \n- \n- "),
        ("1.list", "1. \n2. \n3. "),
        ("code", "```\n"),
        ("~~", "~~"),
        ("##", "## ")]

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        guard let issue = issueItem else { return }
        
        navigationItem.rightBarButtonItem = editButtonItem
        statusLabel.isHidden = false
        priortyLabel.isHidden = false
        
        setIssueToUI()
        toggleEditMode(isEditing)
        self.toggleTimer?.invalidate()
        
        if !isEditing {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
                self.refreshMarkedown(issue.description)
            }
        }
    }

    func clear() {
        hiddenUI()
        subjectText.text = ""
        discriptionWeb.loadHTMLString("<html></html>", baseURL: nil)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        hiddenUI()
        discriptionText.backgroundColor = UIColor(named: "EditBackground")
        for (i, name) in Issue.StatusNames.enumerated() {
            statusSegment.setTitle(name, forSegmentAt: i)
        }
        for (i, name) in Issue.PrioptyNames.enumerated() {
            priortySegment.setTitle(name, forSegmentAt: i)
        }
        addKeyboradToolbar()

        let url = Bundle.main.url(forResource: "index", withExtension: ".html")!
        let urlRequest = URLRequest(url: url)
        discriptionWeb.load(urlRequest)
        discriptionWeb.configuration.userContentController.add(self, name: "printLog")
        discriptionWeb.configuration.userContentController.add(self, name: "changeCheckbox")
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        self.toggleTimer?.invalidate()
        getIssueFromUI()
        setIssueToUI()
        refreshMarkedown(issueItem?.description)
        discriptionWeb.isHidden = false
        discriptionText.isHidden = true
        previewButton.isHidden = true
        previewMode = false
    }
    

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        switch message.name {
        case "printLog":
            print("--JS: \(message.body as! String)")
        case "changeCheckbox":
            let param = message.body as! Int
            let postion = param / 10
            let checked = (param % 10) == 1
            // print("-- \(postion) : \(checked)")
            var source = discriptionText.text ?? ""
            let regexp = try! NSRegularExpression(pattern: #"- \[.\] "#)
            let matches = regexp.matches(in: source, range: NSRange(source.startIndex..., in: source))
            if matches.count > postion {
                source.replaceSubrange(Range(matches[postion].range, in: source)!, with: checked ? "- [x] " : "- [ ] ")
                // print("++++", source)
                discriptionText.text = source
                issueItem?.description = source
                refreshMarkedown(source)
                if !isEditing {
                    self.toggleTimer?.invalidate()
                    self.toggleTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: false, block: { timer in
                        self.setEditing(true, animated: false)
                    })
                }
            }
  
        default:
            print("Error message \(message.name) on userContentController")
        }
    }
    
    override func setEditing(_ editing: Bool, animated: Bool) {
        super.setEditing(editing, animated: animated)
        toggleEditMode(isEditing)
        if !isEditing {
            performSegue(withIdentifier: "returnMaster", sender: nil)
         }
    }

    @IBAction func pushPreviewButton(_ sender: AnyObject) {
        if previewMode {
            getIssueFromUI()
            refreshMarkedown(issueItem?.description)
            discriptionWeb.isHidden = false
            discriptionText.isHidden = true
            previewButton.setTitle("editor", for: .normal)
            previewMode = false
        } else {
            discriptionWeb.isHidden = true
            discriptionText.isHidden = false
            previewButton.setTitle("preview", for: .normal)
            previewMode = true
        }
    }
  
    private func hiddenUI() {
        previewButton.isHidden = true
        statusLabel.isHidden = true
        statusText.isHidden = true
        statusSegment.isHidden = true
        priortyLabel.isHidden = true
        priortyText.isHidden = true
        priortySegment.isHidden = true
        subjectText.backgroundColor = .white
    }

    private func setIssueToUI() {
        guard let issue = issueItem else { return }
        
        subjectText.text = issue.subject
        discriptionText.text = issue.description
        statusSegment.selectedSegmentIndex = issue.statusIndex
        statusText.text = issue.statusName
        priortySegment.selectedSegmentIndex = issue.priortyIndex
        priortyText.text = issue.priortyName
    }

    private func getIssueFromUI() {
        issueItem?.subject = subjectText.text ?? ""
        issueItem?.description = discriptionText.text
        issueItem?.statusIndex = statusSegment.selectedSegmentIndex
        issueItem?.priortyIndex = priortySegment.selectedSegmentIndex
     }

    private func toggleEditMode(_ edit: Bool) {
        guard let _ = subjectText else { return }

        subjectText.isUserInteractionEnabled = edit
        subjectText.backgroundColor =  edit ? UIColor(named: "EditBackground") : .white
        statusSegment.isHidden = !edit
        statusText.isHidden = edit
        priortySegment.isHidden = !edit
        priortyText.isHidden = edit
        previewButton.isHidden = !edit
        discriptionWeb.isHidden = edit
        discriptionText.isHidden = !edit
    }

    private func refreshMarkedown(_ description: String?) {
        let text = (description ?? "").replacingOccurrences(of: "\r", with: "")
                   .replacingOccurrences(of: "\n", with: "\\n").replacingOccurrences(of: "'", with: "\\'")
        let js = "var md = '" + text + "'; document.getElementById('content').innerHTML = marked(md); checkbox_callback();"
        self.discriptionWeb.evaluateJavaScript(js, completionHandler: { (object, error) in
            print(error ?? "OK")
        })
    }
    
    private func addKeyboradToolbar() {
        let keyboardToolbar = UIToolbar(frame:CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 40))
        keyboardToolbar.barStyle = .default
        keyboardToolbar.items = []
        MarkdownKeys.forEach({key in
            keyboardToolbar.items?.append(UIBarButtonItem(title: key.title, style: .plain, target: self, action: #selector(pushMarkdownKey)))
        })
        keyboardToolbar.sizeToFit()
        discriptionText.inputAccessoryView = keyboardToolbar
    }

    @objc func pushMarkdownKey(_ button: UIBarButtonItem) {
        if let title = button.title {
            let text = MarkdownKeys.first(where: {$0.title == title})?.text ?? ""
            self.discriptionText.insertText(text)
        }
    }

}

MarkdownWebView.swif Markdwonの表示View

import SwiftUI
import WebKit

struct MarkdownWebView: UIViewRepresentable {
    let markdown: String
    var onCheckboxChange: (_ position: Int, _ checked: Bool) -> Void = { _, _ in }

    func makeCoordinator() -> Coordinator { Coordinator(self) }

    func makeUIView(context: Context) -> WKWebView {
        let configuration = WKWebViewConfiguration()
        configuration.userContentController.add(context.coordinator, name: "printLog")
        configuration.userContentController.add(context.coordinator, name: "changeCheckbox")

        let webView = WKWebView(frame: .zero, configuration: configuration)
        webView.navigationDelegate = context.coordinator
        webView.isOpaque = false
        webView.backgroundColor = .clear

        if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
            webView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())
        }
        return webView
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        context.coordinator.parent = self
        if context.coordinator.isLoaded {
            context.coordinator.render(markdown, in: webView)
        } else {
            context.coordinator.pendingMarkdown = markdown
        }
    }

    final class Coordinator: NSObject, WKScriptMessageHandler, WKNavigationDelegate {
        var parent: MarkdownWebView
        var isLoaded = false
        var pendingMarkdown: String?

        init(_ parent: MarkdownWebView) { self.parent = parent }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            isLoaded = true
            render(pendingMarkdown ?? parent.markdown, in: webView)
            pendingMarkdown = nil
        }

        func render(_ markdown: String, in webView: WKWebView) {
            let text = markdown
                .replacingOccurrences(of: "\\", with: "\\\\")
                .replacingOccurrences(of: "\r", with: "")
                .replacingOccurrences(of: "\n", with: "\\n")
                .replacingOccurrences(of: "'", with: "\\'")
            let js = "var md = '" + text + "'; document.getElementById('content').innerHTML = marked(md); checkbox_callback();"
            webView.evaluateJavaScript(js) { _, error in
                if let error = error { print("JS error: \(error)") }
            }
        }

        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            switch message.name {
            case "printLog":
                print("--JS: \(message.body)")
            case "changeCheckbox":
                if let param = message.body as? Int {
                    parent.onCheckboxChange(param / 10, (param % 10) == 1)
                }
            default:
                print("Error message \(message.name) on userContentController")
            }
        }
    }
}

MarkdownEditorView.swift Markdwon編集用View

import SwiftUI
import UIKit

struct MarkdownEditorView: UIViewRepresentable {
    @Binding var text: String

    static let markdownKeys: [(title: String, text: String)] = [
        ("TAB", "   "),
        ("- list", "- \n- \n- "),
        ("1.list", "1. \n2. \n3. "),
        ("code", "```\n"),
        ("~~", "~~"),
        ("##", "## ")
    ]

    func makeCoordinator() -> Coordinator { Coordinator(self) }

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.delegate = context.coordinator
        textView.font = UIFont.preferredFont(forTextStyle: .body)
        textView.backgroundColor = UIColor(named: "EditBackground")
        textView.autocorrectionType = .no
        textView.autocapitalizationType = .none
        textView.text = text

        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 40))
        toolbar.barStyle = .default
        toolbar.items = MarkdownEditorView.markdownKeys.map { key in
            UIBarButtonItem(title: key.title, style: .plain,
                            target: context.coordinator, action: #selector(Coordinator.pushMarkdownKey(_:)))
        }
        toolbar.sizeToFit()
        textView.inputAccessoryView = toolbar
        context.coordinator.textView = textView

        return textView
    }

    func updateUIView(_ textView: UITextView, context: Context) {
        context.coordinator.parent = self
        if textView.text != text {
            textView.text = text
        }
    }

    final class Coordinator: NSObject, UITextViewDelegate {
        var parent: MarkdownEditorView
        weak var textView: UITextView?

        init(_ parent: MarkdownEditorView) { self.parent = parent }

        func textViewDidChange(_ textView: UITextView) {
            parent.text = textView.text
        }

        @objc func pushMarkdownKey(_ sender: UIBarButtonItem) {
            guard let textView = textView, let title = sender.title else { return }
            let snippet = MarkdownEditorView.markdownKeys.first(where: { $0.title == title })?.text ?? ""
            textView.insertText(snippet)
            parent.text = textView.text
        }
    }
}

#Preview {
    @Previewable @State var text = "# 見出し\n\n- [ ] タスク1\n- [x] タスク2"
    MarkdownEditorView(text: $text)
        .frame(minHeight: 300)
}

そういえばClaude CodeでiOSアプリを開発出来るのだろか？出来ましたSwiftUIいいですね 😊

Thu, 28 May 2026 00:00:00 GMT

ここ数年iOSアプリの開発を行ってなかったのですが、Claude Codeで開発できるのかな？と思い少しネットを検索してみたところ出来るような、そうでもないような（出てきたのは1年前の記事が多い）・・・

Claude CodeでのWebアプリ開発はアシスタントとして役にたつレベルですが、私の古い知識ではiOS開発はXcodeを使わないと作れないのでは？これをコントロールできるの？・・・ React NativeならClaude Codeで出来そうですね。

今回のブログにはコード解説等が入っているので長いです、興味の無いところは適当に読み飛ばしてまとめを読んでください。

Nano Banana 2が生成した画像を使っています

私の知っている昔のiOS開発

私の知っているiOS開発はプログラム言語はSwiftになっていましたが、UIは下の画像のようにXcodeのStoryboardのを使って作っていました。Storyboardは、

画面にボタン等のUIコンポーネントの配置
iOS機種毎で画面の大きさの違いに対応するための、位置の基準や伸びる部分等の指定。これが面倒 😅
画面遷移の設定など
Storyboardは巨大なXMLファイルなのでgit diffしても差分が判らない 😅

コードの方も昔ながらなUIコンポーネントに対応したコードを記述しますが、今時なUIに比べるとコード量は多いです。

Claude Codeに作ってもらった

プロンプト

以下のプロンプトで作成してもらいました。

SwiftUI : 2019に発表された宣言的UIフレームワーク
SwiftData : 2023年に発表されたデータ永続化フレームワーク

SwiftUIとSwiftDataを使ってiOS向け小遣い帳アプリを作ってください。

- プロジェクト名：AllowanceBook

## 画面と機能

- 一覧画面
  - 一覧の並びは日付の小さい順
  - 記帳ボタン
  - 削除はiOSの一般的なスタイルで
  - 一覧の最後の行に残高表示を追加してください、記帳データではなく残高だと判りやすいデザインにしてください
- 記帳画面
  - 項目の入力
  - 追加ボタン
  - キャンセルボタン
  - 入力チェックは必須項目と数値の形式など

## データ定義

- 項目
  - 日付
    - デフォルトで今日の日付
    - 必須項目
    - 表示は月日のみ
  - 内容
    - 必須項目
  - 入金額
  - 出金額
    - 入金、出金のどちらかが入力されていること
- データはSwiftDataで永続化

プランモードで実行したのでプランが表示され、良さそうななので実行してもらいました。

ビルド

以下のようにソースコード作成、ビルド、iOSシミュレータでの確認が行われてました。 CLIでビルド出来るんですね！

⏺ Write(project.yml)
⏺ Write(AllowanceBook/Models/AllowanceEntry.swift)    ← ソースコード作成

・・・
⏺ Write(AllowanceBook/Views/EntryFormView.swift)

⏺ Bash(xcodegen generate 2>&1)                        ← プロジェクト作成

⏺ Bash(xcodebuild -project AllowanceBook.xcodeproj -scheme AllowanceBook
   -destination 'platform=iOS Simulator,name=iPhone 17'
   build 2>&1 | tail -30)                             ← ビルド

⏺ Bash(sleep 2; xcrun simctl io "iPhone 17" screenshot /tmp/allowance_launch.png
  2>&1 && echo "captured")                            ← iOSシミュレータ起動

⏺ アプリは完成し、ビルド・起動・表示まで確認できました。

  ビルド: ** BUILD SUCCEEDED **（iPhone 17 シミュレータ向け）
  起動: シミュレータで正常起動し、スクリーンショットで日本語UIを確認。
    タイトル「小遣い帳」、右上に「記帳」ボタン(+)、空状態の「記帳がありません」表示が出ています。

完成したアプリの画面

こんな素敵なアプリが出来ました！

SwiftUIの読みやすさに驚いた

出来たコードを眺めてみました。SwiftUIは使った事がなかったのですが何となくは読めます。Button、Label、Text・・・等のUI要素やHStack、VStackなどのレイアウト要素、foregroundStyle、listRowBackground、fontなどのUI修飾。
sheetのように名前から想像し難いものもあるますがコードを読むだけだとなら、AIに少し質問しながら容易に理解できました。

Views/EntryListView.swift

これは小遣い一覧画面のコードです。UIを中心に簡単な解説をします

① SwiftDataで管理されているデータをアクセスするcontextの定義
② SwiftDataから取得したデータをソートしentries変数に入れています
③ @StateはReactのステート（useState）と同じです、この変数が変更された場合は画面が再表示されます
④ データがなければContentUnavailableView UIコンポーネントで「記帳がありません」表示を行います
⑤ データがあればListUIで表示します
- データの表示はEntryRowカスタムビューで表示
- onDeleteで削除ボタンを追加
- 最後に残高を表示するBalanceRowカスタムビューを表示
- ③④をGroupでグループ化しています

import SwiftUI
import SwiftData

struct EntryListView: View {
    @Environment(\.modelContext) private var context  // ← ①   ↓ ②
    @Query(sort: \AllowanceEntry.date, order: .forward) private var entries: [AllowanceEntry]
    @State private var showingForm = false            // ← ③

    var body: some View {
        NavigationStack {
            Group {
                if entries.isEmpty {                // ← ④
                    ContentUnavailableView(
                        "記帳がありません",
                        systemImage: "yensign.circle",
                        description: Text("右上の「記帳」ボタンから追加できます。")
                    )
                } else {                          // ← ⑤
                    List {
                        ForEach(entries) { entry in
                            EntryRow(entry: entry)
                        }
                        .onDelete(perform: delete)

                        BalanceRow(balance: balance)
                            .deleteDisabled(true)
                    }
                }
            }
            .navigationTitle("小遣い帳")         // ← ⑥
            .toolbar {
                if !entries.isEmpty {
                    ToolbarItem(placement: .topBarLeading) {    // ← ⑦
                        EditButton()
                    }
                }
                ToolbarItem(placement: .topBarTrailing) {       // ← ⑧
                    Button {
                        showingForm = true
                    } label: {
                        Label("記帳", systemImage: "plus")
                    }
                }
            }
            .sheet(isPresented: $showingForm) {               // ← ⑨
                EntryFormView()
            }
        }
    }

    private var balance: Int {
        entries.reduce(0) { $0 + ($1.income ?? 0) - ($1.expense ?? 0) }
    }

    private func delete(at offsets: IndexSet) {
        for index in offsets {
            context.delete(entries[index])
        }
    }
}

private struct EntryRow: View {                             // ← ⑩
    let entry: AllowanceEntry

    var body: some View {
        HStack {                                            // ← ⑪
            Text(AllowanceFormatter.monthDay(entry.date))
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .frame(width: 56, alignment: .leading)

            Text(entry.content)
                .lineLimit(1)

            Spacer()

            VStack(alignment: .trailing, spacing: 2) {     // ← ⑫
                if let income = entry.income {
                    Text("+" + AllowanceFormatter.yen(income))
                        .foregroundStyle(.green)
                }
                if let expense = entry.expense {
                    Text("-" + AllowanceFormatter.yen(expense))
                        .foregroundStyle(.red)
                }
            }
            .font(.body.monospacedDigit())
        }
    }
}

private struct BalanceRow: View {
    let balance: Int

    var body: some View {
        HStack {
            Label("残高", systemImage: "wallet.bifold")
                .font(.headline)

            Spacer()

            Text(AllowanceFormatter.yen(balance))
                .font(.title3.bold().monospacedDigit())
                .foregroundStyle(balance >= 0 ? Color.primary : Color.red)
        }
        .listRowBackground(Color.accentColor.opacity(0.12))
    }
}

#Preview {
    EntryListView()
        .modelContainer(for: AllowanceEntry.self, inMemory: true)
}

⑥ タイトルの表示
⑦ データがあれば編集ボタンを先頭（左）に表示
⑧ 最後（右）に追加ボタンを表示
- プラスアイコンを表示しています
- 最新OSではButton("記帳", systemImage: "plus") {} とも書けるようです
⑨ showingFormがtrueなら記帳ホームをモーダルシートとして表示します
- モーダルシート内でshowingForm変数を変更できるように$を付けています（変数の値ではなく変数のバインディングを渡しています）
⑩ 1つの小遣いデータを表示するカスタムビューの定義
- let entryは引数で受け取る小遣いデータ
- var body: some View {}に表示するUIのコードを書きます
- some ViewはViewプロトコルに準拠した型という事だそうで、someで具体的な型定義が省略できます
⑪ HStackで横並びに日付、内容、空白、金額を表示します
⑫ VStackで入金額と出金額を縦なら日で表示。ただし両方表示される事はないので、ここでのVStackはグループ化として利用

React Native

さてReact Nativeでも作ってみました。開発環境にはExpoを使いました

プロンプト

プロンプトは最初の行を変えただけです。

React Native Expo、react-native-async-storageを使ってiOS向け小遣い帳アプリを作ってください。

・・・

ビルド

ExpoはCLIベースのツールなので問題なくClaude Codeがビルドできました。

⏺ Bash(yes | npx create-expo-app@latest . --template blank-typescript 2>&1 | tail -30)
⏺ Bash(npx expo install @react-native-async-storage/async-storage react-nati…)

⏺ Write(src/storage.ts)
  ・・・
⏺ Write(src/screens/EntryScreen.tsx)

⏺ Bash(xcrun simctl boot "iPhone 17 Pro" 2>&1 || echo "boot result: $?"; 
  open -a Simulator; sleep 3; echo "booted")

⏺ Bash(CI=1 npx expo start --ios 2>&1 | tee /tmp/expo_start.log)

⏺ Bash(sleep 6 2>/dev/null; xcrun simctl io "iPhone 17 Pro" screenshot 
  /tmp/ab_list.png 2>&1 && echo "captured")

⏺ 完成しました。iOSシミュレータで起動・表示確認済みです。

完成したアプリの画面

別ターミナルでnpx expo start --iosを実行しiOSシミュレータで動作を確認しました。

青丸のボタンはExpoデバッガー起動ボタンです。

src/screens/ListScreen.tsx

コードは以下のように、だいたいReactのコードです。

表示はJSXですが、HTMLはなくReact NativeのUIコンポーネントを使っています
スタイリングはCSSを使っています。ただしWeb標準のCSSが全て使えるわけではありません
もちろん、TypeScript(JavaScript)で書かれています

Reactを書いた事がある方は、だいたい読めると思います。

import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import {
  Alert,
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import ReanimatedSwipeable, {
  type SwipeableMethods,
} from 'react-native-gesture-handler/ReanimatedSwipeable';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useFocusEffect } from '@react-navigation/native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

import { Entry, RootStackParamList } from '../types';
import { deleteEntry, loadEntries } from '../storage';

type Props = NativeStackScreenProps<RootStackParamList, 'List'>;

/** ISO "YYYY-MM-DD" → "M/D"（月日のみ） */
function formatMonthDay(iso: string): string {
  const [, m, d] = iso.split('-');
  return `${Number(m)}/${Number(d)}`;
}

function formatAmount(n: number): string {
  return n.toLocaleString('ja-JP');
}

export default function ListScreen({ navigation }: Props) {
  const [entries, setEntries] = useState<Entry[]>([]);
  const [editing, setEditing] = useState(false);
  const insets = useSafeAreaInsets();
  const swipeRefs = useRef<Map<string, SwipeableMethods | null>>(new Map());

  const refresh = useCallback(async () => {
    setEntries(await loadEntries());
  }, []);

  // 残高 = 入金合計 − 出金合計
  const balance = useMemo(
    () =>
      entries.reduce(
        (sum, e) => sum + (e.income ?? 0) - (e.expense ?? 0),
        0
      ),
    [entries]
  );

  // 画面フォーカス時に再読込（記帳画面から戻った際の反映）
  useFocusEffect(
    useCallback(() => {
      refresh();
    }, [refresh])
  );

  const confirmDelete = useCallback(
    (entry: Entry) => {
      Alert.alert(
        '削除の確認',
        `「${entry.content}」を削除しますか？`,
        [
          {
            text: 'キャンセル',
            style: 'cancel',
            onPress: () => swipeRefs.current.get(entry.id)?.close(),
          },
          {
            text: '削除',
            style: 'destructive',
            onPress: async () => setEntries(await deleteEntry(entry.id)),
          },
        ],
        { cancelable: true }
      );
    },
    []
  );

  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () =>
        entries.length > 0 ? (
          <TouchableOpacity onPress={() => setEditing((v) => !v)}>
            <Text style={styles.headerButton}>{editing ? '完了' : '編集'}</Text>
          </TouchableOpacity>
        ) : undefined,
      headerRight: () => (
        <TouchableOpacity onPress={() => navigation.navigate('Entry')}>
          <Text style={styles.headerButton}>記帳</Text>
        </TouchableOpacity>
      ),
    });
  }, [navigation, editing, entries.length]);

  const renderRightActions = (entry: Entry) => () =>
    (
      <TouchableOpacity
        style={styles.deleteAction}
        onPress={() => confirmDelete(entry)}
      >
        <Text style={styles.deleteActionText}>削除</Text>
      </TouchableOpacity>
    );

  const renderItem = ({ item }: { item: Entry }) => (
    <ReanimatedSwipeable
      ref={(ref) => {
        swipeRefs.current.set(item.id, ref);
      }}
      renderRightActions={renderRightActions(item)}
      enabled={!editing}
    >
      <View style={styles.row}>
        {editing && (
          <TouchableOpacity
            style={styles.minusButton}
            onPress={() => confirmDelete(item)}
          >
            <View style={styles.minusCircle}>
              <View style={styles.minusBar} />
            </View>
          </TouchableOpacity>
        )}
        <Text style={styles.date}>{formatMonthDay(item.date)}</Text>
        <Text style={styles.content} numberOfLines={1}>
          {item.content}
        </Text>
        <View style={styles.amounts}>
          {item.income != null && (
            <Text style={[styles.amount, styles.income]}>
              +{formatAmount(item.income)}
            </Text>
          )}
          {item.expense != null && (
            <Text style={[styles.amount, styles.expense]}>
              -{formatAmount(item.expense)}
            </Text>
          )}
        </View>
      </View>
    </ReanimatedSwipeable>
  );

  return (
    <View style={[styles.container, { paddingBottom: insets.bottom }]}>
      <FlatList
        data={entries}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        ListFooterComponent={
          entries.length > 0 ? (
            <View style={styles.balanceRow}>
              <Text style={styles.balanceLabel}>残高</Text>
              <Text
                style={[
                  styles.balanceAmount,
                  balance < 0 && styles.balanceNegative,
                ]}
              >
                ¥{formatAmount(balance)}
              </Text>
            </View>
          ) : null
        }
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={styles.emptyText}>記録がありません</Text>
            <Text style={styles.emptySub}>
              右上の「記帳」から追加してください
            </Text>
          </View>
        }
        contentContainerStyle={entries.length === 0 && styles.emptyContainer}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  headerButton: { color: '#007AFF', fontSize: 17 },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    backgroundColor: '#fff',
  },

  // ・・・ 省略 ・・・

  balanceNegative: { color: '#FF3B30' },
  empty: { alignItems: 'center' },
  emptyContainer: { flexGrow: 1, justifyContent: 'center' },
  emptyText: { fontSize: 17, color: '#3C3C43' },
  emptySub: { marginTop: 6, fontSize: 14, color: '#8E8E93' },
});

まとめ

Claude CodeでiOS開発できるのか？はYesでした。React Nativeはもちろん、Swiftを使ったApple環境での開発も出来ました。生成されたプロジェクトはXcodeでもオープンできて変更等も行えました。
現在のiOSアプリ開発環境は直接Xcodeを使わなくてもコードを作れるようです。

また、以前のUIKit/Storyboard時代とは違いSwiftUIはコードだけでUIが作れます。SwiftUIのAPI名や機能は多種多様で人間が覚えるのは大変そうです。しかし、AIなら完璧に覚えているので、AIには問題ないかもしれません。

SwiftUI vs React Native

この問題は良く言われていますが、SwiftUIとReact Nativeのメリットは

React Native : メリットはiOSとAndroid両方で動くアプリが作れる事（もちろん本当に両デバイスで正しく動くかは、確認と対応が必要です）
Swift UI : メリットはApple公式のプログラミング言語・環境で開発できること

React Nativeは、少ない開発パワーでiOSとAndroid両方で動く、そこそこのレベルのアプリを作れます。
ただし両方で動く素晴らしいアプリを作るには、それぞれのプラットホームの開発環境で別々に作るのが良いでしょう。それには開発パワーも必要になりますが、AIのヘルプがあるので以前に比べたら楽になったと思います。

あと、一般にReact NativeのメリットとしてReactを開発した人なら直ぐに学習できる事を上げていますが、AIがコードを書いてくれる世の中になると、このメリットは小さいのではと私は思います。

一時期はサービスを行うにはスマホアプリが必須という風潮がありましたが、現在は必ずしもそうではなくなりました。
スマホアプリならではの機能や使いやすさが出せるアプリが増えてほしいなと私は思います。

SwiftUI コード

ファイル構造

.
├── AllowanceBook
│   ├── AllowanceBookApp.swift
│   ├── Models
│   │   └── AllowanceEntry.swift
│   ├── Support
│   │   └── Formatters.swift
│   └── Views
│       ├── EntryFormView.swift
│       └── EntryListView.swift
├── AllowanceBook.xcodeproj
│   └── ・・・
└── project.yml

コード

AllowanceBook/AllowanceBookApp.swift

import SwiftUI
import SwiftData

@main
struct AllowanceBookApp: App {
    var body: some Scene {
        WindowGroup {
            EntryListView()
        }
        .modelContainer(for: AllowanceEntry.self)
    }
}

AllowanceBook/Models/AllowanceEntry.swift

import Foundation
import SwiftData

/// 小遣い帳の 1 件の記帳項目。
@Model
final class AllowanceEntry {
    /// 日付（必須）。表示は月日のみ。
    var date: Date
    /// 内容（必須）。
    var content: String
    /// 入金額（円・整数）。未入力時は nil。
    var income: Int?
    /// 出金額（円・整数）。未入力時は nil。
    var expense: Int?

    init(date: Date = .now, content: String, income: Int? = nil, expense: Int? = nil) {
        self.date = date
        self.content = content
        self.income = income
        self.expense = expense
    }
}

AllowanceBook/Support/Formatters.swift

import Foundation

enum AllowanceFormatter {
    /// 日付を「月/日」のみで表示する（例: 5/26）。
    static func monthDay(_ date: Date) -> String {
        date.formatted(.dateTime.month(.defaultDigits).day(.defaultDigits))
    }

    /// 金額を円表記の整数で表示する（例: ¥1,200）。
    static func yen(_ value: Int) -> String {
        "¥" + value.formatted(.number.grouping(.automatic))
    }
}

AllowanceBook/Views/EntryFormView.swift

import SwiftUI
import SwiftData

struct EntryFormView: View {
    @Environment(\.dismiss) private var dismiss
    @Environment(\.modelContext) private var context

    @State private var date: Date = .now
    @State private var content: String = ""
    @State private var incomeText: String = ""
    @State private var expenseText: String = ""
    @State private var errorMessage: String?

    var body: some View {
        NavigationStack {
            Form {
                Section {
                    DatePicker("日付", selection: $date, displayedComponents: .date)

                    TextField("内容", text: $content)

                    TextField("入金額", text: $incomeText)
                        .keyboardType(.numberPad)

                    TextField("出金額", text: $expenseText)
                        .keyboardType(.numberPad)
                }

                if let errorMessage {
                    Section {
                        Text(errorMessage)
                            .foregroundStyle(.red)
                            .font(.footnote)
                    }
                }
            }
            .navigationTitle("記帳")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("キャンセル") { dismiss() }
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("追加") { save() }
                        .disabled(!isSaveEnabled)
                }
            }
        }
    }

    /// 内容が入力済みかつ入金・出金のどちらかが入力されているときのみ「追加」を有効化。
    private var isSaveEnabled: Bool {
        !content.trimmingCharacters(in: .whitespaces).isEmpty
            && !(incomeText.isEmpty && expenseText.isEmpty)
    }

    private func save() {
        let trimmedContent = content.trimmingCharacters(in: .whitespaces)
        guard !trimmedContent.isEmpty else {
            errorMessage = "内容を入力してください。"
            return
        }

        let income = try? parseAmount(incomeText)
        let expense = try? parseAmount(expenseText)

        // 数値形式チェック（空でないのに整数変換できない場合）。
        if (income == nil && !incomeText.isEmpty) || (expense == nil && !expenseText.isEmpty) {
            errorMessage = "金額は数値（整数）で入力してください。"
            return
        }

        guard income != nil || expense != nil else {
            errorMessage = "入金額または出金額のいずれかを入力してください。"
            return
        }

        let entry = AllowanceEntry(date: date, content: trimmedContent, income: income, expense: expense)
        context.insert(entry)
        dismiss()
    }

    /// 空文字なら nil、整数なら値、それ以外は throw して形式エラーを表す。
    private func parseAmount(_ text: String) throws -> Int? {
        let trimmed = text.trimmingCharacters(in: .whitespaces)
        guard !trimmed.isEmpty else { return nil }
        guard let value = Int(trimmed), value >= 0 else {
            throw AmountError.invalid
        }
        return value
    }

    private enum AmountError: Error { case invalid }
}

#Preview {
    EntryFormView()
        .modelContainer(for: AllowanceEntry.self, inMemory: true)
}

AllowanceBook/Views/EntryListView.swift

import SwiftUI
import SwiftData

struct EntryListView: View {
    @Environment(\.modelContext) private var context
    @Query(sort: \AllowanceEntry.date, order: .forward) private var entries: [AllowanceEntry]
    @State private var showingForm = false

    var body: some View {
        NavigationStack {
            Group {
                if entries.isEmpty {
                    ContentUnavailableView(
                        "記帳がありません",
                        systemImage: "yensign.circle",
                        description: Text("右上の「記帳」ボタンから追加できます。")
                    )
                } else {
                    List {
                        ForEach(entries) { entry in
                            EntryRow(entry: entry)
                        }
                        .onDelete(perform: delete)

                        BalanceRow(balance: balance)
                            .deleteDisabled(true)
                    }
                }
            }
            .navigationTitle("小遣い帳")
            .toolbar {
                if !entries.isEmpty {
                    ToolbarItem(placement: .topBarLeading) {
                        EditButton()
                    }
                }
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        showingForm = true
                    } label: {
                        Label("記帳", systemImage: "plus")
                    }
                }
            }
            .sheet(isPresented: $showingForm) {
                EntryFormView()
            }
        }
    }

    /// 入金合計から出金合計を引いた現在の残高。
    private var balance: Int {
        entries.reduce(0) { $0 + ($1.income ?? 0) - ($1.expense ?? 0) }
    }

    private func delete(at offsets: IndexSet) {
        for index in offsets {
            context.delete(entries[index])
        }
    }
}

private struct EntryRow: View {
    let entry: AllowanceEntry

    var body: some View {
        HStack {
            Text(AllowanceFormatter.monthDay(entry.date))
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .frame(width: 56, alignment: .leading)

            Text(entry.content)
                .lineLimit(1)

            Spacer()

            VStack(alignment: .trailing, spacing: 2) {
                if let income = entry.income {
                    Text("+" + AllowanceFormatter.yen(income))
                        .foregroundStyle(.green)
                }
                if let expense = entry.expense {
                    Text("-" + AllowanceFormatter.yen(expense))
                        .foregroundStyle(.red)
                }
            }
            .font(.body.monospacedDigit())
        }
    }
}

/// 一覧の最後の行に表示する残高。記帳行と並びつつ、残高だと判るよう強調する。
private struct BalanceRow: View {
    let balance: Int

    var body: some View {
        HStack {
            Label("残高", systemImage: "wallet.bifold")
                .font(.headline)

            Spacer()

            Text(AllowanceFormatter.yen(balance))
                .font(.title3.bold().monospacedDigit())
                .foregroundStyle(balance >= 0 ? Color.primary : Color.red)
        }
        .listRowBackground(Color.accentColor.opacity(0.12))
    }
}

#Preview {
    EntryListView()
        .modelContainer(for: AllowanceEntry.self, inMemory: true)
}

project.yml

name: AllowanceBook
options:
  bundleIdPrefix: com.example
  deploymentTarget:
    iOS: "17.0"
  developmentLanguage: ja
settings:
  base:
    SWIFT_VERSION: "5.0"
targets:
  AllowanceBook:
    type: application
    platform: iOS
    sources:
      - AllowanceBook
    settings:
      base:
        GENERATE_INFOPLIST_FILE: YES
        PRODUCT_BUNDLE_IDENTIFIER: com.example.AllowanceBook
        PRODUCT_NAME: AllowanceBook
        CURRENT_PROJECT_VERSION: 1
        MARKETING_VERSION: "1.0"
        TARGETED_DEVICE_FAMILY: "1"
        INFOPLIST_KEY_UILaunchScreen_Generation: YES
        INFOPLIST_KEY_CFBundleDisplayName: 小遣い帳
        INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents: YES
        INFOPLIST_KEY_UISupportedInterfaceOrientations: "UIInterfaceOrientationPortrait"
        DEVELOPMENT_LANGUAGE: ja

Remix3はRuby on Railsを目指しているのだろうか？ beta previewでScaffold的なアプリを作ってみた

Thu, 21 May 2026 00:00:00 GMT

4月30日にRemix 3 beta previewがリリースされました。ネット上にはRemix 3 beta previewの解説や感想記事が出てきましたね。私も以前に開発中のRemix3を使った記事 Remix 3のFrameを使いジャンケンアプリを動かしました、苦労したけど面白い！と Remix3のFrameの動作解説。前回の続きを書きました。

今回はRemix 3 beta previewを使ってRuby on RailsのScaffold的なアプリを作ってみました。実はRemix3のデモアプリ Bookstore のコードを読んでいて、これは Ruby on Railsでは！？ と驚いたからです。

https://remix.run より

Remix 3 とは (by Sonnet4.6)

Remix はバッテリー同梱（batteries-included）型の超高生産性フレームワークで、依存関係ゼロ・バンドラー不要を謳い、AIモデルファーストな世界での開発に対応しています。

Remix 3 の設計原則

Remix 3 は以下の原則に基づいて設計されています：

モデルファースト開発 — AIを前提に、LLMに最適化されたソースコード・ドキュメント・ツールを提供
Web APIに基づく構築 — フルスタックで共通抽象化を実現するため、Web標準APIとJavaScriptを基盤とする
ランタイム重視 — バンドラー・コンパイラに依存しない設計。すべてのテストはバンドリングなしで実行可能
依存関係の最小化 — 依存は慎重に選定し、最終的にゼロを目指す
コンポジション優先 — 抽象化は単一目的・交換可能であること。各パッケージは独立して文書化・利用できること
まとまりある配布 — 学習・利用のしやすさのため、単一の remix パッケージとして配布・ドキュメント化

Remix 3 のGoals（目標）

各パッケージが単独でも使えるように設計することで、パッケージの境界と公開インターフェースを明確にすることが目的です。

具体的には、すべてのパッケージが以下の3点を満たすことを目指しています：

単一責任の原則 — 各パッケージは一つの責務のみを持つ
Web 標準の優先 — あらゆる JavaScript ランタイムで最大限の相互運用性・移植性を確保するため、Web 標準を優先する
標準の控えめな拡張 — 標準が不足・未整備な箇所のみ最小限に補完し、非互換リスクを抑える

これにより Remix のコードはデフォルトでポータブル となり、Node.js・Bun・Deno・Cloudflare Workers などの環境をまたいでシームレスに動作します。

また、サーバーサイドでも Web API を積極的に活用（node:stream の代わりに Web Streams API、node:crypto の代わりに Web Crypto API など）することで、再利用可能なだけでなく 将来性の高いコード を実現することを目標としています。

今回作成したコード

以下の画面のような小遣い帳アプリを作りました、典型的なCRUDアプリですね。

プロジェクトの作成、Bookstoreデモが動かない！？

今回のBeta版は npx remix@next new my-remix-app でプロジェクトが作成できます。ここにBookstoreのコードを持ってきてビルドしようとしたところエラーが出ていてビルドできません。もちろんremix GithubをcloneしてBookstoreをビルドすると動きます !?

どうもBookstoreはnpx remix@next newでインストールされるremix@3.0.0-beta.0より新しいRemix用に作られているようです。そこでremix Githubを開発Macにcloneしnpm linkして動かしました。😅

ザックリした手順は以下です

$ npx remix@next new remix-allowances
$ cd remix-allowances
$ npm install
$ npm uninstall remix
$ cd ..
$ git clone git@github.com:remix-run/remix.git
$ cd remix
$ pnpm install
$ pnpm build
$ cd packages/remix
$ npm link
$ cd ../../../remix-allowances
$ npm link remix

今回作ったプロジェクトの構成は以下のようになっています（一部省略）。

├── app
│   ├── actions
│   │   └── allowances             小遣い帳アプリ
│   │       ├── controller.tsx       コントローラー
│   │       ├── error-page.tsx       エラーページ・ビュー
│   │       ├── form.tsx             フォーム・ビュー
│   │       └── index-page.tsx       一覧・ビュー
│   ├── assets                     アセット
│   │   ├── app.css                  CSS
│   │   └── entry.tsx                JavaScriptモジュールのローダー
│   ├── data                       データ
│   │   ├── schema.ts                データ定義
│   │   └── setup.ts                 データベース関連の設定、この中でマイグレーションも実行
│   ├── middleware                 コントローラーから参照されるリソース用のミドルウエア群
│   │   ├── asset-entry.ts           アセット(CSS, JS)参照
│   │   ├── database.ts              データベースアクセス
│   │   └── render.tsx               JSXレンダリング
│   ├── router.ts                  ルーターの定義、ルートと処理の対応とミドルウエアの定義
│   ├── routes.ts                  ルート定義、Route Maps
│   ├── ui                         ビューコンポーネント
│   │   ├── layout.tsx               レイアウト用
│   │   └── restful-form.tsx         フォーム用
│   └── utils                      ユーティリティー
│       ├── assets.ts                アセット配信用
│       └── render.tsx               HTML配信用
├── db
│   ├── app.sqlite                   SQLite3ファイル
│   └── migrations
│       └── 20260518155500_create_allowances_schema
│           ├── down.sql             マイグレーションファイル Down用
│           └── up.sql               マイグレーションファイル Up用
├── package-lock.json
├── package.json
├── README.md
├── server.ts                      HTTPサーバー
└── tsconfig.json

データベース、モデル定義

データベース定義 db/migrations/20260518155500…/up.sql

マイグレーションファイルファイルは生SQLです

CREATE TABLE allowances (
  id integer primary key autoincrement,
  date text not null,
  description text not null,
  money_in integer,
  money_out integer,
  created_at text not null,
  updated_at text not null
);

モデル定義 app/data/schema.ts

① モデル（テーブル）の定義になります。
② beforeWriteにはデータベースに書き込む前に行う処理を組み込めます
- ここにはありませんが、afterReadで読み出し後に処理を組み込むことも出来ます
③ validateはバリエーションを書く部分です

import { column as c, table } from 'remix/data-table'
import type { TableRow } from 'remix/data-table'

export const allowances = table({          // ← ①
  name: 'allowances',
  columns: {
    id: c.integer(),
    date: c.text(),
    description: c.text(),
    money_in: c.integer().nullable(),
    money_out: c.integer().nullable(),
    created_at: c.text(),
    updated_at: c.text(),
  },
  beforeWrite({ operation, value }) {     // ← ②
    let next = { ...value }
    next.updated_at = (new Date()).toLocaleString()
    if (operation === 'create') {
      next.created_at = next.updated_at
    }
    return { value: next }
   },
  validate({ value }) {                   // ← ③
    let issues: Array<{ message: string; path?: Array<string | number> }> = []

    if (typeof value.money_in === 'number' && (!Number.isFinite(value.money_in) || value.money_in <= 0)) {
      issues.push({ message: '入金額は正の数値である必要があります。', path: ['money_in'] })
    }
    if (typeof value.money_out === 'number' && (!Number.isFinite(value.money_out) || value.money_out <= 0)) {
      issues.push({ message: '出金額は正の数値である必要があります。', path: ['money_out'] })
    }
    if (value.money_in === null && value.money_out === null) {
      issues.push({ message: '入金額または出金額のいずれかを入力してください。', path: ['money_in'] })
    }
    if (typeof value.money_in === 'number' && typeof value.money_out === 'number') {
      issues.push({ message: '入金額と出金額の両方を入力することはできません。', path: ['money_in'] })
    }

    return issues.length > 0 ? { issues } : { value }
  }
})

export type Allowance = TableRow<typeof allowances>

ルーティング

routes.ts

ルート定義（Route Maps）

① パス/ にhome処理が対応します
② パス /allowances はCURDリソースとして定義されています
- 今回はshowは無いのでindex, new, create, edit, update, destroy

import { resources, route } from 'remix/fetch-router/routes'

export const assetsBase = '/assets'
export const routes = route({
  assets: `${assetsBase}/*path`,
  home: '/',                                  // ← ①
  allowances: resources('allowances', {       // ← ②
    only: ['index', 'new', 'create', 'edit', 'update', 'destroy'],
    param: 'allowanceId'
  }),
})

router.ts

ここで、ルートと処理の対応とミドルウエアを定義（型とコード）しています

① ミドルウエアに関連する型定義をルータ型に反映しています
② ミドルウエアをルーター実行環境に追加しています
- Form処理、データベース処理等もミドルウエアになっていて忘れてハマりました
③ routes.tsで定義したシンボルに、処理を割り付けています

// ・・・ importは書略 ・・・

type AppContext = MiddlewareContext<[                          // ← ①
  ReturnType<typeof formData>,
  ReturnType<typeof loadDatabase>,
  ReturnType<typeof loadAssetEntry>,
  ReturnType<typeof render>,
]>

declare module 'remix/router' {                                // ← ①
  interface RouterTypes {
    context: AppContext
  }
}

let middleware = []
middleware.push(formData())                                    // ← ②
middleware.push(methodOverride())
middleware.push(logger())
middleware.push(loadDatabase())
middleware.push(asyncContext())
middleware.push(loadAssetEntry())
middleware.push(render())

export const router = createRouter<AppContext>({ middleware }) // ← ②

router.get(routes.assets, async ({ request }) => {             // ← ③
  let response = await assetServer.fetch(request)
  return response ?? new Response('Not Found', { status: 404 })
})
router.get(routes.home, () => {                                // ← ③
  return redirect('/allowances')
})
router.map(routes.allowances, allowancesController)            // ← ③

アプリケーション

コントローラー app/actions/allowances/controller.tsx

CURD処理を提供するアプリ用のコントローラーです。

① allowanceSchemaはフォームからのデータの定義です
- textFieldは入力が無ければ空文字になります
- priceFieldは入力が無い場合もあるのでoptionalで定義しています
② 引数のIDを安全にパース処理するコード
③ リソースの書くアクションに対応する処理、Ruby on Railsをご存知な方には判りやすいですね
- index: 一覧表示です、db.findMany()はRemix3が提供するORMのメソッドです → 詳細ドキュメント
- new: 新規作成用フォームの表示、フォームは変更と共通のAllowancesFormPageを使っています
- create: 新規作成用処理、s.parse()でデータを受け取りdb.create()でデータ作成を行います
  - db.create()内でバリエーションエラーが起きるとエラーページAllowancesErrorPageが表示されます
- edit: 変更用フォームの表示、共通のAllowancesFormPageを使っています
- update: 変更処理、s.parse()でデータを受け取りdb.update()でデータ変更を行います。ここでもバリエーションエラーが起きるとエラーページを表示します
- destroy: 削除処理、db.delete()でデータ削除を行います

ひょっとするとallowanceSchema定義で money_in ? parseFloat(money_in) : null のコードも吸収できるのかな？

// ・・・ importは書略 ・・・

const textField = f.field(s.defaulted(s.string(), ''))
const priceField = f.field(s.optional(s.string()))
const  allowanceSchema = f.object({                           // ← ①
  date: textField,
  description: textField,
  money_in: priceField,
  money_out: priceField,
})

const parseId = (value: unknown): number | undefined => {    // ← ②
  if (typeof value === 'number') {
    return Number.isSafeInteger(value) ? value : undefined
  }

  if (typeof value !== 'string') {
    return undefined
  }

  let parsed = Number(value)
  return Number.isSafeInteger(parsed) ? parsed : undefined
}

export default createController(routes.allowances, {        // ← ③
  actions: {
    async index({ db, render }) {
      let allAllowances = await db.findMany(allowances, { orderBy: ['date', 'asc'] })
      return render(<AllowancesIndexPage allowances={allAllowances} />)
    },
    async  new({ render }) {
      return render(
        <AllowancesFormPage
          title="新規追加"
          action={routes.allowances.create.href()}
          cancelHref={routes.allowances.index.href()}
          submitLabel="作成"
        />,
      )
    },

    async create({ db, formData, render }) {
      let { date, description, money_in, money_out } = s.parse(allowanceSchema, formData)

      try {
        await db.create(allowances, {
          date,
          description,
          money_in: money_in ? parseFloat(money_in) : null,
          money_out: money_out ? parseFloat(money_out) : null,
        })
      } catch (error) {
        if (error instanceof DataTableValidationError) {
          return render(
            <AllowancesErrorPage issues={error.issues} />
          )
        }
        return new Response('Failed to create allowance', { status: 500 })
      }

      return redirect(routes.allowances.index.href())
    },

    async edit({ db, params, render }) {
      let allowanceId = parseId(params.allowanceId)
      let allowance = allowanceId === undefined ? undefined : await db.find(allowances, allowanceId)

      if (!allowance) {
        return new Response('Allowance not found', { status: 404 })
      }

      return render(
        <AllowancesFormPage
          title="変更"
          action={routes.allowances.update.href({ allowanceId: allowance.id })}
          cancelHref={routes.allowances.index.href()}
          submitLabel="更新"
          method="PUT"
          allowance={allowance}
        />,
      )
    },

    async update({ db, formData, params, render }) {
      let allowanceId = parseId(params.allowanceId)
      let allowance = allowanceId === undefined ? undefined : await db.find(allowances, allowanceId)
      if (!allowance) {
        return new Response('Allowance not found', { status: 404 })
      }

      let { date, description, money_in, money_out } = s.parse(allowanceSchema, formData)
      try {
        await db.update(allowances, allowance.id, {
          date,
          description,
          money_in: money_in ? parseFloat(money_in) : null,
          money_out: money_out ? parseFloat(money_out) : null,
        })
      } catch (error) {
        if (error instanceof DataTableValidationError) {
          return render(
            <AllowancesErrorPage issues={error.issues} />
          )
        }
        return new Response('Failed to update allowance', { status: 500 })
      }
      return redirect(routes.allowances.index.href())
    },

    async destroy({ db, params }) {
      let allowanceId = parseId(params.allowanceId)
      let allowance = allowanceId === undefined ? undefined : await db.find(allowances, allowanceId)
      if (allowance) {
        await db.delete(allowances, allowance.id)
      }

      return redirect(routes.allowances.index.href())
    },

  },
})

一覧・ビュー app/actions/allowances/index-page.tsx

Reactのコンポーネントに似ていますが戻り値はJSXではなくJSXを戻す関数です。

CSSのstyle指定用のmixin関数はmix=属性で指定します

// ・・・ importは書略 ・・・

export function AllowancesIndexPage() {
  const yen = (n: number | null) => n !== null ? n.toLocaleString('ja-JP', {style:'currency', currency: 'JPY'}) : ''

  return ({ allowances }: { allowances: Allowance[] }) => (
    <Layout>
      <h1>小遣い帳</h1>

      <p mix={css({ marginBottom: '1rem' })}>
        <a href={routes.allowances.new.href()} class="btn">
          新規追加
        </a>
      </p>
      <div class="card">
        <table>
          <thead>
            <tr>
              <th>日付</th>
              <th>内容</th>
              <th>入金額</th>
              <th>出金額</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {allowances.map((allowance) => (
              <tr>
                <td>{allowance.date}</td>
                <td>{allowance.description}</td>
                <td>{yen(allowance.money_in)}</td>
                <td>{yen(allowance.money_out)}</td>
                <td class="actions">
                  <a
                    href={routes.allowances.edit.href({ allowanceId: allowance.id })}
                    class="btn btn-secondary"
                    mix={css({ fontSize: '0.875rem', padding: '0.25rem 0.5rem' })}
                  >
                    変更
                  </a>
                  <RestfulForm
                    method="DELETE"
                    action={routes.allowances.destroy.href({ allowanceId: allowance.id })}
                    mix={css({ display: 'inline' })}
                  >
                    <button
                      type="submit"
                      class="btn btn-danger"
                      mix={css({ fontSize: '0.875rem', padding: '0.25rem 0.5rem' })}
                    >
                      削除
                    </button>
                  </RestfulForm>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Layout>
  )
}

フォーム・ビュー

app/actions/allowances/form.tsx

新規作成や変更で使うフォームで定義です

// ・・・ importは書略 ・・・

export interface AllowancesFormPageProps {
  title: string
  action: string
  cancelHref: string
  submitLabel: string
  method?: 'POST' | 'PUT'
  allowance?: Allowance
}

export function AllowancesFormPage() {
  return ({
    action,
    allowance,
    cancelHref,
    method = 'POST',
    submitLabel,
    title,
  }: AllowancesFormPageProps) => (
    <Layout>
      <h1>{title}</h1>

      <div class="card">
        <RestfulForm method={method} action={action}>
          <div class="form-group">
            <label for="date">日付</label>
            <input type="date" id="date" name="date" value={allowance?.date} required />
          </div>

          <div class="form-group">
            <label for="description">内容</label>
            <input type="text" id="description" name="description" value={allowance?.description} required />
          </div>

          <div class="form-group">
            <label for="money_in">入金額</label>
            <input type="number" id="money_in" name="money_in" step="0.01" value={allowance?.money_in ?? ''} />
          </div>

          <div class="form-group">
            <label for="money_out">出金額</label>
            <input type="number" id="money_out" name="money_out" step="0.01" value={allowance?.money_out ?? ''} />
          </div>

          <button type="submit" class="btn">
            {submitLabel}
          </button>
          <a href={cancelHref} class="btn btn-secondary" mix={css({ marginLeft: '0.5rem' })}>
            キャンセル
          </a>
        </RestfulForm>
      </div>
    </Layout>
  )
}

app/ui/restful-form.tsx

REST操作用のformタグの定義、method="PUT"は<input type="hidden" name="_method" value="PUT" />を使うのはRailsと同じですね。

import type { Props } from 'remix/ui'

export interface RestfulFormProps extends Props<'form'> {
  methodOverrideField?: string
}

export function RestfulForm() {
  return ({ method = 'GET', methodOverrideField = '_method', ...props }: RestfulFormProps) => {
    let upperMethod = method.toUpperCase()

    if (upperMethod === 'GET') {
      return <form method="GET" {...props} />
    }

    return (
      <form method="POST" {...props}>
        {upperMethod !== 'POST' && (
          <input type="hidden" name={methodOverrideField} value={upperMethod} />
        )}
        {props.children}
      </form>
    )
  }
}

まとめ

Remix 3 beta previewはPreviewでまだ完成度は低いですね、今回もデモアプリと同様なコードを動かそうとして苦労しました。😅
ドキュメントもRemix DOCSしかありません。またAIが見つけたMintlifyドキュメントもRemix3を学ぶのに役立ちます（ただしalpha版でつくられてたドキュメントのようです）。

Remix3 記事1 と Remix3 記事2 を書いた時の Remix3はNext.jsと同様にクライアント・サーバーで動くWebフレームワークでしたが、今回のBetaではデータベースアクセス機能やマイグレーション機能も含まれています。さらにUIコンポーネントライブラリーも含まれています。

Ruby on Railsのように取りあえずこれだけインストールすればWebアプリが作れる方向をRemix3が目指し出したのは驚きでした❗今後どうなって行くのでしょうか？

EY-Office Blog

Claude CodeにiOSアプリをSwiftUIにアップデートしてもらった。良いね 😊

今回のアプリ

SwiftUI変換作業

プロンプト

プラン

結果

コードを読んでみましょう

まとめ

Claude Code凄いですね❗

SwiftUI

そういえばClaude CodeでiOSアプリを開発出来るのだろか？ 出来ましたSwiftUIいいですね 😊

私の知っている昔のiOS開発

Claude Codeに作ってもらった

プロンプト

ビルド

完成したアプリの画面

SwiftUIの読みやすさに驚いた

Views/EntryListView.swift

React Native

プロンプト

ビルド

完成したアプリの画面

src/screens/ListScreen.tsx

まとめ

SwiftUI vs React Native

SwiftUI コード

ファイル構造

コード

Remix3はRuby on Railsを目指しているのだろうか？ beta previewでScaffold的なアプリを作ってみた

Remix 3 とは (by Sonnet4.6)

Remix 3 の設計原則

Remix 3 のGoals（目標）

今回作成したコード

プロジェクトの作成、Bookstoreデモが動かない！？

データベース、モデル定義

データベース定義 db/migrations/20260518155500…/up.sql

モデル定義 app/data/schema.ts

ルーティング

routes.ts

router.ts

アプリケーション

コントローラー app/actions/allowances/controller.tsx

一覧・ビュー app/actions/allowances/index-page.tsx

フォーム・ビュー

まとめ

そういえばClaude CodeでiOSアプリを開発出来るのだろか？出来ましたSwiftUIいいですね 😊