男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScript プロパティとオブジェクトの操作

プログラミング プログラミング-JavaScript

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.5 f:id:TomozQ:20201104223042j:plain

JavaScript備忘録 Vol.8

目次
  • プロパティの操作
  • オブジェクトの操作




今回もJavaScriptの記事になっています。

プロパティの操作

ここではオブジェクトのプロパティの操作方法を見ていきます。

const fruit = {
    name: 'orange', 
    price: 100,
};



値の取得

2つの記法があります。

まず一つはオブジェクト名.キーとして取得する方法です

const fruit = {
  name: 'orange', 
  price: 100,
};

console.log(fruit.name);

f:id:TomozQ:20201104222309p:plain

orangeと出力されてますね


次はオブジェクト名['キー']という形で[ ]内にキーを文字列で渡します。

const fruit = {
  name: 'orange', 
  price: 100,
};

console.log(fruit['price']);

f:id:TomozQ:20201104222300p:plain

100と出力されていますね。


値の変更

例えばorangeをappleに、100を120に変更したいとします。

その場合は

const fruit = {
  name: 'orange', 
  price: 100,
};

fruit.name = 'apple';
fruit['price'] = '120';

console.log(fruit.name);
console.log(fruit['price']);

f:id:TomozQ:20201104222246p:plain

この様に再代入することでどちらの値もちゃんと変わっています。


キーの追加

また、この配列に原産国を追加しいたいとします。

その場合には新しくキーを追加してあげることができます

const fruit = {
  name: 'orange', 
  price: 100,
};

fruit.madeIn = 'Japan';

console.log(fruit);

f:id:TomozQ:20201104222235p:plain

オブジェクトにキーと値が追加されてますね。


削除

キーを削除してあげることもできます。

その際にはdelete オブジェクト名.キーとしてあげます。 

const fruit = {
  name: 'orange', 
  price: 100,
};

delete fruit.price;

console.log(fruit);

f:id:TomozQ:20201104222222p:plain

プロパティが name: 'orange' だけになりましたね。




オブジェクトの操作

以前の記事で配列に対してのスプレッド構文を紹介しましたが、オブジェクトに対しても使うことができます

const otherProps = {
  madeIn: 'Japan',
  color: 'red';,
};

const fruit = {
    name: 'orange', 
    price: 100,
};

この様に2つのオブジェクトがあり、otherPropsのプロパティをfruitに追加したいとします。

その場合には

const otherProps = {
  madeIn: 'Japan',
  color: 'red',
};

const fruit = {
    name: 'orange', 
    price: 100,
    ...otherProps,
};

console.log(fruit);

f:id:TomozQ:20201104222212p:plain

一つのオブジェクトに2つのプロパティを追加し、計4つのプロパティができましたね。


同じ記事で紹介した分割代入とレスト構文も使用することができます。

例えばこの

nameとpriceを定数として使用できる様にしたかったとします。

const otherProps = {
  madeIn: 'Japan',
  color: 'red',
};

const fruit = {
    name: 'orange', 
    price: 100,
    ...otherProps,
};

const{name, price, ...others} = fruit;

console.log(name);
console.log(price);
console.log(others);

f:id:TomozQ:20201104222202p:plain この様に分割代入を使うことができ、
const { }とし、キーと同じ定数名を使用することで、キーの値が代入されます。
他の要素をプロパティのままオブジェクトのままにしたい場合には上記の様に
...others
としてレスト構文を使うことでオブジェクトのままにすることができます。




今回はここまで

次回は・・・まだまだJS！

それではまた次回！

React 基礎編

プログラミング-JavaScript プログラミング-React プログラミング

React 基礎編 f:id:TomozQ:20201103184527j:plain

React備忘録

目次
  • ReactDOM.render( )
  • JSX
  • Component




今回はReact.jsの記事になっています。


Reactの導入についてはいろんなとこで紹介されているので今回は省略させてもらいます。

今回はこんなのを作っていこうと思います。

f:id:TomozQ:20201103182930g:plain

各色がクリックされる度にトータルの数が増えていく、というような機能ですね。

では見ていきましょう。

ReactDOM.render( )

まずはベースとなるファイルです

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <script>

    </script>
  </body>
</html>


