初学者の備忘録です。もっと良い方法や誤りがございましたらご指摘頂けると幸いです。 vueで作成したログインフォームからログイン後にuserのidを取得してヘッダー等のリンクに仕込む方法です（例 users/1)。 ※vuexがインストール済みという前提です。 実装の流れ ①controller/createでuserのidをjson形式で呼び出す ②vue/login componentでaxios.post後にjsonデータを受け取るようにする ③vuexで受け取ったjson形式のuserのidをuserIdとして保存するmutationを作成する ④vue/header componentでlinkにidを仕込む Rails側の実装 api/sessions.controller class Api::SessionsController < ApplicationController def create @user = User.find_by(email: params[:session][:email].downcase) log_in @user render json: { id: @user.id } end end render json: { id: @user.id}でpostリクエスト後に@userのidを呼び出す。 Vue側の実装 Login.vue <script> import axios from 'axios'; data() { return { session: { email: '', password: '', } } }, createSession: function () { axios.post('/api/login', { session: this.session }) .then(response => { const id = response.data.id this.$store.commit('setId', id), this.$router.push({ path: '/'}) }) </script> const id = response.data.idでjson形式のuser.idを定数idに保存する。 以降の箇所は次のvuexで実装します。 store.js import { createStore } from 'vuex' export const store = createStore ({ state() { return { userId: 0 } }, mutations: { setId: (state, id) => { state.userId = id } } }) mutationsではstateとidを引数としてidには前述のresponse.data.idで取り出した定数idの値を与えます。 ※userId:0は初期値の設定なので0に意味はありません。 これでstate.userId = idによりuserIdには最終的にログインしたuserのidが返り値として保存されるようになります。 後はこれも前述の通り、this.$store.commit('setId', id)でmutationを実行し、ログイン後にuserIdというVueのコンポーネント共通で使用できるkeyにuserのidを保存できます。 Header.vue <template> <router-link :to="{name: 'show', params: {id: $store.state.userId}}">マイページ </router-link> </template> router-linkのparamsに仕組まれた「$store.state.userId」はstore.jsのuserIdの値が代入されます。 従ってこのリンクをクリックすると'/users/1'のようにログイン中のユーザーに応じたページを表示できます。

最近気づいた俺、css書けない、、、、、 ど素人の状態からwebアプリ開発を始めて早1年。 htmlもcssもよくわからない状態で現場にぶち込まれて、vueを触り始めたもんだから、まあわからん。 なんとなく、javascriptが書けるようになってきてvue.jsへの理解が進むと 少し楽しくなってきた。 その時は、UIフレームワークとしてvuetify.jsを使用していたので まあ、ほとんどといっていいほど、cssの調整することはなかった。 あったとしても、widhtいじったり、background-color調整したり。 まあそんなんだから、マジでcssがわからない状態だった(笑) そんな状態であるとき、ふと自分でvue.js　firebase でブログを立ち上げてみた 。まだデプロイしていないのだが、 まあ、cssがわからなすぎて、スタイルがひどい。 vuetifyでclassにスタイルを入れる記法に慣れていたので、 今更styleタグなんていじりたくもなかったし 最小限にしたかった。 そんなこんなでたどり着いたのがそう、tailwindcss tailwindcssのドキュメントが微妙にわかりずらくて(´;ω;｀)挫折 当初はドキュメントを見てフォルダを作成したが、これがうまくいかない。 英語なもんだから、purgeもよくわからんし、buildもうまくいっていない。 さて、前置きが長くなったがここから本題。 vue.jsにおける正しい、tailwindcssの環境構築方法 若干公式とは外れた方法ではあるが、buildに必要なファイルはすべてはいっているので 問題なしと思われる。 まずは、普通にプロジェクトを立ち上げていく。 $vue create your-project-name プロジェクトが立ち上がったら、 $cd your-project-name でそのファイルパスまでいき $vue add tailwind これで、tailwindcssに必要なすべてのファイルが入る。 あとは、いつも通り、起動してあげればいい。 ビルドもすべてしてくれるからvue-cliチーム本当に助かる！

作ってみたもの 作ったWebアプリは Graphyee と名付けました。 技術と技術は関連しているものなので、「スキルマップをグラフ構造で表現できたら分かりやすくて面白いかな」と思いついたのが経緯です。 まだβ版としていますが、一旦使える感じになったのでノリと勢いで公開してみました。 こんな感じで サンプル は誰でも使えます。 サンプルは実績を入力しても保存できないのでご注意下さい。 ユーザ認証すると、より細かい スキルマップ が使えます。 ユーザ認証していただければ、入力した実績が保存されます。 上記リンクからだとAuth0の認証画面へのリダイレクトにやや時間がかかりますが、そのうち認証画面が出てきます。 技術構成 せっかく作ったので、どうやって作ったかを簡単にご紹介します。 フロントエンド 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を定義するとグラフが描画されます。 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はこのサイトが理解しやすかったです。 バックエンド 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したら楽になるのか。 ランニングコストぐらい回収できる感じにしたい。 課金して使える機能と課金の仕組みを入れてみたい。 最後に 作っていて記事になりそうなネタがあればまた投稿するので、その時にまたお会いしましょう。最後までお読みいただき、ありがとうございます！