システム開発研修報告第三弾： 成果物をご紹介します！

こんにちは、アイダです。約4か月という長いシステム開発研修の完結編として、どんな成果物が出来上がったのかを報告します。これまでのブログでは、チーム作りやチームリーダーの想いなどをお伝えしました。 www.intage-ts.com www.intage-ts.com 今回は成果物としてどんなシステムが出来上がったのか？どんな技術が身に付いたのかなどを報告します。それではIさんどうぞ。

はじめに

はじめまして。リサーチシステム二部のIです。
五月になり徐々に気温が上がり暖かくなりテンションが上がっています。外に出た時に感じる「あぁ春の匂いだぁ」の感覚がとても好きです。 と思っていたら気温がぐんと高くなって夏が顔を覗かせてきました。最近では梅雨のような天気ですね。春ってどうしてこんなにも短いのか。 さて、これまでインテージテクノスフィアのシステム開発研修、通称「ワクPy」に関する記事が二つ上がっていますが、 今回はその開発研修の成果物について記事を書くことになりました。

クライアントである人事企画部からの要求

「ワクPy」ではクライアントである人事企画部からの要求をもとに、システムを開発します。

今回の要求は「社内研修受講管理システム」を作ること。

全社員の社内研修受講状態を管理し、社員の研修受講有無の確認、また、社内研修の企画の際に使用するシステムです。

私たちのチームでは人事企画部へのヒアリングを行い、以下のような目的のもと、システムを作ることにしました。

「研修受講メンバー選定のプロセスを効率化する」

主な機能としては、
・複数条件を入力し、その条件に当てはまる社員または研修を検索することができる
・社員または研修の詳細情報を確認することができる（プロフィールなど）
・過去にある特定の研修を受講したメンバー、もしくはある特定の社員が過去受講した研修を一覧で確認することができる

の三つになります。

開発①　～システム全体図～

今回開発したシステムの全体図です。 HTML/CSS/JS(React)で画面を実装し、画面からAPI(Python)を動かし、DBの情報を取得し、画面上に表示するというような流れです。 今回サーバー、データベースはAWSで構築しています。

開発②　～画面～

画面は下図のように構成されており、メインメニューから検索ページへ遷移し、検索ページの下部に表示された結果（一覧）から各詳細ページへ遷移します。

検索ページに遷移すると検索条件を入力することができ、 AND検索またはOR検索ボタンを押すと検索結果がページ下部に表示されます。

検索条件は最大で10個まで指定できます。

AND検索・・入力された条件すべてに当てはまる対象を検索
OR検索・・入力された条件のいずれかに当てはまる対象を検索

下図はAND検索で検索した結果の図です。

青色になっている社員名をクリックすると該当社員の社員詳細ページに遷移します。

また、詳細ページ間（研修詳細⇔社員詳細）は行き来できるようになっていて、 詳細ページ下半分の、履歴（社員詳細であれば研修受講履歴、研修詳細であれば研修を受講した社員）の青色になっている名称部分をクリックすると、 該当の研修、または、社員の詳細ページに遷移します。

下図は研修詳細ページに遷移した画像です。

実際にReactは以下のような設計で実装しました。

各四角の枠はcomponentになっています。

詳細ページへの遷移は、画面の切替と詳細情報の表示（詳細系APIを動かす）を同時に行う必要がありました。

親component（toppage.js）に、遷移したい画面であるcomponent(page)と、クリックした社員名または研修名のidを渡して、 component(page)を切り替えています。

遷移先のcomponent(page)で受け取ったidをもとに、APIが動き、idに基づいた詳細情報を表示しています。

このようにして、検索ページから詳細ページへの遷移、また、詳細ページ間の遷移を実現しました。

ざっくりとした記述にはなってしまいましたが、このようにして、条件検索→詳細確認の一連の流れを叶える画面を実装しました。

開発③　～API～

つづいては、今回の管理システムに必要なデータをサーバーから取得するAPI開発のお話です。

今回作成したAPIは計6つ。
　・検索系
　　1.AND検索結果取得（社員）
　　2.OR検索結果取得（社員）
　　3.AND検索結果取得（研修）
　　4.OR検索結果取得（研修）
　・詳細系
　　5.詳細取得（社員）
　　6.詳細取得（研修）

