最近、決済実装をする機会があり、計算の処理をたくさんおこなった。 そこでMath.なんとかを多用する機会があったのでまとめてみます！ <h2 id="h222275a263">Math.floor</h2> 切り捨てするときに使います。 <pre><code>Math.floor(1.3)
=&gt; 1

Math.floor(1.9)
1</code></pre> ()ないの数字は切り捨てされます。 <h2 id="hcad2902f28">Math.cell</h2> 今度は切り上げします。 <pre><code>Math.ceil(1.1)
=&gt; 2

Math.ceil(1.9)
=&gt; 2</code></pre> <h2 id="hdbb319c430">Math.round</h2> 今度は四捨五入 <pre><code>Math.round(1.4)
=&gt; 1
Math.round(1.5)
=&gt; 2</code></pre> <h2 id="h8e2d016eed">Math.max</h2> こちらは最大の数を返します。 決済実装する際、単価 * ID数みたいな感じの計算だったのですが、5ID以下は5IDとして決済するという要件があり、こちらを使用しました。 <pre><code>Math.max(5, 100)
=&gt; 100
Math.max(5, 3)
=&gt; 5</code></pre> <h2 id="h2d79649e9e">Math.min</h2> 最小を返す <pre><code>Math.min(1,199)
=&gt; 1</code></pre> <h2 id="h665e22f525">Math.ramdom</h2> X - 1を返す <pre><code>Math.random()
=&gt; 0.04069651010177333</code></pre> よく使うのはこの辺かと😇

Math.なんとかについてまとめてみる

<h2 id="hb3d266b1d3">PostgreSQLとは？？</h2> データベースの一種 MySQLとかについでよく使われているイメージがあります。 自分の現場で使われているので今回はpostgreを選択しました！ 今回はローカルでDBを立てる方法を解説していきます。 <h2 id="h38917243e5">PostgreSQLをinstallする</h2> mac前提で進めていきます。 homebrewが入っていない方は事前にinstallをしましょう。 <pre><code>brew install postgresql</code></pre> <pre><code>postgres --version</code></pre> でバージョンが表示されればinstallが正常に行われています。 installすると <pre><code>cd /usr/local/var
ls</code></pre> とするとpostgresがあるかと思います。 <pre><code>postgres -D /usr/local/var/postgres</code></pre> 上記のコマンドでデータベースを実行することができます。(control + cで終了) <pre><code>export PGDATA=/usr/local/var/postgres
pg_ctl start</code></pre> 上記のコマンドでバックグラウンドでDBを起動することができます。 止める場合は <pre><code>pg_ctl stop</code></pre> <h2 id="hba669a03b1">DBの設定をする</h2> installができたので、あとはDBを作成していきます！ ににのユーザー名の部分にユーザー名を入力します。 <pre><code>createuser -P 任意のユーザー名</code></pre> パスワードを2回入れましょう！！！ では準備ができたのでDBを作成していきます。 <pre><code>createdb DBの名前 -O ユーザー名</code></pre> createdbコマンドでdbが新規に作成できます。 例 <pre><code>createdb sample-db -O sample-name</code></pre> これでDBが作成できます！！ <h2 id="he916771537">DBにアクセスする</h2> <pre><code>psql -U sample-name sample-db</code></pre> こちらでアクセスができます。 <h2 id="h84eb38d709">テーブルを作る</h2> <pre><code>sample-db → \d</code></pre> \dと入力することでデータを一括で確認することができます。 まだデータがない為、こちらはerrorが出ると思います。 テーブルを作成してみましょう。 <pre><code>create table user (id integer, name text, age integer);</code></pre> CREATE TABELdと出たら成功。 データもいれてみましょう。 <pre><code> INSERT INTO user values (1, 'sample-user', 18);</code></pre> これでデータが入ったので、 <pre><code>select * from user</code></pre> で追加されているのがわかると思います。 <h2 id="h19d3657ee6">TablePlusで作成したDBを確認する</h2> TablePlusとは様々なRDBに対応したデータベースをGUIで操作できるツールです。 下記よりinstallします。 <a href="https://tableplus.com/" target="_blank" rel="noopener noreferrer">https://tableplus.com/</a> installしたら立ち上げて <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/ebdbbaab7a974711be96c4155ce455b2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-27%200.41.44.png?w=400&amp;h=264" alt=""> 垢枠部分を選択 データベースの選択がでてくるのでpstgresを選択します。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/26327f1161a74c2999bad302337c275a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-27%200.44.06.png?w=400&amp;h=313" alt=""> 項目を入力したらConnectでDBの中身が確認できると思います！！！ お疲れ様でした！！！

