
こんにちは！プロダクト開発部の服部です。

最近、実家の近所にお気に入りのパン屋を見つけて足繁く通っています。
ハード系のパンも美味しいですが、モッチモチのパンも美味しいですよね。

からし明太子を使った“自家製明太子バター”と、クリームチーズをソフトフランス生地で包んでいる「明太フォンデュ」が美味しすぎて病みつきになっています。

コンテナクエリとは？

CSS のコンテナクエリ（@container）は指定したコンテナサイズに合わせてブレイクポイントを切り替えられる機能です。

2023 年 2 月、Firefox がコンテナクエリに対応したことにより、全ブラウザにてコンテナクエリが利用できるようになりました！

コンテナクエリ vs メディアクエリ

コンテナクエリ vs メディアクエリ

コンテナクエリ

コンテナクエリは、その要素自体の幅や高さに基づいてスタイルを適用するため、同じページ内の異なるコンテナで異なるスタイルを適用することが可能になります。

各コンポーネントが自身のレイアウトを制御できるため、コンポーネントを異なるコンテキストで再利用する場合に非常に便利であり、デザインの柔軟性が大幅に向上します。

コンテナクエリ
※ ↑ 要素の親コンテナのサイズに応じてスタイルを適用した例。同じページ内でも、container-typeで指定したコンテナサイズ合わせてブレイクポイントを切り替えられている。

メディアクエリ

メディアクエリ（@media）は、全体のビューポート（ブラウザウィンドウ）サイズ基づいてスタイルを適用します。ページ全体で一貫したスタイルを適用するのは容易ですが、個々の要素やコンポーネントに対して異なるスタイルを適用するのは困難です。

メディアクエリ
※ ↑ viewport のサイズに応じてスタイルを適用した例。同じページ内なので、同じ viewport サイズを参照している。

コンテナクエリと React の相性が良いワケ

コンポーネントベースのライブラリであり、再利用可能な部品として設計されていること： コンテナクエリもまたそれぞれのコンポーネントが自身のレイアウトを管理することを可能にするため、この設計思想に非常に相性が良いです。

再利用性が高いこと： React コンポーネントは再利用可能であるため、異なる親要素（コンテナ）に対して異なるスタイルを適用したい場合が多々あります。コンテナクエリは、コンポーネントが親要素のサイズに基づいてレイアウトを動的に調整することを可能にし、その再利用性をさらに高めます。

たとえば、あるコンポーネントが様々な親要素の中で使用され、それぞれの親要素のサイズに応じてレイアウトを変更する必要がある場合、コンテナクエリを用いることでそのコンポーネントのスタイルを動的に変更することができます。

コンテナクエリの基本的な使い方

container-type プロパティを使用した基本的なコンテナクエリの例を示します。

コンテナクエリにおいて、container-type プロパティは要素をコンテナとして扱うことをブラウザに指示します。

コンテナとして要素を定義する

container-type プロパティを使用して、要素をコンテナとして定義します。このプロパティの値には、inline-size（要素横幅のコンテナサイズ）または size（インライン方向・ブロック方向のコンテナサイズ） を指定できます。

    Hello, world!

ここでは、my-containerクラスを持つ div 要素がコンテナとして機能し、その中に content クラスを持つ子要素が配置されています。

/* container-type プロパティを使用して、.my-container要素をコンテナとして定義 */
.my-container {
  container-type: inline-size;
}

コンテナクエリを適用する

@container ルールを使用して、コンテナのサイズに応じてスタイルを適用します。

.my-container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .content {
    /* styles for container wider than 500px */
    background-color: blue;
    color: white;
  }
}

@container (min-width: 800px) {
  .content {
    /* styles for container wider than 800px */
    background-color: green;
    color: black;
  }
}

CSS では、まず container-type プロパティを使用して my-container クラスの要素をコンテナとして定義しています。その後、@container ルールを使用して、コンテナの幅が 500px 以上と 800px 以上の場合にそれぞれ異なるスタイルを適用しています。

この例では、コンテナの幅が 500px 以上の場合、content クラスの要素の背景色は青、文字色は白になります。また、コンテナの幅が 800px 以上の場合、背景色は緑、文字色は黒に変更されます。

サンプルコードはこちら

このように、コンテナクエリを使用すると、簡単に要素の親コンテナのサイズに応じてスタイルを適用することができます。

メディアクエリを適用すると。。。

