Dapperで複数テーブルをクラスにマップする方法

Ⅰ. はじめに

タイトルの通り「Dapperで複数テーブルをクラスにマップする方法」です。

Ⅱ. サンプルテーブル定義

usersテーブル

id	name
1	user001
2	user002
3	user003

tagsテーブル

id	user_id	name
1	1	tag001
2	2	tag002

Ⅲ. サンプルプログラム

Program.cs

using Dapper;
using MySqlConnector;

var connectionString = "userid=YOUR_USER;password=YOUR_PASS;database=YOUR_DB;Host=YOUR_HOST";

using var conn = new MySqlConnection(connectionString);
conn.Open();

var parameters = new DynamicParameters();

var sql = """
  select
    u.*,
    t.*
  from users u
  left outer join tags t on u.id = t.user_id
  """;

var userInfos = conn.Query<User, Tag?, UserInfo>(
  sql,
  (user, tag) => new UserInfo
  {
    UserId = user.Id,
    UserName = user.Name,
    TagName = tag?.Name
  },
  parameters,
  splitOn: "id")
  .ToArray();

foreach (var x in userInfos)
{
  Console.WriteLine($"{x.UserId}, {x.UserName}, {x.TagName}");
}

class User
{
  public required uint Id { get; set; }
  public required string Name { get; set; }
}

class Tag
{
  public required uint Id { get; set; }
  public required uint UserId { get; set; }
  public required string Name { get; set; }
}

class UserInfo
{
  public required uint UserId { get; set; }
  public required string UserName { get; set; }
  public required string? TagName { get; set; }
}

実行結果

1, user001, tag001
2, user002, tag002
3, user003,

Node.jsでxlsxファイルを生成する方法

Ⅰ. はじめに

タイトルの通り「Node.jsでxlsxファイルを生成する方法」です。

Ⅱ. 手順

1. 必要なパッケージをインストールする

npm install https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz
npm install --save-dev @types/node

2. サンプルプログラムを書く

import * as fs from 'fs'
import * as xlsx from 'xlsx'

// ワークブックを新規作成する
const workBook = xlsx.utils.book_new()

// ワークシートを新規作成する
const workSheet = xlsx.utils.aoa_to_sheet([
  ['Name', 'Age'],
  ['user001', 10],
  ['user002', 20],
  ['user003', 30],
])

// ワークブックにワークシートを追加する
xlsx.utils.book_append_sheet(workBook, workSheet, 'test001')

// out.xlsx を作成する
// xlsx.set_fs(fs)
// xlsx.writeFile(workBook, 'out.xlsx')

// out.xlsx を作成する
const bytes = xlsx.write(workBook, { bookType: 'xlsx', type: 'buffer' })
fs.writeFileSync('out.xlsx', bytes)

実行結果

参考

• https://docs.sheetjs.com/

JavaScriptの「??」と「||」の違い

Ⅰ. はじめに

タイトルの通り「JavaScriptの「??」と「||」の違い」です。

Ⅱ. サンプルプログラム

const value1 = null
const value2 = undefined
const value3 = ''
const value4 = 0
const value5 = 1
const value6 = 123

// Null 合体演算子 ??
console.log(value1 ?? 'default value') // 'default value'
console.log(value2 ?? 'default value') // 'default value'
console.log(value3 ?? 'default value') // ''
console.log(value4 ?? 'default value') // 0
console.log(value5 ?? 'default value') // 1
console.log(value6 ?? 'default value') // 123

// 論理和 ||
console.log(value1 || 'default value') // 'default value'
console.log(value2 || 'default value') // 'default value'
console.log(value3 || 'default value') // 'default value'
console.log(value4 || 'default value') // 'default value'
console.log(value5 || 'default value') // 1
console.log(value6 || 'default value') // 123

EChartsを利用してグラフを描画する方法

Ⅰ. はじめに

タイトルの通り「EChartsを利用してグラフを描画する方法」です

Ⅱ. 手順

1. ECharts をインストールする

npm install echarts-for-react

2. サンプルコードを書く

import ReactECharts from 'echarts-for-react'

export default function App() {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  }

  return <ReactECharts option={options} />
}

実行結果

参考

• https://github.com/hustcc/echarts-for-react
• https://echarts.apache.org

Viteを利用してWebブラウザ拡張機能を作成する方法

Ⅰ. はじめに

タイトルの通り「Viteを利用してWebブラウザ拡張機能を作成する方法」です。

Ⅱ. 手順

1. プロジェクトを初期化する

pnpm dlx wxt@latest init my-perfect-project

2. 実行する

pnpm dev

実行結果

参考

• https://wxt.dev/