Introduction

最近、音楽の勉強を始めました。 そこでアウトプットのために、このブログを作ってみました。

今回はこのブログで使っている技術を紹介します。

Astro

このブログはAstroをベースに作成しました。 Astroは静的ジェネレータで、特徴としてはAstro Ilandsという機能で部分的に動的なコンテンツを埋め込むことができます。 この後紹介するAbcjsもAstro Ilandsを使って埋め込んでいます。

Abcjs

AbcjsはABC記譜法を使って楽譜を表示するためのライブラリです。 このブログではAbcjsを使って楽譜を表示しています。 ↓はCメジャースケールの楽譜です。

import Music from "../../components/Music.astro";
<Music code="CDEFGAB" />;

少し凝った楽譜も表示できます。

内部のReactコンポーネントはこれだけです。

import abcjs from "abcjs";
import { useEffect, useId } from "react";

type Props = {
  code: string;
};
const Music = ({ code }: Props) => {
  const id = useId();
  useEffect(() => {
    abcjs.renderAbc(id, code);
  }, [id, code]);
  return <div id={id} />;
};

export default Music;

AstroとAbcjsを使って簡単に楽譜を表示するブログを作成できました。 これからも楽しく音楽を勉強していきたいと思います。