ビジュアルな「Hello World !」を作成しましょう。

　こんにちは、皆さん。今日は前回の続きの、「Hello World !」（２／２）を作成しましょう。

　今回は、Visual Studio の本命の「ビジュアルな Hello World !」です。コンソールアプリとは、全然違います。マウスが主体のＵＩ（ユーザーインターフェース）になります。

　今回の目的は、単に「Hello World !」を作成するのではなく、「Form アプリケーション」で最も重要な、「コモン ダイアログボックス」を使ってみようという試みです。

　「コモン ダイアログボックス」というのは、Windows でお馴染みの「Color や Font や ファイルの入出力」で使う、共通のユーザーインターフェースを提供するコントロールです。

　これらのコントロールは、個人で作ろうとしても天文学的に出来ません（笑）。プロでも、これだけ完成度の高い物は、作れるものではありません。

　ですから、本家本元のプロが提供している分けですから、それに慣れることや使い熟すことが、重要になります。

　そして、ここからが、「サンデープログラマー」としての出発点です（パワー）。 　もう、コンソールアプリには、戻れません（激汗）。

　それでは、参りましょう。　Let’s get started !.

Visual な「Hello World !」とは。

　今回作成する「Hello World !」は、「Form コントロール」上に作成する「Hello World !」です。これは、「Visual Studio」で扱う、最も標準的な「Form アプリケーション」になります。

　こちらは、テキストベースではなく、「マウス」を使用する Visual なアプリケーションになります。皆さんもご存知の、「Windows アプリケーション」がこちらの形態です。 

　では何故、 Visual な「Hello World !」を作成するのでしょうか？というと、「Form アプリケーション」を説明する、最も簡単なアプリケーションが、「Hello World !」だからです。

　この基本的なことを理解することは、実は最も重要なことなんです。何度も、練習しましょう。 

　何故なら、難しいという事は、果てしない基本の積み重ねに他なりません。野球で言えば、キャッチボールです。相手の胸に目がけて投げます。そして、徐々に距離を広げて行きます。

　或いは、最も簡単だからといっても、「Ｃ＃」の原点であり、「プログラミング」の原点でもあります。料理で言えば「卵焼き」とか、魚釣りで言えば「ヘラブナ釣り」とか、に該当します。

　ですから、最初の登竜門としては、「Hello World !」は、もっとも意義のある試みだと、信じています（笑）。

　尚、コンソールアプリによる「Hello World !」は、以下の記事を参考にして下さい。

Ｅｉｍａの何でもファイトラボ

標準的な「Hello World !」を作成しましょう。 | Ｅｉｍａの何でもファイトラボ C# のコンソールアプリによる「Hello World !」を、作成します。環境は、Visual Studio Community 2022 を使用します。

先ず、新しいプロジェクトを作成します。

　上記の「コンソールアプリの作成手順」を、参考にしてください。今度は、「Windows フォーム アプリケーション (.NET Framework)」を、選択してください。以下のようになります。

　次の画面での「プロジェクト名」は、何でも良いのですが、「Hello World」にしましょう。

　起動後の最初の画面は、以下の記事を参考にしてください。

Ｅｉｍａの何でもファイトラボ

【C# Form コントロール】先ず、最初に行うこと。 | Ｅｉｍａの何でもファイトラボ C# で「Form アプリケーション」を作成する場合に、先ず最初に行う事と、「Form 及びMenuStrip、StatusStrip」コントロールの、初期設定を解説します。

Ｅｉｍａの何でもファイトラボ

【C# Form ソースコード】先ず、コードで便利な機能。 | Ｅｉｍａの何でもファイトラボ プログラム開発を行う前に、知っておくと便利な「ソースコード」の機能について、説明します。実は、コードと同じくらい重要なんです。

どういう画面構成なのかを、見てみましょう。

　どういう「Hello World !」を作るのかを、結果から見てみましょう。それによって、ある程度「コード」に対する、想像や予習ができると思います。

　想像しながら作ると、理解するのも早いかも知れません。又は、そうでないかも知れません（笑）。それでは、結果は以下のように成ります。

