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

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

JavaScript 要素の属性を操作・クラス名で操作

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

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.2 f:id:TomozQ:20201115174827j:plain

JavaScript備忘録 Vol.13

目次
  • 要素の属性を操作
  • classNameを取得
  • classList( )




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

今回もDOMの操作を見ていきます。

要素の属性を操作

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201115173257p:plain

前回の続きですね。


ではまず、HTMLにtitle属性を追加してみます。

<body>
  <body>
    <h1 id='target' title='見出し'>男子プログラマーになりたいやつ</h1>
    .
    .
    .
  </body>


title属性は要素に対する補助的な情報を与えるもので、マウスホバーすると表示されます。

このtitle属性をJavaScriptで操作していきます。



jsファイルを見ていきましょう。

'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
    document.getElementById('target').title = '見出しが変わりました。'
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}


1.function upDate()という関数内でidがtargetの要素のテキストを変更する。

2.同じくfunction upDate()という関数内でidがtargetのタイトル属性の値を変更する。

3.const btnとしてidがbtnの要素を代入し、

4.btn.addEventListener('click, ')でbtnがクリックされたらupDate()関数を実行する

という処理ですね。

結果はこんな感じ

f:id:TomozQ:20201115173134g:plain

また、このコードでは

document.getElementById('target')

を複数回記述してしまっているので

function upDate(){
  const target = document.getElementById('target');
  target.textContent = 'Chaaaaaaange!!!!';
  target.title = '見出しが変わりました。';
}

の様に定数化しておくといいかもしれませんね。




では次はスタイルを変更してみましょう。
スタイルは.style.プロパティ = ○○の様に記述します。 具体的には...

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    target.textContent = 'Chaaaaaaange!!!!';
    target.title = '見出しが変わりました。';
    target.style.color = 'red';
    target.style.backgroundColor = 'black';
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

こんな感じですね。

結果は...

f:id:TomozQ:20201115173115g:plain

こうなります。

なんかスタイルが変わるとUIをJSで変えてるぞー！って感じがしていいですよね。




classNameを取得

上ではJavaScriptに直接CSSを書き込んでスタイルを変更しました。



ただ、スタイルに関してはJavaScriptでこのように書いてしまうと、CSSとの役割分担があいまいになるので見た目の指定は CSS に任せて、 JavaScript では class 属性の操作だけを書く方法が一般的です。



ではどの様に変えていくのか見ていきましょう。

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

HTMLはtitle属性を外し、JavaScriptのfunctionの中身は空にしてあります。


まず、HTMLに直書きでmyColorというクラスのスタイルを書いていきます。

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
    <style>
      .myColor{
        color: red;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

次に、ボタンをクリックしたら、このクラスをh1要素に付与する様、JavaScriptを書いていきます。

.className =とすることでクラスを付与することができます。

今回の場合は

{
  function upDate(){
    const target = document.getElementById('target');
    target.className = 'myColor';
  }
}

f:id:TomozQ:20201115173056g:plain targetのクラス名をmyColorにしてねとすることでHTMLにCSSで書かれているプロパティが適用され、色が変更されています。

注意点もあります。

<style>
  .myColor{
    color: red;
    background-color: black;
  }
  .myBorder{
    border-bottom: 4px solid orange;
  }
</style>

  <body>
    <h1 id='target' class='myBorder'>男子プログラマーになりたいやつ</h1>
    .
    .
    .
  </body>
</html>

例えばこんな感じですでにh1要素にクラスがついていた場合

f:id:TomozQ:20201115173247p:plain

上記のJavaScriptのコードでボタンを押すと... f:id:TomozQ:20201115173038g:plain

こんな感じでmyBorderクラスが外れてしまいます。



classNameを使用すると、クラス属性の値が丸々変わってしまうのです。



myBorderも残したままにしたい場合には

target.className = 'myColor myBorder';

この様に、元々あるクラスも書いてあげます。

f:id:TomozQ:20201115173020g:plain

でもこれちょっとめんどくさいですよね・・・




classList( )

もう少し便利な方法を見ていきましょう。


これが上のJavaScriptのコードです。

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    target.className = 'myColor myBorder';
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}


ここではclassList( )を使って書き換えてみましょう。
.classList.add('クラス名')とすることでクラスを追加することができます。

今回の場合は

target.classList.add('myColor');