headタグ内にあるscriptタグ3つはReactのCDNを使用するための記述です。
そして、一般的なjsと同じようにbodyタグ内にscriptタグを用意し、スクリプトを書いていきます。

・・・

今思ったけどこの記事めちゃめちゃ長くなるかも・・・



まあ、やっていきましょう。

まずは処理全体を即時関数で囲いたいので、ES6のアロー関数で書いていきましょう。

ここからはbodyタグ内のみ書いていきますね。

<body>
  <script type="text/babel">
    (() => {
    
    })();
  </script>  
</body>

即時関数とは無名関数を定義と同時に実行する関数のことです。

補足ですが、scriptタグのtype属性がtext/babelとなっています。これはhtmlファイル9行目、スクリプトタグ3つ目のbabelというライブラリを使用するために書いています。
babelを用いることで、JSXやJavaSvriptの新しい記法を使うことができます。

次にUIを表示する領域を作っていきます。

まずはdiv要素を作ります

<body>
  <div id='root'></div>
  <script type="text/babel">
    (() => {
    
    })();
  </script>  
</body>

そしてReactで作った部品を描画していきます。

<body>
  <div id='root'></div>
  <script type="text/babel">
    (() => {
      ReactDOM.render();
    })();
  </script>  
</body>


このように関数内でReactDOM.render();とします。
次に第一引数に描画したいUIをJSXという記法を用いて書き、第二引数にはそのUIをどこに描画したいのかを記述します。

(() => {
        ReactDOM.render(
          <p>Hi!</p>,
          document.getElementById('root')
        );
      })();


このように第一引数はHTMLと同じように要素を書きます。
第二引数ではjsの書き方で、idがrootの要素を取得しています。

なので今回の場合は

p要素のHi!という文字列を、 getElementById で取得したidがrootの要素に描画するという処理になっています。 f:id:TomozQ:20201103181607p:plain


JSX

JSXには{ }を使用することでJavaScriptを埋め込むことができます。

ではJSXをもう少し詳しく見ていくために、定数を定義し、埋め込みます。

(() => {
        const name = 'TomozQoo'
        ReactDOM.render(
          <p>Hi!{name}</p>,
          document.getElementById('root')
        );
      })();


{ }内をnameとしてJavaScriptを埋め込んでいます。 f:id:TomozQ:20201103181551p:plain

ちゃんと表示されていますね。

ちなみにメソッドもちゃんと使用することができます

(() => {
      const name = 'tomozqoo'
      ReactDOM.render(
        <p>Hi!{name.toUpperCase()}</p>,
        document.getElementById('root')
      );
    })();


f:id:TomozQ:20201103181538p:plain { }内でtoUpperCase( )とすることで全て大文字で出力されていますね。

そして、注意点なのですが、JSXで渡せる要素は1つという決まりがあります。

なので

(() => {
      const name = 'tomozqoo'
      ReactDOM.render(
        <p>Hi!</p>,
        <p>{name.toUpperCase()}</p>,
        document.getElementById('root')
      );
    })();

このようにp要素を2つ渡そうとするとエラーが出てしまいます。

f:id:TomozQ:20201103181524p:plain

今回のようにp要素を2つ渡したい場合には

(() => {
      const name = 'tomozqoo'
      ReactDOM.render(
        <div>
          <p>Hi!</p>
          <p>{name.toUpperCase()}</p>
        </div>,
        document.getElementById('root')
      );
    })();

このように1つの要素で囲ってあげる必要があります。

結果はこうです。

f:id:TomozQ:20201103181506p:plain

またHTMLには閉じタグがない要素もあります。

例えばhr要素なんかがそうですね。