　如何でしょうか？。 初心者の方にとっては、天文学的に難しそうに見えるかも知れません。しかし慣れてくると、やはり「Hello World !」だと分かると思います（笑）。

　初心者の方には、当然どういう「コード」なのかは分からないと思いますが、ある程度できる方には、頭の中で既に「コード」が出来上がっていると思います。

　しかし、実際にノールックで作成してみると、「他人との違い」や「新たな発見」があるかも知れません。頑張ってみてください。 

それでは、何から始めたら良いのでしょうか？

　Visual なアプリケーションを作る場合に、最初に行うことは、基本的に「デザイン」からです。デザインを作ってから、コードをそれに合わせます。

　ですから先ず最初に、上記の「完成図」をデザインしてみましょう。

　デザインに関しては、自分が良いと思う方法でどうぞ！。或いは、個人の経験則等もあると思います。今回の「完成図」も、私の「独断と偏見と経験則」です。特に、規制とかはありません。

　また、アプリケーションの「善し悪し」とかも、余り考えていません（汗）。

　ですから、Visual な環境においては、「デザイン」に時間を掛けることが多いと思います。デザインが決まれば、プログラムはある程度、自動的に行えます。

　というのは、Ｃ＃は本来「RAD ツール」なので、多くの有益なツールが内在しています。プログラマーが行うことは、大凡「最初と最後の処理のプログラムを書く」という事になると思います。

　但し、「デザインを行う」ということは、全く自由に「デザインをする」ということではなく、Ｃ＃に付属しているコントロールを、如何に組み合わせるかという事に他なりません。

　付属しているコントロールだけでは足りない場合は、より高性能なコントロールが、サードパーティー等で販売されています。

　勿論、スキルのある場合には、「Windows API」を利用して、機能を追加することも出来ます。この辺りは、個人や職業で考え方も違うし、コストパフォーマンスもあると思います。

　もし、全く自由にデザインを行いたい場合は、「Ｃ＃」よりも「Ｃ＋＋」とか「ＭＦＣ」とかの方が、良いと思います。

　「ＭＦＣ」の場合は、「Ｃ＃」よりも速度が「1.5 倍 ～ 2.0 倍程度」速いし、「リボン」のような「超高度なＵＩ」も用意されています。但し、非常に難しいです。また、マネージド言語ではありません。

　恐らく、プログラマーを目指さない方には、無理だと思います。ネット検索や日本語の参考書も少ないので、中々「茨の道」です（笑）。　

　一応解説して置きますが、「Ｃ＃」と「ＭＦＣ」の速度の違いは、何処から来るのかというと、実は何方も、Windows の機能を使う「ラッパー」なんですが、

　「ＭＦＣ」の場合は、マネージド言語ではないので、より自由な状態で Windows の機能を使います。そして、Windows のネイティブコードで動きます。また、プログラマーに任せる部分が大きいです。

　一方、「Ｃ＃」の場合は、マネージド言語なので、色んな安全性を考慮するために、より冗長的にラッパーが構成されています。.NET Framework の管理下で動きます。

　この違いが、処理速度に影響しています。しかし、私が「オススメ」する方は、「Ｃ＃」です。というか、初心者の方には、一択だと思います（笑）。

完成図のデザインを行います。

　デザイン時の最初の状態から、「ツールボックス」にある色んなコントロールを、ドラッグ＆ドロップして以下のような画面を作成します。

　尚、「Form1.cs」を「HelloWorldForm.cs」にする方法は、「上記の参考記事」に書いてあります。この事は、可なり重要なことなので、この機会に是非マスターしておきましょう。

　各コントロールの説明は、以下で行いますが先ずは、「Form1.cs」の名前を変えておきましょう。

　まぁ、一度で上手く行く場合もありますが、何度も失敗を繰り返すことで、経験則が身に付きます。出来るまで、頑張りましょう。 

　尚、この状態が、デスクトップ（モニター：２７インチ）を使用している場合の、ディフォルトです。ノートパソコンを使用している場合は、左右何方かのペインは表示出来ないと思います（笑）。　

先ず、Form のプロパティを設定します。