f:id:TomozQ:20201115173020g:plain

myBorderを書く必要がなくなりましたね。




またclassList( )を使うことでクラスを調べることができます。

classList.contains( )としてあげることで、有無をtrue、falseで返してくれます。

さらに、remove( )を使うことでクラスを削除することもできます。

ではこの2つを使ってコードを書いてみましょう。

function upDate(){
  const target = document.getElementById('target');
  if(target.classList.contains('myColor')){
    target.classList.remove('myColor');
  }else{
    target.classList.add('myColor');
  }
}

targetにmyColorクラスがついていたら外し、ついていなかったら追加するという処理ですね。 f:id:TomozQ:20201115174421g:plain

この様な処理はよくあるので、実はもっと短い記述も用意されています。

function upDate(){
  const target = document.getElementById('target');
  target.classList.toggle('myColor');
}


toggle( )とすることで有無を切り替えてくれます。

動作は上と変わりません。






今回はここまで

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

それではまた次回！

JavaScript DOM要素の操作

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

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.1 f:id:TomozQ:20201112230911j:plain

JavaScript備忘録 Vol.12

目次
  • 要素の操作
  • 複数の要素を取得
  • 要素の取得方法
  • addEventListner( )




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

まだオブジェクト編は残っていますが、今回はDOMの操作を見ていきます。

要素の操作

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>

    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{

}


ではまず、HTMLに要素を追加していきます。

<body>
  <h1>男子プログラマーになりたいやつ</h1>
  <p>JavaScript.JavaScript.JavaScript</p>
  <p>React.React.React</p>
  <p>JQuery.JQuery.JQuery</p>
  <script src='js/main.js'></script>
</body>


ブラウザに表示するとこんな感じですね。

f:id:TomozQ:20201112225619p:plain

では、h1要素をいたずらしてみましょう。

'use strict'

{
  document.querySelector('h1').textContent = '男子プログラマーになりかけのやつ';
}

ブラウザをリロードすると表示が変わってますね。

f:id:TomozQ:20201112230003g:plain

もう少しわかりやすくするために関数にして3秒後に変化する様にしてみましょう。

{
  function upDate(){
    document.querySelector('h1').textContent = '男子プログラマーになりかけのやつ';
  }
  setTimeout(upDate, 3000);
}

upDateという関数にし、その下でsetTimeout( )関数を呼び出しています。
第一引数のupDateは関数の呼び出し、第二引数の3000は3000msを意味しています。

したがって、ブラウザのリロードから3000ms後にupDate関数を呼び出す、という記述ですね。

f:id:TomozQ:20201112225948g:plain document.getSelector( )はよくCSSで使われるセレクタも指定できるのですが、 JavaScriptではHTMLの要素にidを記述し、それを指定する方法がよく使われます。

どういうことかというと

<h1 id='target'>男子プログラマーになりたいやつ</h1>

この様に要素にidを振ってあげます。
JavaScriptの方は

document.querySelector('#target').textContent = '男子プログラマーになりかけのやつ';

とすることもできますし、
別の書き方で

document.getElementById('target').textContent = '男子プログラマーになりかけのやつ';

と書くこともできます。 getElementById( )も比較的よく使われる表現です。


複数の要素を取得

ではベースは先ほどのコードのままで、次はp要素も操作していきましょう。

先ほどと同じ様にやってみると

{
  function upDate(){
    document.querySelector('p').textContent = 'Ruby.Ruby.Ruby.';
  }
  setTimeout(upDate, 3000);
}

コードはこうなりますよね。

しかし、結果は...

f:id:TomozQ:20201112225928g:plain

最初の1行しか変わっていません。

実はquerySelectorを用いてpとしても、最初の一つ目しか取得することができません。

ではどうすれば全てに適用できるでしょうか

手順をみていきます。

まず

{
  function upDate(){
    document.querySelectorAll('p')[2].textContent = 'Ruby.Ruby.Ruby.';
  }
  setTimeout(upDate, 3000);
}

querySelectorAllを使い、('p')を指定することで全てのp要素のDOM情報を取得します。
配列と同じ様に[2]とすることで3番目の要素を取得することができます。 f:id:TomozQ:20201112225912g:plain 配列と同じ様に扱うことができるので、ここでforEach( )を使うことができます。

p要素のtextContentを全て変えてみましょう。

