記事一覧
Rails×Nuxt.jsで無限スクロールを導入する
デモページ このクルクルしたやつを無限スクロールというそうです。 まずは参考記事をズラッと全部読むと導入していけると思います。 https://peachscript.github.io/vu…
RspecとJestを導入する
こちらの記事を参考にすれば導入できます。 ほか参考知識 FactoryBotモデルインスタンス生成のgem https://qiita.com/morrr/items/f1d3ac46b029ccddd017 spec/ser_spec…
dockerfileの復習
自分なりに説明できるようにまとめていきます。
Dockerとは？パソコン上に仮想環境を作れるツールです。
仮想環境とは？物理的なハードウェアを持たず仮想的にOSを動かし、アプリケーションを実行させる環境
ハードウェアとは→http://kccn.konan-u.ac.jp/information/cs/cyber01/cy1_hdw.htm
OS（Operating System）とは
シ
railsのデータ取得速度を改善する
今回の記事は自身の作成しているアプリの改善日記みたいなものです。
rails によく起こるN+1問題はgemのbulletをいれてある程度は解消しました。
しかしながら大量のデータを扱ったことがないので、大量のseedデータを投入して速度を早くしていこうと思います。
とりあえずは一人のpostが1000件ずつにしていきます。
まずは全体投稿のページですが、
こちらはデータが何件に増えよう
AWSにデプロイしたNuxt×RailsアプリでS3を稼働させる
本番環境(AWS・ECS)でS３を使用する際にハマったのでこちらに記述します。
結論S3用のVPCエンドポイントがなかった。
その際に出てたエラーはこちら
オリジン「https://www.foodcom.work」からの「https://foodcom-api.work/api/v1/posts」でのXMLHttpRequestへのアクセスは、CORSポリシーによってブロックされています：
Rails×Nuxt.jsで無限スクロールを導入する
デモページ
このクルクルしたやつを無限スクロールというそうです。
まずは参考記事をズラッと全部読むと導入していけると思います。
https://peachscript.github.io/vue-infinite-loading/guide/
https://rightcode.co.jp/blog/information-technology/vue-js-seo-infinite-sc
Nuxt.js firebaseでゲストログイン機能を実装する
本日はゲストログイン機能を実装していきたいと思います。
完成イメージ
といってもゲストログインのように見せかけて普通にログインさせる機能です。
サンプルアプリですのでこれが簡単かなと思います。
ボタンの作成
front/components/beforeLogin/gestLoginLink.vue<template> <v-btn outlined dark color="
インフラ構成図を作成する
作成した際にテンプレートでCroudを選択
アイコンの選択
左端の部分にアイコン選択画面があります。そちらで好きなものを選択します。
使っていけばなんとなくわかってくるのですが初めて使う時につまずいた点だけ書きます。
矢印の設定
画像にホバーすると青い矢印が出てきますのでこれをクリックします。
そうすると矢印がでてきます。そのままくっつけたい画像にくっつけます。
ER図を作成する時に
RspecとJestを導入する
こちらの記事を参考にすれば導入できます。
ほか参考知識
FactoryBotモデルインスタンス生成のgem
https://qiita.com/morrr/items/f1d3ac46b029ccddd017
spec/ser_spec.rbRSpec.describedescribe（述べる,描くって意味）
ただテストする
docker-compose run api bundle
Docker×Rails×Nuxtデプロイの知識をまとめてみる
自身で制作しているアプリがある程度形になってきたのでデプロイしようと思います。
そのための事前学習として使う技術をまとめてみました。
開発環境で使っている技術https://qiita.com/Shogo1222/items/8b8fc4c65632844a453f
Docker
仮想環境を構築するためのツール
https://engineer-life.dev/docker/
引用し
Nuxt.js watchで値を監視する
どういう時につかうか？
何かを監視しておき、その値が変わったらなにか処理をしたい、メソッドを発火させたいなど。
ちなみに値を帰す処理の場合はcomputed,そうでない場合はwatchを使うそうです。
watch の使い方
dataで用意されているものなら何でも監視できる
data () { return { src: 'https://picsum.photos/200/2
RailsのApi通信データを整形する（Active Model Serializer）
Active Model Serializer
ざっくりした使い方は以下の記事に記載してあります
何ができるのかjsonデータの整形ができる。
私のapiモードのrailsだと
api/vi/usersというurlにアクセスするとusersControllerのindexアクションに飛びusersの値を返してくれます。
このjsonデータの中身を整形してくれるのがActive Model
Nuxt.jsコンポーネントは疎結合に
疎結合と密結合
一緒に勉強していた友達が「このコンポーネントは疎結合になっててうまく作れたと思うんだよね～」などという言葉を使っていて「なにそれ？」となったので調べてみました。
疎結合お互いの関わりが薄くて、分けるのが楽になっている状態
密結合お互いの関わりがごちゃごちゃと組み合っていて分けるのが大変な状態
例として
人間の体は密結合です。
頭だけ貸して？と言われてかせませんよね
逆に
Nuxt.js,Vue.js命名規則
昨日深夜寝る前にUdemyの動画を見返していたら発見があったのでメモします。
Nuxt.jsのコンポーネント名は基本パスカルケースで書く
パスカルケース→NustName
先頭大文字、語句の切り替えのときに大文字にする
こちらの記事の早見表がとてもわかり易かったので素晴らしかったです。
まとめと補足・ファイル名 → パスカルケースこのほうが圧倒的に開発しやすいと思います。
メリットとし
docker×railsでbinding.pryを動かす
ドッカーを起動していて、rails 内のデバックしたいなと思ったときに調べました。
下準備と参考記事は以下です。
railsのgemにはすでに
gem 'pry-byebug'
が入っていたので
docker-composeに下記を追加で使用できました
/////↓この2文を追加
stdin_open: true //stdin_open:標準入力への接続を表す。
tty: tru