TablePlusの書き方(sshトンネルで接続したい時) ■ ダウンロードする TablePlus | Modern, Native Tool for Database Management ■ こちらの記事を参考にsshトンネルで接続してみる TablePlusの書き方(sshトンネルで接続したい時) - Qiita

Docker環境のRails7をherokuにデプロイした時にハマった現象まとめ 1. Heroku Stackの設定 Docker コンテナを Heroku で使用する為にheroku stack:set containerコマンドを叩く必要があります。 このコマンドを叩くことで、Heroku が Dockerfile を使用して…

発生手順 gemfileにgem追加 docker-compose run --rm web bundle install dockerコマンド叩く（例： docker-compose run --rm web bundle exec rubocop） ➜ git:(master) ✗ docker-compose run --rm web bundle exec rubocop Creating compass-backend_web_r…

Vue3を開発する時のVsCodeのおすすめプラグイン設定 おすすめ拡張機能紹介 1. Volar Volar は Vue.js の開発をサポートする VS Code の拡張機能です。.vue ファイルのシンタックスハイライトやインテリセンスによる補完ができるようになります。詳細は、Vola…

マネタイズ方法まとめ WEBサービスでマネタイズするパターンをそれぞれ記載します 1. 機能絞り込み 機能を絞り込み、人気機能を利用するには有料プランに以降を促す 例） - Pairs - openwork ■ メリット ユーザーが気軽にサービス利用できる ■ デメリット 魅…

Nuxt3でvalidationする方法 インストール npm i vee-validate @vee-validate/i18n @vee-validate/rules vee-validate -> veeValidate @vee-validate/i18n -> バリデーションエラーメッセージに日本語化 @vee-validate/rules -> バリデーションルールを利用す…

Nuxt3とfirebase9で認証機能設定する方法 各バージョン Nuxt: 3.0.0-rc.11 Firebase: 9.13.0 インストール npm install firebaseでpackage.jsonにfirebaseが追加されればOK Firebaseの初期設定 ■ plugins/firebase.client.ts import { initializeApp } from …

Nuxt3にtailwindを導入する 導入手順 インストール npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest @nuxtjs/tailwindcss → Nuxt3でTailwindCSSを利用するためのモジュール tailwindcss@latest → Tailwindの最新…

Nuxt3にEslintとprettierを導入する ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。 ESLint：静的解析ツール。バグの可能性がある書き方を指摘する。 Prettier：コードフォーマッター。インデント、改行などを自動整形してくれる…

アイデア 自分の問題にフォーカスする 自分と同じ悩みを持つ人は他にもたくさんいる 本ではなく自分の経験から考える 問題からまずは考える、解決はその後 ニッチから始めよう アイデアは人に話しても問題ない。アイデアが同じでも人によってアウトプットが…

JavaScript(Vue.js)で実装している時に参照先のデータがうまく参照できないケースが発生しました。 そこで、データを参照する為ようのコピーを作成したのですが、その時にディープコピーとシャローコピーについて理解が出来ておらず詰まったのでそれぞれの違…

JSON.parse()とJSON.stringify()の違い JavaScriptのブラウザーでは組み込みの JSON オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。 ■ parse(): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。 ■ s…

フロントエンドの環境設定 概要 Babel : ES6 -> ES5への変換 Node.js : JSライブラリ管理 webpack: 1つにまとめる（読み込み速度UP) polyfill: 下位互換 vue-cli: 必要ソフトをパッケージ化 Npm ■ Npmとは Node.jsはJavaScriptを実行する環境です。 本来、Ja…

業務でフロントエンドをすることになったけど、バックエンドがメインなのでフロントエンドの勉強をしなおす。 何やったか忘れた時ようにやったことまとめる。 Vue.js 動画コンテンツ Nuxt.js 動画コンテンツ 記事コンテンツ HTML/CSS 動画コンテンツ JavaScr…

Railsでファイル操作するとき Railsでファイル操作するときはDir.children（Ruby2.5以上で利用可能）ではなくrails.root.joinを利用する方が良い。 Dir.children実行時ファイルからの相対pathで取得してしまうので、実行箇所によって動かなくなるケースが稀…