{
  function upDate(){
    const texts = document.querySelectorAll('p');
    texts.forEach(text =>{
      text.textContent = 'Ruby.Ruby.Ruby.'
    })
  }
  setTimeout(upDate, 3000);
}


1.document.getElementById('p')としてp要素を全て取得し、textsという定数に代入します。

2.textsは配列になっているのでここにforEach( )を回していきます。

3.引数をtextと単数にして

4.それぞれのtextContentを変更しています。

結果はこうですね。

f:id:TomozQ:20201112225854g:plain

さらに、引数をもう一つ追加して

function upDate(){
  const texts = document.querySelectorAll('p')
  texts.forEach((text, index) =>{
    text.textContent = `${index}番目のpだよ`
  });
  
}
setTimeout(upDate, 3000);


それぞれの要素をtext、その順番をindexという引数で渡すことで

こんな感じにもできます。

f:id:TomozQ:20201112225839g:plain


要素の取得方法

次は色んな取得方法をみていきます。

id属性がついている => getElementById( ) // idで取得

一つの要素を取得する => querySelector( ) // idやセレクタを指定

複数の要素を取得する => querySelectorAll( ) // 指定した全ての要素

その他
  => getElementByClassName( ) // クラス名で指定
  => getElementByTagName( ) // タグで指定


などがあります。
また、DOMツリーの階層関係から取得する方法もあります。

例えば

<ul>
  <li>ToDo1</li>
  <li>ToDo2</li>
  <li>ToDo3</li>
</ul>

こんなHTMLがあったとしましょう。

ulの子Nodeを取得したい場合には
ul.childNodes

としてあげることで子Nodeを全て取得することができます。


ここで一点注意なのですが、子Nodeにはli要素などの要素Nodeの他に、改行や空白を表すテキストNodeも含まれています。

したがって子要素のみを取得した場合には

ul.children
とします。

さらに、最初の子Nodeや最後の子Nodeを指定することもできます。 その場合には

firstChild //最初の子Node

lastChild //最後の子Node

firstElementChild //最初の子要素Node

lastElementChild //最後の子要素Node

としてあげることができます。


また、親Nodeを指定したい場合には li.parentNode

としてあげることで親Nodeを指定することができます。


兄弟Nodeを取得したい場合には

previousSibling //一つ前の兄弟

nextSibling //一つ後の兄弟

とします。

ここでも要素Nodeだけを取得するのであれば

previousElementSibling //一つ前の兄弟の要素Node

nextElementSibling //一つ後の兄弟の要素Node

とします。




addEventListner( )

これは割と実践的ですね。



ベースとなるコードです。

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = '男子プログラマーになりかけのやつ'
  }
  
  setTimeout(upDate, 3000);
}

内容はさっきやったブラウザをリロードしたら3秒後にテキストが変わるというやつですね。




ではこれをちょっといじっていきましょう。

まずはHTMLにボタンを追加します

<body>
  <h1 id='target'>男子プログラマーになりたいやつ</h1>
  <p>JavaScript.JavaScript.JavaScript.</p>
  <p>React.React.React.</p>
  <p>JQuery.JQuery.JQuery.</p>
  <button id='btn'>Button</button>
  <script src='js/main.js'></script>
</body>

button要素を作り、idを振っておきます。

ブラウザで見るとボタンができてますね。

f:id:TomozQ:20201112225607p:plain

JavaScriptの方を触っていきましょう。

function upDate(){
  document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
}

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  upDate();
})

処理を見ていきましょう。

setTimeoutの3000は消しました。


1.function upDate( )関数の処理はさっきと同じですね。わかりやすい様にボタン押下後に出力される文字を変更しました。

2.まず、idが'btn'の要素を取得してbtnという定数に入れます。

3.addEventListener( )として第一引数にclickというイベントを指定し、第二引数にアロー関数で処理を渡します。

4.今回の場合はupDate( )としてupDate関数を呼び出しています。 f:id:TomozQ:20201112225814g:plain

JSってこういうのが面白いですよね。






今回はここまで

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

それではまた次回！

JavaScriptでランダムな整数値を生成する・日時の取得・alertとconfirm

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

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

JavaScript備忘録 Vol.11

目次
  • ランダムな整数値
  • 日時
  • alert( )・confirm( )




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

ランダムな整数値

