プログラミング– category –
-
【ActiveStorage】Nuxt3とRailsで画像UP機能まとめ：前編
初心者がNuxt(vue)とRailsでActiveStorageを使って画像アップロードしようと思ったときに詰まったことがかなりありそうだったので、備忘録として記事にしました。 計9個あります。。笑 今回は前編として、後編をまた出します。 【全体の流れ】 フロントエ... -
社内SEが転職用にポートフォリオアプリを作成しました
【】 プロダクト名：Botanispotリンク：botanispot.com概要：観葉植物に特化した店舗情報を地図上で探すことができるユーザー投稿型サービスアイコン:観葉植物と店舗の融合をイメージ※注釈2024年5月時点、愛媛県内の店舗データのみになっております。 リポ... -
【Nuxt3×Rails API】クロスリジン間でCookieの保存・削除がハマったときの対処法
認証などの情報をやり取りしたり、期限を管理したりするのに、よくCookieにトークンを載せるという方法が使用されます。 動かして身につく。RailsAPIとNuxt.jsで作るJWT（JSONWebToken）ログイン認証【22時間超解説】の講義はNuxt２のやり方でしたが、参考... -
【Nuxt３】値を監視する場合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×Nuxt３】npmモジュール入れると重くて起動しない
Docker上でnpm install tailwind 等、他のパッケージを導入したらうまく立ち上げることができなくなった。 tailwindのパッケージはDockerのボリューム上にnode_moduleに入っているのになぜ？ 【原因予測】 ①プラグイン関係のファイルがローカルにあって...
