NEXTSCAPE blog

株式会社ネクストスケープの社員による会社公式ブログです。ネスケラボでは、社員が日頃どのようなことに興味をもっているのか、仕事を通してどのような面白いことに取り組んでいるのかなど、会社や技術に関する情報をマイペースに紹介しています。

MENU

新人研修で社内システムを作った話（技術編）

Azure


こんにちは、Azureビジネス部の金重です。

今年4月に新卒で入社し、Azureというクラウドサービスに初めて触れたり、学生時代に少しUnityで齧った程度のC#を本格的に使用するなど、学ぶことが多い生活を送っています。
本日は昨日に引き続き、新人研修で実施した疑似プロジェクトの紹介です。昨日はプロジェクトの進め方や要件定義～アプリケーション公開までの全体の話を記載していただきましたが、本日は技術面での少し具体的な話をします。

この記事は「NEXTSCAPE Advent Calendar 2022」の24日目です。

qiita.com

疑似プロジェクトとは

新人研修で社内システムを実装したのですが、昨日の記事で紹介していただいているので、詳細はそちらをご覧ください。

blog.nextscape.net

作成物を簡単に説明すると、書籍の追加や検索、貸出情報の登録ができるWebアプリケーションです。左下にいる二宮金次郎が可愛いですね*1。

書籍管理システムトップページ

…それでは技術的な話をしていきます。NEXTSCAPEの社内研修ではどのようなものを作るか、そして一つのWebアプリケーションの構築にあたってどのような工夫をしたかについて、お伝えできればと思います。

技術的な話

システムアーキテクチャ

全体アーキテクチャ

NEXTSCAPEでは開発でAzureを使用する機会が多く、疑似プロジェクトでもAzureで提供されているサービスを中心に開発・運用環境を構築しました。使用した技術は以下の通りです。

  • Azure Active Directory(AzureAD)
    • クラウドベースでID及びアクセス管理をできるサービス
  • Azure Monitor
    • AzureADや各アプリケーションのアクティビティログを収集し、ログに応じてエラー通知などの処理を設計できるサービス
  • Azure App Service
    • Webアプリケーションをホスティングするサービス
  • Azure SQL Database
    • Azure上で管理されるSQLのサービス
  • Azure Logic App
    • Httpリクエストや定期実行のトリガーによってノーコードで処理を実行できるサービス
    • DBとAzureADで社員情報を同期する定期バッチ処理の起動に使用
  • Microsoft Graph
    • Microsoftで管理されるユーザーや組織の情報をREST API、SDKなどの形式で参照・更新できるサービス
  • Azure Key Vault
    • アプリケーションシークレットを安全に管理できるサービス
    • SQLの接続文字列やMicrosoft Graphの認証に必要な情報の管理に使用
  • Azure DevOps
    • Git管理やデプロイ等の開発・運用における諸機能が統合されたサービス
  • Google Books API
    • Googleで提供されている、書籍情報を閲覧できる外部サービス
    • 書影や書籍情報を自動入力する為に使用

…結構ありますね。シンプルにWebアプリケーションを公開するだけであればAzure App ServiceとAzure SQL Databaseだけで良いのですが、ユーザー認証・認可の為にAzureADと連携したり、監視の為にAzure Monitorを導入したり、より良いシステムや開発運用プロセスの為にAzureで提供されるものを含め様々なサービスを活用しました。

全体像が分かったところで、Webアプリケーションの中身の説明に移ります。

クラス設計

クラス設計図

Webアプリケーション作成にあたって、ユーザーの操作画面を表示する為のフロントエンドとデータ操作・外部サービスとの連携を行うバックエンドに分離して、2人で担当を分けて開発しました。また、使用言語は基本的にC#(.NET Framework)で、画面についてはhtmlとJavaScriptで記述しました。

フロントエンドはMVCパターンを使用しました*2。また、書籍・ユーザー情報といったコンテンツを管理するバックエンドとの通信の為に、インターフェースとなるHttpClientクラスを作成しました。特に今回の様なコンテンツ管理システムでは、MVCパターンの採用によって画面レイアウトはView、ルーティングやユーザー操作に関する処理はController、表示するコンテンツの定義はViewModel*3と書く場所が明確になり、スムーズに開発を進められたと思います。

バックエンドはWebAPIで実装し、フロントエンドからのアクセスを受けるAPI層、各ユースケースでのビジネスロジックを記載するサービス層、外部サービスとデータをやり取りするインフラストラクチャ層からなる3層アーキテクチャで構成しました*4。
API層では、フロントエンドからアクセスする為のエンドポイントを設計しました。データに対する基本的な操作であるCRUD*5に加えて、貸出/返却のエンドポイントを作成しました。本来書籍情報の編集と同じUpdate操作ではあるのですが、分けることでフロントエンドからアクセスする際に「タイトルを修正したいときはUpdate、本を借りたいときはCheckoutだ！」と意味的なレベルで考えることができます。*6
また、インフラストラクチャ層ではSQLデータベースを操作するRepository/Queryクラスだけではなく、Google Books、Microsoft Graphとやり取りするクラスをそれぞれ作成しました。今回は書籍情報の取得の際にデータベースから取得するケースとGoogle Books APIでGoogleにHttpリクエストを送って取得するケースがあったのですが、サービス層ではどちらもquery.GetBook(title)、bookapiclient.GetBook(title)のように情報の取得先の差異を気にせずに記述できたため、アーキテクチャのありがたさを身に染みて感じました。

