1. 概要

テキストエディタアプリを作成する手順を説明します。このアプリは、左側に入力テキストを表示し、右側に結果を表示します。マークダウン記法、HTML、マーメイド記法に対応して出力を行います。

2. プロジェクトフォルダの構成

# プロジェクトフォルダの構成
📂TextEditorApp
┣ 📂Classes
┃ ┣ 📜TextEditor.ps1
┃ ┗ 📜TextRenderer.ps1
┣ 📂GUI
┃ ┣ 📜MainWindow.xaml
┃ ┗ 📜MainWindow.ps1
┣ 📂Modules
┃ ┗ 📜MarkdownRenderer.psm1
┣ 📂Resources
┃ ┣ 📜theme_dark.xaml
┃ ┣ 📜theme_light.xaml
┃ ┗ 📜theme_default.xaml
┣ 📂Tests
┃ ┗ 📜GUITests.ps1
┣ 📜App.ps1
┗ 📜App-ショートカット.ps1

3. ファイルのアウトライン

App.ps1

# App.ps1
# アプリケーションのエントリーポイント

# 必要なモジュールのインポート
Import-Module "$PSScriptRoot/Modules/MarkdownRenderer.psm1"

# メインウィンドウの表示
[xml]$Xaml = Get-Content "$PSScriptRoot/GUI/MainWindow.xaml"
$reader = (New-Object System.Xml.XmlNodeReader $Xaml)
$window = [Windows.Markup.XamlReader]::Load($reader)

# メインウィンドウのイベントハンドラのインポート
. "$PSScriptRoot/GUI/MainWindow.ps1"

# ウィンドウの表示
$window.ShowDialog()

GUI/MainWindow.xaml

<!-- MainWindow.xaml -->
<Window xmlns="<http://schemas.microsoft.com/winfx/2006/xaml/presentation>"
        xmlns:x="<http://schemas.microsoft.com/winfx/2006/xaml>"
        Title="Text Editor" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBox Name="InputTextBox" Grid.Column="0" AcceptsReturn="True"/>
        <RichTextBox Name="OutputRichTextBox" Grid.Column="1" IsReadOnly="True"/>
    </Grid>
</Window>

GUI/MainWindow.ps1

# MainWindow.ps1
class MainWindow {
    [xml]$windowXAML
    [Windows.Window]$window

    MainWindow() {
        $this.LoadXAML()
        $this.BindEvents()
    }

    [void]LoadXAML() {
        $xamlPath = "$PSScriptRoot/MainWindow.xaml"
        [xml]$this.windowXAML = Get-Content $xamlPath
        $reader = (New-Object System.Xml.XmlNodeReader $this.windowXAML)
        $this.window = [Windows.Markup.XamlReader]::Load($reader)
    }

    [void]BindEvents() {
        $this.window.FindName("InputTextBox").Add_TextChanged({
            param($sender, $e)
            [TextRenderer]::RenderText($sender, $this.window.FindName("OutputRichTextBox"))
        })
    }

    static [void]ShowWindow() {
        $MainWindow = [MainWindow]::new()
        $null = $MainWindow.window.ShowDialog()
    }
}

# メインウィンドウの表示
[MainWindow]::ShowWindow()

Classes/TextRenderer.ps1

# TextRenderer.ps1
class TextRenderer {
    static [void]RenderText($inputTextBox, $outputRichTextBox) {
        $inputText = $inputTextBox.Text
        $renderedText = [MarkdownRenderer]::Render($inputText)
        $outputRichTextBox.Document.Blocks.Clear()
        $outputRichTextBox.AppendText($renderedText)
    }
}

Modules/MarkdownRenderer.psm1

# MarkdownRenderer.psm1
function Convert-MarkdownToHtml {
    param (
        [string]$MarkdownText
    )
    # マークダウンをHTMLに変換する処理
    $HtmlText = ConvertFrom-Markdown $MarkdownText
    return $HtmlText
}

class MarkdownRenderer {
    static [string]Render($text) {
        return Convert-MarkdownToHtml -MarkdownText $text
    }
}

Export-ModuleMember -Function Convert-MarkdownToHtml
Export-ModuleMember -Class MarkdownRenderer

以上が、テキストエディタアプリの基本構成とファイルアウトラインです。必要に応じて詳細を実装し、テストスクリプトを作成してください。

フロー説明

重複を修正したフロー図を以下に示します。MainWindow.xamlの読み込みと表示部分の重複を解消し、MainWindowクラスの初期化を整理しました。

graph TD;

    %% 要素の宣言
    A[App.ps1を起動]
    B[モジュールのインポート]
    C[MainWindow.xamlを読み込む]
    D[MainWindowクラスの初期化]
    E[ウィンドウの表示]
    F[テキスト変更イベントのバインド]
    G[ユーザーがテキストを入力]
    H[TextChangedイベント発生]
    I[TextRenderer.RenderText関数の呼び出し]
    J[MarkdownRenderer.Render関数の呼び出し]
    K[Convert-MarkdownToHtml関数の呼び出し]
    L[HTMLに変換されたテキストを返す]
    M[RichTextBoxに結果を表示]

    %% フローの定義
    A --> B
    B --> C
    C --> D
    D --> E
    E --> F
    F --> G
    G --> H
    H --> I
    I --> J
    J --> K
    K --> L
    L --> M

    %% ファイル別サブグラフ
    subgraph "App.ps1"
        A
        B
        C
    end

    subgraph "MainWindow.ps1"
        C
        D
        E
        F
        G
        H
        I
    end

    subgraph "TextRenderer.ps1"
        I
        J
    end

    subgraph "MarkdownRenderer.psm1"
        J
        K
        L
    end

    subgraph "GUI/MainWindow.xaml"
        E
        M
    end