write: UnoCSS について詳しく書く

[kosuke222naito]

概要

UnoCSS の紹介記事の詳細編

詳細

#54

詳細編を書こうとしたら紹介したいことが多すぎて、量が多くなってしまった。
そこで、

• 公式プリセット
• 設定

の2つにわけることに。

公式プリセット: https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss_official_presets
設定: https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss_config

備考欄

[kosuke222naito]

@shinGangan

詳細編ですが、量が多すぎたので今度こそ分割しました🙇‍♂️

公式プリセット: https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss_official_presets
設定: https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss_config

公式 Playground を利用して実際に動かせるようなコードまで用意しましたが、誘導が下手な気がしています、、、
何かアドバイスあればいただきたいです。

お手すきの際に確認いただけるとありがたいです🙇‍♂️
よろしくお願いします！

[shinGangan]

@kosuke222naito

今日、明日で確認してコメントします〜🙆

[shinGangan]

@kosuke222naito

以下、レビューコメントです！

(2記事)全体通して

所感

• どちらの記事も分割されたことでより読みやすくなっている印象です。日本語訳を読んでいるような感じでした
• hトップの絵文字はchibivueインスパイアですかね？普段Zennで見かけないので華やかな印象を感じました

IMO

1. 私がレビュアーではなく読者だった場合「実際にUnoCSSを試すにはどのような環境構築をすればいいのだろう？」と感じます。例えば、Vite + Vue + UnoCSSの環境導入記事はどこかで執筆予定ですか？
   それとも、特に執筆予定はないでしょうか。

UnoCSSのライトユーザーは「Vite + Vue + UnoCSSの環境導入記事」などの実運用・課題解決形を求める可能性があり、反対にUnoCSSコアユーザー(詳細に興味を持っているユーザー)は今回の2記事を求める可能性があるなと感じました。

NITS(優先度低め)

1. 私が執筆者だった場合は型のimportは以下で記述するなと思います。

import type { Preset } from 'unocss';
// ...

文章、例も完全一致の場合は解説記事 < 翻訳記事の印象が強くなるので、書き手の差異はあったほうがいいかなと考えています。

[kosuke222naito]

@shinGangan

ほんとにありがとうございます！

私がレビュアーではなく読者だった場合「実際にUnoCSSを試すにはどのような環境構築をすればいいのだろう？」と感じます。例えば、Vite + Vue + UnoCSSの環境導入記事はどこかで執筆予定ですか？
それとも、特に執筆予定はないでしょうか。

今回は公式 Playground が提供されていることを推したい気持ちもあったり、横着したい気持ちもあって、、、
今後他のフレームワークとの比較を行う過程で必ず環境構築ははずなので、その際にまとめてみようかなと思っています！
issue 作成します、助言ありがとうございます🙇‍♂️

私が執筆者だった場合は型のimportは以下で記述するなと思います。

import type { Preset } from 'unocss';
// ...

ありがとうございます。
インライン type について理解が足りていませんでした。

https://zenn.dev/teppeis/articles/2023-04-typescript-5_0-verbatim-module-syntax
こちらの記事を読んで、GANGANさんの提案してくださった書き方の方がいい気がしているので修正します。
(-> しました！)
指摘ありがとうございます🙇‍♂️

[kosuke222naito]

hトップの絵文字はchibivueインスパイアですかね？普段Zennで見かけないので華やかな印象を感じました

Vue Begineers さんの記事からパクらせていただきました笑
彼もきっと chibivue しているんでしょうね🤔

[shinGangan]

@kosuke222naito

今後他のフレームワークとの比較を行う過程で必ず環境構築ははずなので、その際にまとめてみようかなと思っています！
issue 作成します、助言ありがとうございます🙇‍♂️

こちらについては執筆者が「読者に何を届けたい、何を目的として読んで欲しいか」という読み手視点がポイントになるので気にしすぎなくて良いかと思います🙆
本記事の場合 公式 Playground が提供されていることを推したい気持ち というのが(私は)伝わったので大丈夫かなと思いますー

ありがとうございます。
インライン type について理解が足りていませんでした。

これは私が普段Nuxtを書いてるのもあっての指摘でした。そのためNITSで指摘しました。

[kosuke222naito]

@shinGangan

指摘もらえるのは非常にありがたいので、なんでも嬉しいです
本当にいつもありがとうございます

もっかいチェックしてみて、今日の夜には #54 の方を公開しちゃいます！

[shinGangan]

@kosuke222naito

LGTMです🎉

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

[shinGangan]

@kosuke222naito

LGTMです🎉

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

[shinGangan]

[確認] @kosuke222naito

本イシューでレビューした記事は全て投稿済みですか？
もし投稿済みであればお手隙の際にイシューをクローズお願いします〜🙏

[kosuke222naito]

@shinGangan

アッ
すみませんクローズ忘れてました

[shinGangan]

LGTMです🎉