改めてjsを学んでみる
ある程度ツールを作っていてどうしてもhtmlとの連携でjsを使わないといけなくなってしまったので勉強することにした。
アロー関数
あーみたことある。
react.jsで何気なく書いていたのにはこういう意味があったのね。
let getTriangle = (base, height) => {
return base * height / 2;
};
console.log('triangle:' + getTriangle(5, 2));
静的な構造
へぇー。こんな順番がめちゃくちゃでも動くんだな。
関数から先にコード解析/コンパイルをするんだね。
console.log('triangle:' + getTriangle(5, 2));
function getTriangle(base, height) {
return base * height / 2;
}
console.log('triangle:' + getTriangle(5, 2));
var getTriangle = function(base, height) {
return base * height / 2;
};
スコープ
Cやpythonと違って変数の宣言が雑でも有効になる。
if (true) {
var i = 5;
}
console.log(i);
こういう雑に宣言させないためにも現場ではvarは禁止で原則letやconstで書くように言われているのか。
if (true) {
let i = 5;
}
console.log(i);
...を使用することで配列を展開できる。
console.log(Math.max(...[15, -3, 78, 1]));
上記の...で配列を展開する仕組みを応用すると下記のようなコードもかける。
function getMaxMin(...nums) {
return [Math.max(...nums), Math.min(...nums)];
}
let result = getMaxMin(10, 35, -5, 78, 0);
console.log(result);
let [max, min] = getMaxMin(10, 35, -5, 78, 0);
console.log(max);
console.log(min);
引数に対象のプロパティを指定してあげるだけ値が取得できる。
function show({name}) {
console.log(name);
}
let member = {
mid: 'Y0001',
name: 'TaroYamada',
address: 't_yamada@example.com'
};
show(member);
d1ではAnimalを代入しているので「tokotoko」がd2はSuperAnimalを代入してるので「gudaguda」が出力してる。
var Animal = function() {};
Animal.prototype = {
walk : function() {
console.log('tokotoko...');
}
};
var SuperAnimal = function() {};
SuperAnimal.prototype = {
walk : function() {
console.log('gudaguda!');
}
};
var Dog = function() {};
Dog.prototype = new Animal();
var d1 = new Dog();
d1.walk();
Dog.prototype = new SuperAnimal();
var d2 = new Dog();
d2.walk();
d1.walk();
import文を読み込む際にエラーが起こったのでメモ。
まずモジュールは以下２つ。 Util.js
const AUTHOR = 'YAMADA, Yoshihiro';
export class Member {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.lastName + this.firstName;
}
}
export class Area {
static getTriangle(base, height) {
return base * height / 2;
}
}
main.js
import { Member, Area } from './lib/Util.js'
var m = new Member('taro', 'tamada');
console.log(m.getName());
下記エラーが発生した。
Uncaught SyntaxError: Cannot use import statement outside a module
この記事によるとscriptのtypeの部分を"text/javascript"から"module"に変更しないといけないらしい。 teratail.com
sampleとなるhtmlのscriptと部分を下記に書き換えた。
<script type="module" src="js/chap5/main.js"></script>
これでローカルファイルを叩いてみてもエラーになってしまった。
from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https
このサイトを見るとどうもchromeのセキュリティによって弾かれているらしい。
ローカルサーバーを立てて実行して上げるとできるみたいなのでやってみた。
おっ！できた！
今回はここまで。お疲れさまでした。
