Lightning Blog
Blazor記事イメージ画像

【Blazor】 Entity Frameworkを使ったSQLiteデータベースの利用方法

更新日:2024/06/07
この記事では、EntityFrameworkを使って、SQLiteと接続する方法について解説していきます。

    目次

  • SQLiteとは?
  • Entity Frameworkとは?
  • ライブラリのインストール
  • テーブル作成
  • エンティティとDBコンテキスト
  • データベースへのアクセス検証
  • まとめ

SQLiteとは?

セクション画像

アプリケーションに組み込むことで利用できる、オープンソースの軽量のRDBMS(データベース管理システム)です。 これを利用することで、簡単にデータベースを構築できるので、とても便利です。


Entity Frameworkとは?

セクション画像

Entity Frameworkを使うと、データベースのテーブルをクラスとしてプログラム内に表現することができます。 そして、これらのクラスのインスタンスを通じて、データベースの読み書きができるようになります。

LINQの書き方を知っていれば、簡単にデータベース操作を行うことができます。


ライブラリのインストール

セクション画像

[Nuget パッケージの管理]から[Microsoft.EntityFrameworkCore.Sqlite]と検索し、 インストールを行います。

Microsoft.EntityFrameworkCore.Sqlite

今回は、.NET6で検証を行っているので、6系の最新である6.0.31のバージョンを選択しています。 利用されている.NETのバージョンに合わせて、インストールしてください。


テーブル作成

セクション画像

まず、テーブルを作成するDBファイルを作成していきます。 色々方法はありますが、今回はGUIで作成できる[DB Browser for SQLite]を使用します。 以下のリンクから、インストーラをダウンロードしてインストールしてください。

DB Browser for SQLite はこちらから
DB Browser for SQLite

インストールが終わったら、アプリを開いて、[New Database]をクリックします。

New Database

保存先をwwwrootの直下にして、今回は[test.db]という名前でデータベース本体を作成します。

New Database Save
New Database Save

データを格納するテーブルを作成していきます。 例として、[Weapons]テーブルを作成してみます。 まず[Open Database]をクリックして、先ほど作成したDBと接続します。

Open Database

接続したら、[Execute SQL]を選択して、以下のSQL文を実行してください。 そうすることでテーブルが作成されます。


CREATE TABLE Weapons (
    Id INTEGER PRIMARY KEY,
    Name TEXT NOT NULL,
    Description TEXT NOT NULL,
    AttackPower INTEGER NOT NULL
);
Execute SQL

テーブルを作成したら、続いてテスト用のデータを挿入をしていきます。 以下のSQL文を実行してください。


INSERT INTO Weapons (Name, Description, AttackPower)
VALUES
('夜明けの剣', '夜明けの光で輝く強力な剣。', 50),
('怒りの斧', '怒りの力を宿した重い斧。', 65),
('沈黙の弓', 'すごい精度で矢を放つ静かな弓。', 40);

これでデータベース側の準備は終了です。


エンティティとDBコンテキスト

セクション画像

はじめに、作成したテーブルに対応したエンティティクラスを作成します。


using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

/// <summary>
/// 武器テーブルのエンティティクラス
/// </summary>
[Table("Weapons")]
public class Weapon
{
    /// <summary>
    /// 識別子
    /// </summary>
    [Key]
    public int Id { get; set; }

    /// <summary>
    /// 名前
    /// </summary>
    [Required]
    public string Name { get; set; }

    /// <summary>
    /// 武器説明
    /// </summary>
    [Required]
    public string Description { get; set; }

    /// <summary>
    /// 攻撃力
    /// </summary>
    [Required]
    public int AttackPower { get; set; }
}

[Table("Weapons")]は、データベースのWeaponsテーブルをマッピングするかを指定します。 [Key]は、テーブル内で主キーなる列に付与します。また、 [Required]は、値が必須の列に付与します。

