JavaScript勉強の記録

更新日時: April 03, 2020

attributeとpropertyの違い

※2つとも属性の意味

`attribute`

HTML Documentのelementsに属性（追加の情報）を与えるために使われる。
最初から与えられる値
class、data-*(dataset)など

`property`

HTML DOMの中でattributeを操作するために使われる
key:value式で扱える
DOMツリー内で動的に変えられる

違いについて

attribute
- HTML Documentの中で存在する
- 静的で変化しない属性、値
- HTMLのドキュメント自体が持つ属性
property
- HTML DOMの中に存在する（DOM APIで扱う）
- 動的に変化し得る属性、値
- DOMで動的に扱える属性

attribute 와 property 의 차이

Property,Attribute 프로퍼티,어트리뷰트, 속성

HTML 특성 참고서

HTML 속성

HTML Attributes

HTML,DOMの違い

ブラウザでレンダーリングされる順番

                           DOM
                            ↓
HTML  →  HTMLパーサー  →   DOMツリー       配置
                            ↓           ↑
                       アタッチメント  →  renderツリー  → render  → 表示
                            ↑
StyleSheets→CSSパーサー→スタイル規則

ユーザがリクエストを送る
レスポンスで受け取ったHTMLファイルをパーシングしてDOMツリーを作る
CSSファイルをパーシングしてDOMツリーと結合する
レンダーリングする
ブラウザの画面に表示する

HTML

文章の内容、構造、書式をmarkup情報として表現する言語
人が理解できて、区別できるように作られた
機械は理解できないため、ブラウザが解釈できる言語や構造に変換するパーシング作業が必要
各ブラウザごとにパーシングを行うパーサーが異なるため、同じHTMLでも違う結果値になる可能性がある

Document

ブラウザに読み込まれたウェブページ
DOMツリー（ページコンテンツ）のエンドポイント（진입점）の役割をする
ページのURL取得やドキュメント内に新しい要素を生成するなどの機能をグローバルに提供する
あらゆるコンテンツタイプの共通プロパティやメソッドを提供する

Document - MDN

DOM

パーシングされたHTMLのツリー構造のオブジェクト
ドキュメントにアクセスできるAPI
node,property,methodを持つオブジェクト
ブラウザに見えるものとは限らない
- ブラウザに見えるものはrenderツリー（DOMとCSSの組み合わせ）であり、スクリーンに描画されるものだけに構成されるため、DOMとは違う
Devtoolsに見えるとは限らない
- 疑似要素は含まれない
- ::beforeとか::afterのようなもの

HTML,DOM간단정리

(번역)DOM은 정확히 무엇일까?

DOM소개 - MDN

8/ DOM(1) - 노드의 계층 구조(1)

Parsing

Parsing(파싱)이란? Parser(파서)란?

구문 분석 - Wikipedia

ES5、ES6での違い

テンプレートリテラル

ES5

特殊文字のエスケープや連結演算子の記述が必要

var lastName = "hoge";
var firstName = 'fuga';
console.log("My name is" + lastName + " " + firstName);

ES6

`hoge` で囲むことでテンプレートリテラルが使える

テンプレートリテラル内で${variable}を使うことで変数をそのまま使える

var lastName = "hoge";
var firstName = 'fuga';
console.log(`My name is ${lastName} ${firstName}`);

アロー関数

ES5

関数宣言に3種類がある

function命令

function str(arg1, arg2) {
  console.log(arg1);
}

Functionコンストラクター

var str = new Function("arg1", "arg2", "console.log(arg1)")

関数リテラル（匿名関数を利用）

var str = function(arg1, arg2) {
  console.log(arg1));
}

ES6

アロー関数を使うことで関数リテラルをシンプルに書ける

//引数が1つの場合
var str = arg1 => console.log(arg1);

// 引数が2つ以上の場合
var str = (arg1, arg2) => {
  console.log(arg1);
}

//オブジェクトリテラルを返す場合
var str = func => ({ id: '8' });

アロー関数を2回以上書く場合はカリー化して書いていることと同じ

//ES6
const foo = x => y => x + y;

//↓

//ES5
var foo = function con(x) {
  return function (y) {
    return x + y;
  };
};

// 実行時
foo(1)(2); // 3

JavaScript - ES6の文法でわからないところが｜teratail

[JavaScript] Vuex の中での foo => bar => foo + bar みたいなアロー関数2回続く場合の表記に慣れる。 « きんくまデザイン

thisの挙動

ES5

メソッド呼び出し

オブジェクトのメソッドでthisは呼び出し元となるオブジェクトを指す