　上記の方法で、Form の名前を変更したら、デザイン画面に戻って Form のプロパティを設定します。

　右ペインの下にある「プロパティのタブ」をクリックして、画面中央にある Form をクリックします。これで、Form のプロパティが表示されます。

　Form の基本的な状態は、上記の参考記事「【C# Form コントロール】先ず、最初に行うこと。」に、詳しく書いてありますが、改めて以下のプロパティを設定します。

　　これだけなんですが、それ以外は、最適値に設定されています。

次に、メインの「Hello World !」を Form に貼り付けましょう。

　そうですね、デザインをする時が、一番楽しいですね。何故なら、自由だからです。何でも出来ます。プログラムの良し悪しよりも、「自分のやりたいこと」を優先しましょう。

　自分に出来るか出来ないかではなく、自分がやりたいかどうかをデザインしましょう。

　それでは、先ず最初に、メインの「Label コントロール（Hello World !）」を、 Form に貼りましょう。

　上記の左ペインの「ツールボックス」から、「Label」をクリックして「ドラッグアンドドロップ」で、Form に貼り付けます。

　場所は、Form 上の何処でも構いません。又は、ダブルクリックでも良いのですが、「左上に落ちます」（笑）。私の場合は、「ドラッグアンドドロップ」が普通です。

　それから、そのまま引き続き右ペインの「プロパティ」を設定します。以下のように、プロパティを設定します。

同じ要領で、各コントロールを貼り付けましょう。

コモンダイアログボックスを貼り付けましょう。

　このコントロールは、通常のコントロールとは違って、必要な時に「呼び出して」使います。従って、Form 上には、貼り付けることは出来ません。

　しかし、Form の下のエリアに、格納することが出来ます。方法は、他のコントロールと同じように、「ドラッグアンドドロップ」です。

　上記の、「Form の全体図」を見れば分かります。

それでは、プロパティとイベントを作成しましょう。

　その前に、先ず、デザイン時のバグを解決して置きましょう。それには、動かすことが重要です。「▲　開始」か「Ｆ５」を押下しましょう。

　止め方は、通常の Windows アプリ共通の方法で、右上の「×」をクリックします。

　ここでは、プロパティのエラーになることは、殆どないのでデザイン時の「設定」や「バランス」を、見ておきましょう。何度も起動して確認しましょう。

　一応確認ができたら、ソースコードを表示します。方法は、右ペインの「ソリューションエクスプローラー」タブを表示して、「HelloWorldForm.cs」をクリックします。

　その状態で、最上部にあるアイコンの中から、「＜＞」を選んでクリックします。

　初期状態は、上記「参考記事」の「【C# Form ソースコード】先ず、コードで便利な機能。」に、詳しく書いてあるので参照してください。

　「参考記事」の「画像：最初の画面」に、以下のプロパティを追加します。

　通常、プロパティ（変数）から追加するというのは、殆どありません。というのは、どういうプロパティが必要なのかは、現時点では分からないからです。

　ですから通常は、作って行く過程で順次追加して行きます。しかし今回は、結果が既に分かっているので、逆算してプロパティから設定します。

プロパティを設定します。

　以下のプログラムで、「画像：最初の画面」から「足りない部分を全て追加」して、以下のようにします。

namespace Hello_World
{
    /// <summary>
    /// ビジュアルな HelloWorld を提供します。
    /// </summary>
    public partial class HelloWorldForm : Form
    {
        /// <summary>
        /// 新しいインスタンスを作成します。
        /// </summary>
        public HelloWorldForm()
        {
            InitializeComponent();
        }

        #region プロパティ

        /// <summary>
        /// 一つ前の前景色を取得または設定します。
        /// </summary>
        private Color OldForeColor { get; set; }

        /// <summary>
        /// 一つ前の背景色を取得または設定します。
        /// </summary>
        private Color OldBackColor { get; set; }

        #endregion
    }
}

　コメントも含めて、再現してください。「コメント」及び「XML コメント」の入力方法は、上記「参考記事」に書いてあります。