@media メディアクエリだと次のようになります。コンテナクエリのサイズの基準がcontainer-typeプロパティーで指定したコンテナであるのに対して、メディアクエリのサイズの基準は viewport です。

@media (min-width: 500px) {
  .content {
    /* styles for viewport wider than 500px */
    background-color: blue;
    color: white;
  }
}

@media (min-width: 800px) {
  .content {
    /* styles for viewport wider than 800px */
    background-color: green;
    color: black;
  }
}

おまけ Chakra UI でコンテナクエリを使うには？

私が関わるプロジェクトのひとつに、Chakra UI（React ui コンポーネントライブラリ） を採用した Web アプリ開発があります。

幅の異なるコンテナ配下で UI コンポーネントを再利用するにあたり、コンテナクエリを利用したい場面がありました。

しかし、現在のところ（2023 年 5 月時点）、container-typeプロパティーは、Chakra UI：Style Propsに記載されていないことから、直接コンテナクエリをサポートしていないようです。

一方で sx プロパティーにメディアクエリ（公式サイトでは@media printを記述できる）とあったので、もしかしたらsxプロパティーを利用してコンテナクエリ実装できるのでは？と考え、早速試してみました。

  This text won't be shown when printing this page.

参考：Chakra UI：The sx Prop

Chakra UI でコンテナクエリを適用してみる

基準となるコンテナを指定する
sx プロパティーを使って、@containerを適用してみる

    Hello, world!

無事適用できました！

サンプルコードはこちら

コンテナクエリを使いこなして、ますます楽しい React ライフを！

おわりに

クラッソーネでは、プロダクトとチームの双方をより良く改善していけるエンジニアを募集中です！

https://www.crassone.co.jp/recruit/engineer/


コンテナクエリと React と Chakra UI


こんにちは、プロダクト開発部の服部です。

初夏を思わせるような陽気が続いていますが、まだまだスギ花粉は飛んでいるようです。

今回は、MUI（Material UI v5）の Date Picker を使った日付選択範囲指定の小技を紹介します。

やりたいこと

実際に業務で「不規則に発生する契約日について、契約日以前の日付へ変更不可の Date Picker カレンダーを実装」というタスクが発生しました。

受け取った日付以前が選択不可の Date Picker カレンダーを実装したいと思います。

（この記事では、Date Picker API のうち、StaticDatePicker APIを利用しています。）

本日が 4 月 18 日で、契約日を直前の金曜日 4 月 15 日であったと仮定すると、できあがったカレンダーのイメージは次の通りです。

|                            何もしない                             |                               契約日を含めない                               |                             契約日を含める                              |
| :---------------------------------------------------------------: | :--------------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| 何もしない | 4月15日を含めない | 4月15日を含める |

契約日を含めない場合（契約日前日までの日付が選択不可）

Date Picker は日付ライブラリに依存しているので、今回は「date-fns」ライブラリを利用しました。
LocalizationProvider コンポーネントでラップして、AdapterDateFns を設定します。

参考：MUI：Date / Time pickers

まずは date-fns のpreviousFriday()関数を利用して、契約日である「直前の金曜日」を取得します。

previousFriday(new Date());

参考：date-fns：previousFriday

Date Picker の便利なプロパティー minDate に日付を設定するだけで、契約日前日までが選択不可になります。（本日が 4 月 18 日の場合のイメージ）

本日が4月18日の場合：4月15日を含めない

minDate={'契約日'}

// 契約日の前日までを選択不可にする
minDate={previousFriday(new Date())}

import { useState } from "react";

import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import StaticDate Picker from "@mui/lab/StaticDate Picker";
import ja from "date-fns/locale/ja";
import { previousFriday} from "date-fns";
import { TextField, Box } from "@mui/material";

// 契約日のダミーデータ作成
// 直前の金曜日を契約日とする
const referenceDate = previousFriday(new Date());

export const App = () => {
  const [value, setValue] = useState(new Date());
  return (

         {
            setValue(newValue);
          }}
          renderInput={(params) => }
          // 契約日前日までが選択不可になる
          minDate={referenceDate}
        />

  );
};

以上で契約日前日までの日付が選択不可となりました。

契約日を含める場合（契約日以前の日付が選択不可）

date-fns のaddDays()関数を利用して、「契約日」に n 日プラスします。

addDays("契約日", n);

// 契約日当日までを選択不可にする
minDate={addDays(previousFriday(new Date()), 1)}

