目次
はじめに
ネットワンでは30年以上のインフラ技術に基づいた知識を使い、サービス開発を展開していこうと動き始めています。サービス開発するためにはインフラ知識に加え、REST APIを操作するプログラミングスキルが必要になります。サービス開発の一環として、Webアプリ内容編（インフラ自動化事前Web診断アプリケーションを開発 -Webアプリ内容編① | ネットワンシステムズ (netone.co.jp)）をご紹介しました。この開発を文系大学出身・前職は広告営業で知識も経験も全くゼロの新人が配属後2か月でプロジェクトに参加し、どのように取り組んだのか、こちらのブログでは紹介していきます。開発業務やプログラミング学習について新たなスキルを身に着けたい、未経験からの人材育成に関心があるそんな方のお役に立てることを目的としています。
プロジェクト紹介
プロジェクトは11月半ばから構想がはじまり、12月から本格的に始動しました。メンバーは、3年目までの若手社員を中心に構成され、設計や開発作業を行いました。プロジェクト起案や診断ロジックに関してはベテラン社員が担当しています。週次ミーティングでの進捗報告のほか、適宜先輩社員のアドバイスを仰ぎながらの取り組みとなりました。各機能の開発、本番環境での総合テスト経て、2月からアプリの運用を開始しています。
トレーニング（配属から始動前）
配属からプロジェクトが開始する12月までの3ヵ月間、基礎知識の習得のため下記トレーニングを行いました。
とにかくアプリ開発に参加できることを目標に、浅く広く知識を得ること意識してコンテンツの受講をすすめ、学習と並行して手を動かす練習にも取り組みました。基礎学習の修了後は、実際のアプリ開発を想定した演習に取り組みました。
学習してすぐにわかる！というわけにはいきませんでした。学習を終えた時点ではサーバー構築、HTML/CSS/JavaScript基礎、アプリ開発など、１つ１つの仕組みと概念は理解できた一方、各技術のつながりを理解できていませんでした。つながりはこの後、実際の開発を通じて徐々に見えてくるようになります。「やっと周囲の会話が理解できるようになってきた」と思えるレベルであったため、開発に向けて不安が大きいスタートとなりました。
Project始動
アプリ開発では設計、開発、テストの流れで進みます。
設計では、アプリに必要な機能や入力および出力するデータについてなど、作業の方向性をまとめた文書を作成します。顧客の要望を要件定義書、作成するアプリの表示デザインを画面設計書、これらを実現するロジックを詳細設計書にまとめ、開発チーム内で共有します。認識の相違をなくすだけでなく、計画的な開発が可能になります。設計フェーズにおいて詳細設計書の作成を担当しました。
どこにどんなデータが入る？整理をして理解する
今回のアプリは、アンケート内容やユーザ情報、回答データをDBに格納し管理しています。そのため、例えば「次へボタンを押すとページが遷移する」という見た目の動作だけでなく、回答データの格納、ユーザーデータの取得など、動作にあわせた適切なテーブル、カラム、値を指定し設計書に記述する必要があります。どのテーブルにどのようなデータが格納されているか、どの値を比較し判断を行うかなどデータベースのテーブル一覧を見ながらテーブル同士のつながりを整理していきました。
作業を始めた段階では、アプリケーションの内側でやりとりが行われているということもあまりしっくり来ていないような状態でしたが、機能概要を記述することでユーザーインターフェースとデータベースの間で行われる入出力のイメージをつかむことができました。
viewの作成
SDIフレーワークでは機能を役割ごとに分割して開発を行うMVCモデルを採用しています。機能はmodel・view・controller によって構成されています。開発作業では主に回答機能の作成を担当しました。
回答画面は1つのHTMLに対しタブを切り替えることで、表示する設問の切り替えを行っています。回答済みの設問に対しては設問リストにチェックのアイコンを表示し、回答状況を可視化することで抜け漏れが無いよう工夫しています。またこのリストは設問の移動に連動して、現在位置が青く表示されます。アンケート名、問題文、回答の選択肢、リストの設問番号はすべてDBのテーブルから取得し、表示しています。
設問タブのactiveがひろえない
設問リストの実装はBootstrap4のtablistを応用しました。デフォルトの機能は、表示しているtabに対応したnavigation bar の色を変更するもので、Tab1が “active” の場合 Tab1に紐づいたnavigationbar1の色がblueになるといった具合です。サンプルコードはタブをスタティックで入力しているため、classにtablist を設定するだけでJSを発動させることができます。
一方、今回のコードではリストをfor文で表示しているため、どのように ”active” に関する分岐処理を行うかを検討する必要がありました。この処理では、for文によって取得されたデータがループしている点に注目しました。設問リストの番号は、DBから取得した設問データにindex処理した値をfor文によって表示しています。そのため、取得した設問番号がループの先頭にくる場合は、画面に表示されていると判断できると考えました。
ループの値による分岐処理を行うことで、Tabの移動に連動するリストを実装できました。
レビューと修正
開発作業では、方向性や内容に齟齬が生じないよう定期的にレビューミーティングを設定しています。開発中のアプリを見ながらデザインの変更、機能の追加といった修正点を確認し、レビュー後はそれらの修正作業を行います。
アンケートタイトルを取得し表示する
結果選択画面の表示に関しても作成後に修正が行われました。この画面では、顧客の回答一覧が表示され、選択することで内容を閲覧できます。
データはすべてDBに格納されたデータを取得し、テーブル形式で表示しています。レビュー時点で表示する情報に過不足があったため、内容の変更を行いました。追加したい情報の一つであるアンケート名は、すでに表示されているデータと異なるテーブルに格納されていたため、HTMLの変更だけでなくcontroller層とService層の記述を変更する必要がありました。
def get_survey_title(self):
answer = self._get_answer(id=self.answer_id)
survey = self._get_survey(id=answer.survey_id)
return survey.title
Service層で、回答データ紐づくアンケート名を取得する関数get_survey_titleを定義します。回答データのテーブルから回答データを取得、そこに含まれるアンケートIDを引数に、アンケートデータのテーブルからアンケートデータを取得します。取得したアンケート情報に含まれるアンケート名（title）を返す処理を行います。
@app.route('/survey/results', methods=['GET'])
@deco.login_required
@deco.endpoint_permission
def survey_results():
service = ResultsService()
service.make_instance()
survey_answers = service.get_answers()
surveys = service.get_surveys()
user_list = service.get_users()
return render_template('survey/result_select.html', data=survey_answers, user_data=user_list, surveys=surveys)
Controller層ではget_survey_titleで返されたデータをsurveysとしてhtmlに渡します。
HTMLでは、回答データのIDとアンケートのIDの一致を条件とするフィルターをかけることで、表示したい結果に含まれるアンケートのデータのみ取得します。リスト型で取得したSurveyデータのtitleのみを指定し、UIに表示します。
アンケート名が表示され、よりわかりやすいページにすることができました。
修正作業の完了後は、総合テストを行います。総合テストでは、実際の利用を想定したテストケースに沿って操作を行いアプリが問題なく稼働することを確認します。同時にマネージャーの確認も取り、アプリ機能の完成を報告します。
アプリのリリース後は営業活動で活用され、お客様へのよりスムーズかつ最適な提案に貢献します。
まとめ
サービス開発に注力するネットワンで、プログラミング未経験の新人がWeb診断アプリの開発に挑戦しました。3か月のトレーニングではネットワーク、プログラミング言語について学習し、その後の開発では設計、開発、運用に携わりました。
設計では詳細設計書を作成し、アプリ内部で行われるデータの入出力のイメージをつかむことができました。開発では、Bootstrapを活用した画面操作に連動する機能を作成し、修正ではDBとの関連を変更することでアプリの改良に取り組みました。運用テストを経てリリースし、お客様への最適な提案に貢献していきます。
初めての開発は、スキルの不足による不安や上手くいかないもどかしい気持ちもありましたが、それでも面白いなという気持ちの方が大きかったです。また、既存のコードを解読する、わからないけれどコードを書いてみる、という経験はプログラミング理解の大きな一助となりました。現在では開発だけでなく、アプリの運用まで担当しています。
プロジェクトメンバーや先輩社員など沢山のサポートあっての開発でしたが、今後は一人で機能を作成できるよう精進してまいります。
※本記事の内容は執筆者個人の見解であり、所属する組織の見解を代表するものではありません。
