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

私事ですが、沖縄から東京への引っ越しが完了してやっと一息つきました。
デスク周りを整理するいい機会なので、新居では FlexiSpot のスタンディングデスクを新調し、4K の縦画面モニターも新しく配置しました。

ほんの少しでも開発がしやすくなるといいな〜と思ってる今日この頃です。

foreword

今回の記事ですが、フロントエンドフレームワークの Sapper(Svelte)で pathpida を使ってみた話をしていきたいと思います。

pathpida とは

pathpida は Next.js や Nuxt.js や Sapper の内部リンクを取得するためのライブラリです。

概要

各フレームワークのディレクトリによるルーティング規約に最適化されており、型安全に内部リンクを取得することができます。

pathpida を Sapper で使ってみる

前述にもある通り、今回は Sapper(Svelte)で pathpida を使っていきたいと思います。
Sapper(Svelte)は既にインストール済みの前提で進めます。

下記が、執筆時点でのバージョンです。

svelte: 0.28.0
pathpida: 0.17.0

インストール

npm-run-all もインストールします。
npm-run-all を導入することで、シンプルな記述で npm-scripts を順次・並列実行できます。
特に依存してるわけではないのですが、入れておくと便利です。

npm

npm install pathpida npm-run-all --save-dev

yarn

yarn add pathpida npm-run-all --dev

開発時に pathpida が動くように設定します

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:sapper": "sapper dev",
    "dev:path": "pathpida --ignorePath .gitignore --watch",
    "build": "pathpida --ignorePath .gitignore && sapper build --legacy",
    "export": "pathpida --ignorePath .gitignore && sapper export --legacy"
    // ...other
  }
}

以上です。
pathpida は設定なしに動作します。

あとは開発サーバーを立ち上げるだけで内部リンク取得に必要なオブジェクトが生成されます。
特に複雑な設定など要らず簡単に設定できました。

型安全に内部リンクの取得

以下のように/posts/1に遷移するリンクがあります。

  import { pagesPath } from "$path"

記事1

上の例だと、url の/posts/1が内部リンクとして適してるかどうかは型安全に判定できません。
もしroutes/posts/[id]/index.svelteというファイルが存在しなければページの遷移に失敗してしまいます。

このような内部リンクを型安全に取得し、利用できるようにしてくれるのが pathpida です。

routes が以下のようなディレクトリの場合

routes/index.svelte
routes/about.svelte
routes/posts/index.svelte
routes/posts/[id]/index.svelte

以下の TypeScript のファイルが生成されます

/* eslint-disable */

