Zenn
AIQ Tech Blog (有志)Publicationへの投稿
⭐

Reactで垂直線(縦線)や水平線(横線), SpacerなどUtils系の役立つComponentを作ってみる Part1

まさぴょん
2023/09/24に公開
JavaScript
Next.js
React
TypeScript
component
tech

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

今回は、Reactで、垂直線(縦線)や水平線(横線), SpacerなどUtils系の役立つComponentを作ってみる Part1の記事になります。

垂直線(縦線)のComponent

まずは、垂直線(縦線)のComponentを作成してみました。

VerticalLine.tsx
import { CSSProperties } from "react";

/** Propsの型定義 */
interface PropsType {
  style?: CSSProperties;
}

/**
 * NOTE: VerticalLine
 * => 垂直な縦線 Component
 */
const VerticalLine = (props: PropsType) => {
  /** DefaultStyle: グレーの縦線 */
  const defaultStyle = {
    width: "1px" /* 縦線の幅を設定する */,
    height: "100%" /* コンポーネントの高さに合わせる */,
    backgroundColor: "#AFAEB3" /* 縦線の色を指定 */,
  } as CSSProperties;

  return <div style={props.style ? props.style : defaultStyle}></div>;
};

export default VerticalLine;

例えば、このようなMenu Componentを作成する際に、こういう垂直線(縦線)のComponentがあると役立ちますね。

ちなみに、Menu Componentでは、このように呼び出しています。

Menu.tsx
import { CSSProperties } from "react";
import VerticalLine from "../../ui-elements/line/VerticalLine";

/** Propsの型定義 */
interface PropsType {
  style?: CSSProperties;
}

/**
 * NOTE: Menu
 * => 垂直な縦線 Component
 */
const Menu = (props: PropsType) => {
  const { style } = props;
  /** DefaultStyle: 横並び */
  const defaultStyle = { display: "flex", gap: "12px" } as CSSProperties;

  return (
    <div style={style ? style : defaultStyle}>
      {/* VerticalLine: 垂直線(縦線) Component */}
      <VerticalLine />
      <span>Home</span>
      <VerticalLine />
      <span>My Item</span>
      <VerticalLine />
      <span>Photo</span>
      <VerticalLine />
      <span>Favorite</span>
      <VerticalLine />
    </div>
  );
};

export default Menu;

水平線(横線)のComponent

垂直線(縦線)のComponentに続いて、水平線(横線)のComponentを作ってみました。

HorizontalLine.tsx
import { CSSProperties } from "react";

/** Propsの型定義 */
interface PropsType {
  style?: CSSProperties;
}

/**
 * NOTE: HorizontalLine
 * => 水平線(横線) Component
 */
const HorizontalLine = (props: PropsType) => {
  /** DefaultStyle: グレーの縦線 */
  const defaultStyle = {
    width: "100%" /* 横線の幅を設定する => Defaultは、横幅いっぱいのStyle */,
    height: "1px" /* 横線の太さを設定する */,
    backgroundColor: "#AFAEB3" /* 横線の色を指定 */,
  } as CSSProperties;

  return <div style={props.style ? props.style : defaultStyle}></div>;
};

export default HorizontalLine;

見出しなどの区切りたい要素のすぐ後に水平線(横線)があると、区分けがはっきりするので、いいですね。

Spaceを作ってLayout調整をするSpacer Component

最後に紹介するのは、Layout調整をする際などに役立つSpacer Componentです。

Spacerとして必要そうなCSSプロパティは、プロパティ名そのままPropsとして設定しているので、わかりやすいと思います。

Spacer.tsx
import { CSSProperties } from "react";

/** Propsの型定義 */
interface PropsType {
  /** display Type を変更可能にしておく */
  display?: string;
  width?: string;
  height?: string;
  margin?: string;
  padding?: string;
  /** その他のStyle は、Objectとして、受け入れ Interfaceだけは、用意する */
  styleObj?: CSSProperties;
}

/**
 * NOTE: Spacer
 * => Space を作成するための Layout調整用 Component
 */
const Spacer = (props: PropsType) => {
  /** PropsDataSet */
  console.log("Spacer props", props);
  const { display, width, height, margin, padding, styleObj } = props;
  const displayType = display ? display : "block";
  const widthStr = width ? width : "0";
  const heightStr = height ? height : "0";
  const marginStr = margin ? margin : "0";
  const paddingStr = padding ? padding : "0";
  /** StyleObj */
  const styleDataSet = styleObj ? styleObj : {};

  /** SpacerのStyle */
  const spacerStyle = {
    display: displayType,
    width: widthStr,
    height: heightStr,
    margin: marginStr,
    padding: paddingStr,
    ...styleDataSet,
  } as CSSProperties;

  return <div style={spacerStyle}></div>;
};

export default Spacer;

例えば、Spacer Componentは、次のように、使います。
widthや、heightで、Spaceの幅・高さを作り、さらに、marginの調整も入れるなどなど。
今回は、間隔調整をしているスペースをわかりやすくするために、わざとbackgroundColor: "blue"も設定しています。

Sample.tsx
import Spacer from "../space/Spacer";

const Sample = () => {
  return (
    <div>
      {/* Spacer: 間隔調整 Component */}
      <Spacer
        width={"50px"}
        height={"50px"}
        margin={"12px 15px"}
        styleObj={{ backgroundColor: "blue" }}
      />
    </div>
  );
};
export default Sample;

まとめ

今回は、Reactで、垂直線(縦線)や水平線(横線), SpacerなどUtils系の役立つComponentを作って、ご紹介しました。

Part2, Part3など、引き続き、Reactの役立つUtils系のComponent開発を継続していきたいと思います。

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

https://masanyon.com/

注意事項

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

求む、冒険者！

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

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

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

採用技術 (一部抜粋)

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

エントリー方法

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

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

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

https://www.wantedly.com/projects/1089406

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

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

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

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

Discussion