こんにちは、HAIRCAMPでフロントエンドを担当している阿部です！今回は弊社で使用している技術スタックに関して、公開していきたいと思います！ <h2 id="h490873bfb8">弊社で使用している技術スタック</h2> <h4 id="hf01129d447">プロジェクトA</h4> フロントエンド: Nuxt.js, TypeScript, Stylusバックエンド: Express, TypeScript, Prisma(ORM)テスト: mochaDB: PostgreSQLインフラ: AWSその他: Docker, Github, Backlog, Slack <h4 id="hdda6d70a28">プロジェクトB</h4> フロントエンド: Nuxt.js, TypeScript, Stylusバックエンド: Express, TypeScript, Prisma(ORM)テスト: jestDB: PostgreSQLインフラ: AWSその他: Docker, circleCI, Github, Backlog, Slack <h4 id="h25be67776b">プロジェクトC </h4> フロントエンド: Nuxt.js, TypeScript, Vuetifyバックエンド: Express, TypeScript, TypeORM(ORM)テスト: jestDB: PostgreSQLインフラ: AWSその他: Docker, Github Actions , Github, Backlog, Slack <h4 id="hfaf7877c36">プロジェクトD</h4> フロントエンド: Next.js, TypeScriptバックエンド: microCMSインフラ: Vercel 各プロジェクトを1〜5名体制で進めています。 <h2 id="hef3312d402">フロントエンドに関して</h2> フロントエンド部分に関しては、Nuxt.jsを中心に使用しており、最近立ち上げたプロジェクトではNext.jsを使用しております。全てのプロジェクトのリポジトリが独立しており、TypeScriptの使用率は100%です。 大規模なプロジェクトではフロント部分でマイクロサービス化をしており、ユーザー画面と法人側で使う管理画面を分けて開発しております。 SSRモードで開発しているプロジェクトとSPAモードで開発しているプロジェクトの2パターンがあります。 現在は全てのプロジェクトがNuxt.js2系で開発しており、来年春に3系に段階的にアップグレードをする予定です。2系→3系のマイグレーション経験が積める良い機会になると思います！フロントエンドは随時募集しておりますので、気になる方はお気軽にお問い合わせください！ 今後の新規プロジェクトではNext.jsの採用も検討しております。 <h2 id="ha70d5d49c0">apiに関して</h2> バックエンドですが、全てのプロジェクトをapiサーバーとしており、REST API通信でJsonデータを返すだけにしております。こちらもTypeScriptを使用しており、全てのプロジェクトで使用率は100%です。 少ない人数で複数プロジェクトを回している為、DBは全てのプロジェクトでPostgreSQLで統一しております。主にPrismaのORMを使用しており、一番直近のプロジェクトでは新しい試みとして、TypeORMを導入いたしました。 設計方針ですが、積極的にクリーンアーキテクチャを採用して開発しており、apiのテストのカバレッジ率は100%のプロジェクトもございます。 課題としては、api側とフロントエンド側の型が統一されていないので、将来的にはapi側の型定義をnpmのmodule化し、フロントエンド部分と型情報を統一しようと考えております！ <h2 id="h765295c1c3">インフラに関して</h2> インフラに関してはメインはAWSを使用しており、Next.jsを使用した小規模プロジェクトではVercelを使用しております。CI・CD部分ではcircleCIとGithub Actionsを使用しており、Vercelで動くプロジェクトに関してはVercelのCI・CDに任せる形にしております。 プロジェクトによってEC2で動いているものやECSを使ってコンテナ基盤で動いているプロジェクトと様々です。現在社内にインフラに強い人材がいなく、外部の技術顧問や業務委託にアドバイスいただきながら進めていっている状況です。 <h2 id="h495085175b">TypeScriptを選定した理由</h2> 弊社では全サービスでTypeScriptを採用しております。フロントエンドではTypeScriptを使うことがデファクトスタンダードになりつつありますが、api側でもTypeScriptを使っている背景に関して次の理由があります。 <ul><li>少人数体制での開発において、キャッチアップや技術共有がやりやすい</li><li>サービスが大規模化してきても堅牢にアプリケーションを保てる</li><li>エコシステムが充実している</li><li>アプリ化を視野に入れている</li></ul> 小規模な開発体制をとっている為、プロジェクトによっては分業体制をとっておらずフロントエンドとapi側の両方を実装します。 その際に言語が統一されているのは、キャッチアップや技術共有の観点からメリットが非常に大きいです。またサービスを高速で作るにあたりNode.jsのnpmの巨大なエコシステムがあるのも大きな魅力の一つです。またTypeScriptの型の怨念を受けられるのでサービスが肥大化しても、ある程度は堅牢に保つことができます。ただライブラリーを取り入れすぎると、バージョンアップ等の保守の工数が嵩む可能性があるので、使う部分と使わない部分の線引きはしっかりと行っております。 HAIRCAMPでは少人数で開発を進めている為、手をあげれば積極的に様々な実装を経験することができます！リーダーポジションや設計の経験が積みやすいのも魅力の一つです😄エンジニアは随時募集しておりますので、気になりましたらお気軽にお問い合わせください！ <a href="https://corp.haircamp.jp/recruit/engineer" target="_blank" rel="noopener noreferrer">https://corp.haircamp.jp/recruit/engineer</a>

"キャリア"の記事一覧