// prettier-ignore
export const pagesPath = {
  about: {
    $url: (url?: { hash?: string }) => /about${url?.hash ? #${url.hash} : ''}
  },
  posts: {
    _id: (id: string | number) => ({
      $url: (url?: { hash?: string }) => /posts/${id}${url?.hash ? #${url.hash} : ''}
    }),
    $url: (url?: { hash?: string }) => /posts${url?.hash ? #${url.hash} : ''}
  },
  $url: (url?: { hash?: string }) => /${url?.hash ? #${url.hash} : ''}
}

// prettier-ignore
export type PagesPath = typeof pagesPath

svelte で使うイメージはこういう感じです

  import { pagesPath } from "$path"

記事1

型安全に取得したオブジェクトでページ遷移ができました。

型安全なので、オブジェクトから取得できないリンクはエラーが出て気づけたり、型推論によってリンクの候補が出てくるので、候補から取得したいリンクを選択するだけでよい点も便利ですね。

オブジェクトから取得できないリンクを指定した場合
vscode_01

型推論でリンク候補の表示
vscode_02

静的ファイルのパスを型安全に利用する

--enableStaticオプションを追加してください。

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:sapper": "sapper dev",
    "dev:path": "pathpida --ignorePath .gitignore --enableStatic --watch",
    "build": "pathpida --ignorePath .gitignore --enableStatic && sapper build --legacy",
    "export": "pathpida --ignorePath .gitignore --enableStatic && sapper export --legacy"
    // ...other
  }
}

static ディレクトリが以下のような場合

static/favicon.png
static/manifest.json
static/posts/post_1.json
static/posts/post_2.json

$path.ts に以下の オブジェクトが生成されます

// prettier-ignore
export const staticPath = {
  favicon_png: '/favicon.png',
  manifest_json: '/manifest.json',
  posts: {
    post1json: '/posts/post_1.json',
    post2json: '/posts/post_2.json'
  }
} as const

// prettier-ignore
export type StaticPath = typeof staticPath

pagesPath の時と同様に自動生成されたstaticPathを利用して静的ファイルのパスを型安全に取得できます。

クエリパラメータを指定する

pathpida が生成する URL にクエリパラメータを含めたい場合は svelte コンポーネントからQueryorOptionalQuery を export すると、あとは pathpida がよしなに組み込んでくれます。

クエリパラメータが必須なページの場合はQuery、必須でない場合はOptionalQueryで使い分けます
以下がpostsページにクエリパラメータを指定する場合の例です。
Query Type を export してpostsのリンクを pathpida で取得する際にクエリパラメータの指定を行います。

  import { pagesPath } from "$path"

  export type Query = {
    page: number;
    limit: number;
  }

svelte で使うイメージはこういう感じです

	import { pagesPath } from "$path"

記事一覧

また、ドキュメントにもありますが、reference types をクエリパラメータの型に含める際は、絶対パスを利用した dynamic import を利用してください。

TypeScript の制限により、.svelte ファイルから export された型は import できないからです。

https://github.com/aspida/pathpida#warning-in-the-case-of-svelte-file-queryoptionalquery-type-must-not-contain-any-reference-types

公式にある方法とは異なりますが、私は tsconfig.json の設定を変更して path のエイリアスを登録して使う方が好みです

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "lib": ["DOM", "ES2017", "WebWorker"],
    "types": ["svelte", "node"],
    "baseUrl": "./",
    "paths": { "@routes/": ["src/routes/"] }
  },
  "include": ["src//", "src/node_modules//"],
  "exclude": ["nodemodules/*", "sapper_/", "static/"]
}

export type Page = number;
export type Limit = number;

  import { pagesPath } from "$path"

  export type Query = {
    page: import('@routes/posts').Page;
    limit: import('@routes/posts').Limit
  }

ここらは各々の気に入った方法でコーディングするといいと思います。

まとめ

pathpida を使うことで静的ファイルのパスや内部リンクを型安全に取得し、ページ遷移のリンクに利用することができました！

個人的にはうっかりしたリンクのタイプミスをなくせるのがすごく助かってます。
プロジェクト内には、文字列で書かれたページ遷移のリンクがまだ複数あるので、少しずつ pathpida で取得したリンクに置き換えていこうと思います。

皆さんも是非携わっているプロジェクトに pathpida を導入してみてください！

おわりに

クラッソーネでは一緒に働くクルーを大募集してます！
プロダクトをより良いものにしたいきたいエンジニア、常に改善を続けていきたいエンジニアの皆さんからのご連絡をお待ちしております。

少しでも興味を持っていただけた方、ぜひ一度カジュアルにお話ししましょう！

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


pathpidaをSapper(Svelte)で使ってみた

