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

御伽原江良

みなさんご存知の、耐久配信とかやってる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

ありがとうございます