(() => {
      const name = 'tomozqoo'
      ReactDOM.render(
        <div>
          <p>Hi!</p>
          <hr>
          <p>{name.toUpperCase()}</p>
        </div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>

f:id:TomozQ:20201103181454p:plain

そのまま書いてしまうと、このように閉じタグが無いよというエラーが出てしまいます。

その場合には

  <div>
    <p>Hi!</p>
    <hr/>
    <p>{name.toUpperCase()}</p>
  </div>,

このようにタグを閉じてあげればOKです。

f:id:TomozQ:20201103181412p:plain

ではさらに詳しくJSXを見ていきましょう。

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      ReactDOM.render(
        <div></div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>

まずはクラスについてです。

HTMLだとクラスを指定するには

<div class='test'></div>

とかって書きますよね。

ただ、JavaScriptだとclassは予約語になっています。

class App{

}

こんな感じで使いますよね。

なのでJSXで要素のクラスを指定するには違う名前を使わなくてはならず、

classNameというのを使います。

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      ReactDOM.render(
        <div className='box'></div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>


classと書いていたところをclassNameにしてあげるだけですね。

ではCSSでboxクラスの見た目を整えていきます。

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
}

f:id:TomozQ:20201103181402p:plain

こんな感じ。ちゃんと適用されてますね。


また、直接スタイルを指定することもできます

ReactDOM.render(
        <div style={{width: 100, height: 100, backgroundColor: '#FF3333'}}></div>,
        document.getElementById('root')
      );


スタイルはオブジェクト形式で指定する必要があるので、まず{ }を書き、その中にプロパティが入ったオブジェクトを書いていきます。
そのため{{ }}の様になります。
また、属性についてはcamelCaseで書く必要があるのでCSSではbackground-colorとしているところJSXではbackgroundColorと書きます。
pxも省略することができます。

こんな感じですね。

f:id:TomozQ:20201103181352p:plain

では次にイベントを設定してみます。

この箱がクリックされたらアラートが出る様に設定してみましょう


まず関数を作ります。

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      function showMessage(){
        alert('success!!');
      }

      ReactDOM.render(
        <div style={{width: 100, height: 100, backgroundColor: '#FF3333'}}></div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>

次にイベントを発火させる処理を書いていきましょう。

Reactでは要素に直接イベントを書くことが多い様です。

なので

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      function showMessage(){
        alert('success!!');
      }

      ReactDOM.render(
        <div style={{width: 100, height: 100, backgroundColor: '#FF3333'}}
        onClick = 'showMessage'></div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>

としたいところですが、これだとエラーが出てしまいます。

f:id:TomozQ:20201103181338p:plain

String型ではなく、関数をちょうだい！！ってエラーですね

JavaSvriptの式は{ }で渡さなくてはいけないので

ReactDOM.render(
        <div style={{width: 100, height: 100, backgroundColor: '#FF3333'}}
        onClick = {showMessage}></div>,
        document.getElementById('root')
      );

とします。

こんな感じですね。

f:id:TomozQ:20201103181636g:plain


Component

ここではComponentと呼ばれる独自のタグを使って、様々な機能を追加していってみます。

下記はベースのコードです。

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      ReactDOM.render(
        <div></div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>

では見ていきましょう。

ReactDOM.render(
        <Counter/>,
        document.getElementById('root')
      );

こんな書き方でコンポーネントは作ることができます。

1文字目は必ず大文字にしなくてはなりません。


次にコンポーネントを定義していきます。

JSの関数で定義します。

    (() => {
      function Counter(){

      }

      ReactDOM.render(
        <Counter/>,
        document.getElementById('root')
      );
    })();

こうですね

では中身を返す関数にしましょう。

  function Counter(){
    return <div>0</div>;
  }

f:id:TomozQ:20201103181322p:plain

ちゃんと0が表示されてますね！


Counterを増やしましょう

ReactDOM.render(
        <div>
          <Counter/>
          <Counter/>
          <Counter/>
        </div>,
        document.getElementById('root')
      );

JSXでは要素を一つしか返せないのでdivタグで囲ってあげます。

f:id:TomozQ:20201103181308p:plain

結果はこんな感じです。0が3つできました。


また、コンポーネントごと大枠の内容は一緒なんだけど微妙に変えたいということもできます。

その場合にはコンポーネントに属性をつけてあげます。

ReactDOM.render(
        <div>
          <Counter color='#FF3333'/>
          <Counter color='#FFFF55'/>
          <Counter color='#4689FF'/>
        </div>,
        document.getElementById('root')
      );

属性の名前は何でも大丈夫です。今回はcolorとして値に色を入れています。

そしたらコンポーネントでこの値を取ってみましょう

引数を指定します。

function Counter(props){
  return <div>{props.color}</div>;
}

f:id:TomozQ:20201103181253p:plain
引数をpropsとして{props.color}で要素のカラー属性の値を取得しています。

ここで注意なのですが、この引数である props は読み取り専用になっています。

なので

function Counter(props){
  props.color = 'red';
  return <div>{props.color}</div>;
}

としても

f:id:TomozQ:20201103181159p:plain

この様に、読み取り専用のプロパティだよというエラーが出てしまいます。


ではCounterが色を取得できたので、背景色を変えてみましょう。

(() => {
      function Counter(props){
        return <div style={{backgroundColor: props.color}}>0</div>;
      }

      ReactDOM.render(
        <div>
          <Counter color='#FF3333'/>
          <Counter color='#FFFF55'/>
          <Counter color='#4689FF'/>
        </div>,
        document.getElementById('root')
      );
    })();

f:id:TomozQ:20201103181148p:plain

こんな感じです。ちょっとだけそれっぽくなってきました！


では最後にちょろっとスタイルを整えます。

<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      function Counter(props){
        return <li style={{backgroundColor: props.color}}>0</li>;
      }

      ReactDOM.render(
        <div className='container'>
          <ul>
            <Counter color='#FF3333'/>
            <Counter color='#FFFF55'/>
            <Counter color='#4689FF'/>
          </ul>
        </div>,
        document.getElementById('root')
      );
    })();
  </script>
</body>

まずはJSXでCounterをリストにして、横並びにしたいのでdiv要素にcontainerというクラスをつけました。

そして返す要素をdiv要素からli要素に変更です。

f:id:TomozQ:20201103181137p:plain

こんな感じですね。


ではCSS

body{
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

.container{
  width: 330px;
  margin: 20px auto;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.container li{
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  margin: 0 5px 10px 0;
}

CSSの説明は割愛します。

f:id:TomozQ:20201103181855p:plain

こんな感じです！



今回はここまで

続きは次回！

それではまた！

JavaScript mapメソッドとfilterメソッド（おまけ: オブジェクトの生成）

プログラミング-JavaScript プログラミング

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.4 f:id:TomozQ:20201102231013j:plain

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);

f:id:TomozQ:20201102231629p:plain

このように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);

としてあげることで新たに配列を作ることができます。

f:id:TomozQ:20201102231638p:plain

また、こちらに関しても短縮した書き方があります。

今回の場合だと

条件式では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);

結果はこうですね

f:id:TomozQ:20201102231604p:plain

配列の中にオブジェクトが4つできました！

それぞれ展開してみるとこのようになっています。

f:id:TomozQ:20201102231553p:plain
また、name: 'orange'という部分をプロパティ、name部分をキー、'orange'部分を値なんて呼んだりします。




今回はここまで

次回は・・・まだまだJS！

それではまた次回！

JavaScript スプレッド構文と分割代入

プログラミング-JavaScript プログラミング

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.3 f:id:TomozQ:20201029215336j:plain

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);

とすると結果は

f:id:TomozQ:20201029214348p:plain

このように配列の中に配列が入るような形になってしまいます。


ここでスプレッド構文を用いることで要素のみを配列に追加することができます。

スプレッド構文は...配列名とします。

今回の場合は

const price1 = [500, 600];
const prices = [100, 200, 300, 400, ...price1];


console.log(prices);


とすることで、pricesにprice1の要素のみを追加することができます。 f:id:TomozQ:20201029214337p:plain

また、スプレッド構文は関数の引数としても使用される場合があります。

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);

このように関数を呼び出す際に

関数名(スプレッド構文);

としてあげます。

結果はこうですね。

f:id:TomozQ:20201029214324p:plain

覚えておくと何かと便利かなと思います。




分割代入

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の値を順番に代入してくれます。 f:id:TomozQ:20201029214253p:plain

また、定数に入れたいのが頭から2つ目までで、残りの2つは配列のままにしておきたいとします。

その時には

const prices = [100, 200, 300, 400];

const [a, b, ...others] = prices;
console.log(a);
console.log(b);
console.log(others);

とすることで実現することができます。

f:id:TomozQ:20201029214313p:plain

そしてここが分割代入の一番のキモかなと思うのですが

分割代入では値の変換をすることができます。

どういうことかというと

let x = 1;
let y = 2;

という2つの変数があり、この値を入れ替えたいとします。

その場合、分割代入を用いて

let x = 1;
let y = 2;

[x, y] = [y, x];

console.log(x);
console.log(y);

と書いてあげると

f:id:TomozQ:20201029214303p:plain このようにxとyの値が入れ替わります。


forEach( )

以前にfor文を用いて繰り返し処理を行う方法を紹介しましたが、

forEach( )を使用することでもう少し簡単に処理を書くことができます。

まずはforEach( )の書き方ですが

定数.forEach((引数) =>{ //関数
  //処理
});

のような書き方で実装することができます。

引数の名前は何でもいいのですが、単数形を書くことが多いんですかね？そんな風に感じます。

これで要素が無くなるまで繰り返し処理を行ってくれます。

では例文を見ていきましょう。

const prices = [100, 200, 300, 400];

prices.forEach((price) => {
  console.log(price)
});

結果は

f:id:TomozQ:20201029214253p:plain

こんな感じで出力されます。


さらにこれにインデックス番号も表示させたいとしましょう。

その場合には引数をもう一つ追加してあげれば実現することができます。

const prices = [100, 200, 300, 400];

prices.forEach((price, index) => {
  console.log(｀インデックス番号${index}: 要素の値${price}｀)
});

結果はこうですね

f:id:TomozQ:20201029214240p:plain

for文と違って範囲の指定時に要素の数を気にしなければならないということもないので、便利ですかね。



マークダウン内のテンプレートリテラルのバッククォートは全角になっていますのでコピペの際には半角に直してください。




今回はここまで

次回は・・・まだまだJS！

それではまた次回！

JavaScriptで配列の要素を変更する

プログラミング-JavaScript プログラミング

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.2 f:id:TomozQ:20201028195112j:plain

JavaScript備忘録 Vol.5

目次
  • 配列の要素変更




今回もJavaScriptの記事になっています。

配列の要素変更

今回は配列の要素を変更する方法を見ていきましょう

  1. unshift()
  2. push()
  3. shift()
  4. pop()
  5. splice()

全て例文で見ていきましょう。

まずはベースとなる例文

{
  const prices = [120, 110, 100, 90];

  console.log(prices);
}

f:id:TomozQ:20201028193913p:plain

要素が4つ入った配列ですね

では一つずつ見ていきます。


1. unshift( )
{
  const prices = [120, 110, 100, 90];
  prices.unshift(130);

  console.log(prices);
}

f:id:TomozQ:20201028193903p:plain
配列名.unshift( 要素 )とすることで配列の先頭に要素を追加することができます。

2. push( )
{
  const prices = [120, 110, 100, 90];
  prices.push(80);

  console.log(prices);
}

f:id:TomozQ:20201028193851p:plain
配列名.push( 要素 )とすることで配列の最後尾に要素を追加することができます。

3. shift( )
{
  const prices = [120, 110, 100, 90];
  prices.shift();

  console.log(prices);
}

f:id:TomozQ:20201028193839p:plain
配列名.shift( )とすることで配列の先頭の要素を削除することができます。

4. pop( )
{
  const prices = [120, 110, 100, 90];
  prices.pop();

  console.log(prices);
}

f:id:TomozQ:20201028193829p:plain
配列名.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);
}

