2020年11月第3週レポート

はじめに

友人のtadashi-aikawa(@Tadashi_MAMAN)が半年近くWeekly Reportを続けてるのを見て感化されたので、自分でも始めることにしました。

元々カジュアルに記事をポストしていきたいとは思っていたのですが、一つの技術トピックをターゲットにすると、どうしても凝りたくなってしまい最終的には途中でやめてしまう(そんな書きかけの記事が結構ある…)という状況なので、フォーマットとルールを作ってやってみよかなと思った次第。

基本はその週に読んだ本や記事の記録と、作ったもの検証したものを1時間ほどでまとめて毎週ポストしていこうと思います。質よりもまずは習慣化することを目標に。

インプット

📝「3DモデルフォーマットglTFに詳しくなれる本」を読んだ

業務で3Dデータをよく扱うのですが、glTF/GLBが一番割合が多いです。glTFの仕様についてはクロノスグループが公開しているドキュメントを一年ほど前に一通り読んではいましたが、技術書典で出版された「3DモデルフォーマットglTFに詳しくなれる本」の評判が社内で良かったので知識の整理のためにも購入して読んでみました。

3DモデルフォーマットglTFに詳しくなる本 | FADIS PRESS

内容については評判通りとても良いものでした。個人的にglTFはアクセサ、バッファビュー、バッファまわりが混乱しがちなポイントかなと思うので、その部分を視覚情報交えて解説されているところがとても気に入りました。

📝 インスタンス生成時のメモリアロケーションについて調べた(JS/TS)

JavaScript(TypeScript)でのインスタンス生成時のメモリアローケーションやパフォーマンスについての理解があやふやだったので資料をあさってみました。

自分が把握しておきたかったポイントとしては

  • class構文でメソッドを書くことはprototypeに関数を追加することの糖衣構文
  • class構文でプロパティにアロー関数を設定した場合は、その関数はprototypeにではなくインスタンスのプロパティに属する
  • ということはインスタンス化の度にアロー関数の分だけアロケーションに必要なメモリが増えるので、インスタンスの生成頻度と用途を考慮してメソッドを関数にするかアロー関数にするかは判断が必要

📝 Vue.jsのスコープ付きスロットについて調べた

親コンポーネントから子コンポーネントにイベント通知したいとき、自分はRxJSをよく使います。プロパティの「変更」を通知したいときは、オーソドックスにPropsやVuexを使うのですが、プロパティの状態変更を伴わないイベント(例えば別のビューにあるアクションのボタンが押された、とか)を親から子に伝えたいときの良い方法は現在模索中です。Vue.jsのリアクティブ性を使って実装することも可能ではあるのですが、メンタルモデルをそのまま表現するコードにはならないのであまり好みではありません。となると親コンポーネントでObservableを定義してそれを子コンポーネントにPropで渡すのが一番結合度を低く保ちつつ宣言的に書けるのではと思い今に至っています。 とはいえ何とかVue.jsの機能だけで完結させたいという気持ちもあり、そういえばスコープ付きスロットで似たようなことができた気がしたので改めて調べてみました。

Vue.jsのslotの機能を初心者にわかるように解説してみた

ざっくり言うと親コンポーネントから子コンポーネントが持つオブジェクトにアクセスできるようになるので、目的としていることはできそうです(イベント発生時に親コンポーネントから子コンポーネントの関数オブジェクトをコールすればよさげ、ザ・イベントプログラミング)。 ただ、やはり親が子の知識を多めにもたなくてはいけない、親が好き勝手に子をいじくれる(やらせたくないことはできないように保っておきたい)とも感じるので、まだしばらくRxのお世話になりそうだという感想です。

📝 並行計算と並列計算の言葉の意味を調べた

自分でもよくこんがらがるのでポインタとしてメモ

君たちの「並行」の理解は間違ってる

アウトプット

🛠️ TypeScript(JavaScript)のジェネレータについての記事を書いた

TypeScriptとジェネレータ

🛠️ Azure DevOpsにnpmレジストリを作った

社内で作っているプログラムのコードを再利用したい機運が高まってきたので、プライベートなnpmレジストリが欲しくなりました。弊社ではAzure DevOpsを利用しているので、以下の記事を参考にnpmレジストリを作りました。

Azure DevOps を社内 npm registry として使う時の Tips

🛠️ Azure Pipelinesでコードをpushしたときにnpmパッケージのパッチバージョンをインクリメントさせるようにした

npmレジストリを作ったら、そちらにpublishするときにバージョンを自動でインクリメントしたいと考えました(パッチバージョンまで手動で管理するのは面倒)。そこで以下の記事を参考にAzure Pipelinesでパッケージビルドを走らせると同時にパッチバージョンを自動でインクリメントする仕組みを作りました。

Azure DevOpsではArtifactsに公開されている各種レジストリ(Feedっていう)の情報を取得できるAPIがあるので、そのAPI経由でレジストリ上にある現在のバージョンを取得してそれを元にpackage.jsonを上書きしてpublishするbashスクリプト、です。

🛠️ WebXRで点群を表示してみた

使ったのはThree.jsのPCDLoaderです。ロード完了後はThree.jsのコンテキストで好きにいじれそうなのでアイデア次第でいろいろできるかもしれません。今回は.pcd形式の静的なファイルからロードしましたが、Azure KinectとかReal Senseで取得したデータをWebRTCで流して表示とかもできそう。Webassembly使えばローカルで取得した点群も表示できるのかしら?知らんけど。

Profile
d_yama
元Microsoft MVP for Windows Development(2018-2020)
Sub-category : Windows Mixed Reality
Search