最近、決済実装をする機会があり、計算の処理をたくさんおこなった。 そこで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.なんとかについてまとめてみる

モダン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を使う

"JavaScript"の記事一覧