御伽原江良

みなさんご存知の、耐久配信とかやってるVtuber。あとはサジェスト汚染でも有名かな

ご存知でない方はそちらを参照したほうがよろしいかと思うのでリンクだけ貼っておく
御伽原江良YoutubeChannel https://www.youtube.com/channel/UCwQ9Uv-m8xkE5PzRc7Bqx3Q

で、先駆者の追いかけみたいなシステムを作って友人を煽れたらそれはそれでおもしろそう(???)という安易な考えで似たような~~モロパク~~システムを作ってみた。

で？なにができたの

こんなの
https://works.huequica.xyz/soundrop_otogibara/

クソ上司や友人に向かっていつでもギバラが代わりにブチ切れてくれるWebおもちゃを作りました(音量注意)
ｽﾏﾎは微妙に対応できてません　そのうちします#御伽の国の舞踏会 https://t.co/Fa8tJTklUm pic.twitter.com/sLosgLzsOJ
— Haru Yakumo🍮 (@huequica) November 5, 2019

下のモーダルみたいなウィンドウにあるボタンを押すと叫んだり過呼吸をしてくれる

軽い技術的な話

今回このアプリを作るにあたってこんな感じのフレームワークとかを使った

フロント

React
言わずと知れたUI構築ができるjsフレームワーク
babel
ReactではjsxというXML拡張をしたjsファイルに記述する場合が多い
babelはjsx->js のトランスパイルをしてくれる。というかES2016+全般
React-Player
Reactで動画を簡単に扱えるコンポーネント
node-sass
sass(scss)を扱えるようにするプラグイン(呼び方合ってるかわかんない)
bulmaと組み合わせて使った
とにかくネストできるのが強い。詳しくは後述

開発環境

ESLint
jsのLinter
VSCodeと合わせてつかうと快適になるし、何より安全なのでjsを扱うときは導入することをすすめる
Create-react-app
最初はParcelを使いながら開発をしていたが、コンポーネントにStateをもたせようとしたら依存エラーにハマってキレた
俺が悪かったのかはわからなかったけど、ソースファイル移植して依存解決したらあっさり動いたのでParcelが悪いことにする(適当)

今回非常に助かったところ

ReactPlayerが非常に便利

動画だけじゃなくて音声も対応しているのでメディアの部分を全部任せることが出来た
動画はローカルのファイル以外にもYoutubeなどに対応。リンクを投げるだけであっさりと再生してくれるので簡単

SCSSさいこ〜〜〜

CSSのネストができる
外部のSCSS(CSS)のインポートが可能。これによってCSSをコンポーネントごとで分けることが可能になる。HTMLも汚しづらくもなるので非常に良い
CSSフレームワークをnpmでインストールした際は参照先の指定に~を入れると自動でnode_modulesへのルーティング解決をしてくれる。

index.scss

// importの参照先に`~`を入れると
// 自動でnode_modulesまでのルーティングを解決してくれる
@import "~bulma/bulma"

create-react-appはすごい

あんまり中身を知らないのでそのうち面倒なエラーにハマるかもしれないのだが、今回の開発中において開発環境をcreate-react-appに移行してから依存などで詰まることがなかった。
ストレスなく開発できたので今後も場合に応じて積極的に使っていきたい

ハマったところ

音源のimport汚染が避けられなかった

index.js

import hoge from './audio/hoge.mp3';

これを音源が増えるたびに書くのはindex.jsが汚れまくってつらくなりそうだったので、別のファイルからまとめてimportするのを考えた。

index.js

import * as Audios from './audios';

こんな感じに修正したうえで

audios.js

export { hoge } from './audio/hoge.mp3';

audios.jsからまとめて返したいな〜〜〜なんてことを考えていたが、試しに1行だけ書いたらundefinedになっちゃって直せなかったので諦めた。
これに関しては多分もっと良い手法があるんだろうけど、今回は素直にimport汚染しました。
どなたかいい感じの解決法をご存知でしたらご教授いただけると幸いです。。。。

(11/5 22:38 追記)
create-react-appでは静的ファイルをimportせずに読み込みする方法が用意されていたのでそちらを採用したら解決しました。
https://github.com/huequica/soundrop_OtogibaraEra/issues/14

さいごに

9月くらいにReactを触りだし、今回はじめて趣味程度とはいえ本格的に使ってみましたが最高ですね
コンポーネント単位でUIの管理をできたり、ボタンの追加や削除が簡単にできるのでとても楽しかったです。
今回開発したWebアプリはソースコードなどを公開していますので、もしよかったらそちらもご覧いただければと思います。(マサカリは難易度:レギュラーでおねがいします)
https://github.com/huequica/soundrop_OtogibaraEra

それから、御伽原江良のチャンネル登録もおねがいします
https://www.youtube.com/channel/UCwQ9Uv-m8xkE5PzRc7Bqx3Q

(11/7 15:13 追記)

【毎日自動更新】Qiitaのデイリーいいねランキング！ウィークリーもあるよ（避難所）https://t.co/8R8jdstW79 pic.twitter.com/ocbfKggENC
— Haru Yakumo (@huequica) November 6, 2019

ありがとうございます

御伽原江良が叫んだり罵声飛ばすだけのWebおもちゃをつくった