sezemiadmin/arrow_javascript.md

Last active August 22, 2018 07:45

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/sezemiadmin/6d6c2ea98f3ae1bef23cdbad0b0b1260.js"></script>
Save sezemiadmin/6d6c2ea98f3ae1bef23cdbad0b0b1260 to your computer and use it in GitHub Desktop.

Download ZIP

1日で習得するJavaScript入門コースのサンプル

Raw

arrow_javascript.md

なんらかの関数型の仕組みが取り入れられている
ラムダ式の表現が何かしら取り入れられている
- 無名関数を簡単に書きやすくなった
JSではラムダ式と言わずアロー関数という

(arg) => { statements };

引数を宣言する
- -> or => 言語によって違う
- python のみ lamda: と書く
さっきの即時式で書いたものをアロー関数で書いてみる

const f = (a, b) => a + b;

const result = f(1, 2);
console.log(result);

return も書かなくて良い
{} も書かなくて良い
同じように動くが this だけが違う

Raw

function_declaration_javascript.md

function sum(a, b) {
    return a + b;
}

function を書いて名前を書く
変数の宣言はなしで良い
呼び出すときは関数名を指定する

const result = sum(1, 2);
console.log(resulut);

const という変数宣言がES6が定義された
- var は書かないが、ES5以前は使われている
- let という書き方もOK
  - 違いは const が定数、let が変数
  - 基本は const を書いて、どうしても変数にする必要がある場合は let
const を消してみるとどうなるか
- 実行される
- グローバル変数になってしまって、他から result がどっからでも値が変更できてしまう
関数宣言を前に書くとどうなるのか
- 実行される
  - ん? なぜ順次実行なのに?
  - 関数の巻き上げという機構があり、実行時に上に行く
  - 関数宣言をしていないと巻き上げない(!!)
    - 関数定義文では順次実行されてしまう

Raw

function_definition_equation.md

function([args]) {
    statements;
    [return value;]
};

無名関数とも呼ばれる
式なので ; が必要
式なので戻り値がある
- 関数オブジェクトを返す
- ファーストクラス･オブジェクトでリテラル(値)として返ってくる
- 新しく変数に代入できる
- 関数即時式 (関数の中に関数がある) も実行できる

const result = (function (a, b) {
    return a + b;
})(1, 2);

console.log(result);

function(){} が関数
ES6以降は関数即時式をあまり使わなくなっている
- ES5以前はめっちゃ使っているので注意

Raw

hello_world_javascript.md

Hello World

console.log("Hello, JavaScript!"); 
/* 
- console は引数で指定されたものをなにか画面に出す
- セミコロンは必須ではないが推奨
- 文字列は "" でも '' どちらでもよい (違いはない)
- "メッセージ" や '赤(値)' のように書く
*/

実行結果

Hello, JavaScript!
undefined

戻り値が無いので、 undefined が出てくる
hello.js を作ってコマンドラインからも実行できる

> node hello.js

Raw

high_order_function_javascript.md

関数型プログラミングでは高階関数を使いまくります
この高階関数を使いこなすことがとても重要
関数を引数、戻り値とすることができる
- f() の () に f() を入れられる
- return -> f() のように戻り値に入れられる

function x() {
    console.log("x");
};

function y(f) {
    console.log("y");
    f(); // 引数で受け取った関数を実行
};

y(x);

出力

> y
> x

x と y という関数
y という関数が x という関数を呼び出している
戻り値に関数を指定

function x() {
    console.log("x");
};

function y() {
    return x; // 関数を戻り値として返す
};

const z = y();
z(); // => x

無名関数もうけとることができる

function y(f) {
    console.log("y");
    f(); // 引数で受け取った関数を実行活用例として map や
};

// アロー関数で記述 (書き換える場合は this に注意しよう)
y(() => console.log("x"));

y(function() { // 関数定義式で記述した場合 (ES5だと多い書き方)
    console.log("x");
});

活用例として map やreduceや

const array = [1, 2, 3];
const newArray = array.map(function(n) {
    return n * 2;
});
console.log(newArray);

map関数は引数を取れないものは使えない (仕様)
ラムダ式で書くとこんな感じ

const array = [1, 2, 3];

const newArray = array.map(n => n * n);
console.log(newArray);

Raw

manipulate_dom.md

ボタンを記述

<html>
    <head>
        <script></script>
    </head>
    <body>
        <button>Click Me!</button>
    </body>
</html>

id属性をつける

<html>
    <head>
        <script></script>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
    </body>
</html>

document オブジェクトで指定する // ブラウザのみ

<html>
    <head>
        <script>
            document.getElementById("myBUtton"); // idによって要素を取得する
        </script>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
    </body>
</html>

上から実行されるので <script> タグを移動

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                document.getElementById("myButton");    
        </script>
        </body>
</html>

const で指定

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");    
        </script>
        </body>
</html>

一旦実行

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener();    
        </script>
        </body>
</html>

ButtonというDOMオブジェクトを取得した
- Document Object Model と呼ばれる
EventHanlerという関数を追加する

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener();    
        </script>
        </body>
</html>

EventHadler を書いていく

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener('click', function() { // 第1引数にイベント名(mouse_overなど) 第2引数に通常，無名関数を書く
                });     
        </script>
        </body>
</html>

ラムダに記述

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <script>
                const btn = document.getElementById("myButton");
                console.log(btn);
                btn.addEventListener('click', () {
                }); 
        </script>
        </body>
</html>

処理を書く // コンソールに clicked を出す

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <div id="div"/>
        <script>
                const btn = document.getElementById("myButton");
                const div = document.getElementById("div");
                console.log('btn');
                btn.addEventListener('click', function() {
                    console.log('Clicked!')
                }); 
        </script>
        </body>
</html>

タグを追加

<html>
    <head>
    </head>
    <body>
        <button id="myButoon">Click Me!</button>
        <div id="div"/>
        <script>
                const btn = document.getElementById("myButton");
                const div = document.getElementById("div");
                console.log('btn');
                btn.addEventListener('click', function() {
                    console.log('Clicked!')
                }); 
        </script>
        </body>
</html>

タグ内を操作する

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button id="myButton">Click Me!</button>
        <div id="div"/>
        <script>
            const btn = document.getElementById("myButton");
            const div = document.getElementById("div");
            console.log(btn);
            btn.addEventListener('click', () => {
                console.log("Clicked!");
                div.innerHTML = "Hello";
            });
            div.addEventListener('mouseover', () => {
                div.style.color = 'red';
                div.style.background = 'yellow';
            });
        </script>
    </body>
</html>

Raw

prototype_javascript.md

ES5以前

// クラスは存在せず、Personという変数を用意している
var Person = function(name, age) {
    this.name = name; // this は関数オブジェクトそのもの
    this.age = age;
}

// クラスを使うときはプロトタイプを使う
Person.prototype.setName = function(name) {
    this.name = name;
}
/*
プロトタイプと呼ばれるフィールドを持っている
プロトタイプの関数オブジェクトに関数を記述する
setNameというメソッド(関数)を追加している
*/

ES6以降

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    set name(name) {
        this._name = name;
    }

見慣れた感じになりました