LoginSignup
4

posted at

ゆめみのフロントエンドコーディングテストをベースにアプリを作ってみた話

初めに

こんにちは、フロントエンドを少しやっているエンジニアっぽい人です。
最近まとまった時間ができたので何か作りたいなーって思っていたらこんな面白そうなツイートを見つけました。

Qiitaで有名なやめ太郎さんのツイートです。
おー、いいの発見と思って作ってみることにしました。

ざっくりですが、どのように実装したのか自分の振り返りも込で記事にまとめてみようと思います。

実際に作成したもの

githubリポジトリリンク
つくったもの

開発環境

macOS 11.6.5
node 16.14.0

packaage.json
{
  "name": "yumemi-coding-test2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.27.1",
    "chart.js": "^3.7.1",
    "core-js": "^3.8.3",
    "firebase-tools": "^10.7.2",
    "vue": "^3.2.13",
    "vue-chartjs": "^4.0.7",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "autoprefixer": "^10.4.5",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.12",
    "prettier": "^2.4.1",
    "tailwindcss": "^3.0.24",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

構成

package.jsonでわかると思いますが、
フレームワークとして、vue3を利用しています。

vuexを利用し、API通信はStore内で行っており、APIライブラリはaxiosを利用しております。
グラフのライブラリはchart.jsを利用してビジュアライズしております。

cssについては、stylesheetを書きたくなかったのでtailwind cssを採用して実装しています。

本番環境のhostingにはfirebase hostingを利用してデプロイ環境を構築しています。

懸念点・改善点

  • storetypescript実装ができておらずany型を利用してしまっている
  • コーディングテストの要件にマッチしていない点がある
    • 棒グラフで実装できていない
    • typescriptの実装が不十分
    • テストコードを書いていない
  • chart.jsのグラフの色を無理やり実装しており、ライブラリのオプションを活かしきれていない
  • APIkeyがどうしても隠せない・・・

作ってみての感想

まだ完全にできているわけではないのですが、形にはなりました・・・
データ加工を多分に実装してしまったので、もう少しきれいにコードをかけそうだなと思う点が多々あるので改善点は多く見られました。(途中でめんどくさくなってきてしまったのはここだけの話)
4日で実装できたので、その点は自分のレベルも上がったかなと感じました!!

全体的にディフェンスの部分がまだまだ不十分さを感じたので、今後テストや保守運用の設計を学習していこうかなと思いました。

参考にしたサイト

API概要 仕様書
chart.js 仕様書

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4