教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
Nuxt.jsとTone.jsで画面を触ると音が出るアプリを作ろう
Nuxt.jsを使った簡単な音楽アプリを開発、HerokuへのデプロイなどWeb開発の流れを体感する。
1章 : Nuxtプロジェクトの作成と動作確認
2章 : Vueコンポーネントの作成
3章 : コンポーネントへのTone.jsのインストールとテスト発音
4章 : Vueコンポーネントの作り込み
5章 : Herokuへのデプロイ
0-1
Nuxt.jsとTone.jsで画面を触ると音が出るアプリを作ろう
この教材は、Javascriptを利用したWebサイト構築のフレームワークであるNuxt.jsを使用して、画面を触る（クリックなど）ことで音が出るというガジェット的なサイトを作成します。
Nuxt.jsでのプロジェクトの作り方や、中身の書き換え方、デプロイ方法などを学ぶことができます。
また、発音部分にはTone.jsというライブラリを使用します。Tone.js自体を他の案件で使用することは無いかもしれませんが、Javascriptでのライブラリの使用方法、と言った部分で参考になるかと思います。
学習内容
- Node.js環境における開発スキルを学びます。
- 近年勢いを増してきているフレームワークであるNuxt.jsの基礎を学びます。
- Tone.jsを使用したWeb Audio APIの操作方法を学びます。
- Herokuを使ってWebアプリケーションを公開する方法を学びます。
受講における必要条件
- HTML/CSSの基礎知識
- Javascriptの基礎知識
この教材の対象者
- Nuxt.jsなどのWebフレームワークの開発の流れを把握したい方
学ばないこと
本教材はNuxt.jsの大まかな流れを把握することを一番の目的としており、HTML・CSSの解説は詳しくしていません。細かく知りたい方はご自身で調べていただければと思います。
作成するアプリケーションのイメージをつかもう
この教材では画面を触ると音が出る機能を持ったメイン画面と、そこに入るためのボタンのある画面の2つを作成します。
下記のリンクをクリックしてイメージを掴んでみてください。
目次
0章 概要・環境構築
本教材を進める上での環境を整えたり、設計を解説していきます。
1章 Nuxtプロジェクトの作成と動作確認
Nuxt.jsを導入し、新規プロジェクトを作成します。
2章 Vueコンポーネントの作成
Nuxt.jsはVue.jsの記述方法によって動作します。
ここではVueでのコンポーネントの作り方を学びます。
3章 コンポーネントへのTone.jsのインストール
ブラウザで音を扱うためのライブラリ、Tone.jsをインストールしてテスト発音を行います。
4章 Vueコンポーネントの作り込み
本教材では画面を触る位置によって音の高さが変わることになっています。
そのための、座標を音程に変換するなどの処理を行います。
5章 Herokuへのデプロイ
Herokuというサービスを使ってできたアプリケーションを公開します。
進捗をつぶやこう！ 
