
今回は、入門編の知識を使って、簡単な英単語アプリを作成してみましょう。
実際作ってみてわからないときは、戻って復習しながら理解して進めていきましょう。
始めてアプリを作る人は、難しいと感じると思います。
そういう時は、答えを見ながら実際にプログラムを作成して、1行1行理解しながら、作っていきましょう。
理解しながら進めることが何よりも大切です。
それではさっそく始めましょう!
英単語アプリの完成形
今回は簡単な英単語アプリを作成していきますので、まずは完成形を見て、どんなアプリを作るのかイメージしてみましょう!
- 1問~10問まで、英単語を表示し、答え合わせをするアプリ
- 問題一覧:{"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
- 回答一覧:{"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
画面レイアウトは下のような感じで作成してみましょう。
初期表示
ユーザがテキストボックスに答えを書き込み、答えボタンを押す。(正解時)
ユーザがテキストボックスに答えを書き込み、答えボタンを押す。(不正解時)
次の問題を押す。
あとはこれの繰り返しです。
作成するアプリのイメージがわきましたか??
それでは作っていきましょう。
まずは画面レイアウトを作ってみましょう。
画面レイアウトの作成
画面レイアウトは、ツールボックスからコントロールを選択して、ドロップアンドドロップで作成できますよ。
今回使用しているコントロールは、「ラベル」と「テキストボックス」と「ボタン」の3つのコントロールで作成しています。
まずは、ラベルコントロールから見てみましょう。まるで囲んだ6つのコントロールを用意しています。
「第1問」のところを3つに分けていますが、1つでもできます。今回はソースをわかりやすくするために3つにあえて分けています。
次に、回答を記載するためのテキストボックスと、3つのボタンを作成しましょう。
画面レイアウトは作成できましたでしょうか。
プロパティでサイズの調整や、色を自由に変更してみてもいいですよ!
とにかくプログラミングは触ってみることがとても大切です。
プログラムを作成
画面レイアウトが完成したので、いよいよプログラムを作成していきましょう。
ロード処理
まずは、ロード処理を作成してみましょう。
Private Sub FrmWordApp_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim arr_question As String() = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
Dim arr_answer As String() = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
Dim int_count As Integer = 1
'初期値
lblCount.Text = int_count.ToString
lblQuestion.Text = arr_question(int_count - 1)
txtAnswer.Text = ""
lblAnswer.Text = arr_answer(int_count - 1)
lblGood.Text = ""
'表示 非表示
lblAnswer.Visible = False
lblGood.Visible = False
'使用可否
If int_count = 1 Then
btnBefore.Enabled = False
Else
btnBefore.Enabled = True
End If
If int_count = 10 Then
btnNext.Enabled = False
Else
btnNext.Enabled = True
End If
End Sub
解説
3行目~5行目:問題と答えを配列に格納 int_countは何問目を意味しています 初期表示時は、1問目なので1を格納しています。
8行目~12行目:画面の初期値を設定
int_count.ToStringは、Integer型からString型に変換しています。
arr_question(int_count - 1)は、配列の1つ目の値(リンゴ)を取得しています。配列は0から始まるので -1 をしています。
14行目以降:各項目のプロパティを設定 表示非表示や入力可否の設定を行っています。
答えボタン 押下処理
答えボタンの主な処理は、テキストボックスに書き込んだ値とラベルの答えを比較して、同じかどうか判定することです。
Private Sub BtnAnswer_Click(sender As Object, e As EventArgs) Handles btnAnswer.Click
'正解判定
If txtAnswer.Text = lblAnswer.Text Then
lblGood.Text = "〇"
lblGood.ForeColor = Color.Blue
Else
lblGood.Text = "×"
lblGood.ForeColor = Color.Red
End If
'表示 非表示
lblAnswer.Visible = True
lblGood.Visible = True
End Sub
4行目で、判定をしています。
同じであれば〇、それ以外は× ついでにForeColorで文字の色を指定することができます。
前の問題へ 次の問題へ ボタン
前の問題ボタンと次の問題ボタンは、ほぼ初期表示と同じ処理になります。
Private Sub BtnBefore_Click(sender As Object, e As EventArgs) Handles btnBefore.Click
Dim arr_question As String() = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
Dim arr_answer As String() = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
Dim int_count As Integer = CInt(lblCount.Text) - 1
'初期値
lblCount.Text = int_count.ToString
lblQuestion.Text = arr_question(int_count - 1)
txtAnswer.Text = ""
lblAnswer.Text = arr_answer(int_count - 1)
lblGood.Text = ""
'表示 非表示
lblAnswer.Visible = False
lblGood.Visible = False
'使用可否
If int_count = 1 Then
btnBefore.Enabled = False
Else
btnBefore.Enabled = True
End If
If int_count = 10 Then
btnNext.Enabled = False
Else
btnNext.Enabled = True
End If
End Sub
Private Sub BtnNext_Click(sender As Object, e As EventArgs) Handles btnNext.Click
Dim arr_question As String() = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
Dim arr_answer As String() = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
Dim int_count As Integer = CInt(lblCount.Text) + 1
'初期値
lblCount.Text = int_count.ToString
lblQuestion.Text = arr_question(int_count - 1)
txtAnswer.Text = ""
lblAnswer.Text = arr_answer(int_count - 1)
lblGood.Text = ""
'表示 非表示
lblAnswer.Visible = False
lblGood.Visible = False
'使用可否
If int_count = 1 Then
btnBefore.Enabled = False
Else
btnBefore.Enabled = True
End If
If int_count = 10 Then
btnNext.Enabled = False
Else
btnNext.Enabled = True
End If
End Sub
初期処理と違うのは、5行目です。
lblCount.Textで現在の問題数がわかるので、前のボタンであれば、「現在の問題数 - 1」 次のボタンであれば「現在の問題数 + 1」
CInt()は、String型をInteger型に変換することができます。
Dim int_count As Integer = CInt(lblCount.Text) - 1
Dim int_count As Integer = CInt(lblCount.Text) + 1
これで、処理が完成しました。
最後にソースコードをまとめています。
ソースコード
Public Class frmWordApp
''' <summary>
''' ロード処理
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub FrmWordApp_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim arr_question As String() = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
Dim arr_answer As String() = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
Dim int_count As Integer = 1
'初期値
lblCount.Text = int_count.ToString
lblQuestion.Text = arr_question(int_count - 1)
txtAnswer.Text = ""
lblAnswer.Text = arr_answer(int_count - 1)
lblGood.Text = ""
'表示 非表示
lblAnswer.Visible = False
lblGood.Visible = False
'使用可否
If int_count = 1 Then
btnBefore.Enabled = False
Else
btnBefore.Enabled = True
End If
If int_count = 10 Then
btnNext.Enabled = False
Else
btnNext.Enabled = True
End If
End Sub
''' <summary>
''' 答えボタン押下処理
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub BtnAnswer_Click(sender As Object, e As EventArgs) Handles btnAnswer.Click
'正解判定
If txtAnswer.Text = lblAnswer.Text Then
lblGood.Text = "〇"
lblGood.ForeColor = Color.Blue
Else
lblGood.Text = "×"
lblGood.ForeColor = Color.Red
End If
'表示 非表示
lblAnswer.Visible = True
lblGood.Visible = True
End Sub
''' <summary>
''' 前へ戻る
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub BtnBefore_Click(sender As Object, e As EventArgs) Handles btnBefore.Click
Dim arr_question As String() = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
Dim arr_answer As String() = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
Dim int_count As Integer = CInt(lblCount.Text) - 1
'初期値
lblCount.Text = int_count.ToString
lblQuestion.Text = arr_question(int_count - 1)
txtAnswer.Text = ""
lblAnswer.Text = arr_answer(int_count - 1)
lblGood.Text = ""
'表示 非表示
lblAnswer.Visible = False
lblGood.Visible = False
'使用可否
If int_count = 1 Then
btnBefore.Enabled = False
Else
btnBefore.Enabled = True
End If
If int_count = 10 Then
btnNext.Enabled = False
Else
btnNext.Enabled = True
End If
End Sub
''' <summary>
''' 次のボタン
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub BtnNext_Click(sender As Object, e As EventArgs) Handles btnNext.Click
Dim arr_question As String() = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
Dim arr_answer As String() = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
Dim int_count As Integer = CInt(lblCount.Text) + 1
'初期値
lblCount.Text = int_count.ToString
lblQuestion.Text = arr_question(int_count - 1)
txtAnswer.Text = ""
lblAnswer.Text = arr_answer(int_count - 1)
lblGood.Text = ""
'表示 非表示
lblAnswer.Visible = False
lblGood.Visible = False
'使用可否
If int_count = 1 Then
btnBefore.Enabled = False
Else
btnBefore.Enabled = True
End If
If int_count = 10 Then
btnNext.Enabled = False
Else
btnNext.Enabled = True
End If
End Sub
End Class
まとめ
作成してみてどうだったでしょうか。
少し難しいかもしれませんが、このアプリを作成することができるようになれば、
未経験者から初心者へステップアップすることができたと思います!
次は、初心者から中上級者を目指してステップアップしてみましょう。
復習はこちらから