🐯

Reactで四角い写真や丸いアイコン写真などのimg系Componentを作る方法(image Component)

まさぴょん

2023/09/28に公開

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！

今回は、Reactで四角い写真や丸いアイコン写真などのimg系Componentを作る方法について解説していきます。

四角い写真のimg Component

まずは、四角い写真のimg Component をご紹介します。

このComponentを利用すると、次のように、角丸の四角い写真が表示できます。

SquarePhotoCard.tsx

import { CSSProperties } from "react";

/** Propsの型定義 */
interface PropsType {
  src: string;
  altText?: string;
  imgWrapperStyle?: CSSProperties;
  imgStyle?: CSSProperties;
}

/**
 * NOTE: SquarePhotoCard
 * => 四角い SquarePhotoCard Component
 */
const SquarePhotoCard = (props: PropsType) => {
  const { src, altText, imgWrapperStyle, imgStyle } = props;
  /** DefaultStyle: 角丸・四角い SquarePhotoCard */
  const defaultStyle = {
    width: "128px",
    height: "128px",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
    objectFit: "cover",
  } as CSSProperties;

  return (
    <div style={imgWrapperStyle ? imgWrapperStyle : undefined}>
      <img
        src={src}
        alt={altText ? altText : ""}
        style={imgStyle ? imgStyle : defaultStyle}
      />
    </div>
  );
};
export default SquarePhotoCard;

丸いアイコン写真のimg Component

続いて、丸いアイコン写真のimg Component をご紹介します。

このComponentを利用すると、次のように、丸い写真が表示できます。

CirclePhotoCard.tsx

import { CSSProperties } from "react";

/** Propsの型定義 */
interface PropsType {
  src: string;
  altText?: string;
  imgStyle?: CSSProperties;
  imgWrapperStyle?: CSSProperties;
}

/**
 * NOTE: CirclePhotoCard
 * => 丸い CirclePhotoCard Component
 */
const CirclePhotoCard = (props: PropsType) => {
  const { src, altText, imgWrapperStyle, imgStyle } = props;
  /** DefaultStyle: 丸い・CirclePhotoCard */
  const defaultStyle = {
    objectFit: "cover",
    width: "62px",
    height: "62px",
    borderRadius: "31px",
  } as CSSProperties;

  return (
    <div style={imgWrapperStyle ? imgWrapperStyle : undefined}>
      <img
        src={src}
        alt={altText ? altText : ""}
        style={imgStyle ? imgStyle : defaultStyle}
      />
    </div>
  );
};
export default CirclePhotoCard;

2つのComponentを作ってから気づいたこと。。。

上記、2つのComponentを作ってから、私は気づきました。。。

これ、1つのPhoto Component でいいじゃんと。。。

両方とも、HTMLの構造上一緒だし、カスタムするStyleもimgタグとWrapperとなるdivタグで共通だし。。。

まあ、Defaultで、よく使うようなStyleのComponentがあるのは、Stylingの手間が省けるし、
サイズを少し変えるだけなどの軽微なカスタムの場合、DefaultのStyle定義を参考にできる方が開発にとっては楽かもと考えたり。。。

そんな感じで、最初はミスった。二重管理の手間でデメリットが、となりましたが、
少しだけ、メリットもあるかな、という結論にいたりました🙆

まとめ

今回は、Reactで四角い写真や丸いアイコン写真などのimg系Componentを作る方法について、ご紹介しました。

最近は、Component作りにハマっているので、いろいろComponentをご紹介していきたいと思います。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

フルリモート・フルフレックスの働きやすい環境！
- 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
- もうフル出社には、戻れなくなります！
経験豊富なエンジニアの先輩方
- 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
- 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
AI関連の最新の技術に触れられるチャンスが多い。
- 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
- ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
- 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
BackEnd: Node.js, Express,Python など
その他技術: Docker, AWS, Git, GitHub など

エントリー方法

私達と東京か札幌で一緒に働ける仲間を募集しています。
詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

データサイエンティスト向け説明

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212

AIQ Tech Blog (有志)Publication

AIQ 株式会社に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab