AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

2019年新卒研修を終えて

Pocket

こんにちは。新卒’sです。

4月1日の新元号の発表を聞いたのは入社式後でした。本年度の新卒は4名です。そこから3ヶ月にわたる新卒研修がはじまりました。

その研修の中で、5月下旬から6月末の1ヶ月は開発課題に取り組みました。
後半の2週間に取り組んだ開発課題3を紹介します。

課題

  • AWSを使ってサービスを作る
  • 開発期間は3日程度
  • アイデア出しから実装・テストまでやる

開発の流れ

  1. アイデアソン
  2. 要件定義(機能・データ構造・画面・非機能)
  3. 開発環境構築
  4. 開発・画面デザイン
  5. テストパターン書き出し
  6. テスト
  7. AWS上で本番環境構築
  8. AWSにデプロイ・テスト

アイデアソン

課題解決に焦点を当てて絞り込んだ結果、「マネジメント」を主軸テーマに決定しました。「マネジメント」と組み合わせるモノやサービスを10分間でチームで自由に出し合いました。結果として、100以上の組み合わせが出ました。その後、出された組み合わせに対して投票をおこないました。投票の結果、

「マネジメント」×「投げ銭」

に決まりました。

サービスのコンセプト

「誰かの活躍を褒める」をコンセプトにしました。社内で活躍した人に対してポイントを付与します。

期待される効果としては、以下の3点があげられます。

  • 会社の評価制度だと見えない部分がチーム外にも伝わる
  • 承認欲求が満たされる
  • モチベーション

要件定義

開発期間が1週間と短いため、最低限の機能にしぼって要件定義をしました。

機能要件

誰かの活躍を登録・取得する活躍APIと、ポイントの付与・活躍ごとの合計ポイントの取得を担うポイントAPIを作成しました。

活躍APIの機能

  • 活躍を取得
  • 活躍の登録

ポイントAPIの機能

  • ポイント付与
  • 活躍ごとの合計ポイント取得

データ構造

画面

  • 活躍一覧
  • 活躍詳細
  • 活躍新規作成

ユーザビリティ

  • 活躍・評価(ポイント)が目立つような画面

セキュリティ

  • XSS対策

技術選定

フロントエンド

Vue.jsというSPAのフレームワークを使いました。選定理由としては、以下の2点があげられます。

  • 5月上旬に取り組んだ開発課題2でもVue.jsを採用しており、すぐに開発に取りかかれる
  • コンポーネントという単位で分割できるので、画面ごとに担当を振り分けて同時並行で作業できる

バックエンド

Node.jsのスタンダードなフレームワークであるExpressでAPIを実装しました。
DBは別の研修で使った経験のあるMongoDBを採用しました。
Dockerとdocker-composeを用いて開発環境の統一しました。

本番環境アーキテクチャ

実装

フロントエンド

活躍一覧画面

機能

  • 現時点で投稿されている活躍が一覧で表示
  • 活躍をクリックすることで活躍の詳細が表示
  • 活躍の詳細から活躍内容の確認と投票可能

スクリーンショット


活躍作成画面

機能

  • 名前:活躍した人の名前を入力
  • 題名:活躍内容のテーマ
  • 内容:活躍内容の詳細

スクリーンショット

バックエンド

活躍APIの機能

活躍の取得

  • 日付をクエリとして受け取る
  • クエリのバリデーション
  • 日付を検索条件としてDBから活躍のデータを取得

活躍の登録

  • FromアカウントID・ToアカウントID・活躍タイトル・活躍の内容を受け取る
  • 受信したデータの文字数チェック・空白トリミング
  • 活躍ID・作成時の日付・更新時の日付を追加してDBに保存

ポイントAPIの機能

ポイント付与

  • ポイントが付与された活躍IDを受け取る
  • 活躍IDのフォーマットと既存のものかチェック
  • 活躍IDと作成時の日付をDBに保存

活躍ごとの合計ポイント取得

  • URIから活躍IDを取得
  • 活躍IDをバリデーション
  • 活躍IDを検索条件としてDBからトランザクションの配列を取得
  • 配列のlength=合計ポイント

テスト

テストパターンはメンターから提供されたテンプレートに沿ってスプレッドシートに書き込みました。
開発者とテスターを必ず別の人が担当するようにしました。ねらいは不正の防止と二重チェックです。

バックエンドのAPIはmochaとsupertestというテストモジュールを使って自動テストしました。

成果物

まとめ

アイデア出しからデプロイまでの一連の流れを経験できました。
開発課題を通して、以下の3点が学べました。

  • 開発期間に合わせたスケジュール管理
  • レイアウト設計の重要性
  • コーディングの時間は意外と少ない
Pocket