今回は、C#入門編の知識を使って、簡単な英単語アプリを作成してみましょう。
実際作ってみてわからないときは、戻って復習しながら理解して進めていきましょう。
始めてアプリを作る人は、難しいと感じると思います。
そういう時は、答えを見ながら実際にプログラムを作成して、１行1行理解しながら、作っていきましょう。
理解しながら進めることが何よりも大切です。
それではさっそく始めましょう！
英単語アプリの完成形
今回は簡単な英単語アプリを作成していきますので、まずは完成形を見て、どんなアプリを作るのかイメージしてみましょう！
- 1問～10問まで、英単語を表示し、答え合わせをするアプリ
- 問題一覧：{"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
- 回答一覧：{"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
画面レイアウトは下のような感じで作成してみましょう。
初期表示
ユーザがテキストボックスに答えを書き込み、答えボタンを押す。(正解時)
ユーザがテキストボックスに答えを書き込み、答えボタンを押す。(不正解時)
次の問題を押す。
あとはこれの繰り返しです。
それでは作っていきましょう。
まずは画面レイアウトを作ってみましょう。
画面レイアウトの作成
画面レイアウトは、ツールボックスからコントロールを選択して、ドロップアンドドロップで作成できますよ。
今回使用しているコントロールは、「ラベル」と「テキストボックス」と「ボタン」の３つのコントロールで作成しています。
まずは、ラベルコントロールから見てみましょう。まるで囲んだ６つのコントロールを用意しています。
「第１問」のところを３つに分けていますが、1つでもできます。今回はソースをわかりやすくするために3つにあえて分けています。
次に、回答を記載するためのテキストボックスと、３つのボタンを作成しましょう。
画面レイアウトは作成できましたでしょうか。
プロパティでサイズの調整や、色を自由に変更してみてもいいですよ！
とにかくプログラミングは触ってみることがとても大切です。
プログラムを作成
画面レイアウトが完成したので、いよいよプログラムを作成していきましょう。
配列に問題と答えを用意しておきます。
//問題と解答の配列を作成
string[] arr_question = { "リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭" };
string[] arr_answer = { "apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head" };
ロード処理
まずは、ロード処理を作成してみましょう。
private void FrmWordApp_Load(object sender, EventArgs e)
{
int int_count = 1;
lblCount.Text = int_count.ToString();
lblQuestion.Text = arr_question[int_count - 1];
txtAnswer.Clear();
lblAnswer.Text = arr_answer[int_count - 1];
lblGood.Text = string.Empty;
lblAnswer.Visible = false;
lblGood.Visible = false;
if (int_count == 1)
{
btnBefore.Enabled = false;
}
else
{
btnBefore.Enabled = true;
}
if (int_count == 10)
{
btnNext.Enabled = false;
}
else
{
btnNext.Enabled = true;
}
}解説
4行目：int_countは何問目を意味しています 初期表示時は、1問目なので１を格納しています。
6行目～10行目：画面の初期値を設定 。
int_count.ToString()は、int型からstring型に変換しています。
arr_question[int_count - 1]は、配列の1つ目の値(リンゴ)を取得しています。配列は0から始まるので -1 をしています。
14行目以降：各項目のプロパティを設定 表示非表示や入力可否の設定を行っています。
答えボタン 押下処理
答えボタンの主な処理は、テキストボックスに書き込んだ値とラベルの答えを比較して、同じかどうか判定することです。
/// <summary>
/// 答えボタン
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void BtnAnswer_Click(object sender, EventArgs e)
{
//正解判定
if(txtAnswer.Text == lblAnswer.Text)
{
lblGood.Text = "〇";
lblGood.ForeColor = Color.Blue;
}
else
{
lblGood.Text = "×";
lblGood.ForeColor = Color.Red;
}
lblAnswer.Visible = true;
lblGood.Visible = true;
}9行目で、正解の判定をしています。
同じであれば〇、それ以外は× ついでにForeColorで文字の色を指定することができます。
前の問題へ 次の問題へ ボタン
前の問題ボタンと次の問題ボタンは、ほぼ初期表示と同じ処理になります。
まずは、前へボタンから見てみましょう。
/// <summary>
/// 前へボタン
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnBefore_Click(object sender, EventArgs e)
{
int int_count =int.Parse(lblCount.Text) - 1;
lblCount.Text = int_count.ToString();
lblQuestion.Text = arr_question[int_count - 1];
txtAnswer.Clear();
lblAnswer.Text = arr_answer[int_count - 1];
lblGood.Text = string.Empty;
lblAnswer.Visible = false;
lblGood.Visible = false;
if (int_count == 1)
{
btnBefore.Enabled = false;
}
else
{
btnBefore.Enabled = true;
}
if (int_count == 10)
{
btnNext.Enabled = false;
}
else
{
btnNext.Enabled = true;
}
}初期処理と違うのは、8行目です。
lblCount.Textで現在の問題数がわかるので、前のボタンであれば、「現在の問題数 - 1」
int.Parse()は、String型をInteger型に変換することができます。
int int_count =int.Parse(lblCount.Text) - 1;
続いて、次へボタンを見てみましょう。
/// <summary>
/// 次へボタン
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnNext_Click(object sender, EventArgs e)
{
int int_count = int.Parse(lblCount.Text) + 1;
lblCount.Text = int_count.ToString();
lblQuestion.Text = arr_question[int_count - 1];
txtAnswer.Clear();
lblAnswer.Text = arr_answer[int_count - 1];
lblGood.Text = string.Empty;
lblAnswer.Visible = false;
lblGood.Visible = false;
if (int_count == 1)
{
btnBefore.Enabled = false;
}
else
{
btnBefore.Enabled = true;
}
if (int_count == 10)
{
btnNext.Enabled = false;
}
else
{
btnNext.Enabled = true;
}
}初期処理と違うのは、8行目です。
lblCount.Textで現在の問題数がわかるので、次のボタンであれば、「現在の問題数 + 1」
int int_count = int.Parse(lblCount.Text) + 1;
また、10-35行目の部分は「初期処理、前へボタン、次へボタン」が同じ処理になっていますので、関数にすることもできます。
今回はあえてしていませんが、関数でまとめると見やすくなるので、余裕がある人は関数の勉強につなげてみてください。
これで、処理が完成しました。
最後にソースコードをまとめています。
ソースコード
using System;
using System.Drawing;
using System.Windows.Forms;
namespace CSharp
{
/// <summary>
/// ロード処理
/// </summary>
public partial class FrmWordApp : Form
{
//問題と解答の配列を作成
string[] arr_question = { "リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭" };
string[] arr_answer = { "apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head" };
public FrmWordApp()
{
InitializeComponent();
}
private void FrmWordApp_Load(object sender, EventArgs e)
{
int int_count = 1;
lblCount.Text = int_count.ToString();
lblQuestion.Text = arr_question[int_count - 1];
txtAnswer.Clear();
lblAnswer.Text = arr_answer[int_count - 1];
lblGood.Text = string.Empty;
lblAnswer.Visible = false;
lblGood.Visible = false;
if (int_count == 1)
{
btnBefore.Enabled = false;
}
else
{
btnBefore.Enabled = true;
}
if (int_count == 10)
{
btnNext.Enabled = false;
}
else
{
btnNext.Enabled = true;
}
}
/// <summary>
/// 答えボタン
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void BtnAnswer_Click(object sender, EventArgs e)
{
//正解判定
if(txtAnswer.Text == lblAnswer.Text)
{
lblGood.Text = "〇";
lblGood.ForeColor = Color.Blue;
}
else
{
lblGood.Text = "×";
lblGood.ForeColor = Color.Red;
}
lblAnswer.Visible = true;
lblGood.Visible = true;
}
/// <summary>
/// 前へボタン
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnBefore_Click(object sender, EventArgs e)
{
int int_count =int.Parse(lblCount.Text) - 1;
lblCount.Text = int_count.ToString();
lblQuestion.Text = arr_question[int_count - 1];
txtAnswer.Clear();
lblAnswer.Text = arr_answer[int_count - 1];
lblGood.Text = string.Empty;
lblAnswer.Visible = false;
lblGood.Visible = false;
if (int_count == 1)
{
btnBefore.Enabled = false;
}
else
{
btnBefore.Enabled = true;
}
if (int_count == 10)
{
btnNext.Enabled = false;
}
else
{
btnNext.Enabled = true;
}
}
/// <summary>
/// 次へボタン
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnNext_Click(object sender, EventArgs e)
{
int int_count = int.Parse(lblCount.Text) + 1;
lblCount.Text = int_count.ToString();
lblQuestion.Text = arr_question[int_count - 1];
txtAnswer.Clear();
lblAnswer.Text = arr_answer[int_count - 1];
lblGood.Text = string.Empty;
lblAnswer.Visible = false;
lblGood.Visible = false;
if (int_count == 1)
{
btnBefore.Enabled = false;
}
else
{
btnBefore.Enabled = true;
}
if (int_count == 10)
{
btnNext.Enabled = false;
}
else
{
btnNext.Enabled = true;
}
}
}
}
まとめ
作成してみてどうだったでしょうか。
少し難しいかもしれませんが、このアプリを作成することができるようになれば、
未経験者から初心者へステップアップすることができたと思います！
次は、初心者から中上級者を目指してステップアップしてみましょう。
復習はこちらから
