Processing（p5.js）を使った音楽づくりページを、サブドメインに移植しました。
https://livecoding-example.hiroshi-nagayama.com/
今後は、ここで使用している仕組みを「Tone.js」「Vue.js」で置き換えて、再度作り直す予定です。
Google Chromeだけでなく、EdgeやSafariでしっかりと動くようになれば良いですね。
Vue.jsを使ってSPAを作り始める。
$ npm install -g @vue/cli@Vue/cliをnpmでインストール。
vue create . で初期化。
一応、TypeScript とVuex、あと今後にそなえて、ルーターも加えています。
（TypeScriptはいらなかったかな・・・）
$ tree -L 1
.
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── tsconfig.jsonフォルダの構造はこんな感じ。
これに、今後、Bootstrapを加えて、作業を続けていく予定。
$ npm run serve
node.js が必須なのかと思っていたけれど、Vue.js を使うだけなら、ビルドしたファイルをApacheのディレクトリに放り込めば動きそうですね。
そこに非同期処理（Socket.io）とか混ぜていくなら、node.jsサーバー上で動かす必要が出てくるのかな。よく分からんけれど、進めてみます。
Vue.js に bootstrap を組み込む。
$ npm install vue bootstrap-vue bootstrapそして、次のWEBサイトを参考に、ファイルを設定。
Bootstrap-vueで編集した_variables.scssを適用する
$ npm run serveサーバーを起動しようとすると、「sass-loader」がないとおこられるので、インストール。再び、サーバーを起動。
$ npm install -D sass-loader今度は「node-sass」がないと注意されるので、再びインストールしてサーバーを起動。
$ npm install -D node-sassこれで、サーバーの起動を確認。
WindowsのPowerShellにて。
npmでインストールする際にエラーが頻発して、進まないようになる。
verbose stack Error: EPERM: operation not permitted, unlink '～node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'
verbose cwd ～
verbose Windows_NT 10.0.18363
verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "jquery"
verbose node v12.14.0
verbose npm v6.13.4
error code EPERM
error syscall unlink
error path ～node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node
error errno -4048「node-sass」が邪魔をしているっぽいです。
おそらく、下のページと同じ症状。
https://traveler0401.com/npm-install-operation-not-permitted/
ただ、nodeのバージョンを落とすのも面倒なので、一度環境を見直してみる。
「node_modules」フォルダを丸ごと消して、再度インストールすればパーミッションもなんも問題ないかなと思ったところ、現在、「npm run serve」でサーバーを走らせていることに気付く。
早速そちらを停止して、再度「npm install」をたたいたところ、エラーなく終了。なるほど。
> npm install
audited 33791 packages in 4.978s
38 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities「Windowsはこれがあるからいやだ！」
なんて思っていたけれど、おそらくMacでも起こっていたでしょう。
OS差別は良くないですね。落ち着いて、見直すことが大事。
Vue.js にて動的に要素の高さを調整したいのだが、うまく動かない。
<div id="AddTrackFrame" v-bind:style="[addTrackFrameStyle]">
（略）
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
@Component
export default class HNAddTrackViewController extends Vue {
addTrackFrameHeight: number;
addTrackFrameStyle = {
height: this.addTrackFrameHeight + "px",
}
// FrameSize を Windowサイズに当てはめる
public handleResize() {
this.addTrackFrameHeight = window.innerHeight
//console.log(this.addTrackFrameHeight)
}
created(){
// Windowサイズを取得してFrameに当てはめ
this.handleResize()
}
mounted(){
// イベントリスナを紐付け
window.addEventListener('resize', this.handleResize)
}
destroyed(){
// AddTrackFrameが破棄されることはないが念のため
window.removeEventListener('resize', this.handleResize)
}
}
</script>
参考にしているのは次の記事。
Vue.js CSSを操作して、スタイルを動的に設定する（v-bind:style）
ついでに、TypeScriptにも手を出している。
JavaScriptよりも綺麗にコーディングできている感じがする。
Mac に環境をかえてコーディングしたところ、
% npm installでエラー。
> node-gyp rebuild
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!どうやら、XCodeが入っていないらしい。
（むかし、インストールしたはずなのだが、OSX を 10.15にアップデートした際に消えてしまったのかな。）
App Store から XCode をダウンロード（約8GB）。
（iPhoneのテザリングを通してなので、通信量がちょっと痛い。）
インストール後、起動してライセンスに同意。
再度、npm install を叩く。
> node-gyp rebuild
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!またも、エラー。
一応、ターミナルで Command Line Tools をインストールするコマンドを叩く。
% xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updatesしかし、すでにインストールされているとのこと。
別のコマンドでも試行。
% sudo xcodebuild -license
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instanceやはり、エラー。
さらに、別の方法で Command Line Tools をインストールする方法を探す。
XCodeのメニューから「More Developer Tools」を選択。
・Xcode->Open Developer Tool->More Developer Tools
そこで開かれるWEBサイトから、Command Line Toolsを探してダウンロードして、インストール。
% npm install
（略）
> node-gyp rebuild
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
added 70 packages from 26 contributors and audited 33791 packages in 8.742sやっと走りました。
何やら、すごく面倒なことになっていますね。
時間が空いてしまったけれど、何もしていないわけではない。
引き続き Vue.js による開発を続けている。
先月、React を用いて開発したときよりも、Vue.js の方が、（私的には）非常にわかりやすい。とくに親コンポーネントと子コンポーネントとのデータのやりとりが、ReactよりVue.jsの方が、後からコードを読んだときにわかりやすい気がする。（長い時間をかけてコーディングをすれば、そうでもないのだろう。）
現在、直面している問題として、Vue.jsによる親コンポーネントから子コンポーネントの関数の呼び出しである。結果としては「動いている」のだけれど、「ターミナル上ではエラー」が出ている。
30:20 Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
Property 'addTrack' does not exist on type 'Element'.
28 | // Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
29 | // Property 'addTrack' does not exist on type 'Element'.
> 30 | this.$refs.tvc.addTrack()
| ^Propsでは値を受け渡すだけで、関数を呼び出せないみたいだし、公式ドキュメントによると、refもあまり推奨されていないらしい。
「addTrack」という関数をもっていると、どこかに明示する必要があるのか、ググってもいまいちわからない。
Vuexを使うほどでもない。
諦めかけていたところ、暁光。
1）Nuxt(Vue) + TypeScriptでの$refsの参照エラー
TypeScriptの記述の問題らしい。
$refs がもともと定義されていないから起こったのかな？
$refs!:{
tvc: HNTrackViewController
}こんな感じでしっかりと明示してやると、無事動きました。めでたし。
（refで参照したりと、やってることは、Reactとあまり変わらんかもしれんね。）
2）vue.js + typescript = vue.ts ことはじめ
ついでに、 $emit の記述を 2) を参考に修正。import に Emit を含めるのを忘れずに。
@Emit('add-track')
public addTrackToApp() {
//this.$emit('add-track')←元のコード
return
}将来的に、DB使ったり非同期処理使ったりしたいなら、Angularを選択した方が良いのかなとも思ったのですが、とりあえず、Vue.jsで開発を続けます。
「Angular」と「Vue.js」「React」
ちょっと横道にそれて、Angularの本を中古で買いました。
JavaScriptで開発するにあたって、React、Vueと一緒によく紹介されており、他と比べて、パフォーマンスが高いという記事もよくみるからです。
あとから、「ああ、Angularを選択しておくんだった！」ということは避けたい。
そして、本をちらっと読んだところ、Angularも、VueやReactとやっていることは大きく変わらないのかな、という印象。
例えば、PHPやRubyによるWEB開発系の本ではよく見られる、「データベースとのつながり」などよりも、「HTMLとそこに埋め込まれたデータを、動的にどう扱うか」ということに焦点が当てられているように感じます。
Vue.jsのパフォーマンスがほか2つより悪いというのは、こちらの記事でも紹介されています。これから音を扱うWEBアプリをつくる上で、パフォーマンスの悪さは気になるところです。
しかし、「わかりやすさ」という点から見ると、Vueはほか2つよりも、よく初級者向けに適しているという記事をみます。あまり、新しいフレームワークの習得に時間をかけることができない事情から考えると、現在少し手を出したVue.jsで開発を続けた方が良いように感じました。
最初から「非同期処理」など、色々な機能をデフォルトで備えているAngularにはあこがれますが、Vueでもできなくはないらしいので、その都度考えていきたいと思います。
10日以上更新をしていませんでした。
何もしていなかったわけではありません。
世の中の深刻なマスク不足に悩んだりしております。
その一方で、Vue.jsをいじるために、TypeScriptをちゃんと理解する必要性を感じ、良いリファレンスを探していました。
本屋で色々見ましたが、一番わかりやすかったのは、Kindleで販売されている「速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ！ 速習シリーズ」です（値段も安い）。
執筆者は「山田 祥寛」。
この人は、ほかにも
「新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで」
「これからはじめるVue.js実践入門」
などを出版していますが、どれも分かりやすいですね。
「速習 ECMAScript 2019: 次世代の標準JavaScriptを今すぐマスター！ 速習シリーズ」も買いました。とくに、非同期処理の部分が大変分かりやすかったです。
これらを参考に、引き続き開発を続けていきます。