<p>こんにちは！プロダクト開発部の町田です！</p>
<p>つい最近 34 インチのモニターや、初のメカニカルキーボードを導入したのですが、快適にレビューやコーディングができており、とても良い買い物をしたと感じてます。</p>
<h2 id="%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E3%81%8A%E3%81%84%E3%81%A6%E3%81%AE%E9%81%8B%E7%94%A8%E4%B8%8A%E3%81%AE%E8%AA%B2%E9%A1%8C"><a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E3%81%8A%E3%81%84%E3%81%A6%E3%81%AE%E9%81%8B%E7%94%A8%E4%B8%8A%E3%81%AE%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> コードレビューにおいての運用上の課題</h2>
<p>突然ですが皆さんはどのようなルールでコードレビューしていますか？<br />
また、コードレビューでなにか課題を抱えていますか？</p>
<p>私が現在携わってるプロダクトでは２名以上のレビュワーから承認をもらえるとマージできるというルールにしております。</p>
<p>私も同僚のコードをレビューしたり、自分が書いたコードをレビューしてもらうことがありますが、レビュー依頼などコードレビューに関連する通知を稀に見落としてしまうことがありました。</p>
<p>GitHub のデフォルトの通知であるメールの通知だと気づけずに、確認や返信が遅れて次のアクションに移るまでのタイムロスがあり、小さいですが課題を感じていました。</p>
<p>クラッソーネでは、チャットの連携は主に Slack を利用しています。<br />
なので今回は、プルリクエスト関連のイベントがある際に Slack に通知することができる Scheduled reminders を利用してみることにしました。</p>
<h2 id="scheduled-reminders-%E3%81%A8%E3%81%AF"><a class="header-anchor-link" href="#scheduled-reminders-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Scheduled reminders とは</h2>
<p>Scheduled reminders は設定次第でプルリクエストに関する様々な通知をしてくれる機能です。</p>
<p>リアルタイムでの通知に合わせて、プルリクエストのリマインドを複数の時間を指定して設定することができます。</p>
<h2 id="scheduled-reminders-%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9"><a class="header-anchor-link" href="#scheduled-reminders-%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> Scheduled reminders の使い方</h2>
<p>では実際に設定してみましょう。</p>
<p>Scheduled reminders には２つの使い方があります。<br />
それぞれ公式が丁寧なドキュメントを用意しているので参考にしてください。</p>
<ol>
<li>Slack のチャンネルに通知をする</li>
</ol>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7cd0966dc93ca" src="https://embed.zenn.studio/card#zenn-embedded__7cd0966dc93ca" data-content="https%3A%2F%2Fdocs.github.com%2Fja%2Forganizations%2Fmanaging-organization-settings%2Fmanaging-scheduled-reminders-for-your-organization" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.github.com/ja/organizations/managing-organization-settings/managing-scheduled-reminders-for-your-organization" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.github.com/ja/organizations/managing-organization-settings/managing-scheduled-reminders-for-your-organization</a></p>
<ol start="2">
<li>Slack の DM に通知をする</li>
</ol>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a614885a34869" src="https://embed.zenn.studio/card#zenn-embedded__a614885a34869" data-content="https%3A%2F%2Fdocs.github.com%2Fja%2Faccount-and-profile%2Fsetting-up-and-managing-your-github-user-account%2Fmanaging-your-membership-in-organizations%2Fmanaging-your-scheduled-reminders" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-user-account/managing-your-membership-in-organizations/managing-your-scheduled-reminders" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-user-account/managing-your-membership-in-organizations/managing-your-scheduled-reminders</a></p>
<h2 id="%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F"><a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F" aria-hidden="true"></a> 設定してみた</h2>
<p>Slack の DM に通知がくるように設定してみました。</p>
<p>現在はリマインダーを 10 時と 14 時に設定しており、滞留してるレビューはリマインダーが通知してくれるため、滞りなくレビューを進めることができそうです。</p>
<p>リアルタイムの通知については、レビュー依頼、レビューの承認、コードの変更依頼、コメントがあった際に Slack の DM に通知がくるようになっています。</p>
<p><img src="/images/posts/github-scheduled-reminders/scheduled-reminders%E2%88%9202.png" alt="notification" /></p>
<p>設定するとこのような通知がきます。<br />
GitHub の Notifications や GitHub のスマホアプリを開いて通知を確認しなくても良いのでとても楽です！</p>
<p><img src="/images/posts/github-scheduled-reminders/scheduled-reminders%E2%88%9201.png" alt="notification" /></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81"><a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>今回、Slack の個人の DM に通知するリマインダーを設定して利用してみました。レビュー依頼があるとリアルタイムで通知をしてくれるため、コードレビューの依頼が見逃すことが殆どなくなりました！<br />
プルリクエストのコメントも即レスできるようになり、スムーズなコミュニケーションができてると実感しています。</p>
<p>また、気のせいかもしれませんが、Scheduled reminders を利用してからはレビュー依頼が多くなってきている気がしています。(レビューまでの着手が早いことやスムーズなコミュニケーションができてるおかげ？)</p>
<p>これを機にチームの Slack チャンネルへの通知も検討して、開発フローのさらなる改善していければと思います！<br />
この小さい改善の積み重ねが大きい結果を生むことを期待しています。</p>
<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>
<p>クラッソーネでは一緒に働くクルーを大募集してます！<br />
プロダクトをより良いものにしたいきたいエンジニア、常に改善を続けていきたいエンジニアの皆さんからのご連絡をお待ちしております。</p>
<p>少しでも興味を持っていただけた方、ぜひ一度カジュアルにお話ししましょう！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e502a07f8da6" src="https://embed.zenn.studio/card#zenn-embedded__e502a07f8da6" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><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></p>



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

