FDMの覚え書きブログ

【js】addEventlistnerについて

js

JavascriptのaddEventListnerについてまとめています。

サマリ

オブジェクトにJavascriptのイベントを登録することができる
複数のイベントを登録することができる
イベント内のthisはaddするオブジェクトを指す

<body>
    <button id="btn">Change ButtonText Color</button>
    <script src="index.js"></script>
</body>

const btn = document.querySelector('#btn');

function changeColor() {
    this.style.color = 'red';
}
function changeBgColor() {
    this.style.backgroundColor = 'green';
}

btn.addEventListener('click', changeColor);
btn.addEventListener('click', changeBgColor);

【js】reduceメソッドについて

js

Javascriptのreduceメソッドについてまとめています。

サマリ

配列をループ処理するときなどに利用する
accumulatorとcurrentValueの考え方がある
accumulator（第一引数）に前のループの戻り値、currentValue（第二引数）に現在の値（配列の値）をとる
reduceメソッドに第二引数を渡さないと、配列の先頭の値が処理されず、直接accumulatorに格納されてしまう
なのでreduceメソッドに第二引数を渡すことで、その値が1ループ目の戻り値として判定され、配列の先頭値も処理される

const arry = [1,2,3,4,5];

arry.reduce(function(accu, curr) {
    console.log(accu, curr);
    return accu + curr;
}, '');

f:id:blackwatcher:20200725160315p:plain

【js】forEachメソッドについて

js

JavascriptのforEachメソッドについてまとめています。

サマリ

デフォルトで引数が3つ渡り、1つめが値、2つめが添字、3つめが配列となる
for文よりシンプルにループ分をかけるのでなるべくforEachを使う方が良い
forEachは変数を余分に宣言しなくて良い
また処理の中で何をやっているかもforEachの方がわかりやすいというメリットがある
複数人で開発しているとメリットが増す

const arry = [1,2,3,4,5];

arry.forEach(function(v, i, ary) {
    console.log(v, i, ary);
});

// arry.forEach(v => console.log(v));


// 上記のforEachと同じ出力結果だが記述が複雑
for(let i = 0; i < arry.length; i++) {
    const v = arry[i];
    console.log(v);
}

f:id:blackwatcher:20200725154121p:plain

【js】コールバック関数について

js

Javascriptのコールバック関数についてまとめています。

サマリ

コールバック関数とは、他の関数から呼び出されて実行される関数のこと
呼び出し先の関数内でコールバック関数を実行することができる
コールバック関数に引数を渡して実行することもできる
無名関数自体を他の関数に渡す書き方もある

function hello(callback, lastname) {
    console.log(callback);
    console.log('hello ' + callback(lastname));
}

function getName(value) {
    return 'Taro' + value;
}

hello(getName, 'Tanaka');

// 無名関数を直接渡す記述方法
hello(function(name){
    return 'Jiro' + name;
}, 'Tanaka');

f:id:blackwatcher:20200725152548p:plain

【js】アロー関数を使って記述する方法

Javascriptのアロー関数についてまとめています。

サマリ

アロー関数は関数を簡略化して記述する方法

returnで戻り値を返す場合は、returnの記述を省略できる

関数で定義する場合は、関数の呼び出し元が関数より前にあっても実行される

関数を変数に格納して定義した場合は、変数の呼び出し元が前にあると実行されない

// const hello = function(name, age) {
//     return `${name} ${age}`;
// }

// 上の記述をアロー関数で書き直した場合
const hello = (name, age) => `${name} ${age}`;


const arry = [1,2,3,4,5,6];

// arry.forEach(function(value) {
//     console.log(value);
// })


// 上の記述をアロー関数で書き直した場合
arry.forEach(value => console.log(value));

【js】比較演算子について

js

Javascriptの比較演算子について覚えておきたいことをメモしています。

サマリ

==は値を比較すが型までは比較しない

===は値と型を両方比較してtrue/falseを判定する

==で型が一致しない場合の比較は、まずjsが自動的に型を一致させ、そこから値の比較を行う

一致しない場合の判定は「!=」または「!==」を用いる

if(1 == 1) { // true
    console.log('this is true');
} else {
    console.log('this is false');
}
if(1 == '1') { // true
    console.log('this is true');
} else {
    console.log('this is false');
}
if(1 !== '1' ) { // ture
    console.log('this is true');
} else {
    console.log('this is false');
}

【css】要素をレイアウトする方法

css

cssを使ってhtml要素をレイアウトする方法についてまとめています。

サマリ

letter-spacingを使うと文字間を調整できる
display: inline-blockはblock要素を横並びにする
flexは縦・横並びだけでなく幅や要素の比率を指定することができる

/**
 * 横方向のレイアウト
 */
/* インライン要素に対して */
.parent {
  text-align: right;
  letter-spacing: -6px;
}
.child {
  display: inline-block;
}

/* ブロック要素を中央揃え */
.parent {
}
.child {
  margin: 0 auto;
}

/**
 * 上下方向のレイアウト
 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}