f:id:TomozQ:20201028193818p:plain

このように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);
}

f:id:TomozQ:20201028193806p:plain

splice()の部分を見てみると

第一引数、第二引数は先ほどと同じことをしています。第三引数以降に追加したい要素を記述しています。

そうすることでこのような実行結果になります。



今回も軽めな内容でした。

もう少し経ったら画面にいろいろ描画していく方法を見ていきたいと思います。

今しばらくコンソールやメソッドにお付き合いください。




今回はここまで

次回は・・・まだまだJS！

それではまた次回！

JavaScriptで配列を作る・ループ処理を行う

プログラミング-JavaScript プログラミング

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編

f:id:TomozQ:20201027132042j:plain

JavaScript備忘録 Vol.4

目次
  • 配列を作る
  • 要素にアクセスする
  • ループ処理との組み合わせ




今回もJavaScriptの記事になっています。

配列を作る

例えば商品の金額を管理したい場合

{
  const price1 = 120;
  const price2 = 110;
  const price3 = 100;
}

としても良いですが、

同じ定数名で管理した方が便利な場合があります。


ここで配列を作ってあげます。

ついでに結果をコンソールに表示して見てみましょう

配列は[a, b, c];のように[ ]の中にカンマ区切りで書いていきます。

したがって今回の場合は