つい最近 34 インチのモニターや、初のメカニカルキーボードを導入したのですが、快適にレビューやコーディングができており、とても良い買い物をしたと感じてます。

コードレビューにおいての運用上の課題

突然ですが皆さんはどのようなルールでコードレビューしていますか？
また、コードレビューでなにか課題を抱えていますか？

私が現在携わってるプロダクトでは２名以上のレビュワーから承認をもらえるとマージできるというルールにしております。

私も同僚のコードをレビューしたり、自分が書いたコードをレビューしてもらうことがありますが、レビュー依頼などコードレビューに関連する通知を稀に見落としてしまうことがありました。

GitHub のデフォルトの通知であるメールの通知だと気づけずに、確認や返信が遅れて次のアクションに移るまでのタイムロスがあり、小さいですが課題を感じていました。

クラッソーネでは、チャットの連携は主に Slack を利用しています。
なので今回は、プルリクエスト関連のイベントがある際に Slack に通知することができる Scheduled reminders を利用してみることにしました。

Scheduled reminders とは

Scheduled reminders は設定次第でプルリクエストに関する様々な通知をしてくれる機能です。

リアルタイムでの通知に合わせて、プルリクエストのリマインドを複数の時間を指定して設定することができます。

Scheduled reminders の使い方

では実際に設定してみましょう。

Scheduled reminders には２つの使い方があります。
それぞれ公式が丁寧なドキュメントを用意しているので参考にしてください。

Slack のチャンネルに通知をする

https://docs.github.com/ja/organizations/managing-organization-settings/managing-scheduled-reminders-for-your-organization

Slack の DM に通知をする

https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-user-account/managing-your-membership-in-organizations/managing-your-scheduled-reminders

設定してみた

Slack の DM に通知がくるように設定してみました。

現在はリマインダーを 10 時と 14 時に設定しており、滞留してるレビューはリマインダーが通知してくれるため、滞りなくレビューを進めることができそうです。

リアルタイムの通知については、レビュー依頼、レビューの承認、コードの変更依頼、コメントがあった際に Slack の DM に通知がくるようになっています。

notification

設定するとこのような通知がきます。
GitHub の Notifications や GitHub のスマホアプリを開いて通知を確認しなくても良いのでとても楽です！

notification

まとめ

今回、Slack の個人の DM に通知するリマインダーを設定して利用してみました。レビュー依頼があるとリアルタイムで通知をしてくれるため、コードレビューの依頼が見逃すことが殆どなくなりました！
プルリクエストのコメントも即レスできるようになり、スムーズなコミュニケーションができてると実感しています。

また、気のせいかもしれませんが、Scheduled reminders を利用してからはレビュー依頼が多くなってきている気がしています。(レビューまでの着手が早いことやスムーズなコミュニケーションができてるおかげ？)

これを機にチームの Slack チャンネルへの通知も検討して、開発フローのさらなる改善していければと思います！
この小さい改善の積み重ねが大きい結果を生むことを期待しています。