参考：date-fns：addDays

（本日が 4 月 18 日の場合のイメージ）
本日が4月18日の場合：4月15日を含める

import { useState } from "react";

import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import StaticDate Picker from "@mui/lab/StaticDate Picker";
import ja from "date-fns/locale/ja";
import { previousFriday, addDays } from "date-fns";
import { TextField, Box } from "@mui/material";

// 契約日のダミーデータを作成
// 直前の金曜日を契約日とする
const referenceDate = previousFriday(new Date());

// 契約日以前はカレンダーを選択不可にする
// date-fns の addDays を利用して契約日に1日プラス
const theDayAfterReferenceDate = addDays(referenceDate, 1);

export const App = () => {
  const [value, setValue] = useState(new Date());
  return (

         {
            setValue(newValue);
          }}
          renderInput={(params) => }
          // 契約日前日までと契約日が選択不可になる
          minDate={theDayAfterReferenceDate}
        />

  );
};

以上で契約日以前の日付が選択不可となりました。

簡単な実装ですが、やりたいことを実現する方法に辿り着くのに時間がかかってしまいました。（他にも色々な方法があるはず）
予め Date Picker や date-fns でできそうなことを把握しておくことで、日付関連の実装がかなり楽になりそうです。

コードはCodeSandboxに置いておきます。

参考サイト：

mui.com
date-fns

おまけ

React v18.0: March 29, 2022 by The React Team

サンプルコードを書くにあたり、React 17 で書いたコードを React 18 に切り替えたところ、
「ReactDOM.renderは React18 ではサポートされなくなりました。代わりにcreateRootを使用してください」という旨の warning が表示されました。

Warning: ReactDOM.renderis no longer supported in React 18.
Use createRoot instead. Until you switch to the new API,
your app will behave as if it's running React 17.
Learn more: https://reactjs.org/link/switch-to-createroot

React18 でサポートされなくなったReactDOM.renderの代わりにcreateRootを利用したコードに書き換えてみます。
React18 にアップグレードするための方法に従って修正したコードは以下の通りです。

before:

import { render } from "react-dom";
import { StyledEngineProvider } from "@mui/material/styles";

import { App } from "./App";

const rootElement = document.getElementById("root");

render(

  ,
  rootElement
);

after:

import * as ReactDOMClient from "react-dom/client";
import { StyledEngineProvider } from "@mui/material/styles";

import { App } from "./App";

const container = document.getElementById("root");

const root = ReactDOMClient.createRoot(container);

root.render(

);

無事 warning が消えました！

おわりに

クラッソーネでは、プロダクトとチームの双方をより良く改善していけるエンジニアを募集中です！

https://www.crassone.co.jp/recruit/engineer/


MUI(Material UI v5) の Date Picker で、任意の日付以前を選択不可にする


こんにちは、プロダクト開発部の服部です。

もうすぐ12月、クリスマスまでのカウントダウンが始まりましたが、この時期の個人的恒例行事はクリスマスシュトーレンの仕込み作業です。
8月から赤ワインと蜂蜜に漬けてあるフルーツミックスと自家製マスカットレーズン酵母で今年も美味しいシュトーレンを焼きます！

さて、今回の記事ではMUI v5で追加された機能の一部を試すことを目的に、React Hook Formで簡単な商品金額フォームを作ってみたので紹介したいと思います。

https://mui.com/

完成イメージは次の通りです。

商品金額計算フォーム

MUI v5を試してみたい

私が現在開発に関わっているプロダクトではMaterial-UI v4を採用してスタイリングを行っていますが、そろそろMUI v5に移行したいと考えています。

v4 -> v5への移行手順が公式サイトで紹介されていました。
https://mui.com/guides/migration-v4/

MUI v5での大きな変更点

MUI v5へのバージョンアップによる大きな変更点のひとつに、v4で一般的だったmakeStylesを使ったスタイリング方法の基本的廃止（引き続き使えるが非推奨）があります。

公式ブログ:Introducing MUI Core v5.0 の記事内でも紹介されていますが、styled()を使ったコンポーネントのカスタマイズ方法は引き続き残るようです。

import { makeStyles } from '@material-ui/core';
import { Box, Button } from '@material-ui/core';

const useStyles = makeStyles({
  boxStyle: {
    color: 'white',
    backgroundColor: 'blue'
  }
});