const prices = [120, 110, 100];

console.log(prices);

となり、出力結果は

f:id:TomozQ:20201026204746p:plain

となります。

また一番左の三角マークをクリックすると配列の中身を見ることができ、

f:id:TomozQ:20201026204932p:plain

今回の場合は

0番目が120
1番目が110
2番目が100

となっていることがわかります。

配列では番号は0番目から始まります。

この0番目1番目2番目といった数字をインデックス番号、添字なんて言ったりします。


要素にアクセスする

次はこの配列に格納されている要素へのアクセスの仕方を見ていきましょう

では真上の例文で見ていきましょう

const prices = [120, 110, 100];

console.log(prices);

例えばこれで、インデックス番号が1の要素のみをコンソールに出力したいとします。

その場合は

console.log(prices[1]);
のように配列名[インデックス番号]とすることでその要素を取得することができます。

結果はこんな感じですね。

f:id:TomozQ:20201026204942p:plain

また、取得した要素を変更することもできます。

const prices = [120, 110, 100];
prices[1] = 200;

console.log(prices);

こんな感じで要素に対し再代入を行うことで要素の値が変わります。

f:id:TomozQ:20201026204952p:plain インデックス番号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]が順番に出力されていくわけですね。

出力結果がこちら

f:id:TomozQ:20201026205004p:plain