var obj = {
  value: 10,
  show: function() {
    console.log(this.value); // 10
  }
}
obj.show();

関数呼び出し

関数で呼び出すとthisはグローバルを指す

function func() {
  var value = 2;
  console.log(this.value); // undefined
}
func();

何か参照させたい場合は、関数外でvar value = 1;などのように書く

コンストラクター呼び出し

コンストラクターでインスタンス化した場合、thisは生成されたインスタンスを指す

function Obj(val) {
  this.value = val;
}
var obj = Obj(0);
console.log(obj.value); // 0

apply,call,bind

call、applyメソッドを使うと第1引数の値をthisにすることができる

※他のオブジェクトが持つメソッドをさぞ自分のメソッドかのように呼び出すメソッド

var obj = {
  value: 1,
  show: function() {
    console.log(this.value);
  }
};
var newObj = {
  value: 5
};
obj.show(); // 1
obj.show.call(newObj); // 5
obj.show.apply(newObj); // 5

第2引数以降は関数に渡される引数

callは引数の順番通りに連続した引数のリストを渡す

applyは引数の配列を1つだけ渡す

JavaScript の call( ) メソッドを雑に説明 - Qiita

Function.prototype.call() - JavaScript | MDN

Function.prototype.apply() - JavaScript | MDN

bindの場合、新しい関数を生成し、呼び出されたときの引数をthisに設定した状態で処理をする

var newFunc = obj.show.bind(newObj);
newFunc();

Function.prototype.bind() - JavaScript | MDN

※どんなときに使う関数なのかまだピンとこない

ES6

アロー関数

関数が宣言された時のスコープにthisが自動的に当たる

var obj = {
  value: 10,

  //メソッド呼び出し
  show: function() {
    console.log(this.value); // 10

    // 関数呼び出し
    function show_01() {
        console.log(this.value); // undefined
    }
    show_01();

    // アロー関数
    var show_02 = () => {
        console.log(this.value); // 10 thisはobjを参照
    }
    show_02();
  }
}
obj.show();

変数の宣言

ES5

varで宣言していた

そして、グローバル汚染問題も多々起きていた

ES6

var,let,constの3つのシンタックス

let:変数の再宣言ができない、再代入はできる

const:変数の再宣言/再代入ができない

※constの場合、オブジェクトや配列を宣言した場合、参照した物自体は差し替えできないが、参照の中身は差し替えられる

var array1 = () => {
  const arrayFalse = [1,2,3];
  arrayFalse = [4,5,6]; //Error
  console.log(arrayFalse);
}
array1(); //Error

var array2 = () => {
  const arrayTrue = [1,2,3];
  arrayTrue[1] = 10;
  console.log(arrayTrue);
}
array2(); //[1,10,3]

変数のブロックスコープ

ES6

let, constをifやforのような{}に囲ったブロック内で宣言した場合、ブロックの外側で参照はできない

if(true) {
  var i = 0;
}
console.log(i); //0

if(true) {
  let j = 10;
}
console.log(j); //ReferenceError

if(true) {
  var k = 100;
}
console.log(k); //ReferenceError

逆にブロック外で宣言した場合はブロック内で参照することはできる

const i = 5;
if(true) {
  console.log(i); //5
}

module

ES5

名前空間パターンを使って使えた

var obj = obj || {};

JavaScript モジュール・クラス総括（2015年7月） - Qiita

require

ファイル自体を読み込むことで使う方法

CommonJSの仕様として存在
ただし、browserifyのような変換処理なしではまだ未対応

js --- a.js
    |
    --- b.js
このような構成があるとする

//index.html
<script src="a.js"></script>
<script src="b.js"></script>

//b.js
var a = require(./a.js);

このように書くことでb.jsの中でa.jsをインポートすることができる

ES6

import/export

Moduleとは

ある機能を実現するためのプログラムのかたまり
別ファイルに渡す変数/関数などのまとまり

Moduleを1つだけ受け渡す場合

export default 'Module名'

import 'import先で使う名前' from 'ファイルパス'

Moduleを複数受け渡す場合

exportする側では受け渡しするものにexportをつける

import側はimport {受け取り1,受け取り2, ...} from 'ファイルパス'

複数のmoduleをすべてimportする場合はimport * as 'オブジェクト名' from 'ファイルパス'

ES5とES6の違いをまとめてみた(メモ) - Qiita

【JavaScript・export・import】モジュールについて理解をまとめる | とものブログ

ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita

ES6以降の構文とES5の構文の比較 - Qiita

JavaScriptの仕様ES5以前とES2015(ES6)以降の違いの抑えるべき項目 – CodeAid（コードエイド）

