write: VueUseのusePointerLockからPointer Lock APIを学ぼう(アドベントカレンダー15日)

[hiroko-ino]

概要

VueUseのWeb APIを扱った関数からWeb API(Pointer Lock API)を学ぼうという記事です

詳細

VueUseは様々なWeb APIに関する関数があり、その実装を見るのが趣味で、今回もVueUseの関数からWeb APIの使い方を学ぼうという主旨の記事になっています。下書きはすでに完成しています。
Vue.jsアドベントカレンダーの15日の記事です。

下書き： https://zenn.dev/comm_vue_nuxt/articles/vueuse-use-pointer-lock

備考欄

下書き執筆完了済

レビューの必要性

@shinGangan
このコミュニティ経由で記事を上げたことがないので、一旦初めてなのでレビューをお願いしたいと思っていますmm
ばしばしご指摘ください！このリポジトリの使い方が間違っていたらごめんなさいmm

下書き： https://zenn.dev/comm_vue_nuxt/articles/vueuse-use-pointer-lock

[shinGangan]

@hiroko-ino

レビュー承知です！🙆‍♀️
下書きが完了しましたらメンションお願いします！
特に手直しの必要なければ、明日確認し明日中にレビュー返します！

[hiroko-ino]

@shinGangan
一旦書ききっている状態なので、このままで明日以降レビューお願いいたします！

[hiroko-ino]

@shinGangan
こちらいかがでしょうか？15日のアドベントカレンダーなのでまだ余裕があるので、お忙しければゆっくりで大丈夫です🙆‍♀️

[shinGangan]

@hiroko-ino

レビュー遅れてしまい申し訳ありません🙏
以下、レビューコメントです。

提: はじめに

• リンクの配置箇所として以下のような構成はいかがですか。
  • VueUseの説明
  • VueUseのリンク
  • その中～
  • usePointerLockのリンク

useBatteryについて

私が読者だった場合、前後関係があまり分からず下記文章に混乱してしまいます。

以前もBattery Status APIを扱うuseBatteryの記事を書いていたのでこちらも是非。

そこで以下のような文章はいかがでしょうか(下記はあくまで一例です)。

Web APIについて学ぶのは初めてではなく、以前はvueuse/useBattery composableを用いてBattery Status APIについて学びました。以前の記事はこちらからご覧ください

所感: useBatteryについて

• 私が記事を書く場合は別の項に分けるかなと思います。「はじめに」項にあっても問題ないため、こちらは好みです

Pointer Lock APIとは？あるいはusePointerLockとは

• 説明とデモ解説は項分け(h3)されていると読みやすいです。読み手がどこで息継ぎする(=立ち止まって自己の中で噛み砕く)かを意識してもらえると良いかなと思います
• 型情報はGitHub埋めこみの方が良いかもです。GitHub埋めこみすることで型情報のリンク挿入漏れを回避できます
  • 例: https://github.com/vueuse/vueuse/blob/fa7280728fab4705332a730be7f499006bba61d0/packages/core/usePointerLock/index.ts#L16-L20
• 「デモのソースコードを見てみましょう」に対してデモコードのanchorタグがあるとさらに良いと思いました！
  • (所感) デモのコードを見てみましょうという記述を見て、デモの大元のコードを記事内で探してしまいました。GitHubのリンクがあると読み手は迷わずに済みそうですね

[hiroko-ino]

@shinGangan

ありがとうございます！！！！！

useBatteryについての記事は最後にさらっと書くことにしました。
以下の点を修正しました

https://zenn.dev/comm_vue_nuxt/articles/vueuse-use-pointer-lock

• はじめの導入の流れをご指摘通りに
• Pointer Lock APIとは？あるいはusePointerLockとはの下にh3の章分け
• デモのソースコードと最後にあるusePointerLock全体のソースコードについて、GitHubから埋め込みました。型については、VueUseサイトに書かれている方がわかりやすく、結局埋め込みにはしなかったのですが、VueUseサイトへのリンクをつけておきました
• デモのキャプチャをGifに
• 「下記のデモのソースコード」という言い方で場所がわかりやすいように
• この辺(Zennの管理がプライベートリポジトリなので下に差分を添付します)ちょっと言い回しを変更しました。逆にわかりにくくなってるとか不正確になってるとかでしたらご指摘いただけると…

[shinGangan]

@hiroko-ino

修正お疲れ様です！
いずれも問題ないと思います🙆‍♀️

LGTMです🎉

[hiroko-ino]

公開しました！
レビュー本当にありがとうございました
https://zenn.dev/comm_vue_nuxt/articles/vueuse-use-pointer-lock

[shinGangan]

@hiroko-ino

追加で1点コメントです！

• 「この記事はVue.js アドカレのx日目の記事です」という冒頭案内は追記した方が親切だと思います～！

[hiroko-ino]

おおおすみません！さくっと追加しました！
https://zenn.dev/comm_vue_nuxt/articles/vueuse-use-pointer-lock