おわりに

クラッソーネでは一緒に働くクルーを大募集してます！
プロダクトをより良いものにしたいきたいエンジニア、常に改善を続けていきたいエンジニアの皆さんからのご連絡をお待ちしております。

少しでも興味を持っていただけた方、ぜひ一度カジュアルにお話ししましょう！

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


GitHubのScheduled remindersが便利だった話

<p>こんにちは！<br />
はじめまして、プロダクト開発部の町田です！</p>
<p>前書きですが、そろそろ秋・冬に向けて衣替えの季節かと思います。<br />
沖縄在住の私は日々の気温が未だ 30 度を超えるので衣替えするのはまだまだ先になりそうです(早く冬服着たいな...)</p>
<p>さて、今回は私がクラッソーネに入社に至るまでと、クラッソーネに入社して何をしているのかについて書いていきたいと思います！</p>
<h2 id="%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B"><a class="header-anchor-link" href="#%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> 自己紹介</h2>
<p>まずは私のことを知ってもらいたいので、簡単に自己紹介をします</p>
<blockquote>
<ul>
<li>1999 年 9 月 13 日生まれ</li>
<li>中学を卒業後に建築業界で働いた後、エンジニアにキャリアチェンジ</li>
<li>受託会社を経てクラッソーネに入社</li>
</ul>
</blockquote>
<p>クラッソーネに入社する前までは主に<code>TypeScript</code>を使って Web アプリケーション開発をしてました。<br />
少数精鋭で開発をしており、バックエンドからフロントエンド、インフラなど色々な経験をさせていただきました。</p>
<p>中卒で建築業界に入り、 IT 業界へキャリアチェンジしたことについては、我ながら珍しい経歴だと思い、面接ではあえて強みとして話題にしてました！</p>
<h2 id="%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AB%E3%81%AA%E3%82%8B%E5%89%8D%E3%81%AF%E4%BD%95%E3%82%92%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F%E3%81%8B"><a class="header-anchor-link" href="#%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AB%E3%81%AA%E3%82%8B%E5%89%8D%E3%81%AF%E4%BD%95%E3%82%92%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F%E3%81%8B" aria-hidden="true"></a> エンジニアになる前は何をしていたか</h2>
<p>エンジニアとしての道をスタートする前は、建設現場で働いておりました。</p>
<p>毎日朝 5 時に起きて現場に出発し、現場からの帰りは 21 時以降になることが多く、毎日汗水をたらして働いていたのを今でも鮮明に覚えています。</p>
<p>4 年と半年ほど建設現場で働いており、現場での職長も務めるようになった頃に、エンジニアになるきっかけが訪れました。</p>
<p>中卒、高卒向けのエンジニアインターンの存在を知人を通して知り、ハードなものづくりから、ソフトなものづくりへの興味が湧いてきたのがちょうどこのタイミングでした。<br />
このインターンへの参加が自分の人生の大きなターニングポイントなると感じました。</p>
<p>悩んだ結果、建設業の仕事を辞めてインターンに参加すると決意しました。<br />
参加資格を得るために現場終わりに日々勉強していたのがとても懐かしく感じます。</p>
<p>努力が実ったのか、インターンの参加枠に無事選んでいただき、私のエンジニア人生がスタートしました！</p>
<h2 id="%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%AB%E5%85%A5%E7%A4%BE%E3%82%92%E6%B1%BA%E3%82%81%E3%81%9F%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91"><a class="header-anchor-link" href="#%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%AB%E5%85%A5%E7%A4%BE%E3%82%92%E6%B1%BA%E3%82%81%E3%81%9F%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91" aria-hidden="true"></a> クラッソーネに入社を決めたきっかけ</h2>
<p>入社を決めたきっかけには、大きく３つの理由がありました。</p>
<h4 id="%EF%BC%91%E3%81%A4%E7%9B%AE%E3%81%AF%E3%80%81%E8%87%AA%E8%BA%AB%E3%81%AE%E5%BB%BA%E7%AF%89%E6%A5%AD%E7%95%8C%E3%81%A7%E3%81%AE%E7%9F%A5%E8%A6%8B%E3%81%8C%E6%A5%AD%E5%8B%99%E3%81%AE%E4%B8%AD%E3%81%A7%E6%B4%BB%E3%81%8B%E3%81%9B%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84%E3%81%8B%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%EF%BC%91%E3%81%A4%E7%9B%AE%E3%81%AF%E3%80%81%E8%87%AA%E8%BA%AB%E3%81%AE%E5%BB%BA%E7%AF%89%E6%A5%AD%E7%95%8C%E3%81%A7%E3%81%AE%E7%9F%A5%E8%A6%8B%E3%81%8C%E6%A5%AD%E5%8B%99%E3%81%AE%E4%B8%AD%E3%81%A7%E6%B4%BB%E3%81%8B%E3%81%9B%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84%E3%81%8B%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> １つ目は、自身の建築業界での知見が業務の中で活かせるのではないかと思ったこと</h4>
<p>解体業界といえど、工事現場で働く環境は変わりません。<br />
自身の建築業界での経験と得られた知見から、サービスの機能開発や方針などの意思決定に関わりたいと強く思っていました。</p>
<h4 id="%EF%BC%92%E3%81%A4%E7%9B%AE%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%8C%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6%E8%A7%A3%E4%BD%93%E5%B7%A5%E4%BA%8B%E7%8F%BE%E5%A0%B4%E3%81%AE-dx-%E5%8C%96%E3%81%8C%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E5%BB%BA%E7%AF%89%E6%A5%AD%E7%95%8C%E3%81%AB%E6%A7%98%E3%80%85%E3%81%AA%E5%BD%B1%E9%9F%BF%E3%82%92%E4%B8%8E%E3%81%88%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E6%9C%9F%E5%BE%85%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%EF%BC%92%E3%81%A4%E7%9B%AE%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%8C%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6%E8%A7%A3%E4%BD%93%E5%B7%A5%E4%BA%8B%E7%8F%BE%E5%A0%B4%E3%81%AE-dx-%E5%8C%96%E3%81%8C%E8%A1%8C%E3%82%8F%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E5%BB%BA%E7%AF%89%E6%A5%AD%E7%95%8C%E3%81%AB%E6%A7%98%E3%80%85%E3%81%AA%E5%BD%B1%E9%9F%BF%E3%82%92%E4%B8%8E%E3%81%88%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E6%9C%9F%E5%BE%85%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> ２つ目は、クラッソーネが提供するサービスを通して解体工事現場の DX 化が行われることで、建築業界に様々な影響を与えることを期待したこと</h4>
<ul>
<li>解体工事が促進することで建設工事の仕事が増加し、建築人材の需要の増加が見込める</li>
<li>近年の IT 人材の需要の増加みたいに、建築人材の需要が高まり、建築人材の 3K(きつい、汚い、危険)などのイメージが払拭される</li>
</ul>
<p>まだまだあると思いますが、私は建築業界にとても愛着があるため、業界人の地位向上や、楽しく安全に働ける現場作りなどには積極的に貢献していきたいと思っております。</p>
<h4 id="%EF%BC%93%E3%81%A4%E7%9B%AE%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%AE%E9%96%8B%E7%99%BA%E3%83%81%E3%83%BC%E3%83%A0%E3%81%AB%E3%82%B8%E3%83%A7%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E8%87%AA%E8%BA%AB%E3%81%AE%E8%89%B2%E3%82%93%E3%81%AA%E5%81%B4%E9%9D%A2%E3%81%A7%E3%81%AE%E6%88%90%E9%95%B7%E3%81%8C%E8%A6%8B%E8%BE%BC%E3%82%81%E3%82%8B%E3%81%A8%E6%84%9F%E3%81%98%E3%81%9F%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%EF%BC%93%E3%81%A4%E7%9B%AE%E3%81%AF%E3%80%81%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%AE%E9%96%8B%E7%99%BA%E3%83%81%E3%83%BC%E3%83%A0%E3%81%AB%E3%82%B8%E3%83%A7%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E8%87%AA%E8%BA%AB%E3%81%AE%E8%89%B2%E3%82%93%E3%81%AA%E5%81%B4%E9%9D%A2%E3%81%A7%E3%81%AE%E6%88%90%E9%95%B7%E3%81%8C%E8%A6%8B%E8%BE%BC%E3%82%81%E3%82%8B%E3%81%A8%E6%84%9F%E3%81%98%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> ３つ目は、クラッソーネの開発チームにジョインすることで、自身の色んな側面での成長が見込めると感じたこと</h4>
<p>クラッソーネに入社する前の選考フローにて、開発メンバーと何度か面談させていただきました。<br />
その中で感じた開発メンバーのプロダクトに対する熱意、チームの雰囲気の良さなどに惹かれました。<br />
開発メンバーは様々な業界を経験しており、色んな知見が集まった上で開発に臨めることから、「技術的にも人間的にも成長するならクラッソーネだ！」と強く思い、「一緒に働きたい」と切に思いました。</p>
<p>以上の事からクラッソーネへの入社を決めました。</p>
<h2 id="%E3%81%A9%E3%82%93%E3%81%AA%E3%81%93%E3%81%A8%E3%82%92%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B"><a class="header-anchor-link" href="#%E3%81%A9%E3%82%93%E3%81%AA%E3%81%93%E3%81%A8%E3%82%92%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B" aria-hidden="true"></a> どんなことをしているのか</h2>
<p>現在私がいるチームでは、解体工事会社向けに業務支援を行うためのサービスを開発しています。</p>
<p>バックエンドは<strong>Ruby on Rails</strong>、フロントエンドは<strong>Next.js, TypeScript</strong>で開発しています。<br />
Web API には <strong>GraphQL</strong>を採用しており、エコシステムも充実してきた事から、快適に開発することができています。(とはいえ課題も山積みですが...)</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b6bb912d7fc06" src="https://embed.zenn.studio/card#zenn-embedded__b6bb912d7fc06" data-content="https%3A%2F%2Ftech.crassone.jp%2Fposts%2Ftypesafe-graphql-with-typescript-and-codegen" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tech.crassone.jp/posts/typesafe-graphql-with-typescript-and-codegen" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tech.crassone.jp/posts/typesafe-graphql-with-typescript-and-codegen</a></p>
<p>また、技術やその基盤に関する提案・改善もチーム全体を通して頻繁に行われており、プロダクトをより良くしていこうといるメンバーが集まっております。<br />
頭ごなしに意見や提案が否定されることはなく、とても<strong>心理的安全性</strong>の高い環境だと感じています。</p>
<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>
<p>クラッソーネでは一緒に働くクルーを大募集してます！</p>
<p>少しでも興味を持っていただけた方、ぜひ一度カジュアルにお話ししましょう！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4d6ec9c75aa2c" src="https://embed.zenn.studio/card#zenn-embedded__4d6ec9c75aa2c" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><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></p>



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

