初めに
こんにちは、フロントエンドを少しやっているエンジニアっぽい人です。
最近まとまった時間ができたので何か作りたいなーって思っていたらこんな面白そうなツイートを見つけました。
Qiitaで有名なやめ太郎さんのツイートです。
おー、いいの発見と思って作ってみることにしました。
ざっくりですが、どのように実装したのか自分の振り返りも込で記事にまとめてみようと思います。
実際に作成したもの
開発環境
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を利用してデプロイ環境を構築しています。
懸念点・改善点
-
storeのtypescript実装ができておらずany型を利用してしまっている - コーディングテストの要件にマッチしていない点がある
- 棒グラフで実装できていない
-
typescriptの実装が不十分 - テストコードを書いていない
-
chart.jsのグラフの色を無理やり実装しており、ライブラリのオプションを活かしきれていない - APIkeyがどうしても隠せない・・・
作ってみての感想
まだ完全にできているわけではないのですが、形にはなりました・・・
データ加工を多分に実装してしまったので、もう少しきれいにコードをかけそうだなと思う点が多々あるので改善点は多く見られました。(途中でめんどくさくなってきてしまったのはここだけの話)
4日で実装できたので、その点は自分のレベルも上がったかなと感じました！！
全体的にディフェンスの部分がまだまだ不十分さを感じたので、今後テストや保守運用の設計を学習していこうかなと思いました。