JSONic
#個人開発
作品名 JSONic
内容
JSON形式でプロジェクト名、BPM、音の鳴り方を定義しそこから音楽を生成し演奏を行うことができるアプリケーション。
音の鳴り方を定義するとはイントロ、サビなどの音のパターンを定義しそれらのパターンをどの順番で再生するかを決めること。
通常の楽譜に音を置いていく形式とは異なり全てをJSONに打ち込んでいく宣言的な作曲による新鮮さをもつ。また、JSONエディタを書き換えると即時にその変化が反映され音の変化を常に感じながら作曲をすることができる。
このアプリケーションはGaragebandを利用した音楽作成の講義から着想を得ており、普段プログラミングに馴染みのある人にとってプログラミングと作曲の両方を楽しむことができるようになっている。
こだわり
tRPCとzodを活用し、入力したJSONが正しい形式かをリアルタイムでチェックし、保存や読み込みも型安全に行うことができる。
JSONエディタ上でも音楽生成のためのJSONスキーマの形を定義しているため、予測変換によってオブジェクトのキーが表示されるため記述しやすくなっている。
音楽の論理的な構築に重きを置き、構造を考えた作曲ができるようにした。
発表資料
担当技術
フロントエンド
- React.js
- Tone.js
- Jotai
- Monaco Editor
- superjson
- zod
- react-router-dom
- storybook
- msw
- tRPC
- vitest
バックエンド
- Hono
- superjson
- zod
DB
- PostgreSQL
コンテナー
- Docker