2020年

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/clinpmでインストール。
vue create . で初期化。
一応、TypeScriptVuex、あと今後にそなえて、ルーターも加えています。
(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 を組み込む。

BootstrapVue

$ 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

これで、サーバーの起動を確認。

エディタは長年「Vim」を使っていましたが、最近Windowsを使うようになり、それを契機に「Atom」を使うようにもなりました。
(Vimは使い続けています。もちろん。)

Vue.jsを使うということで、それに合ったプラグインを導入。

参考は次のQiitaの記事。

AtomのVue.js関係プラグインまとめ

ここを参考に、

「language-vue-component」
「vue-autocomplete」
「vue-snippets」
「vue-hyperclick」
「atom-beautify」
(これを入れていなかったとは・・・)
「vue-format」

上のプラグインを愚直に導入。開発は進みますか?

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)

VueコンポーネントでWindowサイズ変更検知&値取得

ついでに、TypeScriptにも手を出している。
JavaScriptよりも綺麗にコーディングできている感じがする。

Vue.js to TypeScriptの書き方一覧

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) を参考に修正。importEmit を含めるのを忘れずに。

  @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を今すぐマスター! 速習シリーズ」も買いました。とくに、非同期処理の部分が大変分かりやすかったです。

これらを参考に、引き続き開発を続けていきます。