前書きですが、そろそろ秋・冬に向けて衣替えの季節かと思います。
沖縄在住の私は日々の気温が未だ 30 度を超えるので衣替えするのはまだまだ先になりそうです(早く冬服着たいな...)

さて、今回は私がクラッソーネに入社に至るまでと、クラッソーネに入社して何をしているのかについて書いていきたいと思います！

自己紹介

まずは私のことを知ってもらいたいので、簡単に自己紹介をします

> - 1999 年 9 月 13 日生まれ
> - 中学を卒業後に建築業界で働いた後、エンジニアにキャリアチェンジ
> - 受託会社を経てクラッソーネに入社

クラッソーネに入社する前までは主にTypeScriptを使って Web アプリケーション開発をしてました。
少数精鋭で開発をしており、バックエンドからフロントエンド、インフラなど色々な経験をさせていただきました。

中卒で建築業界に入り、 IT 業界へキャリアチェンジしたことについては、我ながら珍しい経歴だと思い、面接ではあえて強みとして話題にしてました！

エンジニアになる前は何をしていたか

エンジニアとしての道をスタートする前は、建設現場で働いておりました。

毎日朝 5 時に起きて現場に出発し、現場からの帰りは 21 時以降になることが多く、毎日汗水をたらして働いていたのを今でも鮮明に覚えています。

