BLOGSpeee開発陣による技術情報発信ブログです。メディア開発・運用、スマートフォンアプリ開発、Webマーケティング、アドテクなどで培った技術ノウハウを発信していきます!2017-04-06Reactでシンセサイザーを作った話Tweetこんにちは、nishayaです。社内で開催されるイベントでコーヒーを淹れたりしています。現在はReact/Reduxを用いたSPA開発を行っています。今回のSpeeeKaigi(下記の記事を参照)では、ReactとReduxを使ってシンセサイザーを作る話をしました。Chromeのみとしました。プレフィクス付きのAudioContextにも対応していません。何か楽しみながら作れるものを開発して勘所を押さえようと考えました。Audioのノードを組み合わせてシンセサイザーを作るとしたら、それぞれをReactのComponentにすると扱いやすいのではないか?入力装置からのインプットをReduxのstate経由で通知することで、ハンドリングする側のコンポーネントに直接イベントを通知しなくてもよくなり、構成の自由度が上がるのではないか?やはり楽器を作るなら、PCのキーボードではなくMIDIコントローラ(鍵盤など)を使いたい。パフォーマンスが悪いという話はなんとなく聞いていました。事前に検証しておくことにしました。別のコンポーネントでstateの変化を検知するまでの時間を測定しました。楽器にも使えそうだということがわかりました。行った分割は大別して2つInput/Outputを分割するシンセサイザーの構成要素を分割する詳細は発表資料を参照してください。発表時に、MIDIコントローラなんてものは普通持っていないという意見が多かったので、その日のうちにPCのキーボードによる演奏トラックパッドによる音色変化を追加しました。EGディレイディストーションなどを追加しました。不慣れなReact/Reduxを楽しみながら習得することができました。結局一番役に立ったのは公式ドキュメントでした。今までのフロント開発とはパラダイムがだいぶ異なるので、とっつきにくさはあるものの、公式をくまなく読めば、なぜそのように作るのか、どうしてこれを使うと嬉しいのかが理解できるようになっています。機能の追加、変更は容易で、他の部分に影響を与えず独立して行うことができ、React/Reduxは道具として使いこなせれば気持ちよく開発を進められる技術だと感じました。次は音の質に特化したmonophonicなシンセサイザーか、コンポーネント指向のステップシーケンサを作ってみようと考えています。エンジニアの中嶋(id:nyamadori)です。本記事では、Bootstr...2017-10-26Reactでパターンシーケンサを作った話こんにちは、Speeeエンジニアの二社谷(nishaya)です。参加してきました月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。