学習のアウトプット（JavaScript2）

【関数】

Rubyでいうメソッド。

・Rubyの場合

def メソッド名

処理の内容

end

・JavaScriptの場合

function 関数名（引数） {

処理の内容

}

※引数がない場合でも（）は記入が必要であることに注意。

例）

function sayHello(){

  console.log("こんにちは”)

}

sayHello()

→コンソールにこんにちはと表示される

-----------------------------------------------------------------------------------

【戻り値】

JavaScriptでは、戻り値を返すためにはreturnが必須となる。

-----------------------------------------------------------------------------------

【関数定義の種類】

関数宣言と関数式があり、どちらもよく使うので把握しておく必要がある。

関数式は、無名の関数を変数に代入する方式。

・関数宣言（上述）

function 関数名（引数） {

処理の内容

}

・関数式

変数 = function（引数）{

処理の内容

}

【関数宣言と関数式の違い】

関数宣言は先に読み込まれ、関数式は記述の順番通りに読み込まれる。

例えば関数の呼び出しが関数定義より前にあった場合、

関数宣言：呼び出し可能（関数部分が先に読み込まれるため）

関数式：エラーになる（定義される前に呼び出しを行なっているため）

-----------------------------------------------------------------------------------

【無名関数】

関数式のfunction（引数）{処理の内容}の部分。（変数＝以外の部分）

関数宣言と比べ、関数名を用いずに関数定義ができるので記述がシンプルになる。

-----------------------------------------------------------------------------------

【即時関数】

関数自体の呼び出しを行わなくても、すぐに処理が行われる関数。

（関数を定義すると同時に実行される）

例）

（function countNum(num) {

  console.log(num)

})(1)

-----------------------------------------------------------------------------------

【アロー関数】

近年よく使われている記述の方法。

function()の部分を() =>に差し替えて記述する。

より短い記述になるというメリットがある。

例）

・関数式

const 変数 = function（引数）{

処理の内容

}

・アロー関数

const 変数 = () => {

処理の内容

}

-----------------------------------------------------------------------------------

【関数定義の種類まとめ】

関数定義の種類	特徴
関数宣言	標準的な関数の定義。
無名関数	関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。
即時関数	流用する可能性のない関数を定義するときに使用する。別途関数を定義する手間がない。
アロー関数	無名関数または即時関数において、より省略した記述をしたい時に使用する。

---------------------------------------------------------------------------------

【JavaScriptにおけるセミコロンについて】

変数定義の文章の最後などにセミコロンをつけて、文章の終わりであることを

示すことができる。（セミコロンは省略することも可能）

セミコロンは、ルール上省けるものと、そもそもつけないものがあり、

煩雑になるのでカリキュラムでは省略で統一されている。

（ただし、場合によってはつけないとエラーが出ることもある）

セミコロンは、必須か不要か様々な意見があり分かれているので、

どちらが正解ということではない。

---------------------------------------------------------------------------------

【JavaScriptにおけるオブジェクトの概念】

JavaScriptでは、データや処理をまとめたものをオブジェクトと呼ぶ。

（オブジェクトの中にデータや処理が含まれている）

データはキーとバリューで構成されている。

キーとバリューがセットになったものをプロパティと呼ぶ。

例）

オブジェクト→human

データ→名前：鈴木　年齢：25歳　性別：男性（3つのプロパティ）

処理：歩く・食べる

つまり、オブジェクトはプロパティが集まってできている。

---------------------------------------------------------------------------------

【プロパティの書き方】

プロパティはハッシュで括られている。

変数 = {キー: バリュー}

例）

let human = {

  name = "Suzuki"

  age = 25

  jender = "man"

}

---------------------------------------------------------------------------------

【オブジェクトの値の取得】

オブジェクト名.プロパティ名で取得できる。

（プロパティ名はキーの部分になる）

例）

上記のhumanオブジェクトに対して

console.log(human.name)

→Suzukiが出力される

---------------------------------------------------------------------------------

【オブジェクトへのプロパティの追加】

・オブジェクト名.プロパティ名 = バリュー

・オブジェクト名['プロパティ名'] = バリュー

上記のどちらの記述でも追加できる。（どちらを使うべきかなどは特に言及なし）

---------------------------------------------------------------------------------

【プロパティの変更】

オブジェクト名.プロパティ名 = （変更したい値）

上記を記述して上書きをする。

---------------------------------------------------------------------------------

【JavaScriptにおけるメソッド】

オブジェクトに対してある動作をさせる為の処理。

プロパティの後に、メソッド名: function(){}を用いて記述する。

例）

let human = {

  name = "Suzuki"

  age = 25

  jender = "man"

 talk: function(){

    console.log(`私の名前は${human.name}です`)

  }

human.talk()

→私の名前はSuzukiです

---------------------------------------------------------------------------------

【windowオブジェクト】

ブラウザ全ての情報を持っているオブジェクト。

ブラウザオブジェクトとも呼ばれ、ブラウザが起動するタイミングで自動的に生成される。

JavaScriptで予め定義されているメソッドやオブジェクトは全てwindowオブジェクトの

プロパティという扱いになる。

（その為、本来は各メソッドは頭にwindow.が付くが、省略されている）

---------------------------------------------------------------------------------

【documentオブジェクト】

ブラウザ上のHTMLに対して何らかの処理を行うオブジェクト。

行う処理によってプロパティやメソッドが複数ある。

---------------------------------------------------------------------------------

【alert()】

（）の中の文字をアラート（ポップアップのようなもの）で表示させることができる。

本来はwindow.alert()だが、省略可能。

---------------------------------------------------------------------------------

【DOM（Document Object Model）】

HTMLを解析する仕組み。

HTMLをDOMで解析→CSSやJavaScriptで装飾→ブラウザが受け取ってユーザーに渡す

HTMLは階層構造なので、DOMで解析された際も階層構造のデータとなる。

これをDOMツリーまたはドキュメントツリーと呼ぶ。

JavaScriptではDOMツリーの一部を取得し、装飾などを行うことができる。

---------------------------------------------------------------------------------

【DOMツリーからのHTMLの取得】

主に3つの種類（id名から取得・class名から取得・セレクタから取得）がある。

①document.getElementById("id名")

②document.getElemenstByClassName("class名")

③document.querySelectorAll("セレクタ名")

※クラスは同名で複数存在することがあるので、Elementが複数形になる。

同じクラス名を持つ要素は全て取得する。

※セレクタ名は、最も頻繁に出てくるのは「クラス名」「id名」「HTMLタグ」であり、

それぞれ(".クラス名")、("#id名")、("タグ名")と記述する。

※②と③では戻り値が異なる。

②はHTML collection、③はNodeListを戻り値とし、見た目は同じようだが

この2つでは使えるメソッドが異なる。

（例えばforEach関数は後者）