4 年と半年ほど建設現場で働いており、現場での職長も務めるようになった頃に、エンジニアになるきっかけが訪れました。

中卒、高卒向けのエンジニアインターンの存在を知人を通して知り、ハードなものづくりから、ソフトなものづくりへの興味が湧いてきたのがちょうどこのタイミングでした。
このインターンへの参加が自分の人生の大きなターニングポイントなると感じました。

悩んだ結果、建設業の仕事を辞めてインターンに参加すると決意しました。
参加資格を得るために現場終わりに日々勉強していたのがとても懐かしく感じます。

努力が実ったのか、インターンの参加枠に無事選んでいただき、私のエンジニア人生がスタートしました！

クラッソーネに入社を決めたきっかけ

入社を決めたきっかけには、大きく３つの理由がありました。

１つ目は、自身の建築業界での知見が業務の中で活かせるのではないかと思ったこと

解体業界といえど、工事現場で働く環境は変わりません。
自身の建築業界での経験と得られた知見から、サービスの機能開発や方針などの意思決定に関わりたいと強く思っていました。

２つ目は、クラッソーネが提供するサービスを通して解体工事現場の DX 化が行われることで、建築業界に様々な影響を与えることを期待したこと

解体工事が促進することで建設工事の仕事が増加し、建築人材の需要の増加が見込める
近年の IT 人材の需要の増加みたいに、建築人材の需要が高まり、建築人材の 3K(きつい、汚い、危険)などのイメージが払拭される