　ここで、新たに「#region ～ #endregion」という、「プリプロセッサ ディレクティブ」が入っています。これは、ソースを折り畳むことによって、コードの概要やスコープが格段に良くなります。

　ＩＤＥのエディターは、アウトライン機能によって、個別のメンバーに対して折り畳むことが出来ますが、「#region」はより大きな単位で、折り畳むことができます。

　これ等のプリプロセッサ ディレクティブは、プログラムとは直接関係はないのですが、プログラムの「道案内的」な役割を行う事ができます。

イベントを追加する前に少々。

　という事なんですが、実は、イベントというのは、ソースを追加するだけでは「イベント」には成らないのです。それなりの手続きが必要になります。

　この手続きは、初心者の方にとっては結構難しいので、裏方さん（ＩＤＥのデザイナー）が自動的に行っています。勿論、慣れてくれば、自分で設定することも出来ます。

　しかし、理解するまでには、結構時間が掛かると思います。それよりも、先ずは体験してみましょう。ですから、取りあえず「ＩＤＥのデザイナー」に戻りましょう（笑）。

　尚、コントロールのメンバーとして、標準的に実装されている「イベント」に関しては、「ＩＤＥのデザイナー」から設定するのが、普通です。初心者とかプロとかに関わらず。 

イベントを追加します。

STEP

ColorButton_Click イベント

　「完成図のデザイン」の状態から、「色を変更します」の Button を、ダブルクリックします。

　そうすると、ディフォルトのイベントが、以下のように「ソースコード」に設定されます。

    private void ColorButton_Click(object sender, EventArgs e)
    {
    
    }

　これは、ColorButton がクリックされた時に、実行されるプログラムを書くエリアが、確保された分けです。この中に、プログラムを書きます。

　(object sender, EventArgs e) というのは、現時点では、何も気にする必要はないのですが、複雑なプログラムの場合には、重要になってきます（一応）。

　そして、ＩＤＥのデザイナーの方には、以下のようにイベントが設定されるようになります。

　尚、イベントを表示するには、「プロパティ」タブの最上にあるアイコンから、「§（カミナリ）」をクリックします。そうすると、以下のように成っています。

　右ペインの上部に、「Click: ColorButton_Click」というのが見えます。

　このボタンは、「Color ダイアログボックス」を、開くためのボタンです。

STEP

FontButton_Click イベント

　同じ要領で、「フォントを変更します」の Button を、ダブルクリックします。

　このボタンは、「Font ダイアログボックス」を、開くためのボタンです。コードは後で示します。

STEP

UndoColorButton_Click イベント

　同じ要領で、「色を一つ前に戻す」の Button を、ダブルクリックします。

　このボタンは、前景色または背景色を、一度だけ前に戻すことができるボタンです。

　本来は、「Undo アンドゥ、Redo リドゥ」というのは、無限大に行えるのが普通ですが、今回は一度だけです（汗）。しかし、考え方は同じなので、それを保存する方法を考えます。 

　難しそうに見えますが、単純な「Undo、Redo」は、意外と簡単です。

　イベントの追加は、以上です。ダブルクリックを、三回するだけです。非常に簡単ですね。しかし、それを理解するのは、これから結構大変なんです（笑）。

そして、ソースコードを作成しましょう。

　それでは最後に、待ちに待った「ソースコード」を、作成しましょう。このソースコードというのは、実はプロの方が作れば、殆どよく似たコードになります。

　しかし、多少の「個性」というのがあるので、他人との比較は勉強になります。

　例えば、野球選手というのは、基本的な所は「同じ投げ方」で「同じ打ち方」ですよね。それと同じなんです。

　というのは、プログラマーというのは、「最速で最短ロジック」を追求するのが好きなんです（パワー）。

それでは、以下のコードを再現してください。

