【.NET MAUI】はじめてのアプリ開発！BMI計算アプリを作ってみよう

1.はじめに

この記事では、.NET MAUIを使ってBMI(体格指数)を計算する簡単なアプリを作成します。
まずは完成イメージです。
(左:Windows、右:Android)

身長と体重を入力してボタンを押すと、BMIが計算されて表示されます。
左は私の身長体重、右はカメックスです。

.NET MAUIは、Android / iOS / Windowsで動作するアプリを、1つのコードで開発できるクロスプラットフォーム技術です。
そのため、一度作ったアプリを様々なデバイスで動かすことができます。

本記事では、初心者の方でも理解できるように、シンプルな構成でアプリを作りながら、.NET MAUIの基本的な使い方を解説していきます。

2.環境

本記事では、以下の環境で動作確認しています。

• Visual Studio 2026
• .NET 10.0
• .NET MAUI ワークロード
• Android エミュレーター
  ※Visual Studioのインストール方法は本記事では省略します。

3.プロジェクト作成

3-1.Visual Studioを起動する

Visual Studioを起動し、「新しいプロジェクトの作成(N)」をクリックします。

3-2. テンプレートを選択する

プロジェクトテンプレートから「.NET MAUI アプリ」を選択し、「次へ」をクリックします。
※検索テキストに「MAUI」と入力すると、先頭に表示されると思います。

3-3. プロジェクト情報を入力する

以下の項目を入力し、「次へ」をクリックします。

• プロジェクト名：任意(例：BmiCalc)
• 保存場所：任意
• ソリューション名：任意(例：BmiCalc)
  

3-4. フレームワークを選択する

ターゲットフレームワークは「.NET 10.0」を選択し、「作成」をクリックします。

3-5. プロジェクト作成完了

しばらく待つと、プロジェクトが作成され、以下のような画面が表示されます。
これで、.NET MAUIアプリの作成準備が整いました。

4.フォルダ構成

プロジェクトを作成すると、下図のようにファイルやフォルダが自動生成されます。
最初はすべてを理解する必要はありませんが、よく使うものだけ簡単に紹介します。

プロジェクトを作成すると、いくつかのファイルやフォルダが自動的に生成されます。
ここでは、今回のアプリ作成で主に使用するものだけを紹介します。

名前	役割
MainPage.xaml	画面のレイアウト(UI)を定義するファイル。ボタンや入力欄などの見た目を作成します。
MainPage.xaml.cs	UIに対する処理を記述するファイル。ボタン押下時の処理などを実装します。
App.xaml / App.xaml.cs	アプリ全体の設定を管理するファイル。今回の記事では基本的に編集しません。
Platforms フォルダ	Android / iOS / Windows など、各プラットフォームごとの設定が含まれています。通常はあまり触りません。

今回は主に MainPage.xaml と MainPage.xaml.cs を編集して、BMI計算アプリを作成します。

5.UIを作成する

BMI計算アプリの画面(UI)を作成していきます。
ソリューションエクスプローラーのMainPage.xamlに下記のコードを記述します。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BmiCalc.MainPage">

    <Grid RowDefinitions="50,50,50,50"
          ColumnDefinitions="Auto,100"
          Margin="20"
          RowSpacing="5"
          ColumnSpacing="5">

        <!-- 身長 -->
        <Label x:Name="HeightLabel" Text="身長" Grid.Row="0" Grid.Column="0" VerticalTextAlignment="Center" />
        <Entry x:Name="HeightEntry" Text=""     Grid.Row="0" Grid.Column="1" />

        <!-- 体重 -->
        <Label x:Name="WeightLabel" Text="体重" Grid.Row="1" Grid.Column="0" VerticalTextAlignment="Center" />
        <Entry x:Name="WeightEntry" Text=""     Grid.Row="1" Grid.Column="1" />

        <!-- 計算ボタン -->
        <Button x:Name="CalcButton" Text="計算" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                Clicked="CalcButton_Clicked" />

        <!-- BMI -->
        <Label x:Name="BmiLabel" Text="BMI" Grid.Row="3" Grid.Column="0" VerticalTextAlignment="Center" />
        <Entry x:Name="BmiEntry" Text=""    Grid.Row="3" Grid.Column="1" />

    </Grid>
</ContentPage>

5-1.Gridレイアウトについて

今回は Grid を使用して画面を構成しています。
Gridは、行(Row)と列(Column)を定義して、その中にUI部品を配置するレイアウトです。