const StyledButton = styled(Button)({
  color: 'white',
  backgroundColor: 'blue'
});

sx props

MUI v5で登場したsx propsを利用するとほとんどのMUIコンポーネントに直接スタイルを当てることが可能になり、単発で利用したいスタイルでもわざわざmakeStyles使ってスタイルを作る"あの手間"からも開放されそうです。個人的にはこの便利な機能を多用したいところ。。。

https://mui.com/system/the-sx-prop/

  BOX

  BUTTON

とはいえ、公式サイトでもsx propsはパフォーマンスに影響すると言及されているので、単発のスタイリング以外では利用を避けた方がベターかも知れません。

https://mui.com/system/basics/#performance-tradeoff

React Hook Form の useFieldArray

React Hook Formは高性能で柔軟かつ拡張可能なフォームバリデーションライブラリで、バリデーションルールは全てHTML標準に基づいており、カスタムバリデーションも可能です。

React Hook Formのregisterを利用してMUIのTextField（formやinput）と接続し、useFieldArray（uncontrolledな配列の入力フィールドを操作するためのフック）にnameとcontrolを渡すことで、MUIのTextFieldへの入力値を取得できるようになります。
さらに公式サイトでも紹介されているerror-messageを利用したバリデーションを実装してみました。

https://react-hook-form.com/api/usefieldarray

https://react-hook-form.com/v6/api#ErrorMessage
CodeSandbox上で開発環境の準備をする

それでは、React Hook FormのuseFieldArrayを利用したフォームを作ってMUI v5でスタイリングしていきます。
CodeSandboxのReact TypeScriptテンプレートから新しいSandBoxを作成し、 @mui/material @mui/icons-material、react-hook-form @hookform/error-messageをdependenciesに追加します。

またemotionを利用したいので、@mui/material @emotion/react @emotion/styledも追加します。

CodeSandbox上に作成したmui-react-hook-form-test/srcのファイル構成は次の通りです。

mui-react-hook-form-test
└── src
    ├── index.tsx
    ├── FormValues.ts
    ├── TotalAmount.tsx
    └── App.tsx

index.tsx

CssBaselineを利用するとグローバルでcssをリセットしてくれます。

import { render } from "react-dom";
import {CssBaseline} from '@mui/material';

import App from "./App";

const rootElement = document.getElementById("root");
render(

  ,
  rootElement
);

https://mui.com/components/css-baseline/#global-reset

CssBaselineではなくScopedCssBaselineを利用するとcssのリセットがグローバルではなく子にのみ適用され、v4などからv5への段階的な移行を可能にしてくれます。

https://mui.com/components/css-baseline/#scoping-on-children

FormValues.ts

formのvaluesの型を定義しています。

export type FormValues = {
  name: string;
  items: {
    name: string;
    price: number;
    quantity: number;
  }[];
};
TotalAmount.tsx

計算結果を表示させるTotalAmountコンポーネントです。

import { Typography } from "@mui/material";
import { Control, useWatch } from "react-hook-form";
import { FormValues } from "./FormValues";

type Props = {
  control: Control;
};

export const TotalAmount = ({ control }: Props): JSX.Element => {
  const formValues = useWatch({
    // useWatch 関数は items を監視しその値を返す
    name: "items",
    control
  });
  const total = formValues.reduce(
    (acc, { price, quantity }) =>
      acc + Math.floor((price || 0) * (quantity || 0)),
    0
  );

  const tax = Math.floor(total * 0.1);
  return (
    // MUI v5 から Box 以外では、Typography、Stack、Grid コンポーネントでシステムプロパティーを受け入れるようになった

      合計: {total + tax}円(税{tax}円)

  );
};

App.tsx

import React from "react";

// 利用したい MUI コンポーネントを import
import {
  Box,
  Button,
  Container,
  TextField,
  Stack,
  IconButton
} from "@mui/material";

// 利用したい React Hook Form のフックをimport
import { useForm, useFieldArray } from "react-hook-form";
import {
  Add as AddIcon,
  DeleteOutline as DeleteOutlineIcon
} from "@mui/icons-material";

// React Hook Form でエラーメッセージを表示するための ErrorMessage コンポーネントを import
import { ErrorMessage } from "@hookform/error-message";

// 計算結果を表示させる TotalAmount コンポーネントをimport
import { TotalAmount } from "./TotalAmount";
import { FormValues } from "./FormValues";