PostgreSQLデータベースの環境をつくろう！

モダンJavaScriptでよく出てくる分割代入についておさらいしていきます。 <a href="https://abeshi-blog.com/blog/pc3ipjyn6" target="_blank" rel="noopener noreferrer">スプレット構文</a>もよく使う文法なので合わせて確認しておきましょう！！ <h2 id="hff9199d9a1">分割代入とは</h2> 分割代入とは、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することができるJavaScriptの式です。 基本動作は下記です。 mdnより引用<pre><code>let a, b, rest;
[a, b] = [10, 20];


console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]</code></pre> こんなこともできます。 <pre><code>const a: number[] = [1,2,3,4,5];

const [ b, c ] = a; // 分割代入

console.log(b); // 1
console.log(c); // 2</code></pre> <h2 id="h29827405bb">オブジェクトの分割代入</h2> mdnより引用 <pre><code>const user = {
 id: 42,
 isVerified: true
};

const {id, isVerified} = user; // 分割代入

console.log(id); // 42
console.log(isVerified); // true</code></pre> これはReactのPropsを渡す際などにもよく使われます。 <pre><code>// Button.tsx
type Props = {
 color: "SKY_BLUE" | "WHITE";
 size: "SMALL" | "BIG";
 path: string | UrlObject;
 children: ReactNode;
 onClick?: () =&gt; void;
}

export const Button: VFC&lt;Props&gt; = memo((props) =&gt; {
 const { color, path, children, size, style, onClick } = props; // 分割代入

 return (
 null;
 );
});</code></pre> お疲れさまでした！

分割代入を理解する

スプレット構文は現代のモダンフロントエンドの現場にて非常によく使われまます。 これを使いこなすことが、モダンJSに入る第一歩です！！ <h2 id="hd4905f8f48">スプレット構文とは？？</h2> ...hogehogeの形で記述され、配列やオブジェクトの要素を展開する構文です。 このようにスプレット構文は<a style="color:#333333" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" rel="noopener noreferrer">mdn</a>の説明でも最初に聞くと何がなんだかよく分かりません、、、 例を使って覚えていきましょう！ <h2 id="h286d37ef4b">配列を展開する</h2> <pre><code>const numbers: number[] = [1,2,3]

console.log(...numbers) // 1, 2, 3
console.log([...numbers]) // [1, 2, 3] </code></pre> 一例です。 このようにnumbersで配列を定義した場合、...numbersで配列の添字を展開しているわけです。 添字 ... 配列の中の要素を指す [...numbers]とすることで、配列の中に新たに[1, 2, 3]と定義することができます。 つまり配列のコピーのようなイメージです。 <pre><code>const numbers: number[] = [1,2,3]
const numbers2: number[] = [ ...numbers ];

console.log(numbers); // [1,2,3]
console.log(numbers2); // [1,2,3] </code></pre> なのでこうすると配列をコピーできます。 mdnには下記のような一例が記載されています。 <pre><code>function sum(x, y, z) {
 return x + y + z;
}

const numbers = [1,2,3]
console.log(sum(...numbers)) // 6</code></pre> これは想像しやすいかと思います！ <h2 id="hda269dcd6b">配列に要素を追加する</h2> スプレット構文は配列をコピーすることができるので、簡単に配列に要素を追加することができます。 <pre><code>const numbers: number[] = [1,2,3]; // 元の配列
const newNumber: number = 4;　　// 配列に追加したい要素