<Grid RowDefinitions="50,50,50,50"
      ColumnDefinitions="Auto,100">

• 行：4つ(各行の高さは50)
• 列：2つ(左は自動調整、右は幅100)

5-2.身長・体重の入力欄

<Label Text="XXX" ... />
<Entry ... />

• Label：文字を表示する部品
• Entry：ユーザーが入力するための部品

これらを組み合わせて、身長と体重を表示＆入力できるようにしています。

5-3.ボタンの配置

<Button Text="計算" ... Grid.ColumnSpan="2"
        Clicked="CalcButton_Clicked" />

• Grid.ColumnSpan="2"：2列分を使って表示
• Clicked：ボタンが押されると実行される処理

5-4.BMIの表示欄

<!-- BMI -->
...
<Entry x:Name="BmiEntry" Text=""    ... />

• BmiEntryのTextに計算結果を表示します。
  ※処理の中身は後ほど実装します

これで、BMI計算アプリのUIが完成しました。
次のセクションでは、ボタンを押したときにBMIを計算する処理を実装していきます。

6.BMIを計算する処理を実装する

次に、計算ボタンを押したときにBMIを計算する処理を実装します。

MainPage.xaml.cs

namespace BmiCalc
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void CalcButton_Clicked(object sender, EventArgs e)
        {
            // 身長、体重を取得
            var height = double.Parse(HeightEntry.Text);
            var weight = double.Parse(WeightEntry.Text);

            // BMIを計算、表示
            BmiEntry.Text = Calculate(height, weight).ToString();

        }

        private double Calculate(double height, double weight)
        {
            // BMI = 体重 ÷ (身長×身長)
            var bmi = weight / (height / 100) / (height / 100);

            // 小数点第一位まで計算して返却
            return Math.Round(bmi, 1);
        }
    }
}

6-1.ボタンが押されたときの処理

private void CalcButton_Clicked(object sender, EventArgs e) { }

UIの「"CalcButton_Clicked"」を右クリックし、「定義へ移動」をクリックすると、
上記のコードが自動生成されます。計算ボタンが押されると、この処理が実行されます。

6-2.入力値の取得

var height = double.Parse(HeightEntry.Text);
var weight = double.Parse(WeightEntry.Text);

• HeightEntry：身長の入力欄
• WeightEntry：体重の入力欄

それぞれのTextを取得し、数値(double型)に変換しています。
※簡略化のため、身長や体重として不自然な値が入力されることは考慮していません。

6-3.BMIを計算するメソッド

private double Calculate(double height, double weight)

BMIは以下の式で求められます。
　BMI = 体重 ÷ (身長 × 身長)
身長はcmで入力されるため、mに変換してから計算しています。
　var bmi = weight / (height / 100) / (height / 100);

6-4.小数点の処理

return Math.Round(bmi, 1);

Math.Roundを使って、小数点第1位までに丸めています。

7.アプリを実行してみる

それでは、作成したBMI計算アプリを実行してみましょう。

7-1.実行する

Visual Studioの上部にある実行ボタン[▶]をクリックします。
プラットフォームは、実機やエミュレーターが不要な「Windows Machine」を選択します。
しばらく待つと、アプリが起動します。※ウィンドウサイズは調整しています。

7-2.値を入力する

アプリが起動したら、以下の値を入力してみます。

• 身長：170
• 体重：65

7-3. 計算する

計算ボタンを押すと、BMIが計算＆表示されます。
例えば、身長170、体重65の場合は「22.5」と表示されればOKです。

7-4.動作確認

正しく数値が表示されれば、アプリは正常に動作しています。
入力する値を変えて、さまざまなパターンでも試してみてください。

8.まとめ

本記事では、.NET MAUIを使ってBMI計算アプリを作成しました。
まずは「動くアプリを作成」できたと思います。

本記事を通して、以下のポイントを学びました。

• .NET MAUIプロジェクトの作成方法
• XAMLを使ったUIの作成
• ボタンイベントによる処理の実装
• 入力値を使った簡単な計算処理

簡単なアプリではありますが、「入力 → 計算 → 表示」の流れを体験できたと思います。
.NET MAUIでは、1つのコードで複数のプラットフォーム向けのアプリを開発できます。

次回があれば、このアプリをベースにして、MVVMパターンへの書き換えについても紹介できればと思います。
MVVMパターンを利用することで、より保守性の高い設計が可能になります。