ume

rails7 データベース string型とtext型の文字制限のバリデーションについて

前書き

以下のnameカラム(string型)とdscriptionカラム(text型)にlengthのバリデーションは必要?また必要なら何文字で設定するのがいいの?という2つの疑問が湧いたので忘却録として記事に残します ↓migrationファイル

結論

⇨人それぞれの用途でlengthのバリデーションの有無や文字数の制限を設定する。

そもそもstringとtextの違いは?

データ型 データベースに登録できる文字数
string 255文字まで
text 上限なし
それぞれの用途
  • string⇨一言入力したいときなどに使う。(名前、電話番号、住所など).
    バリデーション必要.
    理由 おかしな文章を登録できないようにするため(ポスグレの場合).
    ポスグレでstring型で255文字を超えて登録しようとすると256文字以降の文字は登録されない。

例256文字を登録しようとした時

省略
ありがとうございます

上記のありがとうございますの「す」が256文字目だとすると「ありがとうございま」までしかポスグレには登録されない。

  • text⇨長文投稿したいときなどに使う。(コメント、ブログなど)

バリデーション必要なし 下記のサイトを見るとデータ型にあまり違いがないので長文の文字列を登録する際場合はtext型でバリデーションなしで問題ないと思います。 teratail.com

www.postgresql.jp

まとめ

  • 文字制限したいカラムにはstring型を使う。

  • 文字制限する必要がない場合はtext型を使う

参考情報

qiita.com

javascript エンジニアが実務でよく使うjsのMathオブジェクト

目次

  1. Math.random()

  2. Math.round(数値)

  3. Math.ceil(数値)

  4. Math.floor(数値)

1. Math.random()

⇨0~1までのランダムの数値を作成します。

console.log(Math.random())
#出力結果 0.04764646236311276

1. Math.round(数値)

⇨四捨五入する

console.log(Math.round(1.6))
#出力結果2

Math.ceil(数値)

⇨対象の数値の小数点以下を切り上げ

console.log(Math.ceil(1.4));
#結果2

Math.floor(数値)

⇨対象の数値の小数点以下を切り捨てます

console.log(Math.floor(1.6)); // 1.6を切り捨て、1となる

rails7 メンターさんからのフィードバック

指摘箇所2つ

  1. ルーティングでresourcesを使う

  2. パーシャルを使う

ルーティングでresourcesを使う

修正前(私のコード)

Rails.application.routes.draw do
   root to: 'product#new'
   get 'product/show/:id', to: 'product#show', as: 'product_show'
end

修正後(↓のように修正すること)

Rails.application.routes.draw do
  resources :products,only: [:new, :show]
end

なぜこのようにするのか?
新しいルーティングを追加する時に修正後の方が楽 例えばindexアクションにつながるルーティングを作成したい場合

 resources :products,only: [:new, :show,:index]

indexを追加するだけ

パーシャルを使う

2つの意図がありました。

  • 他の箇所でも同じコードを使い回したい時に使う

  • 可読性を上げる

通常1つのhtmlファイルに「header」,「main」「footer」が含まれる。ただ開発しているとmainだけ修正したいといった考えになることが多いです。そこでそれぞれパーシャルを分けることでmainの修正の際にheaderやfooterといったコードを見る必要がないので修正箇所を特定しやすいといったメリットがある

javascript知らなかったこと

知らなかったこと

  1. javascriptの2種類のデータの型,オブジェクト型とプリミティブ型

  2. オブジェクトのメソッドの定義(rubyでいうハッシュ)

1. javascriptの2種類のデータの型,プリミティブ型とオブジェクト型

プリミティブ型

特徴:変数の中身(値)が同じでも別々のデータと解釈される=一度作成したらその値を変更することができません。

let str1 = 'Hello'; 
const str2 = str1; 
console.log(str1, str2); 出力結果 Hello Hello 

str1 = "World"
console.log(st2); ここでもHelloと出力される

const str2 = str1; ここでstr1のコピーをstr2に代入しているので後からstr1の値が更新されてもstr2は影響を受けない。=str1とstr2は別物扱い.

↑のような挙動になる説明↓.
例2つの変数を定義したとき

let str1 = "Hello"
let str2 = str1

例えばstr1 = "Hello"の変数を定義するとHelloがメモリの特定の場所(0001)に格納される。この格納された場所(0001)を「アドレス」という。str1が値を保持する0001に紐づいて、別の場所に保存される(0002) str1も2も同じ0001を参照していますが別のデータです.
その後str1を下記の様に更新したとします。

str1 = "World"

そしたら str1の参照先が0001から0004に変わるだけなのでstr2に影響はなくstr1を更新した下に時もかかわらずHelloを参照している。

プリミティブ型の詳細↓.
www.r-staffing.co.jp

* 文字列型(string型)
let fruit = 'apple';
* 数値型(number型)
let age = 30;
* 論理型(boolean型)

trueかfalseを返す

let isActive = false;

変数名はis~という風につけるのがいい

* undefined
let color;

変数名だけ定義

* null
let box = null;

オブジェクト型

