【Klavis】開発詳細

当社の技術スタックや開発詳細を解説した資料です。

Transcript

1. 株式会社KLAVIS 技術スタック 紹介
2. 目次 開発環境/プロセス
 フロントエンド
 バックエンド
 インフラ

3. 開発環境/プロセス 【環境】 - ユーザーの抱えている課題や解決するための仕様の確認はPOや開発リーダーと実施 - ライブラリの選定や実装の設計はエンジニアが担当 - CI/CD も整備されておりテストはすべて CI で実行される - pre-commit を利用した lint などで素早くコードのチェックができる ※ エディタや利用ツールなどの制限はなし(有料のツールも申請にて利用可能) ※ VS Code を利用している開発者が多いため VS Code 向けの設定や推奨 extension などは特に整備されている 開発手法：スクラム（2週間スプリント） チケット アサイン 仕様 確認 実装 コード レビュー マージ
4. 開発環境/プロセス 【実装の流れ】 ・GraphQL の Schema(I/F) を定義 ＜バックエンド＞ ・ resolver の実装 ・ graphene の機能を用いて GraphQL の Schema を自動生成する ＜フロントエンド＞ ・ Schema に対して実行したい Operation(query, mutation, subscription) を 記述 ・ graphql-codegen を利用して React の Hooks 形式での Apollo のクライアントコードと TypeScript の型定義を自動生成 ＜全体＞ ・追加のビジネスロジックや画面詳細設計など を実装に落とし込んでいく 実 装 イ メ ー ジ フ ロ ン ト エ ン ド バ ッ ク エ ン ド GraphQL Schema I/F ビジネスロジックの実装 resolver の実装 自動生成 GraphQL operationの記述 Apollo Client React Hooks 自動生成 API部分 画面実装
5. フロントエンド Dockチーム Webチーム AIチーム invoice チーム 事業部 業務領域 【詳細】 * TypeScript (型注釈、型検査) * React.js (UI) * Next.js (ルーティング、アセットのビルド、レンダリング(ただし SSR は現状は一部に限られている)) * CSS modules + classnames + Sass (CSS in JS) * Ant Design (UI コンポーネント) * Apollo, graphql-codegen (hooks で GraphQL の呼び出し, 状態管理, クライアントコード・型定義の自動生成) * jest, next-page-tester, testing-library, msw, vrt(導入したが CI に組み込んでいない), cypress(利用予定) * msw (API のモック) * eslint, prettier (lint, format)
6. Dockチーム Webチーム AIチーム invoice チーム 事業部 業務領域 バックエンド 【詳細】 * Python * Django (WAF) * Celery (非同期ワーカー) * Graphene (GraphQL のサーバー実装のためのライブラリ) * mypy (型注釈、型検査) * pytest (テスト) * black, flake8, isort, bandit (lint, format)
7. Dockチーム Webチーム AIチーム invoice チーム 事業部 業務領域 インフラ 【詳細】 マネーフォワードの Amazon EKS 上に構築された基盤である ServicePlatform を利用 アプリケーションコンテナは ServicePlatform 上で運用している その他、Aurora for MySQL 8.0、 SQS、 S3、 CloudFront などを利用中 サービスのインフラアーキテクチャの特徴的なところとして、ユーザーからの大量の請求書アップロードを効率的に捌くために Celery と SQS を使った非同期処理の仕組みが挙げられる