画面設計

画面設計に関しても工夫をしているので紹介します。

画面遷移図

画面設計では画面遷移及び画面レイアウトを設計しましたが、2人での短期間の開発ということもあり、実装・改修コストの削減を意識しました。まず、確認画面をポップアップにすることで画面数を削減しました。また、管理者と一般社員といった権限ごとにページを作成せず、同じ画面で表示するコンテンツを切り替えました。例えば、書籍詳細画面では編集ボタンや一部情報が管理者にのみ表示されます*7。

管理者権限の実装

書籍管理システムの要件として、書籍の追加や情報の書き換えは管理部の方のみ実施でき、一般社員による勝手な追加や書き換えを防ぐ、というものがありました。要するにユーザーの種類によって権限を変える必要がありました。
そこで、AzureADのロールベースアクセス制御のソリューション*8にかなり助けられました。アプリケーション上でAzureAD認証を実施する場合はAzureADで認証用のアプリを作成するのですが、認証アプリの設定で発行する認証トークンに”一般社員”ロールや”管理者”ロールといったロール情報を含めることができます。これによって、フロントエンドで認証トークンを参照することで、ログインユーザーが管理者であるかどうか確認できます。*9

AzureADを用いたロールベースアクセス制御のイメージ

こういった権限管理の方法はトークンで情報を持つかアプリケーション側で情報を持つかといった議論もありますが、今回の様にロールに対する権限がシンプルな場合はトークンで管理すると簡単に実装できます。逆に沢山の機能を提供しているアプリケーションで機能ごとにロールが設定される場合や、権限とロールが一対一の対応ではないなど権限周りのロジックが複雑といった場合にはアプリケーション側でDBにユーザーテーブルをもって権限管理をした方が良いこともあると思います。

研修全体の感想

今回は技術の話を中心にしましたが、疑似プロジェクトでは技術以外にも学ぶことが沢山ありました。開発の中でコミュニケーションやスケジュール管理は勿論、ただ作って終わるのではなく実際に社内で使われる意識をしながら実装や仕様の検討を進めまたことは、案件に入る前に経験できてよかったことの一つだと思います*10。
その他印象に残ったこととして、「コーディングでもそれ以外の意思決定でも、自分で理由を持って判断をし、聞かれたときに説明できるようにすること」と「不確実性を早めに小さくしておくこと」は新人に限らず常に必要なスキルだと感じました。
また、新卒でエンジニアとして企業に勤めると最初の数年間はコーディングのみを担当する場合も多いのではないかと思います。しかし、疑似プロジェクトでは新人2人でスケジュール管理をしたり、要件定義の為にお客様（社内の管理部）とミーティングをしたり、プロジェクトにおける作業全般を実施しました。その中で、PMなどの開発者以外の方の苦労も少し見えた気がします*11。

総じて、プロジェクト管理も行いながらゼロからWebアプリケーションを構築する研修は、プログラミング経験者としても満足感のある研修でした。

株式会社ネクストスケープでは、開発エンジニア(Web,スマートフォンアプリ,xRなど)やプロジェクトマネージャーを募集しております。

ご興味がありましたら、採用ページのエントリーフォームよりご応募いただけますと幸いです。

www.nextscape.net

*1:カーソルを重ねると「月に最低3冊は本を読みましょう！」と言われます

*2:.NET FrameworkではMVCのテンプレートがあり、簡単にアプリケーションを公開できます ASP.NET MVC の概要 | Microsoft Learn

*3:Viewへのマッピング用クラスなのでModelをViewModelと呼んでいますが、議論があるみたいです ASP.NET MVC Model vs ViewModel - Stack Overflow

*4:3層アーキテクチャは疑似プロジェクト前の.NET Core研修で教わったのですが、シンプルで気に入っています。 3層アーキテクチャーとは - 日本 | IBM

*5:Create, Read, Update, Deleteの4つ

*6:REST APIという概念があります。用途ごとに一意のURLを用意する方針の為、例えば書籍情報の取得(Read)についても、検索条件を指定する場合は/api/book/search?title={タイトル}、特定の書籍の場合は/api/book/{bookId}のように分けて実装しました。エンドポイントは外部へのインターフェースなので、使う人の視点で実装するのが望ましいですね。 REST APIとは？ - Qiita

*7:管理者権限が必要なリクエストは画面を経由せずに直接サーバに送信した場合も弾く機能を入れたのですが、そういった攻撃の痕跡は見つかりませんでした

*8:AzureADの設定はこちら 

アプリ ロールを追加してトークンから取得する - Microsoft Entra | Microsoft Learn

*9:この辺りをAzureオンリーで実装できた辺りに、AzureがID管理とWebアプリケーションのホスティングの両方を一括でサポートしていることのありがたみを感じました

*10:自分達のシステムが今でも社内で動いているのはかなり嬉しいです

*11:アジャイル開発においては開発者もプロジェクトマネジメントの知識が必要ではないかという話もあり、こういった経験を最初にできたのはとてもよかったと感じます。 アジャイルマインドについて - NEXTSCAPE blog