export const App = (): JSX.Element => {
  const {

    // register 関数はinput/select の Ref とバリデーションルールを React Hook Form に登録 (register)
    register,

    // reset 関数はフォーム内のフィールドの値とエラーをリセットできる
    reset,
    control,

    // handleSubmit 関数はバリデーションに成功するとフォームデータを渡す
    handleSubmit,

    // errors オブジェクトには、各 input のフォームのエラーまたはエラーメッセージが含まれる
    // バリデーションとエラーメッセージで登録するとエラーメッセージが返される
    formState: { errors }
  } = useForm({

    // defaultValues を省略可能な引数として渡してフォーム全体のデフォルト値を設定し、fields 配列に値を格納
    // defaultValues はカスタムフック内にキャッシュされる
    // defaultValues は reset API でリセットできる
    defaultValues: {
      name: "",
      items: [{ name: "", quantity: 0, price: 0 }]
    },

    // blur イベントからバリデーションがトリガーされる
    mode: "onBlur"
  });

  // useFieldArray に name と control を渡すことで、MUI の TextField への入力値を取得できるようになる
  const { fields, append, remove } = useFieldArray({
    name: "items",
    control
  });

  const onSubmit = (data: FormValues) => console.log(data);

  return (

      {/* Stack コンポーネントは MUI v5 で追加された新しいコンポーネント https://mui.com/components/stack/ */}

        {fields.map((field, index) => {
          return (

            // 必ず fields オブジェクトの id をコンポーネントの key に割り当てる

                {/* remove 関数は特定の位置の input を削除、位置を指定しない場合は全てを削除 */}
                 remove(index)}>

                {/* ErrorMessage コンポーネントは name 属性で関連付けされた入力のエラーメッセージを表示するためのシンプルなコンポーネント */}

          );
        })}

      }

        // append 関数はフィールドの最後に input を追加する
        onClick={() =>
          append({
            name: "",
            quantity: 0,
            price: 0
          })
        }
      >
        行を追加する

            reset({
              name: "",
              items: [{ name: "", quantity: 0, price: 0 }]
            })
          }
        >
          リセット

          送信

  );
};

バリデーションエラーによる個々のエラーメッセージも表示できました😊

バリデーションエラー

コードはCodeSandboxに置いておきます。

React Hook FormとMUI v5を上手く連携させて効率の良いフォーム実装を実現させていきたいと思います！

参考サイト：

mui.com
React Hook Form
おわりに

クラッソーネでは、プロダクトとチームの双方をより良く改善していけるエンジニアを大募集中です。
興味を持っていただけた方、ぜひ私と一度カジュアル面談でお話ししましょう！

https://www.crassone.co.jp/recruit/engineer/


React Hook Form の useFieldArray でフォームを作って MUI v5でスタイリングしてみた