JavaScript入門 - とほほのWWW入門

DOMセレクターについて

速度面

要素取得

getElementById / getElementsByClassNameのほうが、querySelector / querySelectorAllより早い【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips | Will Style Inc.｜神戸にあるウェブ制作会社

mustache技法

mustache記法について簡単にまとめてみた - Qiita

constructor

インスタンスが生成される度に呼ばれる関数

コールバック関数

他の関数に引数として渡される関数
コールバック関数は外側の関数で何らかの処理やアクションを実行する
同期型コールバックの場合、呼び出した順番で処理される
非同期型コールバックの場合、非同期命令が完了した後に続いてコードが実行される
- そのため、同期型コールバックのように上からの順で呼び出されるとは限らない
- コールしてリターンされるまでコールバック関数を使っている処理より下の処理が先に動くこともある

Callback function (コールバック関数) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

JavaScriptのコールバック関数の使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

ES5で関数に`this`を指定する方法

基本的に関数単体では「これ」と指差すオブジェクトが存在しない
- newでオブジェクトとして生成する必要がある

constructorを使って、関数にthisをbindする

class A {
  constructor() {
    // オブジェクト内の関数に直接オブジェクトを指定する
    this.verb = this.verb.bind(this);
  }

  this.word = 'do something!';

  verb() {
    return this.word;
  }
}

const a = new A();

const b = a.verb; // do something!

ES6以降はアロー関数を使うことで、自動的にthisでそのオブジェクトを指すことができる

メソッド

オブジェクトのプロパティとなった関数のこと

メソッドの宣言

let obj = {
  a: function(x) {return typeof x} // 従来の書き方
  b: y => typeof y // ES2015から
  c:(z) {return typeof z} // ES2015から
}

【Javascript】関数とメソッドの違い - 弥生研究所

ES2015新機能: JavaScriptのclassとmethod - Qiita

`async/await`

`async`

非同期関数

アロー関数で使うなら以下のように。

const a = async () => {
  ︙
  処理
  ︙
}

`await`

非同期関数の中でのみ有効

async function - JavaScript | MDN

await - JavaScript | MDN

axios

インスタンスを作ってからリクエストを投げる

import axios from 'axios';
const axiosBase = axios.create({
  baseURL: 'urlを記載',
  headers: {
    必要なヘッダーを記載
  }
})

const result = axiosBase.get('/', {
  params: {キー:バリュー}
})

axios/axios: Promise based HTTP client for the browser and node.js

[axios] axios の導入と簡単な使い方 - Qiita

Map

要素の順番で反復処理を行う

for .. of、forEachのような処理の代わりに使える

const numbers = [0,1,2,3,4];
let newNumbersForSyntax = [];
let newNumbersMapSyntax = [];
// for文の場合
for (let i = 0; i < numbers.length; i++) {
  newNumbersForSyntax.push(numbers[i] * 10);
}

// Mapの場合
newNumbersMapSyntax = numbers.map(num => num * 10);

Map - JavaScript | MDN

レンダリングされた時点で要素取得したいが、うまくいかない時

ある要素で表現するリソースがロードされていないのに取得しようとする可能性がある
- addEventListenerを使って、ロードしたら取得するという書き方にする
```
document.getElementById('要素ID').addEventListener('load', Elementattribute)
```
  이벤트 참조 | MDN

Twitter Facebook LinkedIn Hatena

カモ

attributeとpropertyの違い

attribute

property

違いについて

HTML,DOMの違い

HTML

Document

DOM

Parsing

ES5、ES6での違い

テンプレートリテラル

ES5

ES6

アロー関数

ES5

function命令

Functionコンストラクター

関数リテラル（匿名関数を利用）

ES6

thisの挙動

ES5

メソッド呼び出し

関数呼び出し

コンストラクター呼び出し

apply,call,bind

ES6

アロー関数

変数の宣言

ES5

ES6

変数のブロックスコープ

ES6

module

ES5

require

ES6

import/export

Moduleを1つだけ受け渡す場合

Moduleを複数受け渡す場合

DOMセレクターについて

速度面

要素取得

mustache技法

constructor

コールバック関数

ES5で関数にthisを指定する方法

メソッド

メソッドの宣言

async/await

async

await

axios

Map

レンダリングされた時点で要素取得したいが、うまくいかない時

共有

コメントする

関連記事

ブログメンティーの卒業エントリー

Rust LT Onlineの参加レポート

抽象思考体験オンラインワークショップの参加レポート

Electronのプロセス間通信時の注意点と簡単な実装方法について

`attribute`

`property`

ES5で関数に`this`を指定する方法

`async/await`

`async`

`await`