2021年3月第2週レポート
花粉症のせいで体調が芳しくない一週間でした…。
インプット
📝 CSS Position
Forge Viewerの調査をしようとしてデモアプリを作っているのですが、Flexboxを使って左側にメニュー、右側にViewer、というレイアウトを作ってみたところ、ViewerのWidthは100%が指定されているのに、Viewerのwidthが親要素のwidthではなくウィンドウのwidthになってしまい意図しないレイアウトになってしまい悩みました。
DevToolsで確認してみたところViewerのdiv要素にposition: absolute
が指定されていたので、そういやCSSのPositionプロパティって何度も調べているわりには理解があやふやかも、と思ったのでメモとして残しました。
positionプロパティはボックスの配置位置をコントロールするもので、相対位置指定か絶対位置指定か(もしくは位置指定をさせない)を指定する
position: static
- CSSによる位置指定をさせない
- top、bottom、left、rightは適用されない
position: relative
- 相対位置指定
- staticで指定した場合に表示される位置を基準として、top、bottom、left、rightを使って位置を指定する
position: absoulte
- 絶対位置指定
- 祖先のボックスのpositionプロパティにstatic
以外が指定されている場合は、その要素を基準位置とする
- その指定がない場合はウィンドウ左上を基準位置とする
position: fixed
- 絶対位置指定
- ウィンドウの左上を基準位置とする
- スクロールしても位置が変化しない
Viewerの祖先要素にposition
プロパティが指定された要素がなかったため、Viewerの基準がウィンドウになったので、widthがウィンドウのものを利用することになった、ということでした。Viewerを保持する要素にposition: relative
を指定することによってレイアウトの問題を解決できました。
📝 Vueでコンポーネントの再帰呼び出し
先週のレポートでVueでツリービューのコンポーネントを作っていたのですが、それをビルドしてその他のプロジェクトに導入してみたところ、第一階層しか表示されませんでした。Devtoolsで確認したところ、再帰でコンポーネントを呼び出しているところでHTMLが展開されていない、ということがわかりました。
こちらにある通り、再帰的にコンポーネントを呼び出す時にはname
プロパティを指定する必要があります。
vue-property-decorator
を使ってクラス形式でコンポーネントを定義しているのですが、クラス名をつけておけばそれがname
プロパティになると思い込んでいたのですが、それが間違いで@Component
デコレータで明示的に指定する必要がありました。
@Component({
components: {
TreeNode
},
name: 'Tree' // ここ
})
export default class Tree extends Vue {
これで無事再帰的にコンポーネントを呼び出すことができました。
📝 TypeScriptで読み取り専用配列型
TypeScriptだとインスタンスプロパティの定義時にreadonly
キーワードをつけておくと、そのプロパティは変更不可となります。値型の場合は値を変更することができなくなるのですが、オブジェクトや配列などの参照型はオブジェクトのプロパティが変更不可になるわけではなく、その参照先が変更不可となります。
じゃあオブジェクトのプロパティを変更不可にしたい場合はどうすればいいか、というとUtilityTypeとしてReadonly<T>
があります。これを使えばオブジェクトのプロパティは変更不可となります。
じゃあ残るは配列なんですが、配列の場合はReadonlyArray<T>
、もしくはreaonly T[]
を使うことによって配列の要素が変更となります。すなわち、push
やpop
といったメソッドも使用できなくなります。もちろんインデックスアクセスもできません。
// 全部ダメ
const array: readonly number[] = [1,2,3,4]
array.push(5)
array.pop()
array[0] = 5
アウトプット
🛠️ Forge ViewerをVueで動かしている
先週のレポートでもちらっと書いていますが、Forge Viewerを使ったVueプロジェクトを作っています。サンプルがほとんどjQueryベースなのでちと流用するには厳しいということで色々作っています。その第一歩がツリービューなのですが、そちらが大体まともに動くようになったので、Forge Viewer本体を導入しはじめました。
Forge Viewer自体もわりとコールバック中心のデザインになっているので、Promiseでラップしたいなと思ったり、前提知識を必要とするわりにはドキュメントがわりとあっさりしているなと感じたりしています。
いろいろデモは作っているのですが、表示データが公開できないものであったりするのでなかなかお披露目できないがちょっと悩みのタネですね。