write: VueのSuspenseが便利だったのでまとめてみた

hiroto0701 commented 2 months ago

概要

Suspenseを使ってみた感想をハンズオン形式で紹介

詳細

個人開発でSuspenseを使用してみたところかなり使い勝手が良かったので体験をまとめつつ、サンプルコードを紹介して簡単に使い方を紹介したい。

備考欄

どちらかというと初学者向けの記事なのかなと思っています。執筆自体は完了していて、公開待ちです。

hiroto0701 commented 2 months ago

@shinGangan

https://zenn.dev/comm_vue_nuxt/articles/f7fa5cf725a05f

こちら下書きになります。お忙しいところ恐縮ですがお時間ある際にご確認お願いいたします🙇‍♂️

shinGangan commented 2 months ago

@hiroto0701

レビュー承知しました！どんな観点でコメントした方が良い、などの指標はございますか？

もし指標や「こういうところを見てほしい」などあれば先行してお聞きしておきたいです～🙏

hiroto0701 commented 2 months ago

@shinGangan

自分が執筆したものをレビューをしていただくという行為自体が初めてなので、

こういう言い回しの方がわかりやすいよ
ここの表現いらないかな
コード修正したほうがいいよ

など細かい部分も見ていただけると嬉しいです！

hiroto0701 commented 2 months ago

厳しい意見でも耐性はあるのでご指導ご鞭撻いただきたいです！🙇‍♂️

shinGangan commented 2 months ago

@hiroto0701

レビューコメントを下記に記載しました！お手隙の際に確認お願い致します🙏

[!NOTE] Qから始まるやつは疑問です。不要だったらスルーしてください。

Sから始まるやつは提案です。採用については一任です。

prefix無しのものはレビュー指摘です

構成について

S: 説明のセクションと実験のセクションは分割してもいいのかなと感じました。「Suspenseとは？どんな利点がある -> 実際に実験してみた」と2セクション構成にした方がもっと良いと感じました。
- Suspenseのバージョンについては利用可能バージョンと実験時に利用したバージョンをそれぞれのセクションごとに記載されていると私は嬉しいです
- 「環境など」「ディレクトリ構成」の項については実験のセクションで記載されていると私は嬉しいです

セクションごとについて

Suspense とは？

引用元のリンクは本項中にあると良いと思いました。
上記と関連してになりますが公式ドキュメントのリンクが本項中にあると読みやすいです

ディレクトリ構成

S: 余談の話はアコーディオン内に閉じても良いかなと思いました

実装の結果

Q. Zennで添付できるかについて未確認ですが、画像よりも動画の方がいいのかなと思いました。いかがでしょうか。
- 動画の方が非同期できちんと動いていることが読者に伝わりやすいかと感じました
- Zennで動画が添付できない場合は、GitHubのREADMEなどに記載→そのリンクの掲載などで代替できるかなと思います。

hiroto0701 commented 2 months ago

@shinGangan

お忙しいところレビューしていただきありがとうございます！

Q. Zennで添付できるかについて未確認ですが、画像よりも動画の方がいいのかなと思いました。いかがでしょうか。

こちらですが、動画の添付ができなかったのでgifを載せておりましたが、ご指摘いただいた通りフォールバックコンテンツの時間が長すぎてただの画像のように見えてしまっていますね。もう少し尺を短くして変化が分かりやすいようにします。

指摘いただいた点修正後に改めてご連絡させていただきます。本当に時間を割いて丁寧なレビューをいただきありがとうございました！

shinGangan commented 2 months ago

@hiroto0701

そうですね、読み手側から見た時に動画 or GIFであることが早めに分かった方がいいかと思います。なので、「実装結果は以下のGIFのようになります」などの文章を先に挟んでおくほうがいいかもです。

もう少し尺を短くして変化が分かりやすいようにします。

hiroto0701 commented 2 months ago

@shinGangan

https://zenn.dev/comm_vue_nuxt/articles/f7fa5cf725a05f

レビューいただいた点修正いたしました！お忙しいところ恐縮ですが、お時間のある際にご確認お願いいたします。

shinGangan commented 2 months ago

@hiroto0701

構成が整理されたことでより読みやすくなっていました！ GIFについても動作が以前より挙動が分かってよかったです。

shinGangan commented 2 months ago

LGTMです🎉

hiroto0701 commented 2 months ago

@shinGangan

本当にレビューにお時間割いていいただきありがとうございました！

構成の仕方など勉強なります📝 記事についてはタイミング見て公開させていただきます！

shinGangan commented 2 months ago

@hiroto0701

お役に立てたのであれば何よりです！また何かあればお気軽にメンションください～

hiroto0701 commented 2 months ago

@shinGangan

ありがとうございました！

https://zenn.dev/comm_vue_nuxt/articles/f7fa5cf725a05f

記事公開したので共有いたします🙇‍♂️

shinGangan commented 2 months ago

@hiroto0701

LGTMです🎊 本イシューをクローズしておきますね

shinGangan commented 2 months ago

[確認] @hiroto0701

記事が2つ上がっていたのですがこちらは間違いですか？

Zennでは記事のスラッグを変えた場合(= ファイル名を変更した場合)、別の記事としてカウントされます。もし旧記事が誤りであれば削除頂いた方が良いかもしれないです。

削除はダッシュボードからのみ可能のようです。

https://zenn.dev/hw09/articles/how-to-edit-zenn#%E8%A8%98%E4%BA%8B%E3%81%AE%E5%89%8A%E9%99%A4

chibivue-land / articles-zenn-plaza