SPAのWebサービスを作ったので紹介をかねて

突然ですが数年ぶりの更新になります。しばらくブログを更新できずにいたのですが、自分がこれまで個人で取り組んでいたWebサービスがベータ版として公開するまでいたったので、その紹介と製作に際して技術的な話などをこれから少ししていこうと思っています。

このWebアプリはYouTube動画を視聴しながら、指で画面をなぞる独特のアクションで、ビジュアライザー風のエフェクトを演出して楽しむサービスです。内部的にYouTube Data APIを使用して動画データをフェッチし、YouTube Player APIでサイト内に埋め込みプレイヤーを設置しました。ユーザーが動画を評価する方法である、従来のコメントや「いいね」またはリアクションボタンなどと異なる新感覚のリアクションを動画視聴に加える目的で作りました。

技術系の記事をこのブログに書くのは、あいだがかなり空いてしまったのと、いまだサイトがHTTPなことなど諸事情から少しためらいがありましたが、自身はアマチュアプログラマーなのでプロのエンジニアが集うQiitaやZennといった専門サイトに書くのは気が引けるところがあり、自分のブログの方が気楽に書けると思い、このようにひっそり書くことにしました。

このWebアプリで使用した技術はまずブラウザ側がReact+Redux、サーバーサイドはNodeJS+Express、データベースはキャッシュ用がRedisとユーザーデータなどはMongoDB、言語は一部TypeScriptで大部分はJavaScript（ES6+）です。インフラはテスト環境でHerokuを使っていましたが、本番環境がAWSとかFirebaseをよく分かってなかったので、とりあえずVPSにNginxをインストールして自前で運用しています。

上記のWebアプリの開発を始めたころはWebアプリというよりWebツールを志向していましたが、ユーザー認証システムやSNS機能を追加していくうちに、小規模ながら個人で扱うには手に余る量のファイル数になっていきました。例えばページを構成するReactコンポーネントだけでも50ファイルを超え、ReduxのディレクトリもRe-ducksパターンのディレクトリが20以上あります。

しかし、そうは言いながらも途中で破綻に至らなかったのはReact+Reduxの設計がもたらす恩恵なのではと思っています。SPAを個人で作るに至って苦労した点や、非SPAサイトと比較したメリットなどを、これからいくつかの記事に分けて書いていこうと思います。

VolTubeは会員登録しなくても遊べますが、登録するとリアクションのレコード保存やミニSNSなど使える機能が増えます。ぜひ遊びに来てください！

 - JavaScript/Ajax VolTube, Webサービス, YouTube, 個人開発