全てデータを取得するだけ（SQLでいうところのSELECTのみ）なので、HTTPメソッドはGETメソッドのみ使用・・と言いたいところなのですが、 検索系のAPIはPOSTメソッドを使用しました。 その理由として、今回私たちのチームは、「検索条件を最大で10個まで指定できる」という仕様にしているため、GETメソッドのクエリパラメータに検索条件を含めた場合、検索条件が増えてしまうとリクエストが長くなってしまうことや冗長性の面から良くないよね、ということになり、GETメソッドではなく、POSTメソッドを使用しリクエストボディにパラメータ（検索条件）を含めることにしました。

APIのyamlファイルの作成はSwagger Editorを用いて行いました。 ページ右半分でAPIの仕様をビジュアルで確認することができたので、とても便利なツールだと思いました。（月並みな感想ですが…）

開発を進めていくうえでこだわったことや研修を経ての学び

こだわったこと

ここまで今回の研修での成果物を紹介しましたが、ここからは研修の中で工夫したことやこんな学びを得た、といったお話をしようと思います。

私たちのチームでは、「全員が全部できるようになること」をモットーに進めてきました。
具体的にどういうことかというと、API実装担当・画面担当といった固定の割り振りをするのではなく、各機能ごとに担当割り振りを行い、チームメンバー全員が画面もAPIも分かる状態にしました。

担当割り振り：

	社員検索	社員詳細	研修検索	研修詳細
API	Hさん	I（筆者）	Aさん	Tさん
画面	Tさん	Aさん	Hさん	I（筆者）

このルールを決めたことで、先にAPIを実装した人が後の人に教える、先に画面実装した人が後の人に教える、といったことができ、 バグ対応についてもどのメンバーでも対応することができ、負荷分散されました。

学び

私だけでなく、同じチームのメンバー(Aさん、Hさん、Tさん)の、 この長期にわたる研修の中でそれぞれが感じたことや学びをご紹介します。

“あの時もっとこうしていれば！”という経験ができたこと　　--Tさん
開発が一通り終わって全体を振り返った時に要件定義だったり、設計の詰め切れてなかった部分が出てきて、開発に入る前に内容の精査や細かい設計が必要だったなと思った。 開発でも最初の設計だけを考えて開発を進めると、＋αの機能をつけようとしたときに広範囲の改修が必要になってしまい、改修が間に合わなかった。 →設計段階からシステムの拡張や汎用性を考えておくことが重要！

頭の中で描いたものは、実際にやらないとうまくいくかわからない　　--Hさん
→実際にやってみると想定と違うところや足りないところが見えてくる。経験してみないとわからないことがいっぱい！自分で手を動かしてみて初めてユーザーの気持ちややりたいことが見えてきた。

楽しむことの大切さ　　--Aさん
→日々の業務の中で、どうすれば楽しくできるか？ を考える。
　ちょっとしたことで楽しくなれる (雑談、言葉づかい、アイコン…etc.)

→楽しくない要素をとことん排除する。
　マイナス感情のシェア、明日でいいことは明日にまわす、しんどい時に無理しない

この研修の中で得た学びは、開発を進めていく上での工夫や、チームで仕事をしていくこと、日々の業務の進め方などさまざまな気付きを得られる研修でした。 第一弾、第二弾の記事にもあるように、「技術を習得する」だけにとどまらないのがこの開発研修の魅力だと思います。そして現在置かれている状況や担当している業務の違いによっても、この研修で得た学びは人それぞれだと思います。

私自身の学びとしては、以下になります。
「誰にでも分かる」を心掛ける 　
→誰が見ても分かる資料であったり、コードのコメントブロックや変数の付け方など、共に開発を進める人への気遣いが必要だと今回の研修で感じました。

最後に

個人的には開発研修に参加するのに迷いましたが、終わってみて一歩踏み出してよかったなと思います。確実に得るものはありました。 このような研修が立ち上がったように、「ワクワク」を作り出していけたらいいなと思います。