このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【6日でできるVisual Basic2022入門】①ラーメンタイマーアプリの概要

①ラーメンタイマーアプリの概要

 ここでは、Visual Studio Community 2022(以下 VS Community 2022)と Visual Basic 2022(.NET)で「ラーメンタイマー」アプリを作る道筋を概観します。完成像を先に描き、フォームを作り、プロパティを設定し、コードを書いて動かし、必要に応じて修正する。この一連の流れを小さな題材で反復することで、Windows フォーム開発の勘所(イベント駆動、コントロールの役割、入力検証、タイマー処理)を短時間で身につけます。

 本章では設計の全体像と使うコントロール、関係する Visual Basic の命令やイベントの意味を、図・表・最小サンプルで把握します。次章以降で実際のプロジェクト作成から完成までを段階的に行います。

1.このアプリで学ぶこととユースケース

 ラーメンタイマーは「指定秒数をカウントダウンし、0 になったら知らせる」アプリです。UI は極力シンプルにし、イベントとタイマーの基本操作に集中します。

1.1. このアプリでできること

機能説明
秒数入力ゆで時間(秒)をテキストで入力
カウントダウン1 秒間隔で残り秒を更新
通知0 秒になったら音とメッセージで通知
入力検証空欄や負数・不正文字のときはエラー案内

1.2. 学習目標(技術的観点)

トピックキー概念
イベント駆動Handles 句、Button.ClickTimer.Tick
タイマーTimer.IntervalStart()Stop()
入力検証Integer.TryParse(String, ByRef Integer)
画面更新TextBox.Text の更新、プロパティ設定
通知MessageBox.Show()SystemSounds

1.3. 開発の流れ(おさらい)

「小さく作って動かし、直す」を高速で回します。

1.3.1. 手順の全体像

手順概要成果物
① 完成イメージ画面ラフと必要機能の洗い出しワイヤーフレーム
② フォーム作成WinForms プロジェクト、フォーム作成ひな形 UI
③ プロパティ設定名前・表示テキスト・Interval などUI の初期状態
④ コード記述クリック処理・タイマー処理最小実装
⑤ 実行入力→カウントダウン→通知動作検証
⑥ 修正表示・検証・境界値対応品質向上

1.3.2. 処理フロー(概念図)

[Start クリック]
   ├─ 入力検証(整数かつ >0?)
   │     └─ NG: エラー表示して終了
   ├─ 経過=0、残り=入力値
   ├─ Timer 開始(1秒間隔)
   └─ [Tick ごと]
         ├─ 経過+1、残り=入力-経過
         ├─ 残りを画面表示
         └─ 残り==0 なら
               ├─ Timer 停止
               ├─ 音を鳴らす
               └─ メッセージ表示(完了通知)

1.4. 完成イメージと画面仕様

1.4.1. ワイヤーフレーム(完成イメージ)

1.4.2. 使うコントロールと役割

No種別(Name) 推奨主なプロパティ用途
1FormFormRamenTimerText="ラーメンタイマー"画面本体
2Label既定Text="ゆで時間(秒)"入力ラベル
3TextBoxTextSetSecondsTextAlign=Right秒数入力
4ButtonButtonStartText="Start"カウント開始
5Label既定Text="残り時間(秒)"出力ラベル
6TextBoxTextRemainingReadOnly=True, TextAlign=Right残り表示
7TimerTimer1Interval=10001 秒周期イベント

1.5.この章で出てくる Visual Basic 2022 の命令・イベント解説

1.5.1. Handles 句(イベントをメソッドに結び付ける)

例:Private Sub ButtonStart_Click(...) Handles ButtonStart.Click

 指定したコントロールのイベントが発生したとき、このメソッドが呼ばれます。フォームデザイナでダブルクリックすると、自動生成されます。

1.5.2. Timer コントロール

メンバー意味使いどころ
Interval As Integerミリ秒間隔1000 で 1 秒ごと
Start()タイマー開始カウントダウン開始時
Stop()タイマー停止0 秒到達時など
Tick イベント周期的に発生画面更新・判定

1.5.3. 入力検証:Integer.TryParse(text, ByRef value)

文字列を整数に変換できたら True、失敗なら False。例外を出さずに安全に検証できます。

1.5.4. 通知:MessageBox.Show(text, caption)System.Media.SystemSounds

  • 小さなダイアログで通知。
  • System.Media.SystemSounds.Asterisk.Play() などで OS 標準の音を鳴らせます。

1.6. 最小サンプルと実行イメージ(概要段階の動く例)

 本章は「概要」ですが、雰囲気を掴むため、最小限のコードを示します。後続章でプロジェクト作成〜配置〜完成版へと発展させます。
※参考コードでは通知メッセージを元教材と異なる文言に変更しています(例:「麺がゆで上がりました!」など)。

1.6.1. 最小サンプルコード(FormRamenTimer.vb)

Public Class FormRamenTimer
    Private EndSeconds As Integer    ' 入力された合計秒
    Private Elapsed As Integer       ' 経過秒

    Private Sub ButtonStart_Click(sender As Object, e As EventArgs) _
        Handles ButtonStart.Click

        Dim tmp As Integer
        If Not Integer.TryParse(TextSetSeconds.Text, tmp) OrElse tmp <= 0 Then
            MessageBox.Show("ゆで時間は 1 以上の整数で入力してください。", "入力エラー")
            TextSetSeconds.Focus()
            TextSetSeconds.SelectAll()
            Return
        End If

        EndSeconds = tmp
        Elapsed = 0
        TextRemaining.Text = EndSeconds.ToString()

        Timer1.Interval = 1000   ' 1秒
        Timer1.Start()
        ButtonStart.Enabled = False
    End Sub

    Private Sub Timer1_Tick(sender As Object, e As EventArgs) _
        Handles Timer1.Tick

        Elapsed += 1
        Dim remaining = EndSeconds - Elapsed
        If remaining < 0 Then remaining = 0
        TextRemaining.Text = remaining.ToString()

        If remaining = 0 Then
            Timer1.Stop()
            ButtonStart.Enabled = True
            System.Media.SystemSounds.Asterisk.Play()
            MessageBox.Show("麺がゆで上がりました!お好みの固さでどうぞ。", "ラーメンタイマー")
        End If
    End Sub
End Class

1.6.2. 実行結果の流れ(テキスト図)

[秒数入力: 180] → [Start]
    ↓ カウントダウン表示: 180,179,178,...,3,2,1,0
    ↓ 残り 0
    ↓ 音が鳴る+「麺がゆで上がりました!」ダイアログ

まとめ

 本章では、ラーメンタイマーの目的・画面イメージ・必要コントロール・関連する VB 命令/イベント・処理フローを、図表と最小コードで概観しました。次章からは実作業に入ります。