ここではランダムな整数値の出力してみましょう

前回の記事の

Math.random( )を使っていきます。

console.log(Math.floor(Math.random() * 6) + 1)

1.Math.floor( )で小数点以下を切り捨て
2.Math.random( )で0 ~ 1未満の乱数を生成
3.Math.randomに6をかける...0 ~ 6未満の整数の乱数を生成
4.最後に全体に1を足してあげる...1 ~ 7未満の整数の乱数を生成

これで1.00... ~ 6.9999.....の間で乱数が生成され、小数点以下が切り捨てられるという処理になります。


1回目

f:id:TomozQ:20201111214150p:plain

2回目

f:id:TomozQ:20201111214140p:plain

3回目

f:id:TomozQ:20201111214128p:plain


日時

ここでは日時の操作を見ていきましょう。

  1. 現在日時
  2. 特定の日時



現在日時
const d = new Date();

console.log(d);

f:id:TomozQ:20201111214119p:plain new Date()とすることで、現在の曜日、月、西暦、時間を取得することができます。

さらに

const d = new Date();

const year = d.getFullYear();
const month = d.getMonth();
const date = d.getDate();
const day = d.getDay();
const hour = d.getHours();
const minute = d.getMinutes();
const second = d.getSeconds();
const milliSecond = d.getMilliseconds();

console.log(year);
console.log(month);
console.log(date);
console.log(day);
console.log(hour);
console.log(minute);
console.log(second);
console.log(milliSecond);

f:id:TomozQ:20201111214109p:plain
dを現在日時として取得することで


・d.getFullYear( )で西暦

・d.getMonth( )で月

・d.getDate( )で日

・d.getDay( )で曜日

・d.getHours( )で時間

・d.getMinutes( )で分

・d.getSeconds( )で秒

・d.getMilliseconds( )でミリ秒


を取得することができます 月は0 ~ 1が出力され、0が1月になります。

何月何日と出したい場合には

console.log(`${month + 1}月${date}日`);

としてあげればいいですね。

f:id:TomozQ:20201111214100p:plain


曜日も0 ~ 1が出力され、0が日曜になります。


特定の日時

決まった日時を使いたい場合もあります。

その時には引数に値を入れてあげます。

const d = new Date(2000, 10);

console.log(d);

f:id:TomozQ:20201111214050p:plain 年は2000年としてあげて、月は10とすることで11月を出力してくれます。 日付は1、時刻は0を自動で入れてくれます。


あとから時間を入れることもできます。

const d = new Date(2000, 10);
d.setHours(10, 20, 30);

console.log(d);

f:id:TomozQ:20201111214040p:plain この様にsetHours( )に引数を3つ渡してあげることで時間、分、秒を設定することができます。


また、日付を入れることもできます。

const d = new Date(2000, 10);
d.setHours(10, 20, 30);
d.setDate(30);

console.log(d);

f:id:TomozQ:20201111214030p:plain 30日に変わりましたね。


さらにこのgetDate( )は自動補正もしてくれます。

例えば11月は30日までしかありませんが、

d.setDate(31);

とすると f:id:TomozQ:20201111214019p:plain

月が変わって12月の1日になりましたね。




alert( )・confirm( )

ここからちょっとだけ画面を動かしていきましょう

  1. alert( )
  2. confirm( )



alert( )
alert('Hello JavaScript');



f:id:TomozQ:20201111221952g:plain alert( )とすることでダイアログを表示することができます。


confirm( )
confirm('Are You Sure?');


confirm( )もalert( )と同じ様にダイアログを出すのですが

f:id:TomozQ:20201111221935g:plain
選択肢にOKとキャンセルがあります。

これはどちらを選択したかが返り値として取得できます。

const answer = confirm('Are You Sure?');

if(answer){
  console.log('削除しました')
}else{
  console.log('キャンセルしました')
}



f:id:TomozQ:20201111221914g:plain
OKを選び、answerがtrueの時には削除しましたとコンソールに出力し、
キャンセルを選び、falseの時にはキャンセルしましたと出力されています。




今回はここまで

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

それではまた次回！

JavaScript いろんな関数

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

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

JavaScript備忘録 Vol.10

目次
  • join( )
  • split( )
  • Math.floor( )
  • Math.ceil( )
  • Math.round( )
  • toFixed( )
  • Math.random( )




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