まだまだあると思いますが、私は建築業界にとても愛着があるため、業界人の地位向上や、楽しく安全に働ける現場作りなどには積極的に貢献していきたいと思っております。

３つ目は、クラッソーネの開発チームにジョインすることで、自身の色んな側面での成長が見込めると感じたこと

クラッソーネに入社する前の選考フローにて、開発メンバーと何度か面談させていただきました。
その中で感じた開発メンバーのプロダクトに対する熱意、チームの雰囲気の良さなどに惹かれました。
開発メンバーは様々な業界を経験しており、色んな知見が集まった上で開発に臨めることから、「技術的にも人間的にも成長するならクラッソーネだ！」と強く思い、「一緒に働きたい」と切に思いました。

以上の事からクラッソーネへの入社を決めました。

どんなことをしているのか

現在私がいるチームでは、解体工事会社向けに業務支援を行うためのサービスを開発しています。

バックエンドはRuby on Rails、フロントエンドはNext.js, TypeScriptで開発しています。
Web API には GraphQLを採用しており、エコシステムも充実してきた事から、快適に開発することができています。(とはいえ課題も山積みですが...)

https://tech.crassone.jp/posts/typesafe-graphql-with-typescript-and-codegen

また、技術やその基盤に関する提案・改善もチーム全体を通して頻繁に行われており、プロダクトをより良くしていこうといるメンバーが集まっております。
頭ごなしに意見や提案が否定されることはなく、とても心理的安全性の高い環境だと感じています。

おわりに

クラッソーネでは一緒に働くクルーを大募集してます！

少しでも興味を持っていただけた方、ぜひ一度カジュアルにお話ししましょう！

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


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

町田連が執筆した記事

pathpidaをSapper(Svelte)で使ってみた

GitHubのScheduled remindersが便利だった話

クラッソーネに入社しました！

町田 連が執筆した記事

pathpidaをSapper(Svelte)で使ってみた

GitHubのScheduled remindersが便利だった話

クラッソーネに入社しました！

町田連が執筆した記事