はじめに
エナーバンクの共同創業者で、取締役CTOの関根です！
弊社は「エネルギー調達をもっとシンプルに」をビジョンに、エネルギー・環境・デジタルテクノロジーの専門力で、脱炭素実現やエネルギー調達に取り組む企業や官公庁・自治体を支援しています。
これまで創業期からの「エネオク」に始まり、「ソラレコ」や「エネパーク」といった複数のプロダクトをリリースしてきました。
本記事では、エナーバンクのプロダクトを支える基本開発思想とコア技術を紹介します。
基本開発思想：Full-Stack TypeScriptとサーバーレスアーキテクチャー
エナーバンクのプロダクト開発における基本思想となるのは、Full-Stack TypeScriptとサーバーレスアーキテクチャになります。
電力業界、脱炭素化マーケットは変化が激しく、プロダクト側もそれに追従していく必要があります。また、弊社はスタートアップであるため、開発リソースも潤沢にあるわけではありません。
このような背景のもと、スピーディーな開発サイクルを実現する仕組みは何か？と日々試行錯誤を重ねた結果、上記2つを基本思想として採用することに至りました。
Full-Stack TypeScriptとは、その名の通りフロントエンドとバックエンドともにTypeScriptを採用することです。
これにより、レイヤーや役割によって開発言語や担当エンジニアが分断されることなく、全エンジニアがプロダクト中心の開発に向き合える環境が作れます。
その結果、リソースのやりくりなどを抑えることができ、迅速な機能開発が可能になります。
また、TypeScriptの本丸の機能ですが、型安全性を全レイヤーで実現することもでき、チーム開発における品質の担保にもつながります。
（参考記事）
Full-Stack TypeScript という名称に統一しませんか？
次に、サーバーレスアーキテクチャーとは、サーバーなどのインフラストラクチャを管理する必要なしに、アプリケーションとサービスを構築、実行する方法です。
特にバックエンドは、AWS Lambdaを中心としたAWSサービスを最大限活用しています。
実際問題、全くインフラを管理しないということは、外部要因やコストの問題で難しいのですが、基本原則としては徹底することで、間違いないくインフラの運用管理からは解放されていると思います。
結果、プロダクト中心の機能開発をしやすい環境作りを実現していると感じます。
その他、サーバーレスアーキテクチャーにかかる固定費は少なく、従量課金制によるコスト効率の高さもスタートアップにおけるプロダクト開発と親和性が高いと考えています。
（参考記事）
サーバーレスアーキテクチャでのアプリケーションの構築
プロダクトを支えるコア技術
上記の基本思想をもとに、実際のプロダクト開発で活用しているコア技術について紹介します。
AWS Lambda
AWS Lambdaは、Function as a Serviceとして展開されたコンピューティングサービスです。
インスタンスなどのインフラ管理は基本不要で、デプロイされたコードを実行可能で、サーバーレスアーキテクチャーを実現する重要な基盤となります。
エナーバンクでは、API処理、定期実行処理、キューによる実行処理などほぼ全てのバックエンド機能に使っています。
Serverless Framework
エナーバンクのプロダクトの開発規模も大きくなり、プロダクション環境や開発環境など複数環境の運用で、ヒューマンエラー少なくクラウドリソースを管理していくために、IaCツールを使ってAWSリソースを管理しています。
Serverless Frameworkは、AWSリソースをYAMLファイル（もしくは.tsファイル）のコードベースで管理できるIaCツールです。
読者の方もご存じかもしれませんが、AWS純正の類似サービスとして、CloudFormationがあります。
クラウドリソースの管理という点ではどちらも同じなのですが、Serverless Frameworkの方がアプリケーション中心でリソースを管理でき、クラウドリソースの関係性を把握しやすいと感じるため、エナーバンクは標準的なツールとして採用しています。
GET /helloというAPIを作成する場合のserverless.ymlの例
service: hello-api
provider:
name: aws
runtime: nodejs20.x
stage: ${opt:stage, 'dev'} # ステージをパラメータで指定（デフォルトはdev）
region: ap-northeast-1 # 必要に応じてリージョンを設定
functions:
getHello:
handler: src/handlers/hello.handler
events:
- http:
path: hello
method: get
cors: true
また、プラグインも豊富で、PoCだけでなく、プロダクション用開発を強力にサポートする仕組みも整っています。
特に、Serverless Offlineを使うと、ローカル開発環境に開発したLambdaを立ち上げ、動作させることができます。
これにより、AWSにコードをデプロイせずとも、手元で最新のコードの動作を確認することができ、開発者体験が非常に高まります。
また、CI上でもServerless Offlineを立ち上げることができ、自動テスト化にも大変役立ちます。
Next.js x Chakra UI
エナーバンクのWebアプリケーションはNext.js（Pages Router）で作っています。
理由としては、
- Reactの普及具体や今後の開発の発展性
- Next.jsのWebアプリケーションのボイラープレートとしての利便性
- Static-Site Generation(SSG)により、静的なファイルとして出力できること（次のS3の話と関連）
また、エナーバンクに現在、専属のUI/UXデザイナーがいないことや、toCに比べて、toBのプロダクトは、リッチなUIよりも業務でしっかり役立つ機能の充実を求められる傾向があることを鑑みて、フロントエンドにChakra UIというUIフレームワークを利用しています。
UIフレームワークの利用は、メリットデメリットあると思いますが、実際使ってみて、最低限のUI/UXを担保しながら、エンジニアの機能開発スピードを維持できる点は大変有効だと考えています。
数あるUIフレームワークの中から、Chakra UIを採用した理由としては以下になります。
- Next.jsのPages Router（およびApp Router）を公式でサポートしている
- シンプルかつ基本的なアプリケーションで必要となるコンポーネントが用意されている
- カスタマイズ可能でありつつも、デフォルトでも十分BtoBのプロダクション環境で利用できるUIデザインとなっている
AWS S3 + CloudFrontによるホスティング環境
エナーバンクはエネオクやエネパークなど複数のWebアプリケーションを提供しています。
これらのWebホスティング環境をどうするか？は重要な要素になります。
エナーバンクでは、配信サーバーを立てず、サーバーレスアーキテクチャーに則り、AWS S3 + CloudFrontによるホスティング環境を構築しています。
この環境の魅力として、次のようなものがあります。
- 圧倒的な低コスト性（月額数ドル）とホスティング環境の安定性
- HTTPS運用の容易性
- CloudFront Functionsによるエッジ処理が可能
Github Actions
エナーバンクでも数々の作業を自動化するために、Github Actionsを活用しています。
インフラ管理と同様に、デプロイ作業などの定型的な必須タスクもプロダクト中心の開発と考えると省力化していきたい内容です。
エナーバンクでも、自動化できるところは積極的に自動化を試みており、現在、下記の利用ユースケースがあります。
- 本番環境や開発環境へのフロントエンド、バックエンドのデプロイ
- プルリクエスト作成時の自動テスト実行（Lintも含む）
まとめ
エナーバンクのプロダクトを支える基本開発思想とコア技術について紹介しました。
エナーバンクでは、Full-Stack TypeScriptやサーバーレスアーキテクチャーを使い、質の高い開発者体験も維持しつつ、迅速なプロダクト開発を実現しています。
もちろんまだ改善すべき点もありますので、既存＆新規技術の調査を怠らず、常により良いプロダクト開発環境を整備していきます。
最後に
株式会社エナーバンクでは、Full-Stack TypeScriptやサーバーレスアーキテクチャーを活用することで最小限の開発リソースで複数のプロダクトを同時開発しています。
もし事業や技術スタックに興味があるエンジニアの方がいましたら、ぜひ採用ページおよび、エンジニアの求人ページをご覧ください！
良き開発ライフを！
Discussion