React.js/Next.js【環境構築】プロジェクトにprettierを導入する
やること プロジェクトを新規作成し、prettierを導入するところまで解説する。 また、VSCodeの設定も行い、保存時に自動フォーマットされるようにする。 Next.jsのプロジェクトで解説しているが、サンプルで利用しているだけなので他...
初心者
React.js/Next.js
JavaScript【JavaScript】配列の扱い方
ここでは、JavaScriptの配列に関する基礎的な操作を解説する。 この記事でわかること 配列とは 配列の作成方法 配列の参照方法 配列の追加、削除 ループ 配列の注意点 配列とは 配列とは、同じ要素のデータを順序付きで格納しておくもの。...
Vue.js/Nuxt.js【Vue.js】ディレクティブ省略記法メモ
Vue.jsではよく利用する構文は省略して記述することができる。 久しぶりにVue.jsに触ると忘れてしまうのでメモ。 v-bind: → : v-bindディレクティブは、Vue.js内で使われているデータを画面に埋め込む時によく利用する...
データベース【DB】テーブル結合方法の種類を理解する（内部結合、外部結合、クロス結合）
この記事では、データベースの結合の種類を理解する。 それぞれどういう結合かを理解するためなので、具体的なSQL文までは説明しない。 扱うサンプルデータ このサンプルデータのポイントは２つ。 田中さんと佐藤さんは同じ部署 人事の部署には誰も所...
データベースSQLの実行計画の決定方法を理解する
この記事では実行計画の見方を理解する前に、実行計画がどのようにして決定されるかをざっくり理解する。 クエリ評価エンジンの流れ そもそもSQLのクエリは、データに対していきなり実行されるわけではなく、「このクエリをどうやって実行したら最適か？...
React.js/Next.js【React.js】useState,useRef,useEffectの使い分け簡易まとめ
久しぶりにReactを触ると、どのhooksがどんな機能か忘れてしまうのでまとめ。 簡易的にしかまとめていないので、詳細は公式サイトなどを見てほしい。 useState （個人的に）一番基本的な状態管理のためのhooks。アプリケーションで...
HTTP【Linux】curlコマンドでAPIのリクエストにかかった時間を取得する
やりたいこと curlコマンドを使って、APIのリクエストにかかった時間のみを表示させたい。 結論 これらの情報は-wオプションで取得することができ、以下のように記述する。 # 全体の処理にかかった時間（秒）を出力する $ curl -XG...
用語N+1問題とは
N+1問題とは 10件の商品を一覧表示するWebページがあるという前提で 10件の一覧情報を取得（DBへのselectが１回実行される）各商品の詳細情報を1件ずつ取得（DBへのselectが10回実行される）1と2の情報を合わせて画面を表示...
Docker【Docker】初学者のためのDockerfile作成方法
概要 Dockerfileを利用してDockerコンテナを起動させるためには、ざっくり以下の手順を行うことになる。（実際には1-3を繰り返しながらDockerfileを作成していく形になる） Dockerfile作成docker build...