個人開発でサービス名を決めるときに考慮すべきポイントまとめ 個人開発でサービス名を決めるときに事前に考慮すべきポイント 既に同じような名前のサービスが存在しない 検索したときに強すぎるSEOサイトが存在しない 検索したときに問題のある（エロ系とか…

(vue.js) methods / computed / watchの比較表 オプション名 methods computed watch メソッド 算出プロパティ 監視プロパティ 使い方 一般的な関数と同様 return内に特定したいdataを含める（this.xxx) 特定したいdata名で作成コールバック関数含める キャ…

GASを利用してGoolgeForm回答があった時に自動連携でSlack通知する方法 業務でGoogleFormを利用する部署があるのですが、GoogleFormでお客様問い合わせがあっても見逃してしまうケースが多いという相談を受けました。 そこで、GooleFormからお客様問い合わせ…

Webviewまとめ ■ Webviewとは HTMLコンテンツを、アプリ(スマホ)内で表示できるようにするもの。 Webページは主にHTML という言語で作成されており、アプリ内でHTML を解析し、Webページのように表示することを可能にします。 ■ Webviewのメリットは？ コス…

クラス/インスタンスメソッドの使い分け方法 railsのモデルファイルを書いていて間違えやすいのが、クラス/インスタンスメソッドの使い分けです。 先に結論 データすべて(モデルそのもの)に対する操作はクラスメソッド。特定のデータに対する操作はインスタ…

rails new git 管理外れる場合の対象方法 rails newで作成したアプリケーションのディレクトリに移行してみると、git initのコマンドを打ち込んでいないのにも関わらずgitの管理が始まってします。 このときの対処方法を記載する 例）こんな現象 [/Users/use…

ESLintとPrettierの違いについて ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。 ESLint JavaScriptのための静的検証ツール ファイル内のバグチェックやコーディングスタイルの一貫性を保つ 例） letを使っているが再代入していな…

Rails設計パターン Railsの設計パターンについて、殴り描きします MVCパターン RailsTutorialから入った自分には一番馴染みの設計パターン ルーティング(Routes)→コントローラー(Controller)→モデル(Model)→ビュー(View)の順番で処理がなされる 画像参考：【…

railsのActiveRecordって便利だけど、実際にどんなクエリが吐かれるかチェックしてないとパフォーマンスすぐに落ちるケース多い。 遅いAPIをどのようにして発見するか？ ■ 1.APM(Application Monitoring Management)を導入する おすすめはこの辺り - NewReli…

APIを設計するときに気を付けていること RestAPI設計をするときに気をつけていることを殴り書きします ちなみにAPI設計を綺麗に設計することにより下記のようなメリットがあります。 1. 使いやすい 2. 保守運用が容易 3. セキュリティリスクが下げることがで…

特定のブランチのファイルを現在の作業ブランチにマージする方法 あるブランチのファイルを現在の作業ブランチに移動させたいケースの対応方法を記載 例）materブランチのhoge.textを現在の作業ブランチに移動（コピー）させる git checkout origin/master a…

1. Adobe Stock Adobe Stock（アドビ ストック）は、商用利用可能な1億点を超える素材（写真、イラスト、ベクター画像）を提供するストックフォトサービスです。 商用利用も可能です。 使い方はこちらを参考にできます。 公式サイト：Adobe Stock 無料コレク…

メリット ■ 開発速度が速い RaislはRubyを使ったフルスタックWEBフレームワーク（DBを扱うActiveRecordが優秀、、メールを送る仕組みがデフォルトである、ジョブを実行できる）で、Rails Wayな書き方をすることで開発スピードを上げることが出来る。 Rails W…

データベースはシステムの基盤です。 DB設計に失敗するとアプリケーションの実装が複雑になる、などの辛い思いをします。 また、後から修正するのは実装影響が大きいため容易ではありません。 DB設計する上で自分が普段気をつけている箇所を記載します。 1, …

gitコミットをまとめる方法 コミットメッセージを修正する場合 コミットID_4 (HEAD -> master)コミットメッセージ_4 コミットID_3 コミットメッセージ_3 コミットID_2 コミットメッセージ_2 コミットID_1 コミットメッセージ_1 1, git rebase -i <コミット I…