適性検査の一つであるQ-dog練習アプリケーションを開発したので、備忘録としてその過程を記述します。フロントエンドはTypeScript、バックエンドではGolangを使用しています。フレームワークはGinとReactです。
Q-dogとは？
ストレスに強い人材を見抜くための適性検査であり、今回実装したのはその中の図形問題です。
図形問題では以下のように図形が二つ表示されます。その角の合計を答えるテストになっています。
△□
今回の答えは3+4で7になります
完成イメージ
開発の流れ
ディレクトリ構成
cssファイル等は省略しています。
ディレクトリ構成
/
├─ backend
│ ├─ go.mod
│ ├─ go.sum
│ └─ main.go
├─ frontend
│ ├─ public
│ └─ src
│ ├─ components
│ │ ├─ common
│ │ │ └─ sideBar.tsx
│ │ └─ layout
│ │ └─ AppLayout.tsx
│ ├─ pages
│ │ ├─ Home.tsx
│ │ ├─ NoMatch.tsx
│ │ ├─ Report.tsx
│ │ └─ Training.tsx
│ ├─ theme
│ │ └─ theme.ts
│ ├─ App.tsx
│ └─ index.tsx
└─ .gitignore
環境構築の構築
settingやファイル作成を一括でしてくれるコマンド。
command
npx create-react-app プロジェクト名 --template typescript
/homeや/trainingのようにURLで表示するコンポーネントを変更する仕組みを作るコマンド。
command
npm i react-router-dom
vscodeのES7+ React/Redux/React-Native snippetsという拡張機能をインストール。
開発の流れ
コンテンツの追加
基本的には
-
commonフォルダやlayoutフォルダの中で前ページで共通する部分の記述 -
App.tsxにURLを追加 -
pagesフォルダでファイル作成→return()の中に表示するコンテンツ記述
という流れで行います。お好みでpagesフォルダに各ページのcssファイル追加したり前ページ共通のcssファイルをsrc直下に置いたりしてください。
バックエンドの実装
- 問題と選択肢の生成
- フロントエンドにデータを送信
- ユーザーの回答がフロントエンドから帰ってくる
- 正誤判定
- 正解数の集計とフロントエンドへのデータ送信
という流れで通信しています。本アプリは10問正解すると10問分の結果が返ってくるというものなので5が必要になります。
main.go
engine := gin.Default()
上記のコードでエンジンを生成し、engine.GET()やengine.POST()でリクエストを送信している。
CORSの許可を忘れないようにしましょう。engine.USE()で出来ます
おわりに
本アプリを作成するにあたってポテナスさんの動画を参考にしました。ありがとうございます。
今後はMVCモデルでDBと連携させてレポートの部分を充実させたいと考えています。本アプリは以下のGithubにおいてあるのでよければご覧ください。