今回は様々な命令のみの記事になっていますのでサクッといきます。

join( )

const d = [2020, 11, 10];

console.log(d.join('/'));



配列.join('/');

とすることで配列の中身を/で結合することができます。 f:id:TomozQ:20201110205715p:plain 間に何も入れたく無い場合には ('') として空文字を入れてあげればそのまま結合することができます。


split( )

const t = '22:00:00'

console.log(t.split(':'));

split(':')の様にカッコに引数を入れてあげることで、要素を分割して配列にすることができます。 f:id:TomozQ:20201110205705p:plain

さらに

const t = '22:00:00'

const [hour, minuite, second] = t.split(':');

console.log(hour);
console.log(minuite);
console.log(second);

console.log(`${hour}時${minuite}分${second}秒`);

分割代入を用いることで

f:id:TomozQ:20201110205655p:plain

この様な結果を出力することができます。




Math.floor( )

ここからは数値の扱いを見ていきましょう

const nums = [1, 5, 7];

まずは

数値の合計と平均を見ていきます。

const nums = [1, 5, 7];

let sum = 0;

nums.forEach(num => {
  sum += num;
});

let avg = sum/nums.length;

console.log(sum);
console.log(avg);

こんな感じですね

f:id:TomozQ:20201110205640p:plain

333333333...が気になりますよね。

ここでMath.floorを使います。

console.log(Math.floor(avg));

f:id:TomozQ:20201110205624p:plain この様にMath.floor(引数)とすることで、小数点以下を切り捨ててくれます。


Math.ceil( )

ここからはチョッぱやで進みます

例文は上記通り。

consoleに渡す数字を

console.log(Math.ceil(avg));

とすることで小数点以下を切り上げてくれます。 f:id:TomozQ:20201110205610p:plain


Math.round( )

例文は上記通り。

console.log(Math.round(avg));

とすることで四捨五入てくれます。 f:id:TomozQ:20201110205558p:plain


toFixed( )

console.log(avg.toFixed(3));

とすることで小数点以下引数の値までを出力してくれます。 f:id:TomozQ:20201110205545p:plain


Math.random( )

これは以前もやりましたね。

  console.log(Math.random());

Math.random()とすることでランダムな数値を生成してくれます。

リロード1回目

f:id:TomozQ:20201110205533p:plain

リロード2回目

f:id:TomozQ:20201110205522p:plain

リロード3回目

f:id:TomozQ:20201110205511p:plain




今回はここまで

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

それではまた次回！

JavaScript オブジェクトにループ処理（おまけ: 文字列の操作）

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

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

JavaScript備忘録 Vol.9

目次
  • Object.keys( )
  • 変数
  • 文字列の操作




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

Object.keys( )

例えば、オブジェクトのプロパティを全て取り出したいとします。

ですがオブジェクトにはforEach( )を使うことができません。

なので、一旦キーを配列として取得し、その配列に対してforEach( )を使う必要があります。

手順をみていきましょう。

const prices = {
    orange: 100, 
    apple: 200,
};

こんなオブジェクトがあったとします。

まずは

Object.keys( )を使い、キーを配列として取得します。

どうするかというと

const prices = {
  orange: 100, 
  apple: 200,
};

console.log(Object.keys(prices));

この様に

Object.keys(オブジェクト名)としてあげることで、キーを配列として取得することができます。 f:id:TomozQ:20201109215446p:plain

ではこれを応用して、配列に対しforEach( )を回して要素を一つずつ出力します。

const prices = {
  orange: 100, 
  apple: 200,
};

const keys = Object.keys(prices);

keys.forEach(key => {
  console.log(key);
});

結果はこうです。

f:id:TomozQ:20201109215434p:plain pricesのキーを配列にして、keysという定数に代入します。
その後、keysという配列にforEach(key)を回し、要素分だけ値を出力しています。

ではついでに値も出力しましょう。

const prices = {
  orange: 100, 
  apple: 200,
};

const keys = Object.keys(prices);

keys.forEach(key => {
  console.log(`Key: ${key}, Value: ${prices.key}`);
});

としたいところですが、これだと・・・

f:id:TomozQ:20201109215423p:plain undifinedになってしまいます。
これはkeyが文字列で取得されているからですね。
なのでもう一つの記法のオブジェクト['キー']を使用してあげます。