const newArray: number[] = [ ...numbers, newNumber ]; // 新しく生成する配列
console.log(newArray); // [1,2,3,4]</code></pre> [ ...numbers ]で[1,2,3]になります。 [ ... numbers, 4]ということは[ 1,2,3,4 ]にとなります。 <h2 id="h4690c52dc5">2つの配列を展開する</h2> <pre><code>const numbers1: number[] = [1,2,3];
const numbers2: number[] = [4,5,6];

const newArray: number[] = [ ...numbers1, ...numbers2 ];
console.log(newArray) // [1, 2, 3, 4, 5, 6] </code></pre> <h2 id="h171f907e5c">オブジェクトを展開する</h2> これを応用するとオブジェクトにも適用できます。 <pre><code>const object = {
 a: "A",
 b: "B",
 c: "C"
}

console.log(object);
// {
// "a": "A",
// "b": "B",
// "c": "C"
// } 



const newObject = {
 ...object,
 d: "d"
}


console.log(newObject);

// {
// "a": "A",
// "b": "B",
// "c": "C",
// "d": "d"
// } </code></pre> もちろん展開している状態なので、要素を書き換えることもできます。 <pre><code>const object = {
 a: "A",
 b: "B",
 c: "C"
}


const newObject = {
 ...object,
 c: "新しいvalue"
}

console.log(newObject);
// {
// "a": "A",
// "b": "B",
// "c": "新しいvalue"
// } </code></pre> <h2 id="hb26e21c1fa">文字列分割もできる</h2> あまり使ったことはないですが、こんなこともできます。 <pre><code>const str: string = "hoge"

const array = [...str]
console.log(array) // ["h", "o", "g", "e"] </code></pre>

スプレット構文の挙動を理解する

実務でindexOfが出てきて、なんだそれって思ったのでメモ <h2 id="h97deb6308c">indexOfとは</h2> indexOfメソッドは、指定された部分文字列が最初に登場した位置を、文字列の先頭を0としたインデックス番号でかえします。 文字列がない場合、戻り値は-1になります。 ん？？ 多分コードで見た方が分かりやすい。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こんにちわ")
console.log(reslut)
// 0</code></pre> 一致しているので0を返します。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こ")
console.log(reslut)
// 0</code></pre> 一致しているので0を返します。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こんばんわ")
console.log(reslut)
// -1</code></pre> この場合一致しないので-1が返されます。 <h2 id="heb95265716">検索位置の変更</h2> <pre><code>indexOf( 検索したい文字, 検索開始位置 );</code></pre> 第二引数に検索位置を指定することができます。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こ", 0)
console.log(reslut)
// 0</code></pre> インデックスは0から始まるので0であれば"こ"が検出され0が返ります。 <pre><code>const str = "こんにちは"

const reslut = str.indexOf("こ", 1)
console.log(reslut)
// -1</code></pre> 1を指定すると、"んにちは"から"こ"を検索することになるので検出されません。 よって-1を返します。

JavaScriptのindexOfを理解する

filterとfindがごっちゃになったのでメモ程度にまとめておきます。 返す値が分かりやすいようにTypeScriptで書いています。 <h2 id="hbf16933144">filter</h2> 特定の配列の中から一致した全てを配列で返す。 <pre><code>const numbers: number[] = [ 1, 2, 3];

const number: number[] = numbers.filter((number) =&gt; number === 1);
console.log(number);
// - [1]</code></pre> こんな感じで配列が返ってくる。 <h2 id="hbf60f41210">find</h2> 特定の配列から一致した最初のものを返す <pre><code>const numbers: number[] = [ 1, 2, 3];

const number: number = numbers.find((number) =&gt; number === 1);
console.log(number);
// - 1</code></pre> <h2 id="ha214098e44">まとめ</h2> 配列を返したい場合はfilterを使う 最初の一つ要素を返したい場合はfindを使う

"初学者向け"の記事一覧