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