ページ3: 見た目の変更とReactへの大移行

Version 5: tiktok上の見た目をよくしたい。

UIの要素を上下にまとめることにした。左右のサイドバーをなくして、必要な情報を画面の上下に配置。

これで、スマホで見たときに枠が気になりにくくなった。TikTokの縦型動画でも、メイン画面がちゃんと見えるようになった。

自動保存機能も追加した。数秒おきに自動的に保存されるようになって、うっかりブラウザを閉じても作業が失われなくなった。

音色もさらに追加。この時期には、かなり多彩な8bit音色が出せるようになっていた。

機能的にはだいぶ満足してたんだけど、コードの複雑性が増してきて、Vue.js 3での開発に限界を感じ始めた。

別にVue.jsが悪いわけじゃない。ただ、自分のスキルレベルと、今後追加したい機能を考えると、もっと慣れているReactの方が良さそうだった。

「またまた作り直すことにしよう」と決めた。このころには、「作り直し」に対する抵抗感はほとんどなくなっていた。

React + TypeScriptで全部作り直した。このころには、もう「作り直し」に慣れていたので、思ったよりスムーズに進んだ。

過去のバージョンで培ったノウハウを活かして、設計の段階から拡張性を意識した。コンポーネント設計も、再利用しやすいように工夫した。

見た目はそんなに大きく変わってないけど、アイコンの選択とか、色使いとか、細かいところがちょっとスタイリッシュになった。

特に、アニメーションの部分を丁寧に作り込んだ。ボタンのホバーエフェクトとか、画面遷移のスムーズさとかが良い感じになっている、、はず。

TypeScriptを導入したことで、バグが格段に減った。特に、音楽データの構造とか、複雑なオブジェクトを扱う部分で型安全性の恩恵を感じた。

リファクタリングも安心してできるようになった。「この変更が他の部分に影響するかな？」という不安が、型チェックによって大幅に軽減された。

Reactの仮想DOMと、適切なメモ化の組み合わせで、パフォーマンスは若干よくなった、、しかしまだまだスマホだと重たい、、今後の課題だ、、

useCallback、useMemo、React.memoを適切に使うことで、不要な再レンダリングを大幅に削減できた。

技術的には、かなり満足できるレベルになった。コードも整理されているし、新機能の追加もやりやすい。

でも、まだまだ改善したいところはある。楽曲共有機能とか、やりたいことは山ほど。

最初は本当に何も分からなかった。MDNのドキュメントを読んでも、専門用語だらけで理解できない。

これがWeb Audio APIの中心。全ての音声処理は、このAudioContextの中で行われる。最初は「なんでContextが必要なの？」って思ったけど、今では音声処理の基盤として理解している。

基本的な波形を生成するノード。Square波、Triangle波、Sawtooth波、Sine波が使える。8bit音楽の基本はSquare波だけど、組み合わせることで豊かな音色が作れる。

音量をコントロールするノード。エンベロープ（音の立ち上がりと減衰）を作るのにも使う。これがないと、音が突然始まって突然終わる不自然な感じになる。

音色を変化させるフィルター。ローパス、ハイパス、バンドパスが使える。8bit音楽では、ローパスフィルターをよく使う。

ファミコン時代の音源チップは、同時発音数に制限があった。この制約を再現するために、同時に鳴らせる音の数を制限する機能も実装した。制約があることで、逆に創造性が刺激される。

8bit音楽でも、イントロ、Aメロ、Bメロ、サビみたいな楽曲構造は大切。視覚的に楽曲構造が分かるように、パート分けとカラーリングを工夫した。

ドラム音がないと、どうしてもリズム感に欠ける。Noiseチャンネルを使ったキック、スネア、ハイハットの実装には時間をかけた。