このページで解説している内容は、以下の 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.Click、Timer.Tick |
| タイマー | Timer.Interval、Start()、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) 推奨 | 主なプロパティ | 用途 |
|---|---|---|---|---|
| 1 | Form | FormRamenTimer | Text="ラーメンタイマー" | 画面本体 |
| 2 | Label | 既定 | Text="ゆで時間(秒)" | 入力ラベル |
| 3 | TextBox | TextSetSeconds | TextAlign=Right | 秒数入力 |
| 4 | Button | ButtonStart | Text="Start" | カウント開始 |
| 5 | Label | 既定 | Text="残り時間(秒)" | 出力ラベル |
| 6 | TextBox | TextRemaining | ReadOnly=True, TextAlign=Right | 残り表示 |
| 7 | Timer | Timer1 | Interval=1000 | 1 秒周期イベント |
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 Class1.6.2. 実行結果の流れ(テキスト図)
[秒数入力: 180] → [Start]
↓ カウントダウン表示: 180,179,178,...,3,2,1,0
↓ 残り 0
↓ 音が鳴る+「麺がゆで上がりました!」ダイアログまとめ
本章では、ラーメンタイマーの目的・画面イメージ・必要コントロール・関連する VB 命令/イベント・処理フローを、図表と最小コードで概観しました。次章からは実作業に入ります。
