自分のスキルを"見える化"したよ

今回はNotionのデータベースと、Notionと連携できる「[notion2charts](https://notion2charts.com/)」というものを使って
こんな感じで自分のスキルの強み・弱みを見える化してみました！

![notion - 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/ec5c7a5a-3df1-ecde-0d35-ff5f14436f3b.png)

# STEP1：スキルチェックシートを作成する

まず初めに、スキルチェックができるようにチェック項目を作りました。
大きく分けて下記の5つに今回はしてみました。

- バックエンド（PHP、Laravelを想定した内容)
- フロントエンド(Laravelのblade、jQueryの利用を想定した内容)
- インフラ(AWSの利用を想定した内容)
- システム設計(DB設計、機能要件についての内容)
- クライアントワーク・工数管理

それぞれchatGPTさんにもお力添えをいただきながら作ったものがこちら

![notion - 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/ea4b3de9-cd96-593e-628e-a196cdd77f8b.png)

(一部誤字ってるのは見逃してほしいです....)

そして、これのチェックボックスに自分が理解している&できることに対してにチェックを入れる。
これだけでもだいぶ見える化できているのですが、今回はさらにグラフ化していきます。

# STEP2: notion2chartsの準備

https://notion2charts.com/ にアクセスします。
そして、画面中央の「SIGN IN WITH GOOGLE」でサインアップをする。
※この時、「STEP1」で作成したスキルチェックシートが存在するワークスペースにフルアクセスできるアカウントでログインしてください。
![notion - 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/3ad6149a-cb2b-bc45-32a3-a691c1240bdf.png)

サインアップができるとこのような画面になるので「Connect to Notion」をクリック。
![notion - 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/2af68b9a-72a9-cf37-6b39-fc062a118d53.png)

内容を読んで問題なければ「ページを選択する」をクリック。
![notion - 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/8d4916d4-989b-88d7-865d-06f35ecfe290.png)

「STEP1」で作ったスキルチェックシートがあるページを選択し、「アクセスを許可する」をクリックし、
![notion - 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/0421755e-3ef2-b389-1d8a-b32d46ae3b78.png)

このような画面になれば事前準備はOK！
![notion - 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/832ce70d-941a-0485-09b9-ddb736afcbe1.png)

# STEP3: グラフを作ってみる

「STEP2」の最後の画面の「Create chart」をクリック。

今回はスキルをレーダーグラフで見える化したかったので「Radar Chart」を選択し、「Next」をクリック。
![notion - 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/c3b9fc0b-02bc-160b-5127-e9cc9a1b2aca.png)

「STEP1」で作ったスキルチェックシートを選択し、「Next」をクリック。
![notion - 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/d43d52e8-443b-0d15-12ac-3ad2c0ec8727.png)

下記をそれぞれ入力&選択し、「Create Chart」をクリック。
　①グラフのタイトル
　②グラフ上の項目として設定する項目
　③数値としてカウントする項目
![notion - 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/8e2f60f6-0d43-fec1-5ece-75d7d192514a.png)

はい！グラフの完成ー！
左側の項目で、グラフの色が変えられたり、違うグラフにしたりできるのですが、
今回はこれで十分なので割愛します！
![notion - 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/f30b7728-bdc3-cdac-2624-d1440db3ec60.png)

# STEP4: Notionページにグラフを埋め込む

「STEP3」の最後の画面の「Get Embed Link」をクリック。
ポップアップが出てくるので、「Public Embed Link」が選択されていることを確認し、「Copy」をクリック。
※ publicにするとリンクを知っている人が誰でも見れるようになってしまうので、社内秘データとかを取り扱う場合はもう少し調べてみたほうがいいかもしれないです。
(privateでもリンク発行できる方法どなたか知ってたら教えてください...)
![notion - 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/a896d20f-7a96-48a5-be96-495cfa53a909.png)

Notionの「STEP1」のスキルチェックシートがあるページに移動し、リンクを貼り付けすると貼り付け方が3パターン出てくるので「埋め込みを作成する」をクリック。
![notion - 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/45a8367f-9f17-8a03-63b7-f59a160202b0.png)


すると、notion2chartsで作ったグラフが表示されます！
こちらチェックシートを更新した場合も画面をリロードすればグラフは最新化されます。
![notion - 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039645/5b8a966b-8e77-2984-73a9-af14310b03ca.png)

# 最後に

最近、Notionで遊ぶのが日課になっていることもあり、
今回は自分のスキルの強み・弱みをNotionで"見える化"してみました。
やっぱり見える化してみると今後どういう勉強したらいいのかなとか対策が立てやすいのでいいですね。
（インフラ弱過ぎてちょっと悲しくなったのは内緒....)

チェック項目を作るのが前はだるくてなかなか取り組めなかったのですが、chatGPT先生も味方になってくれて
サクッとこんなことができちゃいました。

今後も色々作ってみたいですね！

以上！