Milkのメモ帳

日々の思いつきを忘れないようにのメモ用です。

Milk's Memo Note

日々の思いつきを忘れないようにのメモ用です。

【第4回】画面に"HelloWorld"を表示してみよう!

f:id:maxminkun:20161005165223j:plain

前回は、Visual Studio の環境構築についてご紹介しました。

www.milkmemo.com

では、今回は早速、簡単な画面について作ってみましょう。

こんな感じです。

とにかく、動かしてみるというのを目標としますので、プログラムに対する解説は今回は少なめにします。

Visual Studio でプログラムを作り、動かす、という流れを掴んでみましょう。

プロジェクトを新規作成する

先ず、「プロジェクト」という単位で、プログラム一式のファイルを管理します。

それでは、プロジェクトを作成してみましょう。(分かりやすいように、私のVSは背景の色を変えました。本当は黒のほうが格好良くて好きなんだけど・・・)

「ファイル」ー「新規作成」ー「プロジェクト」を選択します。

f:id:maxminkun:20161005171826j:plain

すると、以下の画面が出てくると思います。

f:id:maxminkun:20161005172101j:plain

この画面は、どのようなアプリケーションを作るかを選ぶことが出来ます。

今回は、画面を伴った基本的なアプリケーションを作りたいと思います。

ですので、「Windowsフォームアプリケーション」を選択して下さい。

また、「名前」は基本的にアプリケーションの名前になります。また、「場所」は、これらプロジェクト一式のファイルを作成する場所になりますので、保存したいフォルダを選択して下さい。

「ソリューション名」は「名前」と同一で構いません。

以下の様な画面になりましたか?(参考画面の中で、プロジェクトの名前が異なるのは気にしないで下さい。私の環境の関係上、少々名前を変える必要がありました。)

f:id:maxminkun:20161005173108j:plain

Visual Studio の画面の説明

画面デザインを行う場合、左に「ツールボックス」という欄が表示されます。もし隠れている場合は、文字が見えると思うのでそれを押して「ピン留めマーク」を押すと固定されます。

f:id:maxminkun:20161005173521j:plain

また、右側には、「ソリューションエクスプローラ」と「プロパティ」を表示させておくことをお勧めします。

それぞれについて軽く説明を行います。

ツールボックス

ツールボックスとは、画面の部品を集めた欄になります。ここの一覧に表示されているものをクリックして、真ん中の画面デザインの部分をクリックすると、その部品が配置されます。

ソリューションエクスプローラー

プロジェクト一式のフォルダの構成を表しています。「ソリューション」と言うのが一番上の階層です。そして、その下に「C#」のアイコンが付いた「プロジェクト」が入っています。

また別の機会に説明しますが、この「ソリューション」の中に、「プロジェクト」を複数作って管理することが出来ます。それが必要な場合は、もう少し大きなプログラムを書くときですので、その際にご説明しますね。

プロパティ

画面に配置した部品をクリックすると、その部品に設定できる様々な項目が表示されます。ここの値を書き換えると、その部品の見た目や動きなどを変更することが可能です。

画面を作ってみよう!

では、実際に画面に部品を配置してみましょう。

ツールボックスから、「すべてのWindowsフォーム」ー「TextBox」を選択して下さい。

そして、画面上でマウスでクリックしてみましょう。画面に配置出来ましたか?

f:id:maxminkun:20161005180335j:plain

では、ボタンも置いてみましょう!「Button」を置いてみます。えい!!

f:id:maxminkun:20161005180456j:plain


えーっと。綺麗に並べたのがこちらになります。(3分クッキング風)

f:id:maxminkun:20161005184952j:plain

部品のプロパティ設定を変更する

画面のボタンをクリックすると、プロパティにその内容が表示されますよね。

これらのプロパティに設定された項目は、画面起動時の初期設定値となります。

ですから、画面起動時にボタンに「こんにちは」と表示させたい場合は、「プロパティ」ー「Text」の欄に「こんにちは」と入れて下さい。

f:id:maxminkun:20161005185334j:plain

同様にして、右側のボタンに対しても「さようなら」と入力しましょう。

すると、画面の初期状態が変更されるはずです。

ボタンが押された時の動作をつくる

それでは、プログラミングを本格的に行いましょう!!

「こんにちは」ボタンをダブルクリックしてみて下さい!

すると、以下のような画面にジャンプすると思います。

f:id:maxminkun:20161005185903j:plain

これが、先程まで部品を置いたりしていた画面の、動作に関してプログラムを書く場所になります。

以下のように書いてあるのが分かりますか?

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

これは、さっきダブルクリックしたボタンに対し、ボタンが押された場合の動作について書く場所です。

このように Visual Studio は自動でプログラムを補完して書いてくれます。

では、この部分を以下のように追記しましょう。

private void button1_Click(object sender, EventArgs e)
{
  //「こんにちは」ボタンをクリックする動作
  this.textBox1.Text = "HelloWorld";
}

これについて説明すると、ボタンが押された時に、「TextBox」に「HelloWorld」と表示してね!という処理です。

では、画面上部のタブに「Form1.cs(デザイン)」というタブがありますから、それを押して下さい。

すると、元のデザインの画面に戻ります。

では、同様にして「さようなら」ボタンもダブルクリックして、ボタンが押された時の処理を追加しましょう。

書けましたか?

実際に動かしてみよう!

それでは、いよいよ実際に動かしてみましょう!

Visual Studio の上部にある、「開始」を押すか、F5を押して下さい。

f:id:maxminkun:20161005191344j:plain

すると「ビルド」という処理が走って、先程までいじっていたプログラムが実際に実行されます!

f:id:maxminkun:20161005191522j:plain

因みに、ビルドとは、前回まで言っていた「コンパイル」とほぼ同じ意味のことです。

つまり、あなたの書いたプログラムが、実際に機械語に変換され、コンピュータが解釈して実行している状態なのです。

出てきた画面に対して、ボタンを押してみて下さい。

すると、「HelloWorld」「GoodByeWorld」が「TextBox」に表示されることが分かるでしょう。

終了する際には、画面の×ボタンを押すか、Visual Studio の画面上部の「停止」ボタンを押す、又はShift + F5を押すと止まります。

f:id:maxminkun:20161005192016j:plain

最後に

どうでしょうか!

実際に画面を持ったアプリケーションの作成が出来ましたね!

今回は、画面の作成とプログラムを書くこと。そして、コンパイル後に実行するという、実際の開発の流れを経験してみました。

今はまだ、プログラム的にどういうことをしたのかというのは全然わからないと思います。

当然です。何もその部分は説明していませんから。

ですので、次の回からは、今回動かしたプログラムがいったいどういう意味だったのか?という部分に焦点を当てて解説したいと思います。

疑問や質問はいつでもどうぞ。

また、今回使用したファイルについては、以下の場所に置いておきますので、自由にDLしてみて下さい。

1drv.ms

それでは、楽しいC# Lifeを!!

adios!!

www.milkmemo.com


※因みに、私が愛用している書籍は以下です。

現場ですぐに使える! VisualC#2015逆引き大全500の極意

現場ですぐに使える! VisualC#2015逆引き大全500の極意