VB.NET
プログラミング

VB.NET 入門　英単語アプリを作ろう

23分6秒
VB.NET 入門　英単語アプリを作ろう

今回は、入門編の知識を使って、簡単な英単語アプリを作成してみましょう。

実際作ってみてわからないときは、戻って復習しながら理解して進めていきましょう。

【超初心者用】VB.NET 入門 未経験から初心者への10ステップ
【超初心者用】VB.NET 入門 未経験から初心者への10ステップ
2020.2.20
こんにちは、ひろにもです。 この記事は、プログラミング未経験者も学べるような、入門ページとなっており、 少しずつ実際にプログラムを作りながら学んでいけるように作成しています。 初めて、VB.NETを学ぶ時に読んでみてください。 目標は、VB.NETを使用して、簡単なアプリを作れるようになることです...

始めてアプリを作る人は、難しいと感じると思います。

そういう時は、答えを見ながら実際にプログラムを作成して、１行1行理解しながら、作っていきましょう。

理解しながら進めることが何よりも大切です。

それではさっそく始めましょう！

英単語アプリの完成形

今回は簡単な英単語アプリを作成していきますので、まずは完成形を見て、どんなアプリを作るのかイメージしてみましょう！

作成する英単語アプリ
  • 1問～10問まで、英単語を表示し、答え合わせをするアプリ
  • 問題一覧：{"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
  • 回答一覧：{"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}

画面レイアウトは下のような感じで作成してみましょう。

初期表示

ユーザがテキストボックスに答えを書き込み、答えボタンを押す。(正解時)

ユーザがテキストボックスに答えを書き込み、答えボタンを押す。(不正解時)

次の問題を押す。

あとはこれの繰り返しです。

作成するアプリのイメージがわきましたか？？

それでは作っていきましょう。

まずは画面レイアウトを作ってみましょう。

画面レイアウトの作成

画面レイアウトは、ツールボックスからコントロールを選択して、ドロップアンドドロップで作成できますよ。

今回使用しているコントロールは、「ラベル」と「テキストボックス」と「ボタン」の３つのコントロールで作成しています。

 

まずは、ラベルコントロールから見てみましょう。まるで囲んだ６つのコントロールを用意しています。

「第１問」のところを３つに分けていますが、1つでもできます。今回はソースをわかりやすくするために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問目なので１を格納しています。

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

 

まとめ

作成してみてどうだったでしょうか。

少し難しいかもしれませんが、このアプリを作成することができるようになれば、

未経験者から初心者へステップアップすることができたと思います！

次は、初心者から中上級者を目指してステップアップしてみましょう。

 

 

VB.NETの記事一覧

復習はこちらから

【超初心者用】VB.NET 入門 未経験から初心者への10ステップ
【超初心者用】VB.NET 入門 未経験から初心者への10ステップ
2020.2.20
こんにちは、ひろにもです。 この記事は、プログラミング未経験者も学べるような、入門ページとなっており、 少しずつ実際にプログラムを作りながら学んでいけるように作成しています。 初めて、VB.NETを学ぶ時に読んでみてください。 目標は、VB.NETを使用して、簡単なアプリを作れるようになることです...

 

おすすめの記事