はじめに
はじめまして! Smart Craft エンジニアの岡部です。札幌からフルリモートで勤務しております！
この度会社でテックブログをはじめることになりました！
皆さんよろしくお願いします!!!... という挨拶だけで終わるのはもったいないので、今回は Smart Craft の技術スタックについて紹介します。
Smart Craft について
「モノづくり産業のニュースタンダードを創る」をミッションとして、製造DX（デジタルトランスフォーメーション）を実現する製造現場 DX プラットフォーム、「Smart Craft」を開発・提供しています。
Smart Craft は、人口不足による労働力減少や多品種少量生産の増加に伴う生産管理の複雑化など製造業の現実的な課題に対応できるよう、「スマートファクトリー」の実現を推進しています。
今までの製造業のシステムは、スクラッチで開発するか、パッケージソフトウェアの一括導入が主流でした。しかし、Smart Craft は SaaS のビジネスモデルを採用し、より手軽で広範囲にわたる製造業の DX を実現する新たなソリューションを提供します。
その一環として、Smart Craft は製造業の DX に必要な機能を一体化した、今までにない新しいプロダクトの開発を進めています。
プロダクトやメンバーの紹介については今後以下の公式サイトや note で掲載予定のため是非ご覧ください。
開発体制
現在は以下の体制で開発しています。
- PdM: 1 人
- エンジニア: 5 人
- フロントエンド: 1 人
- バックエンド/フロントエンド: 3 人（うち 1 人は業務委託）
- インフラ: 1 人（業務委託）
- デザイナー: 1 人（業務委託）
プロダクト立ち上げ期は、各技術領域ごとに特定のエンジニアが開発を担当していましたが、現在は 1 人のエンジニアが必要に応じてフロントエンドからバックエンドまで担当しています。これによりエンジニアが開発を担当できる範囲を広げられるようにしています。
開発方針
限られた人数で最大限の成果を出すために、なるべく自動化をする、マネージドサービスを利用する、各メンバーの強みを活かした技術選定など開発コストや学習コストをなるべく抑えて開発を進めてきました。
これらの方針をもとに以下のような設計やアーキテクチャを採用しています。
GraphQL を用いた、コードファーストアプローチに基づく開発
現在のプロダクトでは、フロントエンドとバックエンドが分離されたアーキテクチャを採用しています。この 2 つのパート間でのデータ通信には、GraphQL を利用しています。
GraphQL を採用した主な理由は、「コードファーストアプローチ」が可能である点です。このアプローチでは、最初にバックエンドで GraphQL API を実装し、その実装されたコードから GraphQL のスキーマを自動生成することで、コードとスキーマの一貫性を保つことができます。さらに、生成されたスキーマからは API のドキュメントが自動生成され、手作業によるドキュメント作成の手間が大幅に削減されます。
また、スキーマから TypeScript の型定義を自動生成するツールも活用しています。これによりフロントエンドエンジニアがバックエンドエンジニアの協力を仰ぐことなくデータ構造を確認でき、タイプミス起因のバグも削減され、よりスムーズな開発プロセスを実現するようにしています。
モノレポ構成
フロントエンドとバックエンドは 1 つのリポジトリで統一されたモノレポ構成を採用しています。この構成の一番の利点は、すべてのコードが同一の場所で管理され、再利用や共有がよりシームレスに行えることです。
現在のプロダクトのフロントエンドには管理者向けと現場作業向けの 2 つの対象があり、管理者向けは PC を対象とし、現場作業者向けはモバイルアプリを対象としています。そのためモノレポ構成を採用し、コードを共有・再利用することで開発が大幅に効率化されます。さらに、自動生成された GraphQL のスキーマファイルも同一リポジトリ内で簡単に共有できます。
技術スタックの紹介
フロントエンド
TypeScript + React + React Native/Expo
開発言語として、TypeScript を採用しています。管理者向けの画面は PC ブラウザを対象にしているため、React を採用しています。現場作業者向けのアプリはネイティブアプリを対象としているため、React Native/Expo を採用しています。さらに PC や Android でも使いたいというニーズに応えるため React Native for Web も併用しています。
GraphQL Code Generator
GraphQL のスキーマから TypeScript の型定義の自動生成は、GraphQL Code Generator を採用しています。これによりフロントエンドとバックエンド間での型定義の不一致を防ぐことできます。
Apollo Client
GraphQL クライアントは Apollo Client を採用しています。クエリの生成やデータのキャッシュの機能が充実しており、開発効率を高められると判断し利用しています。
バックエンド
Ruby/Ruby on Rails
開発言語は Ruby で、フレームワークとして Ruby on Rails の API モードを利用しています。TypeScript/NestJS も検討しましたが、チームメンバーのほとんどが Rails の開発経験があることと、gem によるエコシステムを活用することで学習コストを抑え、開発効率を高められると判断し採用しました。Web API の構築は GraphQL を採用しており、その開発には graphql-ruby を利用しています。
GraphQL Ruby/GraphiQL-Rails
GraphQL の実装・スキーマ出力には GraphQL Ruby を採用しています。また、動作確認をする際の IDE は GraphiQL-Rails を利用しています。
RSpec + FactoryBot
テストコードは RSpec + FactoryBot を採用しています。基本的には実装と一緒にテストを書いており、CI でテストが通らない場合はマージできないようにしています。
また、テストは gem parallel_tests を利用して並列実行しています。
PostgreSQL
データベースは PostgreSQL を採用しています。データベースへアクセスする際は基本的には ActiveRecord を利用しています。
CIサービス
GitHub Actions
GitHub Actions を採用しています。ひと昔前はライブラリキャッシュなど他の CI サービスにある機能が備わっていなかったですが、現在は機能が充実しており、GitHub の Team プラン内で十分に開発に必要な機能を提供しているため採用しました。主に Lint やテストコードの実行と各環境へのデプロイで利用しています。
インフラ
AWS
クラウドサービスは AWS を採用しています。主に利用しているサービスして、バックエンドは Amazon ECS(Fargate) 、フロントエンドは S3、データベースは Amazon RDS を利用しています。
Terraform
構成管理は Terraform を採用し、インフラのコードはすべてコードで管理しています。
監視
Sentry / CloudWatch
フロントエンド/バックエンドでは Sentry を、インフラでは CloudWatch でエラー検知や外形監視をしています。どちらもエラーの発生やしきい値を越えたタイミングで Slack に通知しています。
おわりに
だいぶざっくりですが、現在 Smart Craft で利用している技術スタックについて紹介しました。
今回紹介した技術スタックを表にすると以下のようになります。今後もプロダクトの成長や技術トレンドの変化に対応し、必要な技術を適切に取り入れて行きます!
| 技術領域 | 技術スタック |
|---|---|
| フロントエンド | TypeScript, React, React Native/Expo, GraphQL Code Generator, Apollo Client |
| バックエンド | Ruby, Ruby on Rails, GraphQL Ruby/GraphiQL-Rails, RSpec, FactoryBot, PostgreSQL |
| CIサービス | GitHub Actions |
| インフラ | AWS, Terraform |
| 監視 | Sentry, CloudWatch |
これから各技術領域の詳細な紹介や開発で得た知識を発信するので是非チェックしてください!
Discussion