JavaScript mapメソッドとfilterメソッド（おまけ: オブジェクトの生成）
JavaScript備忘録 Vol.7
目次
- map( )
- filter( )
- オブジェクトの作成
今回もJavaScriptの記事になっています。
map( )
例えばこんな配列があって
const prices = [100, 200, 300, 400];
この配列のそれぞれの金額を50円ずつ値上げして、別の配列にしたいとします。
その場合map( )を使うことで実現することができます。
配列.map( (引数) => { //関数 //処理 })
このような書き方で実装していきます。
なので今回の場合は
const prices = [100, 200, 300, 400]; const updatedPrices = prices.map((price) =>{ return price + 50; }); console.log(updatedPrices);
このようにmapを用いることで配列の要素分、関数内の処理をしてくれます。
また、今回の場合は関数内でpricesの各要素に+50した値を返しているだけなので
const prices = [100, 200, 300, 400]; const updatedPrices = prices.map((price) => price + 50); console.log(updatedPrices);
として、{ }・returnを省略することができます。
filter( )
filterは配列の中から条件に合う要素のみを取得し、別の配列として取得することができます。
例えば下記のような配列があるとします
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
この中から2で割り切れる数字だけを抽出し、配列を作りたい場合
filter( )を使用します
書き方はmap( )と一緒です
配列.filter( (引数) => { //関数 //処理 })
少しmap( )と違うが、処理内容はif文を用いて、条件に合ったものはtrue, そうでなものにはfalseを返すことでフィルターをかけることができる仕組みとなっています。
なので今回の場合は
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const evenNums = nums.filter((num) => { if(num % 2 === 0){ return true; }else{ return false; } }); console.log(evenNums);
としてあげることで新たに配列を作ることができます。
また、こちらに関しても短縮した書き方があります。
今回の場合だと
条件式ではtrueの時にはtrue、falseの時にはfalseを返しているだけなので、
returnで条件式だけを返すようにします。
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const evenNums = nums.filter((num) => { return num % 2 === 0; }); console.log(evenNums);
そうすると処理が1行になるので
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const evenNums = nums.filter(num => num % 2 === 0); console.log(evenNums);
このように省略できるという仕組みですね。
オブジェクトの作成
さあ、ここへきてようやくオブジェクト編の核部分です！
これまでは配列を用意してその中に1つの値を持つ要素を格納してきました。
ここではいくつもの値を持っているオブジェクトという要素を見ていきます。
今までの配列はこんな感じですよね
const prices = [100, 200, 300, 400];
さらに、これに関連した商品の配列もあったとします。
商品の名前を持たせたいのでまずは定数の名前を変えてみますね
今回はfruitで、複数管理したいので複数形でfruitsとします。
const fruits = [orange, apple, grape, pineapple]
それ金額ぜんぜん見合ってない！てツッコミは無しにしましょう。
これ一つの配列にしたいなー
はい、オブジェクト作りましょう
作り方は簡単です
const fruits = [ ];
まずは同じように配列の入れ物を用意します。
次に{ }内にそれぞれ要素を入れていきます。
const fruits = [ {name: 'orange', price: 100}, {name: 'apple', price: 200}, {name: 'grape', price: 300}, {name: 'pineapple', price: 400}, ]; console.log(fruits);
結果はこうですね
配列の中にオブジェクトが4つできました！
それぞれ展開してみるとこのようになっています。
また、name: 'orange'という部分をプロパティ、name部分をキー、'orange'部分を値なんて呼んだりします。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScript スプレッド構文と分割代入
JavaScript備忘録 Vol.6
目次
- スプレッド構文
- 分割代入
- forEach( )
今回もJavaScriptの記事になっています。
スプレッド構文
2つの配列があったとします。
const price1 = [500, 600]; const prices = [100, 200, 300, 400];
例えば、price1の要素をpricesの配列に格納したいとします。
その場合
const price1 = [500, 600]; const prices = [100, 200, 300, 400, price1]; console.log(prices);
とすると結果は
このように配列の中に配列が入るような形になってしまいます。
ここでスプレッド構文を用いることで要素のみを配列に追加することができます。
スプレッド構文は...配列名とします。
今回の場合は
const price1 = [500, 600]; const prices = [100, 200, 300, 400, ...price1]; console.log(prices);
とすることで、pricesにprice1の要素のみを追加することができます。
また、スプレッド構文は関数の引数としても使用される場合があります。
const numbers = [100, 200, 300]; function sum(a, b, c){ console.log(a + b + c) }
例えば上記のような配列と関数があったとしましょう。
3つの引数のトータルを出力する関数ですね
const numbers = [100, 200, 300]; function sum(a, b, c){ console.log(a + b + c) } sum(...numbers);
このように関数を呼び出す際に
関数名(スプレッド構文);
としてあげます。
結果はこうですね。
覚えておくと何かと便利かなと思います。
分割代入
const prices = [100, 200, 300, 400];
このような配列の定数があるとします。
分割代入を使うとこの値を別の定数に代入することができます。
どういうことかというと
const prices = [100, 200, 300, 400]; const [a, b, c, d] = prices; console.log(a); console.log(b); console.log(c); console.log(d);
このようにすることで
a,b,c,dにpricesの値を順番に代入してくれます。
また、定数に入れたいのが頭から2つ目までで、残りの2つは配列のままにしておきたいとします。
その時には
const prices = [100, 200, 300, 400]; const [a, b, ...others] = prices; console.log(a); console.log(b); console.log(others);
とすることで実現することができます。
そしてここが分割代入の一番のキモかなと思うのですが
分割代入では値の変換をすることができます。
どういうことかというと
let x = 1; let y = 2;
という2つの変数があり、この値を入れ替えたいとします。
その場合、分割代入を用いて
let x = 1; let y = 2; [x, y] = [y, x]; console.log(x); console.log(y);
と書いてあげると
このようにxとyの値が入れ替わります。
forEach( )
以前にfor文を用いて繰り返し処理を行う方法を紹介しましたが、
forEach( )を使用することでもう少し簡単に処理を書くことができます。
まずはforEach( )の書き方ですが
定数.forEach((引数) =>{ //関数 //処理 });
のような書き方で実装することができます。
引数の名前は何でもいいのですが、単数形を書くことが多いんですかね？そんな風に感じます。
これで要素が無くなるまで繰り返し処理を行ってくれます。
では例文を見ていきましょう。
const prices = [100, 200, 300, 400]; prices.forEach((price) => { console.log(price) });
結果は
こんな感じで出力されます。
さらにこれにインデックス番号も表示させたいとしましょう。
その場合には引数をもう一つ追加してあげれば実現することができます。
const prices = [100, 200, 300, 400]; prices.forEach((price, index) => { console.log(｀インデックス番号${index}: 要素の値${price}｀) });
結果はこうですね
for文と違って範囲の指定時に要素の数を気にしなければならないということもないので、便利ですかね。
マークダウン内のテンプレートリテラルのバッククォートは全角になっていますのでコピペの際には半角に直してください。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScriptで配列の要素を変更する
JavaScript備忘録 Vol.5
目次
- 配列の要素変更
今回もJavaScriptの記事になっています。
配列の要素変更
今回は配列の要素を変更する方法を見ていきましょう
- unshift()
- push()
- shift()
- pop()
- splice()
全て例文で見ていきましょう。
まずはベースとなる例文
{ const prices = [120, 110, 100, 90]; console.log(prices); }
要素が4つ入った配列ですね
では一つずつ見ていきます。
1. unshift( )
{ const prices = [120, 110, 100, 90]; prices.unshift(130); console.log(prices); }
配列名.unshift( 要素 )とすることで配列の先頭に要素を追加することができます。
2. push( )
{ const prices = [120, 110, 100, 90]; prices.push(80); console.log(prices); }
配列名.push( 要素 )とすることで配列の最後尾に要素を追加することができます。
3. shift( )
{ const prices = [120, 110, 100, 90]; prices.shift(); console.log(prices); }
配列名.shift( )とすることで配列の先頭の要素を削除することができます。
4. pop( )
{ const prices = [120, 110, 100, 90]; prices.pop(); console.log(prices); }
配列名.pop( )とすることで配列の最後尾の要素を削除することができます。
shiftとpopについては1つの要素しか扱えないので( )内に値を入れる必要はありません。
5. splice( )
splice()は上記4つより若干複雑になっています。
splice(変化が開始する位置, 削除数)
というように第一引数、第二引数を記述して使います。
では例文
{ const prices = [120, 110, 100, 90]; console.log(prices); }
この配列の真ん中2つの要素を削除したい場合
{ const prices = [120, 110, 100, 90]; prices.splice(1, 2); console.log(prices); }
このようにsplice( )を使うことによって実現できます。
今回の場合は
インデックス番号0: 120
インデックス番号1: 110
インデックス番号2: 100
インデックス番号3: 90
となっており
変化を開始したい位置はインデックス番号1
削除したい要素数はインデックス番号1の110とインデックス番号2の100の2つなので
prices.splice(1, 2);
となります。
さらに、このsplice( )、値を変更することもできます。
例えばこの配列の1番目、2番目の要素を変更したい場合、
上記に加え、第三引数以降を追加します。
どういうことかというと
{ const prices = [120, 110, 100, 90]; prices.splice(1, 2, 200, 300); console.log(prices); }
splice()の部分を見てみると
第一引数、第二引数は先ほどと同じことをしています。第三引数以降に追加したい要素を記述しています。
そうすることでこのような実行結果になります。
今回も軽めな内容でした。
もう少し経ったら画面にいろいろ描画していく方法を見ていきたいと思います。
今しばらくコンソールやメソッドにお付き合いください。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScriptで配列を作る・ループ処理を行う
JavaScript備忘録 Vol.4
目次
- 配列を作る
- 要素にアクセスする
- ループ処理との組み合わせ
今回もJavaScriptの記事になっています。
配列を作る
例えば商品の金額を管理したい場合
{ const price1 = 120; const price2 = 110; const price3 = 100; }
としても良いですが、
同じ定数名で管理した方が便利な場合があります。
ここで配列を作ってあげます。
ついでに結果をコンソールに表示して見てみましょう
配列は[a, b, c];のように[ ]の中にカンマ区切りで書いていきます。
したがって今回の場合は
const prices = [120, 110, 100]; console.log(prices);
となり、出力結果は
となります。
また一番左の三角マークをクリックすると配列の中身を見ることができ、
今回の場合は
0番目が120
1番目が110
2番目が100
となっていることがわかります。
配列では番号は0番目から始まります。
この0番目1番目2番目といった数字をインデックス番号、添字なんて言ったりします。
要素にアクセスする
次はこの配列に格納されている要素へのアクセスの仕方を見ていきましょう
では真上の例文で見ていきましょう
const prices = [120, 110, 100]; console.log(prices);
例えばこれで、インデックス番号が1の要素のみをコンソールに出力したいとします。
その場合は
console.log(prices[1]);
のように配列名[インデックス番号]とすることでその要素を取得することができます。
結果はこんな感じですね。
また、取得した要素を変更することもできます。
const prices = [120, 110, 100]; prices[1] = 200; console.log(prices);
こんな感じで要素に対し再代入を行うことで要素の値が変わります。
インデックス番号1の要素が200になってますね
また
今回pricesをconstを用い定数定義をしているにも関わらず、配列内の要素の値が変更されてしまっています。
scores = 10;といったような再代入を行うことはできないのですが、配列の要素への再代入はできることとなっていますので注意が必要です。
ループ処理との組み合わせ
ループ処理については前の記事で紹介しているので、ループ処理部分の解説は省きます。
では例文
今回出力にはテンプレートリテラルを使用していきます。
const prices = [120, 110, 100]; for(let i = 0; i < prices.length; i++){ console.log(｀Price: ${prices[i]}｀); }
そんなに難しくないですよね
今回初めて出てきたのがprices.lengthでしょうか
配列名.lengthとすることで配列の要素数を取得することができます。
今回の場合は配列には3つの要素が入っていますので
例えば
console.log(prices.length)とすることで3が出力されます。
それをfor文の範囲を指定する部分に用いているので
iは3未満となります。
つまりコンソールにはprices[0], prices[1], prices[2]が順番に出力されていくわけですね。
出力結果がこちら
さらに、一緒にインデックス番号も表現してみましょう。
今回このfor文の中でのインデックス番号はiになりますので
const prices = [120, 110, 100]; for(let i = 0; i < prices.length; i++){ console.log(｀Price${i}: ${prices[i]}｀); }
このようにテンプレートリテラルを使ってiを出力してあげればいいですね
簡単でしたね！
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScript 基礎編 Vol.3
JavaScript備忘録 Vol.3
目次
- アロー関数
- スコープ
今回もJavaScriptの記事になっています。
アロー関数
まずは前回の記事でも使用した例文
const sum = function(a, b, c){ return a + b + c; }; const total = sum(1,2,3) + sum(3,4,5); console.log(total);
出力結果
これをもっと短くするためにアロー関数を使って書いていきます。
const sum = (a, b, c) => { return a + b + c; };
functionを消し、( )と{ }を=>で繋ぐことでアロー関数とすることができます。
行われる処理は一緒ですね。
さらに
この例文の場合関数内の処理が1つなので
const sum = (a, b, c) => a + b + c;
といった具合に1行で書くことができます。
全体を見ると
const sum = (a, b, c) => a + b + c; const total = sum(1,2,3) + sum(3,4,5); console.log(total);
こうなります。
出力結果も変わりませんね。
さらに、アロー関数では引数が一つの場合、( )も省略することができます。
別の例を見てみましょう。
const double = function(a){ return a * 2; };
こんな関数式があります
doubleという定数に、引数を2倍にして返す関数を代入しています。
これを省略して書くと
const double = a => a*2;
こうなります。
const double = a => a*2; console.log(double(12));
このように、引数に12を入れてコンソールに出力する指示を書くと
こうなります。
スコープ
次はスコープについてみていきましょう。
スコープは、有効範囲という意味です。
function f(){ const x = 1; console.log(x); } f();
f( )という関数があり、その中でxという定数に1が代入されています。
同じ関数内でコンソールにxを表示させる指示を書きます。
最後にこのf( )を呼び出します。
結果はこうですね。当たり前ですが、１が出力されます。
ここがポイントなんですが
ブロック内で宣言された変数や定数はブロック内のみが有効範囲となります。
ではブロックの外でxを出力してみましょう。
function f(){ const x = 1; } //f(); console.log(x);
こんな感じでxどこ？的なエラーになってしまいます。
ここでxという定数名を使いたい場合には
const x = 2; function f(){ const x = 1; } f(); console.log(x);
このように関数の外でxを定義してあげましょう。
そうするとこんな感じで出力することができます。
xという同じ定数名ですが、出力される値が違いますよね？
1行目のconst x = 2;
このようなブロックの外で宣言された定数は全ての範囲で有効となり、このようなスコープを
グローバルスコープ
といいます。
ただ、今回のようにブロック内とブロック外で同じ名前の定数が宣言されている場合、
ブロック内ではブロック内で宣言された値が優先されます。
よって、今回は同じ x でも 1 と 2 が出力されています。
ちなみにif文やwhile文でもブロックがあるので、同じようにスコープが適用されます。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScript 基礎編 Vol.2
JavaScript備忘録 Vol.2
目次
- 関数
- 引数
- return
- 関数式
今回もJavaScriptの記事になっています。
関数
関数はJavaScriptの基本的な構成要素のひとつです。
JavaScriptの処理__つまり、タスクや値計算を実行する文の集まりです。
まずは書き方
function ○○(){ //○○は関数名 //処理の集まり };
こんな感じで書いていきます。
function ○○ として関数名を宣言し、(){}と続け、必要であれば()内に引数、{}内にこの関数で行う処理内容を記述していきます。
では例文
function line(){ console.log('---------------'); console.log('---------------'); console.log('---------------'); }
関数名をlineとし、コンソールに---------------と出力してね、って処理です。
難しくないですよね！
これだけの説明だとじゃあこれどこでどういう目的で使用するん？
ってなってると思います。
次見てってみましょう！
引数
まずは例文
function line(message){ console.log('---------------'); console.log(`--${message}--`); console.log('---------------'); } line('1st Message'); console.log('1st Take'); console.log('2nd Take'); line('2nd message'); console.log('3rd Take'); console.log('4th Take'); line('3rd message');
関数の呼び出しは
関数名();とします。
ちなみに実行結果は
では見ていきましょう
1行目
function line(message){
6, 9, 12行目
line('1st Message');
line('2nd Message');
line('3rd Message');
これらのline()の()内が引数になります。
もうちょっと細かく説明すると
1行目
function line(message){ //仮引数
6行目
line('1st Message'); //実引数
って言ったりします。
9, 12行目も同じく実引数です。
仮引数については何を入れてもokです。
例えば
function line(text){ //textに変更 console.log('---------------'); console.log(`--${text}--`); //textに変更 console.log('---------------'); }
としても同じ結果が出力されます。
実引数を変えると出力結果を変えることができます。
line('1st Message'); console.log('1st Take'); console.log('2nd Take'); line('2nd message chenge'); //chengeを追加 console.log('3rd Take'); console.log('4th Take'); line('3rd message');
こんな感じですね
関数を一つ用意しておけば複数箇所で呼び出して同じ処理をすることが・・・
・・・・・・できます・・・。
・・・・・(^○^)
chengeじゃなくてchangeじゃ・・・スペル間違って・・・
スクショ取り直したくない・・・
ごめんなさい
return
次はreturnです。
読んで時の如く、戻す！
戻り値ってやつですね
ここはサクッと
function sum(a, b, c){ return a + b + c; }
関数の中で、return a + b + c;となっています。
これは単純にa + b + cの値を返してね、って記述になります。
あとこんな感じで関数内でreturnを使用した場合にはそこで処理を終了してねということにもなります。
if(){ return; }else{ console.log(''); }
もちろんこんな感じでif文の中でも使用することができるのですが、
この場合はifの時は何も処理しない
みたいな使い方もできます。
関数式
ここまで見てきた関数を定義することを関数宣言といいます
最後は関数式、関数を定数に代入していきます。
では例文
const sum = function(a, b, c){ return a + b + c; }; const total = sum(1,2,3) + sum(3,4,5); console.log(total);
こんな感じですね。
sumという定数にa + b + cの値を返す関数を代入しています。
呼び出し方は
sum(1, 2, 3);
のように定数(実引数, 実引数...)となります。
実行結果は
因みに今回の例文のように関数名に名前がついていないものを無名関数なんて呼んだりします。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
JavaScript 基礎編
JavaScript備忘録
目次
- if文
- switch文
- for文
- while文
今回もJavaScriptの記事になっています。
if文
前回の記事にも出てきましたがif文を見ていきます。
そこまで難しくは無いのでサクッと
まずは例文
const score = 60; if(score >= 80){ console.log('Great!') }else{ console.log('OK...') }
1行目
const score = 60;
constを用いてscoreという定数に数値の60を代入します。
2~3行目
if(score >= 80){ console.log('Great!') }
if(score >= 80): 60を代入されたscoreが80以上なら
{cosole.log('Great!')}: コンソールにGreat!と表示してね
3~4行目
else{ console.log('OK...') }
else: それ以外は
{console.log('OK...')}: コンソールにOK...と表示してね
で、これもうちょっと簡単な書き方があります。
score >= 80 ? console.log('Great!') : console.log('OK...');
上と意味は同じですがこんな感じでも書けちゃいます。
ただ、可読性を考えると1つ目の方が読みやすかったりするんかなー？？
人によりますかね
そしてこの問題に付随して出てくるのが
論理演算子
「かつ」とか「もしくは」とか「ではない」とかってやつですね。
JavaScriptでも他言語と同じような表現です。
列挙しておきます。
- ===
- &&
- ||
- !==
同じである
かつ
もしくは
同じでない
みたいな感じです
ではこれを踏まえた上で例文
const score = 60; const name = 'tomozqoo' if(score >= 50 && name === 'tomozqoo'){ console.log('Good job!') }
定数定義の部分と、if文内の処理は上記の例と同じなので解説は省略します
if(score >= 50 && name === 'tomozqoo')
まあここも解説不要ではあるかと存じますが
scoreが50以上かつnameがtomozqooであるなら
ということですね。
ではもう少し処理内容が多い例です
const signal = 'red'; if(signal === 'red'){ console.log('Stop!'); }else if(signal === 'yellow'){ console.log('Caution!'); }else if(signal === 'blue'){ console.log('Go!'); }
新たに出てきたのが else if ですね
ifの条件ではなくこの条件なら・・・
みたいな使い方です。
そんなに難しくないですよね！
サクッといきます
signalが赤ならコンソールにStop!と表示してください
signalが黄ならコンソールにCaution!と表示してください
signalが青ならコンソールにGo!と表示してください
うん・・・簡単ちん！
そして、同じ結果を表示するのですが、この処理switch文でも書けちゃいます！
switch文
真上の例をswitch文でいきましょう。
switch文は
switch(){ //（）内の引数が case '': //何々のとき //処理内容 break; //処理終了 default: //それ以外は //処理内容 }
みたいな感じで書きます。
確かdefault内の処理にはbreakは不要です？
では例文
const signal = red; switch(signal){ case 'red' : console.log('Stop!'); break; case 'yellow' : console.log('Caution!'); break; case 'blue' : case 'green' : console.log('Go!'); break; default: console.log('Wrong signal!'); }
解説していきます。
定数定義は大丈夫ですね
switch(signal){}
この中カッコ内にswitch文の処理を書いていきます。
今回は「signalが何々の時」で処理を分けたいので
（）内にはsignalを入れます。
そして
case 'red' : console.log('Stop!'); break;
この部分
case 'red' : :signalがredなら
console.log('Stop!') :コンソールにStop!と出力してください。
break; :処理終了
break;を入れないと処理が終わらないので気をつけてください！
その下yellow, blue, greenは同じ処理ですね。
あ、人によっては信号青を緑って言ったりするんでgreenも入ってます
処理内容が同じ場合には上記のように書けます。
default: console.log('Wrong signal!');
それ以外の場合の処理ということなので、今回はred, yellow, blue, green以外の処理をここに記述していきます。
つまり、red, yellow, blue, green以外の場合は、コンソールにWrong signal!と表示してね てことですね。
for文
次はfor文です。
for(数字を入れる変数を用意; その変数の幅を指定; 変数を増やしていく){ //処理内容 }
これはちょっと説明下手かも
コメントにて苦情受け付けます
取り敢えず例文行ってみよう
for(let i =1; i<=10; i++){ // console.log('hello + i'); console.log(`hello ${i}`); }
まずはlet i = 1
iという変数を用意して初期値を１にします。
i <= 10; :iは10以下であることを定義します。（1, 2, 3, 4, 5, 6, 7, 8, 9, 10）
i++; :処理を行うたびにiを1ずつ増やします。
ではどのように処理がされていくのか解説します。
まず、iに初期値である1が代入されます
iには1が代入されており10以下なので、{}内の処理が実行されます。
コンソールにhello 1と出力されます。
1回目の処理が実行されたので i++ ; でiが1増えます
iに2が代入されます。
iには2が代入されており10以下なので、{}内の処理が実行されます。
以下i = 10まで繰り返し
i = 11となったタイミングで i <= 10の条件から外れるので全ての処理が終了します。
ちなみに
console.log(`hello ${i}`);
の(`hello ${i}`)という書き方ですが
コメントアウトしてあるconsole.log('hello + i')と同じ結果が出力されます。
よく使われると思いますので覚えておられた方がよいのではと存じます。
while文
続いてはwhile文です。
while(){ //（）内の条件の間
console.log(｀${hp} HP left!｀); //この処理を繰り返す
hp -= 15;
}
では例文
let hp = 100;while(hp > 0){ console.log(｀${hp} HP left!｀); hp -= 15; }
let hp = 100;
hpという変数に100を代入
while(hp > 0){}
hpが0より大きい限り繰り返す
console.log(｀${hp} HP left!｀);
コンソールに100HP leftと表示
hp -= 15;
hpから15を引いた数を自己代入
2周目は85, 3周目は70........
hpが10になったタイミングで15を引くとマイナスになってしまい、次の処理に入ろうとすると0より大きいという条件式から外れるので、処理が止まります。
テンプレートリテラルで使用しているバッククォートはマークダウンの都合上全角で書いています。
コピペする際には半角に直してくださいな
今回はここまで
次回は・・・またJS！
それではまた次回！