こんにちは！ 
はじめまして、プロダクト開発部の服部です。
私は元々Webデザイナーとして制作会社やITベンチャー企業で働いてきましたが、数年前に業務でReactスキルが必要になったことをきっかけにフロントエンジニアを目指すようになりました。
JavaScriptへの理解不足のままReactの学習を始めてしまったことで（とても！）苦労した経験を元に執筆した著書「<a href="https://www.amazon.co.jp/dp/486354359X/" target="_blank" rel="nofollow noopener noreferrer">基礎から学ぶ React/React Hooks</a>」が発売されました(8/24)。少しでもReact習得に苦戦している人や後輩デザイナーの参考になればとJavaScriptやReactについて学んだことをQiita上で定期的にアウトプットを行っていたところ、出版社に声をかけて頂いたことが出版に至った経緯になります。
クラッソーネに入社した今、フロントエンジニアとしてReact、TypeScript、GraphQLなどを利用したアプリケーションの開発に取り組んでいます。
2021年6月1日に入社し約3ヶ月経過しました。 
入社後あっという間の3ヵ月間でしたが、ずいぶん前から在籍しているような気がします。
<h2 id="%E5%85%A5%E7%A4%BE%E3%82%92%E6%B1%BA%E3%82%81%E3%81%9F%E7%90%86%E7%94%B1"><a class="header-anchor-link" href="#%E5%85%A5%E7%A4%BE%E3%82%92%E6%B1%BA%E3%82%81%E3%81%9F%E7%90%86%E7%94%B1" aria-hidden="true"></a> 入社を決めた理由</h2>
さて、この記事では私がクラッソーネへと入社を決めた理由をお伝えしたいと思います。
皆さんは増え続ける「空き家」問題をご存知でしょうか？
クラッソーネが運営するサービスに「解体工事の一括見積もりWebサービス」があり、社会課題である空き家問題解決を目的としています。
「空き家数及び空き家率の推移（総務省：平成30年住宅・土地統計調査）」によると、昭和63年〜平成30年までの過去30年間について空き家は毎年約15万戸ずつ増加しており、2040年には日本の空き家率は40%を超える言われています。住まいとしての役割を終えそのまま放置されてしまうことで、20年後には日本中は空き家だらけになってしまうと予想されています。
<img src="/images/posts/entry-hattori/entry-hattori-img1.png" alt="空き家数及び空き家率の推移" />
画像引用元：<a href="https://www.stat.go.jp/data/jyutaku/2018/pdf/g_gaiyou.pdf" target="_blank" rel="nofollow noopener noreferrer">平成30年住宅・土地統計調査住宅数概数集計　結果の概要</a>
私は現在築15年ほどのマンションに住んでいます。 
10年先、20年先にこのマンションはどうなっているのだろうか、住人全員が管理費を払っている状態だろうかと心配になります。また離れて暮らす両親が住んでいる実家は間違いなく空き家になってしまうが処分はどうすれば良いのか、思い出のたくさん詰まった大切な家を処分することが出来るのだろうかなど心配ごとは増え続けるばかりです。
なぜ空き家は放置されるのだろうかと調べているうちに高齢化社会、少子化、核家族化、住宅需要の都市部への移動などの様々な社会問題が見えてきました。
地方だけではない、都市部でも空き家問題は大きくなりつつあります。これは決して他人事ではない近いうちに誰もが直面する自分自身の問題なのです。
社会課題である空き家問題解決に貢献できる仕事に関わりたいという想いがますます強くなる中、名古屋に本社がある「クラッソーネ」に出逢いました。そしてご縁あってクラッソーネCEO川口とのカジュアル面談の機会を頂き、その空き家問題解決に取り組むクラッソーネとCEO川口の熱い想いに共感し入社エントリーを決意しました。
<h3 id="%E7%A9%BA%E3%81%8D%E5%AE%B6%E5%95%8F%E9%A1%8C%E3%82%92%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB"><a class="header-anchor-link" href="#%E7%A9%BA%E3%81%8D%E5%AE%B6%E5%95%8F%E9%A1%8C%E3%82%92%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB" aria-hidden="true"></a> 空き家問題を解決するために</h3>
空き家問題解決のためには、解体工事会社との連携が必要不可欠です。
空き家解体は産業廃棄物問題もあり、手続きが煩雑。またユーザーにとっても何だか「怖そう」な解体工事会社の人たちは敬遠されがち。。。。
クラッソーネでは解体工事会社が抱えている課題の本質は何なのか、解体工事会社の業務効率を改善するための仕組み作りのためにはどのようなシステムを開発すれば良いのかを常に現場の声を聞きながら模索しています。
<h2 id="%E5%85%A5%E7%A4%BE%E3%81%97%E3%81%9F%E4%BB%8A"><a class="header-anchor-link" href="#%E5%85%A5%E7%A4%BE%E3%81%97%E3%81%9F%E4%BB%8A" aria-hidden="true"></a> 入社した今</h2>
現在、解体工事会社が幸せになるためのアプリケーションを職能を越えたチームメンバーと共に開発している真っ最中です。世の中にないサービスを作っている訳ですから平坦な道のりではありません。
何がベストなのか手探りしながら、10年後には当たり前の社会のインフラとなるべくサービスをクラッソーネの仲間とともに作り上げていきたいと思います！
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB"><a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
クラッソーネでは、プロダクトとチームの双方をより良く改善していけるエンジニアを大募集中です。 
興味を持っていただけた方、ぜひ私と一度カジュアル面談でお話ししましょう！
<iframe id="zenn-embedded__1bf08baa99fa8" src="https://embed.zenn.studio/card#zenn-embedded__1bf08baa99fa8" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a>


こんにちは！
はじめまして、プロダクト開発部の服部です。

私は元々Webデザイナーとして制作会社やITベンチャー企業で働いてきましたが、数年前に業務でReactスキルが必要になったことをきっかけにフロントエンジニアを目指すようになりました。

