経験知ロゴ

@wordpress/componentsの実行結果一覧とコードが確認できるサイト

WordPres Components

@wordpress/componentsを使ってプラグインを開発しているのですが、どのようなコンポーネントがあるかは公式ドキュメントで確認できます。

しかし、公式ドキュメントではコードしか書かれておらず、どのようなデザイン・動作をするのか分かりづらいです。

実際の実行結果が見られるサイトがありましたので紹介します。

wordpress.github

Component Referenceに記載されているのですが、なぜかテキストでリンクになっていないGithubのGutenbergページ。

サイドバーにコンポーネント一覧があり、クリックすると右側に実行結果が表示されます。

「Doc」をクリックすると選択しているコンポーネントの実行結果一覧が表示されるので、「Show Code」をクリックするとコードが表示されます。
show code

ただ、これは公式ドキュメントでもそうなのですが、実際の使い方と違う場合があります。

例えば、ButtonコンポーネントのPrimaryを使いたい場合、propsに「variant=”primary”」を設定するようになっています。
button primary

しかし、実際にこの通りに使ってみると動かないし、VS Codeでtypescriptエラーが表示されます。

型定義に従って下記のようにしたところ、Primaryボタンがちゃんと表示されました。


@wordpress/componentsのアップデートにドキュメントが追いついていないのかわかりませんが、どんなコンポーネントがあるのかを探すのに使って、実際の使い方は型定義ファイルを見たほうが良いかもしれません。

また、このページを開いているとCPU使用率が上がるので開きっぱなしは要注意です。

WP-GB

コンポーネントの結果を画像で確認しながら一覧できます。

どんなコンポーネントがあるのか知るのには良いですが、パラメーター情報などが不十分です。

wordpress.githubとWP-GBでどんなコンポーネントがあるのかを調べ、具体的な使い方は型定義ファイルを読むのが良いと思います。

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか?

  • 自分の趣味に全力を注ぐ
  • 家族との時間を増やし、子供の成長をしっかりと見守る
  • 毎週海外へ旅行へ行く
  • 新しいことに挑戦する
  • 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね!

週2日の休みが増えるということは、

52週(1年) × 2日 = 104日

年間104日も増え、365日のうち208日も自分の時間に使えるのです!

更に、今30歳だとして、65歳まで働いたら、

104日 × 35年 = 3,640日

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか?

週4日の自由たった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう!

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!

おわりに

ドキュメントを見たとき、しっかり書かれていそうでしたが、実際に使ってみるとつまづきました…。

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから