要素の展開 arr = [1, 2, 3, 4, 5]; console.log(arr); // [1, 2, 3, 4, 5] console.log(...arr); // 1 2 3 4 5 要素をまとめる const [num1, num2, ...arr] = [1, 2, 3, 4, 5]; console.log(num1); // 1 console.log(num2); // 2 console.log(...arr); // 3…

アロー関数引数のデフォルト値 1. デフォルト値なし (1) 引数設定あり const greeting = (name) => console.log(`こんにちは、${name}`); greeting("taro"); # こんにちは、taro (2) 引数設定なし const greeting = (name) => console.log(`こんにちは、${na…

gem bulletとは N+1クエリ問題を警告してくれるgemです。 導入 # Gemfile gem 'bullet' # ターミナル bundle exec rails g bullet:install Would you like to enable bullet in test environment? (y/n) y もし問題があれば以下のようにlogに出力されます。 …

N+1クエリ問題とは 最初に発行するクエリ1回＋N回のクエリ発行により、 アプリケーションの処理速度が遅くなることがあります。 例えば、本の一覧を取得して、関連した著者名も一緒に表示させたい 場合があったとします。 booksテーブルからallメソッドで取…

テーブル結合とは 違うテーブルからそれぞれデータがほしいとき それらを結合して１つのテーブルからデータ取得することができます。 テーブル例 著者が1つ以上の書籍を出版している例を用いて以後説明していきます。 1. 内部結合(INNER JOIN) 基礎構文 モデ…

オブジェクトを代入 const user = { name: "taro", age: 24 }; # 変数名はオブジェクトのプロパティ名と一致する必要がある const { name, age } = user; const greeting = `名前は${name}です。年齢は${age}です。`; console.log(greeting); # '名前はtaro…

直接オブジェクトの中身を指定した場合 const obj = {user: [{name: "taro", age: 24}, {name: "hanako", age: 30}, {name: "ichiro", age: 51}], post: [{title: "titleA", body: "bodyA"},{title: "titleB", body: "bodyB"},]} console.log(obj) # 階層が…

ChakraUiとは ReactアプリケーションのUIコンポーネントライブラリです。 モジュール化されておりインポートすることで使用することができます。 環境 Windows10 VSCode 導入コマンド npm i @chakra-ui/react npm i @emotion/react npm i @emotion/styled np…