/2月2020-2-1Processing(p5.js)を使った音楽づくりページを、サブドメインに移植しました。https://livecoding-example.hiroshi-nagayama.com/今後は、ここで使用している仕組みを「Tone.js」「Vue.js」で置き換えて、再度作り直す予定です。Chromeだけでなく、EdgeやSafariでしっかりと動くようになれば良いですね。2020-2-3Vue.jsを使ってSPAを作り始める。@vue/cli@Vue/cliをnpmでインストール。Vuex、あと今後にそなえて、ルーターも加えています。tsconfig.jsonフォルダの構造はこんな感じ。これに、今後、Bootstrapを加えて、作業を続けていく予定。使うだけなら、ビルドしたファイルをApacheのディレクトリに放り込めば動きそうですね。そこに非同期処理(Socket.io)とか混ぜていくなら、node.jsサーバー上で動かす必要が出てくるのかな。分からんけれど、進めてみます。bootstrapそして、次のWEBサイトを参考に、ファイルを設定。serveサーバーを起動しようとすると、「sass-loader」がないとおこられるので、インストール。sass-loader今度は「node-sass」がないと注意されるので、再びインストールしてサーバーを起動。node-sassこれで、サーバーの起動を確認。2020-2-4_2エディタは長年「Vim」を使っていましたが、最近Windowsを使うようになり、それを契機に「Atom」を使うようにもなりました。(Vimは使い続けています。)Vue.jsを使うということで、それに合ったプラグインを導入。参考は次のQiitaの記事。上のプラグインを愚直に導入。開発は進みますか?2020-2-5WindowsのPowerShellにて。npmでインストールする際にエラーが頻発して、進まないようになる。-4048「node-sass」が邪魔をしているっぽいです。下のページと同じ症状。https://traveler0401.com/npm-install-operation-not-permitted/ただ、nodeのバージョンを落とすのも面倒なので、一度環境を見直してみる。serve」でサーバーを走らせていることに気付く。install」をたたいたところ、エラーなく終了。vulnerabilities「Windowsはこれがあるからいやだ!」なんて思っていたけれど、おそらくMacでも起こっていたでしょう。OS差別は良くないですね。落ち着いて、見直すことが大事。動的に要素の高さを調整したいのだが、うまく動かない。}}</script>参考にしているのは次の記事。CSSを操作して、スタイルを動的に設定する(v-bind:style)VueコンポーネントでWindowサイズ変更検知&値取得ついでに、TypeScriptにも手を出している。JavaScriptよりも綺麗にコーディングできている感じがする。installでエラー。detected!どうやら、XCodeが入っていないらしい。10.15にアップデートした際に消えてしまったのかな。ダウンロード(約8GB)。(iPhoneのテザリングを通してなので、通信量がちょっと痛い。)インストール後、起動してライセンスに同意。detected!またも、エラー。インストールするコマンドを叩く。updatesしかし、すでにインストールされているとのこと。別のコマンドでも試行。instanceやはり、エラー。インストールする方法を探す。Toolsを探してダウンロードして、インストール。8.742sやっと走りました。何やら、すごく面倒なことになっていますね。2020-2-10時間が空いてしまったけれど、何もしていないわけではない。よる開発を続けている。方が、(私的には)非常にわかりやすい。親コンポーネントと子コンポーネントとのデータのやりとりが、ReactよりVue.jsの方が、後からコードを読んだときにわかりやすい気がする。(長い時間をかけてコーディングをすれば、そうでもないのだろう。)現在、直面している問題として、Vue.jsによる親コンポーネントから子コンポーネントの関数の呼び出しである。結果としては「動いている」のだけれど、「ターミナル上ではエラー」が出ている。^Propsでは値を受け渡すだけで、関数を呼び出せないみたいだし、公式ドキュメントによると、refもあまり推奨されていないらしい。「addTrack」という関数をもっていると、どこかに明示する必要があるのか、ググってもいまいちわからない。Vuexを使うほどでもない。諦めかけていたところ、暁光。TypeScriptでの$refsの参照エラーTypeScriptの記述の問題らしい。}こんな感じでしっかりと明示してやると、無事動きました。(refで参照したりと、やってることは、Reactとあまり変わらんかもしれんね。