はじめに

フロントエンドのエコシステムのトレンドって日々移り変わってきますよね。儚い。
最近は、サーバレスアーキテクチャやホスティングサービスが充実してきて、インフラに手間をかけることなくアプリケーションの開発ができるようになってきました。
今回はその中でも業務でいずれ触るかもしれないと思ったものを使いつつ、この記事を読んでくれている音楽好きな方に向けてツールを作ってみました。

作ったもの

「otohaba(オトハバ)」
２つの音の度数関係をクイズで出題するツール
https://serene-austin-c74890.netlify.com/

github:https://github.com/takahirotanaka0920/otohaba

音程について詳しくなりたい方はこちら
https://ja.wikipedia.org/wiki/%E9%9F%B3%E7%A8%8B

使ったもの

Nuxt.js

Vue.jsを主体としてフロントエンドの開発に必要なツールをパッケージとして提供してくれるフレームワーク
Vue Cliと比較して規約の上で開発するため、大規模な開発になっても開発方針が立てやすいメリットがある

公式：https://ja.nuxtjs.org/

Netlify

静的ウェブサイトのためのホスティングサービス
サーバーレスのバックエンドサービス

公式：https://www.netlify.com/

Tone.js

Web上でAudioを扱うためのjsライブラリ
今回は度数問題用のシンセ音の生成のために利用

ex.js

//create a synth and connect it to the master output (your speakers)
var synth = new Tone.Synth().toMaster()

//play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease('C4', '8n')

github:https://tonejs.github.io/

構成

Netlifyとgithubの連携を行い、nuxtの変更結果をgithubにpushすると自動でdeployできる。
buildはnuxt generateを行い、静的なサイトを生成し、Netlifyでホスティング。

ビルド方法について

SSR

初回リクエストをサーバーサイドでレンダリングして返す

SPA

ブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行う

静的化

各パスに静的なhtmlをビルドしておく

それぞれのビルド方法のメリット/デメリットはこちら
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら

所感

nuxtはnpmさえあればほとんど環境構築がいらず、すぐに開発に入ることができた。
公式ドキュメントが充実していてわかりやすい。Netlifyへのデプロイも載っている。Netlify へデプロイするには？
非常に多機能なので、最初から全てを理解しようとはせず自分の実現したいことに対してリファレンス式でドキュメントを追ってみても良いと思った。

まとめ

モダンな開発を体験するという意味で最近のリッチなツールが揃っているnuxt.jsは良い選択肢だと思います。
otohabaは年内は公開しておこうと思うので、自分の音感が気になる方はぜひ。

音感を鍛えるツールをNuxt.js × Netlifyで作った