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

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

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

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

# で？なにができたの

こんなの
https://works.huequica.xyz/soundrop_otogibara/
![すくしょ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320738/e22318d2-1046-661c-432e-1198e67d273e.png)

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">クソ上司や友人に向かっていつでもギバラが代わりにブチ切れてくれるWebおもちゃを作りました(音量注意)<br>ｽﾏﾎは微妙に対応できてません　そのうちします<a href="https://twitter.com/hashtag/%E5%BE%A1%E4%BC%BD%E3%81%AE%E5%9B%BD%E3%81%AE%E8%88%9E%E8%B8%8F%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#御伽の国の舞踏会</a> <a href="https://t.co/Fa8tJTklUm">https://t.co/Fa8tJTklUm</a> <a href="https://t.co/sLosgLzsOJ">pic.twitter.com/sLosgLzsOJ</a></p>&mdash; Haru Yakumo🍮 (@huequica) <a href="https://twitter.com/huequica/status/1191520995804241920?ref_src=twsrc%5Etfw">November 5, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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

# 軽い技術的な話

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

### フロント
+ [React](https://ja.reactjs.org/)
    言わずと知れたUI構築ができるjsフレームワーク 
    
+ [babel](https://babeljs.io/)
    Reactでは`jsx`というXML拡張をしたjsファイルに記述する場合が多い
    babelは`jsx`->`js` のトランスパイルをしてくれる。というかES2016+全般

+ [React-Player](https://github.com/CookPete/react-player)
    Reactで動画を簡単に扱えるコンポーネント

+ [node-sass](https://github.com/sass/node-sass)
   sass(scss)を扱えるようにするプラグイン(呼び方合ってるかわかんない)
   [bulma](https://bulma.io)と組み合わせて使った
   とにかくネストできるのが強い。詳しくは後述

-----------

### 開発環境

+ [ESLint](https://eslint.org/)
    jsのLinter
    VSCodeと合わせてつかうと快適になるし、何より安全なのでjsを扱うときは導入することをすすめる

+ Create-react-app
    最初は[Parcel](https://parceljs.org/)を使いながら開発をしていたが、コンポーネントに`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 追記)**  
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">【毎日自動更新】Qiitaのデイリーいいねランキング！ウィークリーもあるよ（避難所）<a href="https://t.co/8R8jdstW79">https://t.co/8R8jdstW79</a> <a href="https://t.co/ocbfKggENC">pic.twitter.com/ocbfKggENC</a></p>&mdash; Haru Yakumo (@huequica) <a href="https://twitter.com/huequica/status/1192138758860099584?ref_src=twsrc%5Etfw">November 6, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ありがとうございます