JavaScriptへの理解不足のままReactの学習を始めてしまったことで（とても！）苦労した経験を元に執筆した著書「基礎から学ぶ React/React Hooks」が発売されました(8/24)。少しでもReact習得に苦戦している人や後輩デザイナーの参考になればとJavaScriptやReactについて学んだことをQiita上で定期的にアウトプットを行っていたところ、出版社に声をかけて頂いたことが出版に至った経緯になります。

クラッソーネに入社した今、フロントエンジニアとしてReact、TypeScript、GraphQLなどを利用したアプリケーションの開発に取り組んでいます。

2021年6月1日に入社し約3ヶ月経過しました。
入社後あっという間の3ヵ月間でしたが、ずいぶん前から在籍しているような気がします。

入社を決めた理由

さて、この記事では私がクラッソーネへと入社を決めた理由をお伝えしたいと思います。

皆さんは増え続ける「空き家」問題をご存知でしょうか？

クラッソーネが運営するサービスに「解体工事の一括見積もりWebサービス」があり、社会課題である空き家問題解決を目的としています。

「空き家数及び空き家率の推移（総務省：平成30年住宅・土地統計調査）」によると、昭和63年〜平成30年までの過去30年間について空き家は毎年約15万戸ずつ増加しており、2040年には日本の空き家率は40%を超える言われています。住まいとしての役割を終えそのまま放置されてしまうことで、20年後には日本中は空き家だらけになってしまうと予想されています。

空き家数及び空き家率の推移

画像引用元：平成30年住宅・土地統計調査住宅数概数集計　結果の概要

私は現在築15年ほどのマンションに住んでいます。
10年先、20年先にこのマンションはどうなっているのだろうか、住人全員が管理費を払っている状態だろうかと心配になります。また離れて暮らす両親が住んでいる実家は間違いなく空き家になってしまうが処分はどうすれば良いのか、思い出のたくさん詰まった大切な家を処分することが出来るのだろうかなど心配ごとは増え続けるばかりです。

なぜ空き家は放置されるのだろうかと調べているうちに高齢化社会、少子化、核家族化、住宅需要の都市部への移動などの様々な社会問題が見えてきました。

地方だけではない、都市部でも空き家問題は大きくなりつつあります。これは決して他人事ではない近いうちに誰もが直面する自分自身の問題なのです。

社会課題である空き家問題解決に貢献できる仕事に関わりたいという想いがますます強くなる中、名古屋に本社がある「クラッソーネ」に出逢いました。そしてご縁あってクラッソーネCEO川口とのカジュアル面談の機会を頂き、その空き家問題解決に取り組むクラッソーネとCEO川口の熱い想いに共感し入社エントリーを決意しました。

空き家問題を解決するために

空き家問題解決のためには、解体工事会社との連携が必要不可欠です。

空き家解体は産業廃棄物問題もあり、手続きが煩雑。またユーザーにとっても何だか「怖そう」な解体工事会社の人たちは敬遠されがち。。。。

クラッソーネでは解体工事会社が抱えている課題の本質は何なのか、解体工事会社の業務効率を改善するための仕組み作りのためにはどのようなシステムを開発すれば良いのかを常に現場の声を聞きながら模索しています。

入社した今

現在、解体工事会社が幸せになるためのアプリケーションを職能を越えたチームメンバーと共に開発している真っ最中です。世の中にないサービスを作っている訳ですから平坦な道のりではありません。

何がベストなのか手探りしながら、10年後には当たり前の社会のインフラとなるべくサービスをクラッソーネの仲間とともに作り上げていきたいと思います！

おわりに

クラッソーネでは、プロダクトとチームの双方をより良く改善していけるエンジニアを大募集中です。
興味を持っていただけた方、ぜひ私と一度カジュアル面談でお話ししましょう！

https://www.crassone.co.jp/recruit/engineer/


クラッソーネ開発者ブログ

服部麻子が執筆した記事

コンテナクエリと React と Chakra UI

MUI(Material UI v5) の Date Picker で、任意の日付以前を選択不可にする

React Hook Form の useFieldArray でフォームを作って MUI v5でスタイリングしてみた

私が入社を決めた理由

服部 麻子が執筆した記事

コンテナクエリと React と Chakra UI

MUI(Material UI v5) の Date Picker で、任意の日付以前を選択不可にする

React Hook Form の useFieldArray でフォームを作って MUI v5でスタイリングしてみた

私が入社を決めた理由

服部麻子が執筆した記事