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

7837 ワード
クソアプリ React Web JavaScript JSX JavaScript テキストリンク

御伽原江良

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

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

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

で？なにができたの

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

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

軽い技術的な話

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

フロント

  • 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 追記)



ありがとうございます