console.log(`Key: ${key}, Value: ${prices[key]}`);

としてあげます。 f:id:TomozQ:20201109215405p:plain

さらにこのオブジェクトが一つの箱だったとして、他の果物が入っている箱も加え、一つの配列として管理したいとします。

配列がお店、オブジェクトがお店に並んでいる、果物が入った箱だと考えてみましょう。

const store = [
  {orange: 100, apple: 200},
  {grape: 300, pineapple: 400},
  {strawberry 500, melon: 200},
];

では各値（今回の場合は各金額）にアクセスしたい場合を考えてみましょう。

例えばmelonの金額を取り出したい場合

const store = [
    {orange: 100, apple: 200},
    {grape: 300, pineapple: 400},
    {strawberry: 500, melon: 600},
  ];
  
  console.log(store[2].melon);

この様に

配列[index番号].キー

としてあげることで取得することができます。

f:id:TomozQ:20201109215327p:plain


変数

JavaScriptを使う上での注意事項です。

JavaScriptには大きく分けて単純なデータ型と複雑なデータ型があります。

下記の様に分けられますね。

単純なデータ型
数値 文字列 真偽値 undifined Null
複雑なデータ型
配列 オブジェクト


この二つですが、変数を代入したときの挙動が異なるので見ていきましょう。


単純なデータ型

では例文

let x = 3;
let y = x;

x = 6;

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

f:id:TomozQ:20201109215312p:plain xは6、yは3と出力されましたね。

流れを追ってみると

  1. xに3を代入...xの値は3
  2. yにxを代入...yの値は3
  3. xに6を代入...xの値は6

最終的に出力されるのは

xは6、yは3ですね。

複雑なデータ型

では上のコードを配列に変えて見てみましょう。

let x = [3, 4];
let y = x;

x[0] = 6;

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

今度は結果を見る前に考えてみましょう。

  1. xに[3,4]という配列を代入...xは[3,4]
  2. yにxを代入...yは[3,4]
  3. x[0]として、配列xの一番目の値に6を代入...xは[6,4]

上の単純なデータ型と同じ様に考えれば、最終的に出力されるのは

xは[6, 4]、yは[3, 4]ですね。

では結果をみてみましょう

f:id:TomozQ:20201109215258p:plain x, yとも[6, 4]となっていますね。

単純なデータ型については解説は不要ですね。

では複雑なデータ型はどうなっているのでしょうか？

x = [3, 4]とするとコンピューター上のどこかに[3, 4]という配列が作成されそこにxという名前がつきます。
次にy = xとすると、xの値がyに代入されるのではなく、xの値がどこに格納されているのかという情報が作られyという名前がつきます。
よって、x[0] = 6とするとyも[6, 4]となるわけです。

複雑なデータ型はデータ量が大きくなることがあるため、丸々コピーしてシステムに負荷をかけない様にこの様な仕組みになっているみたいですね。


ちなみに、配列の値そのものをコピーしたい場合には

let x = [3, 4];
let y = [...x];

x[0] = 6;

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

の様にスプレッド演算子を使えば値を丸々コピーすることができます。

f:id:TomozQ:20201109215244p:plain


文字列の操作

おまけ？

文字列を操作してみましょう！

サクッといきますね

const str = 'Fresh';

console.log(str.length);

f:id:TomozQ:20201109215232p:plain 文字列.lengthとすることで文字列の長さを取得できます。 



const str = 'Fresh';

console.log(str.substring(1, 3));

f:id:TomozQ:20201109215216p:plain substring(開始位置, 終了位置)としてあげることでその部分の文字を取得することができます。

今回の場合は

文字列も0から始まるので...Freshの1番目であるrから終了位置である3(s)の手前までとなるのでreが出力されてますね。 



const str = 'Fresh';

console.log(str[1]);

f:id:TomozQ:20201109215206p:plain

この様に配列の様に文字を取得することもできます。

ただ、これは値が取得できるだけで配列と同じ様に使うことはできません。

const str = 'Fresh';
str[1] = 'g';

console.log(str);

この様に代入を使用としても

f:id:TomozQ:20201109215156p:plain

読み込み専用だよ、というエラーが出てしまいます。






今回はここまで

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

それではまた次回！

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

こんな感じです！



今回はここまで

続きは次回！

それではまた！