More than 3 years have passed since last update.

あったらいいなと思っていたスキルマップアプリをVueとGoで作ってみた

Last updated at 2021-10-22Posted at 2021-10-22

作ってみたもの

作ったWebアプリは Graphyee と名付けました。
技術と技術は関連しているものなので、「スキルマップをグラフ構造で表現できたら分かりやすくて面白いかな」と思いついたのが経緯です。
まだβ版としていますが、一旦使える感じになったのでノリと勢いで公開してみました。

こんな感じでサンプルは誰でも使えます。

サンプルは実績を入力しても保存できないのでご注意下さい。

ユーザ認証すると、より細かいスキルマップが使えます。

ユーザ認証していただければ、入力した実績が保存されます。

上記リンクからだとAuth0の認証画面へのリダイレクトにやや時間がかかりますが、そのうち認証画面が出てきます。

せっかく作ったので、どうやって作ったかを簡単にご紹介します。

VueでSPAを作り、UI周りのデザインはVuetifyを活用しました。バックエンドのAPI呼び出しはaxiosです。

Cytoscape.jsを使ってグラフ構造を実現しています。jsonでnodeとedgeを定義するとグラフが描画されます。

sample_node

[{"id":"1","name":"node1"},{"id":"2","name":"node2"},{"id":"3","name":"node3"}]

sample_edge

[{"source":"1","target":"2"},{"source":"2","target":"3"}]

認証機能は、アプリから切り離したかったのでAuth0で実現しています。
Silent AuthenticationやRefresh Token Rotationはこのサイトが理解しやすかったです。

フロントエンドから呼び出されるAPIは、GoとGinで実装し、GORMでDBと接続しています。

Goはパッケージ管理の考え方がまだ模索中なのかな？って印象ですが、そこさえちゃんと理解できれば早く立ち上がるので気に入ってます。Ginも簡単なWebアプリ作るなら一瞬だったので、いい感じです。世の中にサンプルも多そうなでキャッチアップしやすい印象です。

GORMはいわゆるORMのクセみたいなのはありましたけど、普通に使う分には問題なく使えました。
最終的には、生のSQLを書きたくなるんですけどね。

インフラはAWSで構築しました。コンテナ化や触ったことないサービスを使ってみようかなとも思いましたが、個人的に一番立ち上がりが早いサービスを選択しています。

ALB＋EC2＋RDSというとてもシンプルな構成です。

ここらへんを見ながら何使うか一瞬悩みましたが、また今度挑戦しようかなと思います。

IT業界で働いていて、「結局、具体的に何をどこまで経験してきて、何が不足しているのか？」を常々考えていたのが根底にあります。さらに、ある技術を網羅的に学んで仕事に活かすことが、自分にとって「塗り絵」をしていくイメージだったのも強く影響しています。

ただ、いちいち思い出して次は何しようかを考えたり、実績を誰かに伝えたりすることは中々面倒くさいのです。そこで、スキルマップを分かりやすく管理できればいいのでは？と思い立ちました。

例えばこんなシーンで使えるのかなと想像しています。是非、継続的に使ってみてください。
特にこれから勉強しようとしている人、勉強中の人向けに使えるのかなと想像しています。

求められるものが何なのか、今後作り続ける価値があるのか知りたいので、よろしければアドバイスいただけると嬉しいです！

やりたいことや検証してみたいことはたくさんあります。
もし良いフィードバックをいただけたら、下記以外にも色々試してみたいと思います。

作っていて記事になりそうなネタがあればまた投稿するので、その時にまたお会いしましょう。最後までお読みいただき、ありがとうございます！