さらに、一緒にインデックス番号も表現してみましょう。

今回このfor文の中でのインデックス番号はiになりますので

const prices = [120, 110, 100];
for(let i = 0; i < prices.length; i++){
  console.log(｀Price${i}: ${prices[i]}｀);
}

このようにテンプレートリテラルを使ってiを出力してあげればいいですね

f:id:TomozQ:20201026205015p:plain

簡単でしたね！




今回はここまで

次回は・・・まだまだJS！

それではまた次回！

JavaScript 基礎編 Vol.3

プログラミング-JavaScript プログラミング

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>基礎編 Vol.3 f:id:TomozQ:20201027132053j:plain

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);

出力結果

f:id:TomozQ:20201024143938p:plain

これをもっと短くするためにアロー関数を使って書いていきます。

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);

こうなります。

f:id:TomozQ:20201024143938p:plain

出力結果も変わりませんね。


さらに、アロー関数では引数が一つの場合、( )も省略することができます。

別の例を見てみましょう。

const double = function(a){
  return a * 2;
};

こんな関数式があります

doubleという定数に、引数を2倍にして返す関数を代入しています。

これを省略して書くと

const double = a =>  a*2;

こうなります。

const double = a =>  a*2;

console.log(double(12));

このように、引数に12を入れてコンソールに出力する指示を書くと

f:id:TomozQ:20201024181551p:plain

こうなります。




スコープ

次はスコープについてみていきましょう。

スコープは、有効範囲という意味です。

function f(){
  const x = 1;
  console.log(x);
}

f();

f( )という関数があり、その中でxという定数に1が代入されています。
同じ関数内でコンソールにxを表示させる指示を書きます。
最後にこのf( )を呼び出します。

結果はこうですね。当たり前ですが、１が出力されます。

f:id:TomozQ:20201024181912p:plain

ここがポイントなんですが

ブロック内で宣言された変数や定数はブロック内のみが有効範囲となります。

ではブロックの外でxを出力してみましょう。

function f(){
  const x = 1;
}

//f();
console.log(x);

f:id:TomozQ:20201024181601p:plain こんな感じでxどこ？的なエラーになってしまいます。

ここでxという定数名を使いたい場合には

const x = 2;

function f(){
  const x = 1;
}

f();
console.log(x);

このように関数の外でxを定義してあげましょう。

そうするとこんな感じで出力することができます。

f:id:TomozQ:20201024181612p:plain

xという同じ定数名ですが、出力される値が違いますよね？

1行目のconst x = 2;

このようなブロックの外で宣言された定数は全ての範囲で有効となり、このようなスコープを

グローバルスコープ

といいます。

ただ、今回のようにブロック内とブロック外で同じ名前の定数が宣言されている場合、

ブロック内ではブロック内で宣言された値が優先されます。

よって、今回は同じ x でも 1 と 2 が出力されています。


ちなみにif文やwhile文でもブロックがあるので、同じようにスコープが適用されます。




今回はここまで

次回は・・・まだまだJS！

それではまた次回！