⇨オブジェクトはプロパティの集合体.

プロパティとは? ⇨name(key)とみかん(value)の組み合わせをプロパティという.

オブジェクトはkeyを使ってvalueにアクセスする.

let fruits = {
    name: "みかん",
};
console.log(fruits["name"]):#出力結果みかん

オブジェクトは下のようにデータを持つている。0005がキーとvalueを全て管理しており、その0005をproductが参照している。

もしここで以下のようにproduct2という変数を作成した場合

let product2 = product1

product2はproduct1と同じものを参照している。なのでproduct1の変更はproduct2にも反映される

* 配列

一見keyの記載がないように見えるが配列は左から0,1,2といった数字をkeyとして配列の中身にアクセスする

let fruits = ['ブドウ', 'グレープフルーツ'];
console.log(fruits[0]); #出力結果ブドウ

オブジェクトのメソッドの定義(rubyでいうハッシュ)

プロパティの追加

fruits.新しいキー = 値
const fruits = {
  name: "もも",
  price: 120,
  say: () => {console.log("高い")}
}

fruits.stock = 5
console.log(fruits);出力結果{name: 'りんご', price: 100, stock: 5, sayDescription: ƒ}

プロパティの削除

delete fruits.削除したいkey
const fruits = {
  name: "もも",
  price: 120,
  stock: 5,
  say: () => {console.log("高い")}
}

delete fruits.stock;
console.log(fruits.);出力結果{name: 'りんご', price: 100,  sayDescription: ƒ}
例外

⇨スプレッド構文を使うことで上で説明したproduct1の変更がproduct2に影響されない様になる要はプリミティブがと同じように変更が他に影響を与えない様にできる

qiita.com

LANとWANの違い

結論

  • LAN = 狭い範囲内で端末同士(無線ルーターiphoneなど)が通信できる仕組み

  • WAN =広い範囲で端末同士が通信できる仕組み

LANとは

LANの例.
Wifi。厳密にはwifiはLANの通信規格。なので総称として家具(LAN)と椅子(wifi)の関係

wifiはLANの一種でwifiは「無線」で通信を行うので「無線LAN」と呼ばれる. wifiを契約することは家の中に基地局を置くようなもの

狭い範囲= 家や社内といった空間

WAN.

WAN(NTTやソフトバンクなどが提供する基地局と端末間の通信)の例.
⇨4G回線など

まとめ

  • LANは狭い範囲での通信を可能にする

  • WANは広い範囲で通信を可能にする

rails7+esbuildでjsファイルを個別に読み込む

前書き

rails6とrails7でJsファイルの読み込み方が変わったみたいです。その結果「rails7でjsファイルが読み込めない」というエラーにハマったので、同様のエラーに困っている方の参考にと記事をに残します。

実行環境

rails7でjsファイルを読み込む

全体像
  1. javascriptディレクトリの下にお好きなjsファイル作成。

  2. package.json編集

  3. yarn buildコマンド実行

  4. jsファイル編集

  5. htmlで適用させたいjsファイルを読み込む。

今回は↓「クリックして」をクリックしたら「Hello,World!」と表示されるようにjsファイルを適用させてみます。

javascriptディレクトリの下にお好きなjsファイル作成。

今回私の場合javascriptファイルの中に「custom」ディレクトリを作成し、その中に「index」ファイルを作成しました.

⚠️ディレクトリ名やファイル名は任意でOKです

package.json編集

package.jsonの13行目↓

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
  "build:custom": "esbuild app/javascript/custom/*.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
// ↑これを追加
  }
}

どうやらこの行を追加することでjavascript/customディレクトリ/jsファイルをbuildディレクトリにbuildするよっていう設定です(この時点ではまだbuildは実行されていません)

"build:custom"
app/javascript/custom/*.js

上記の2つのcustomはディレクトリを指しており、人それぞれ違います。僕の場合はindex.jsがcustomディレクトリの中にあるので上記のような指定になります。

1. yarn buildコマンド実行

下記のコマンドでpackage.jsonで設定したものをbuildします。僕の場合は↓

yarn build:custom

もしjavascriptディレクトリの中に新たにディレクトリを作成せずにjsファイルを配置している方は

yarn build

で大丈夫です。

buildが成功すると

myapp# yarn build:custom
yarn run v1.22.5
$ esbuild app/javascript/custom/*.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets

  app/assets/builds/index.js      56b 
  app/assets/builds/index.js.map  93b 

Done in 0.25s.

上記のような画面になります。

1. jsファイル編集

buildが終わるとbuildディレクトリの中にjavascriptディレクトリで作成したjsファイルが配置されています。

builde/index.jsファイルの中身を編集

function a() {
  console.log('Hello, World!');
}
  1. htmlで適用させたいjsファイルを読み込む。 index.htmlファイル
<button onclick="a()">クリックして</button>
<%=javascript_include_tag "index" %>

jsファイルを読み込むと完成です。

余談

rails6では以下のようにjsファイルを読み込んでいた

参考情報

【Rails7+esbuild】必要なJavaScriptのみ個別に読み込みたい時 #JavaScript - Qiita