次にDBに接続するためのDBコンテキストクラスを作成していきます。 このクラスがDBとの接続を担当します。以下のソースコードを確認してください。


using Blazor_SQLite.Entities;
using Microsoft.Data.Sqlite;
using Microsoft.EntityFrameworkCore;

namespace Blazor_SQLite.Data
{
    public class TestDbContext : DbContext
    {
        public DbSet<Weapon> Weapons { get; set; }

        private readonly IWebHostEnvironment _env;

        public TestDbContext(IWebHostEnvironment env)
        {
            _env = env;
        }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            var filePath = Path.Combine(_env.WebRootPath, "test.db");
            var connectionString = new SqliteConnectionStringBuilder { DataSource = filePath }.ToString();
            optionsBuilder.UseSqlite(new SqliteConnection(connectionString));
        }
    }
}

このTestDbContextクラスはDbContextを継承しています。 DbContextはEntity Framework Coreの基本クラスで、データベースとやりとりするためのものです。

WeaponsプロパティはDbSet<Weapon>型で、Weaponエンティティのデータベーステーブルを表します。 データベースのテーブルの内容が自動的にマッピングされ、このプロパティを通して、Weaponsテーブルにアクセスできます。

_envフィールドはIWebHostEnvironment型です。これはアプリケーションの環境に関する情報を提供します。 _envWebRootPathプロパティを通じて、[wwwroot]までのパスを取得することができます。

OnConfiguringメソッドは、データベースの設定を行うための関数です。 この関数をオーバーライドし、引数であるoptionsBuilderに、データベースに接続するための文字列connectStringを設定します。

最後に、このクラスをページでDIして使えるように、program.csをコードを追加します。


using Blazor_SQLite.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

// ↓↓↓ DB登録するために以下のコードを追加 ↓↓↓
builder.Services.AddDbContext<TestDbContext>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

11行目に、builder.Services.AddDbContext();を追加してください。 これで、ページにDIして使えるようになります。


データベースへのアクセス検証

セクション画像

以下のページを作成して、DBから値を取得してみます。


@page "/"
@using Blazor_SQLite.Data
@inject TestDbContext TestDbContext

@foreach (var weapon in TestDbContext.Weapons)
{
    <ul>
        <li>名前  :@weapon.Name</li>
        <li>説明  :@weapon.Description</li>
        <li>攻撃力:@weapon.AttackPower</li>
    </ul>
}

TestDbContextWeaponsプロパティを通して、データベースのレコード情報を取得・表示しています。 実際にページを表示すると、以下のようになります。

動作確認

このように表示されることを確認してください。


まとめ

セクション画像

この記事では、BlazorアプリケーションでEntity Frameworkを使用してSQLiteデータベースに接続する方法について解説しました。 Webアプリケーションにおいて、データベースを利用することがほとんどだと思いますので、是非参考にしてみてください。


ブログ内の記事で書かれているサンプルコードは、GitHubから確認する事ができます。 是非参考にしてみてください。

この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか?

合わせて読みたい

カード画像
コンポーネント間のイベント受け渡し方

Blazorでの部品コンポーネントからのイベント取得方法を解説。イベントの返却にはEventCallbackを使用し、<>内に変数を指定。多変数の場合はクラスを作成。今回はMouseEventArgsを返却。作成した部品コンポーネントはページ内で利用し、イベント発生時にShowMessageが呼ばれ、メッセージが表示されることを確認。

更新日:2023/07/19

カード画像
入力インターフェースのバインド方法

この記事では、Blazorを使用したドロップダウン、テキストボックス、チェックボックス、ラジオボタン、スライダーのバインド方法を解説します。ユーザー入力をリアルタイムに反映し、データを動的に更新する方法を詳しく紹介しています。これにより、効率的にインタラクティブなWebアプリケーションを構築できます。

更新日:2023/07/20

An error has occurred. This application may no longer respond until reloaded. Reload 🗙