はじめに
気になっていたYamada UIを使って簡単な一言日記アプリをつくってみました！
なお、これまでに使用したことがあるUIコンポーネントライブラリはChakura UIくらいです。
私自身CSSやデザインの学習経験は全くないので、今回のアプリにおいてもかなり雑な印象を受けるかと思いますが、あくまでもYamda UIを使ってみたかっただけなので、温かい目で見ていただけると幸いです。。
今回の使用言語はReact×TypeScriptです。
Yamada UIとは（ざっくり）
日本人の山田さんが開発されたUI コンポーネントライブラリです。
他のUIコンポーネントとの違いや詳細等は下記に簡潔にまとめられています。
使ってみた感想
１．公式ドキュメントが日本語＆説明が丁寧
前述のとおり、開発者が日本人なので基本的にすべて日本語でした。
また、山田さんのドラゴンボール好きが興じてちょくちょくドラゴンボール要素が盛り込まれています（笑）
また、props・component毎に使用例やサンプルコードが載っています。
このままコピペで使用できてしまうので初学者にとってすごくありがたいですね。
２．カラーモードやアニメーションが簡単に実装できる
よく凝ったサイトで見かけるような機能を簡単に実装できます。
今回はカラーモードとアニメーションの機能を実装してみました。
～カラーモード～
ほぼサンプルコードをコピペするだけですが、下記記事にやり方を載せています。
～アニメーション～
こちらもすでにサンプルコードが用意されているので、自由に使いまわせます。
試しに「スクロール」の動きを実装してみました。（ほぼサンプルコードのままです）
３．カラーパレットを使って直感的にカラーの選定ができる
色の組み合わせってなかなか難しいですが、Yamada Colorsでは同系色の提案や色のカスタムが簡単にできます。
Generatersで検索した色に対して異なるトーンの色味を提案してくれたりします。
めっちゃ便利で見ているのも楽しいです。
おわりに
以上、Yamada UIを使ってみた感想でした。
公式ドキュメントが読みやすくて充実しているので、初学者の方にもおすすめです。
UI周り勉強してもっと使いこなせるようになりたい！と思いました。
参考