ブログこのサイトについて自己紹介お問い合わせフロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。Reactで吹き出しで会話してるUIを作る2021年12月29日2022年4月15日webのことmicroCMSNext.jsTwitterFacebookHatenaPocketアブブこんにちは。おねがいします!上みたいな感じで、Wordpressでよく見る形の、ふきだしで会話をしている風なものを、microCMSとReactでカスタムフィールドを使って作ってみました。下のWordpressのプラグインのような感じですね。Balloonその手順と、Reactでのコンポーネントの作り方について解説します!前提microCMSを使って記事用のapiが製作済み管理画面の使い勝手カスタムフィールドを使ってこのような形になるように作っていきます。commentとしています。項目名でなんとなくはわかるかと思います。isRightがちょっとわかりづらいかもですが、**画像を左に表示するか、右に表示するかを設定するものです。アブブ右の場合はボタンをONにする!そうすると右からの発言になります!アブブOFFの場合はこっちから!コメント繰り返し用のカスタムフィールドを作る先ほど作った「comment」のカスタムフィールドを「繰り返し」で設定します記事API側で選択できるように記事側のbodyを「繰り返しフィールド」にしてMarkdownで書けたりcommentsを設定できたりできるようにいくつか用意しています。今回作ったコメント機能以外にも、拡張できるようにしています。React側でそれに対応したコンポーネントを作る使っているものstyled-component。Comment基本的には仕組みは、先ほど作ったカスタムフィールドのAPIで帰ってくる値を元にコンポーネントを作っています。isRightの場合は画像が右側に表示するようにstyled-componentにpropを渡してスタイルを変更するように書いています。!importantを使っちゃってるところもあります。良くないですね;使ってる理由はこのコンポーネントが描画されるところでは自動的に良い感じのスタイルがつくようになっているのでむりやり上書きする形にしています。良い感じのスタイルがつくようになっているかというと、Markdownなどで変換したhtmlにスタイルを当てたいためそのような仕様にしています。</EntryBody>bodyにapiから取得してきた、繰り返しの設定を行った配列が返ってきます。fieldIdにカスタムフィールド作成時に設定したカスタムフィールド名が返ってきます。返ってきた値によって。表示するコンポーネントを変えてあげることで、さまざまなコンポーネントを作ってUIを再現することができます。【投資を始めました】お金についてのゆるめに勉強2021年12月30日おすすめの本Javascriptを勉強する際に読んでおくと良いなと思った本たちです。リーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。bloom」2021年9月20日フロントエンドやデザインを教えるメンター(Menta)はじめました。2021年9月6日サイトのことWebのこと、Youtubeのこと、3Dのこと、お金のこと、お買い物情報など、興味があることを深堀って記事にしてます。