プログラミング– category –
-
社内SEが転職用にポートフォリオアプリを作成しました
【】 プロダクト名:Botanispotリンク:botanispot.com概要:観葉植物に特化した店舗情報を地図上で探すことができるユーザー投稿型サービスアイコン:観葉植物と店舗の融合をイメージ※注釈2024年5月時点、愛媛県内の店舗データのみになっております。 リポ... -
【Nuxt3×Rails API】クロスリジン間でCookieの保存・削除がハマったときの対処法
認証などの情報をやり取りしたり、期限を管理したりするのに、よくCookieにトークンを載せるという方法が使用されます。 動かして身につく。RailsAPIとNuxt.jsで作るJWT(JSONWebToken)ログイン認証【22時間超解説】の講義はNuxt2のやり方でしたが、参考... -
【Nuxt3】値を監視する場合v-ifの判定にはnullとundefinedを両方判定に使おう
APIの結果が帰ってきてから描画したい要素をv-ifで判定するとします。 その場合、nullとundefinedを使うとうまく表示されました。 <div v-if="review.rating !== null && review.rating !== undefined"> APIで取得したよ </div> 【... -
【rails】showメソッドのエンドポイントでハマった件
railsのshowメソッドを使用するときに理解できておらずハマりました。 【問題】 VUE側から店舗の情報を取り出すため、GETリクエストでIDを指定するとき大いになる間違えをしていました。 私が指定したエンドポイントです。 (かなり恥ずかしいですが、備忘... -
【Nuxt3】FontAwesomeのインストールと好きなアイコンを使おう
Nuxt3での使い方はドキュメントのあり、色々乗っていたのですが、そのまま使うとエラーが結構出ました。 表示エラーやハイドレーションエラーが起きて結構詰まったので、そうならないカスタイマイズ方法を書きます。 【準備】 インストールする アプリディ... -
【VSCODE】拡張機能が予期せぬエラーで落ちまくるときの解決策
意外と乗ってないので書いてみました。 拡張機能のホストを再起動を選択 Ctr+Shift+Pで再起動を選択します。 Ctr+Shift+Pで拡張機能のバイセクトを実施 これで障害が起きている拡張機能を洗い出せます。 アンインストールしてインストール アンインス... -
【Nuxt3】piniaを使用するとハイドレーションエラーがおこる。
PINIAすごい!SSRすごい! 動かして身につく。RailsAPIとNuxt.jsで作るJWT(JSONWebToken)ログイン認証【22時間超解説】を参考にしました。 教材はNuxt2なので古いので、学んでいるNuxt3に組み替えて作っておりました。 ですが理解半分でログイン認証機能... -
【Nuxt3×Rails7】API通信を行ってみよう
【フロントとバックで通信するときには設定が必要】 RailsとNuxtで通信するのは異なるオリジン間の通信とになるのでCORS設定をしないといけません。 CORS設定を行う CORSとは、オリジン間リソース共有(Cross-Origin Resource Sharing)の略で、異なるオリ... -
【Docker×Nuxt3】npmモジュール入れると重くて起動しない
Docker上でnpm install tailwind 等、他のパッケージを導入したらうまく立ち上げることができなくなった。 tailwindのパッケージはDockerのボリューム上にnode_moduleに入っているのになぜ? 【原因予測】 ①プラグイン関係のファイルがローカルにあって... -
rails7 Docker ソースの変更が反映されない
Version rails:7.0.8ruby:3.1.4Docker:25.0.2 【症状】 railsのソースコードがDocker上だと即時反映されない。 具体例 class EmailValidator < ActiveModel::EachValidator def validate_each (record,attribute,value) #text length max = 255 #属性...