あったらいいなと思っていたスキルマップアプリをVueとGoで作ってみた
作ってみたもの
作ったWebアプリは Graphyee と名付けました。
技術と技術は関連しているものなので、「スキルマップをグラフ構造で表現できたら分かりやすくて面白いかな」と思いついたのが経緯です。
まだβ版としていますが、一旦使える感じになったのでノリと勢いで公開してみました。
こんな感じで サンプル は誰でも使えます。
ユーザ認証すると、より細かい スキルマップ が使えます。
技術構成
せっかく作ったので、どうやって作ったかを簡単にご紹介します。
フロントエンド
- Vue 2.6.11
- Vuetify 2.4.0
- Vuex 3.6.2
- axios 0.21.1
- Cytoscape.js 3.18.1
- Auth0
VueでSPAを作り、UI周りのデザインはVuetifyを活用しました。バックエンドのAPI呼び出しはaxiosです。
Cytoscape.jsを使ってグラフ構造を実現しています。jsonでnodeとedgeを定義するとグラフが描画されます。
[{"id":"1","name":"node1"},{"id":"2","name":"node2"},{"id":"3","name":"node3"}]
[{"source":"1","target":"2"},{"source":"2","target":"3"}]
認証機能は、アプリから切り離したかったのでAuth0で実現しています。
Silent AuthenticationやRefresh Token Rotationはこのサイトが理解しやすかったです。
バックエンド
- Go 1.16
- Gin 1.7.1
- GORM 1.21.11
フロントエンドから呼び出されるAPIは、GoとGinで実装し、GORMでDBと接続しています。
Goはパッケージ管理の考え方がまだ模索中なのかな？って印象ですが、そこさえちゃんと理解できれば早く立ち上がるので気に入ってます。Ginも簡単なWebアプリ作るなら一瞬だったので、いい感じです。世の中にサンプルも多そうなでキャッチアップしやすい印象です。
GORMはいわゆるORMのクセみたいなのはありましたけど、普通に使う分には問題なく使えました。
最終的には、生のSQLを書きたくなるんですけどね。
インフラ
インフラはAWSで構築しました。コンテナ化や触ったことないサービスを使ってみようかなとも思いましたが、個人的に一番立ち上がりが早いサービスを選択しています。
ALB＋EC2＋RDSというとてもシンプルな構成です。
ここらへんを見ながら何使うか一瞬悩みましたが、また今度挑戦しようかなと思います。
なぜ作ろうと思ったのか
IT業界で働いていて、「結局、具体的に何をどこまで経験してきて、何が不足しているのか？」を常々考えていたのが根底にあります。さらに、ある技術を網羅的に学んで仕事に活かすことが、自分にとって「塗り絵」をしていくイメージだったのも強く影響しています。
ただ、いちいち思い出して次は何しようかを考えたり、実績を誰かに伝えたりすることは中々面倒くさいのです。そこで、スキルマップを分かりやすく管理できればいいのでは？と思い立ちました。
使えそうな場面
例えばこんなシーンで使えるのかなと想像しています。是非、継続的に使ってみてください。
特にこれから勉強しようとしている人、勉強中の人向けに使えるのかなと想像しています。
- 学習や経験が網羅的にできているか知りたい。
- 学習や経験を計画したり、振り返ったりしたい。
- 今後どんなことを学習・経験すべきか知りたい。
- 自分や誰かの足りない部分を発見したい。
使ってみた方へお願い
求められるものが何なのか、今後作り続ける価値があるのか知りたいので、よろしければアドバイスいただけると嬉しいです！
今後
やりたいことや検証してみたいことはたくさんあります。
もし良いフィードバックをいただけたら、下記以外にも色々試してみたいと思います。
- コンテンツがJavaだけで寂しいので追加したい。
- 認知度を向上して色々フィードバックをもらいたい。
- 誰かのスキルマップとの比較機能を付けたらありがたがられるのか。
- API Gateway＋コンテナ（Lambda/Fargate）にしたら嬉しいのか。
- Github ActionsでCI/CDしたら楽になるのか。
- ランニングコストぐらい回収できる感じにしたい。
- 課金して使える機能と課金の仕組みを入れてみたい。
最後に
作っていて記事になりそうなネタがあればまた投稿するので、その時にまたお会いしましょう。最後までお読みいただき、ありがとうございます！
Discussion