　上記と同じように、以下のコードの全てを「再現」してください。自分独自のコメントは、適時追加してください。分からないことは、コメントして置きましょう。 

    #region イベント

    /// <summary>
    /// Hello World の色を変更します。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void ColorButton_Click(object sender, EventArgs e)
    {
        // 現在の色を設定します。
        if (ForeColorRadioButton.Checked)
        {
            ColorDialog.Color = HelloWorldLabel.ForeColor;
        }
        else
        {
            ColorDialog.Color = HelloWorldLabel.BackColor;
        }

        // 色を選択します。
        if (ColorDialog.ShowDialog() == DialogResult.OK)
        {
            // 新しい色を設定します。
            if (ForeColorRadioButton.Checked)
            {
                OldForeColor = HelloWorldLabel.ForeColor;
                HelloWorldLabel.ForeColor = ColorDialog.Color;
            }
            else
            {
                OldBackColor = HelloWorldLabel.BackColor;
                HelloWorldLabel.BackColor = ColorDialog.Color;
            }
        }
    }

    /// <summary>
    /// Hello World のフォントを変更します。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void FontButton_Click(object sender, EventArgs e)
    {
        // 現在のフォントを設定します。
        FontDialog.Font = HelloWorldLabel.Font;

        // フォントを選択します。
        if (FontDialog.ShowDialog() == DialogResult.OK)
        {
            // 新しいフォントを設定します。
            HelloWorldLabel.Font = FontDialog.Font;
        }
    }

    /// <summary>
    /// 色を一つ前に戻します。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void UndoColorButton_Click(object sender, EventArgs e)
    {
        // 現在の選択が、前景色の場合。
        if (ForeColorRadioButton.Checked &&
            OldForeColor != Color.Empty)
        {
            DialogResult ret = MessageBox.Show(
                OldForeColor.ToString() + " に戻しますか？", this.Text,
                MessageBoxButtons.OKCancel, MessageBoxIcon.Exclamation);
            if (ret == DialogResult.OK)
            {
                HelloWorldLabel.ForeColor = OldForeColor;
                OldForeColor = Color.Empty;
            }
        }
        // 現在の選択が、背景色の場合。
        else if (BackColorRadioButton.Checked &&
            OldBackColor != Color.Empty)
        {
            DialogResult ret = MessageBox.Show(
                OldBackColor.ToString() + " に戻しますか？", this.Text,
                MessageBoxButtons.OKCancel, MessageBoxIcon.Exclamation);
            if (ret == DialogResult.OK)
            {
                HelloWorldLabel.BackColor = OldBackColor;
                OldBackColor = Color.Empty;
            }
        }
        // それ以外の場合。
        else
        {
            MessageBox.Show("今は戻せません。", this.Text,
                MessageBoxButtons.OK,MessageBoxIcon.Information);
        }
    }

    #endregion

　「#region プロパティ　～　#endregion」の下に、同じように再現してください。

　コードは、非常に直観的でシンプルなものです。どんな言語でも大体こんな感じです。但し、最も基本的なことなので、最善ではありません。

　Ｃ＃の「コードテクニック」や、「シンタックスシュガー」等の構文を使うと、もっと簡潔になる場合があります。

　しかし、物事には「損益分岐点」というのがあるので、何が何でも「最新テクニック」という分けではありません（笑）。適切に使うことが、一番重要です。

　分らない構文は、その場所をクリックしてから、「Ｆ１」を押下しましょう。「ヘルプビュアー」が起動して、その「説明とサンプル」が表示されます。

それでは、「Hello World !」を起動しましょう。

　上手く出来たら、「▲　開始」か「Ｆ５」を押下しましょう。一度で起動できたら、幸運です。大凡どこかに、エラーがあるもんです(笑)。

　そして、起動できたら、色々と遊んでみましょう。遊ぶことによって、分からないことが実感として、理解できるようになります。

　「フォント」とかを色々変えたり、フォームを最大化したりすると、「Anchor」の意味が分かったりします。止め方は、上記にあります。

まとめ。

　如何でしたでしょうか？。初心者の方には、多分、天文学的に難しいと思いますが、それで当たり前なので、安心してください。

　重要なのは、繰り返し行う事です。「　空　」で出来るまで、頑張って見てください（笑）。

　実は、「 Windows 」アプリの本質は、「イベントドリブン」なのでイベントを処理する事が、最も重要なことになります。 

　それでは、この辺でごきげんよう。