JavaScriptを学び中の今、混乱したこと・違和感を感じたことのリスト。
きっと数ヶ月・数年経って久しぶりにJavaScriptを使う私が同じところで躓くと思うので、ここに残します。
VSCodeでJavaScriptでデバッグする
参考：Visual Studio CodeでのJavaScriptのデバッグ方法
model\
`javascript01\
|`sample.html
`main.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script defer src="main.js"></script>
</head>
<body>
<div class="container">
<button id="go">GO!</button>
</div>
</body>
</html>
'use strict';
const goButton = document.querySelector("#go");
goButton.addEventListener("click", kansu);
function kansu() {
// ここに処理を書く
}
JavaScriptは別にWebサイト・Webブラウザ上だけで動くわけじゃないんだけど
今回の学習の内容からしてもこんな実装したうえで動かすのがよさげ。
Live Previewでhtmlを表示してWebサーバ立ててURLをコピペしておく。
初めてデバッグさんボタンを押すとこんなメッセージが出るのでlaunch.jsonファイルを作成しますを選択。
当然最後はChromeでもいいんだけど今現在の私はEdge派。
model\
|`.vscode\
| `launch.js ★
`javascript01\
|`sample.html
`main.js
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Open sample.html",
"file": "{フォルダ格納しているパス}\\model\\javascript01\\sample.html"
}
]
}
このlaunch.jsとかもなんなのかまだわかってない。12月末までにわかっているといいな。
んであとはいい感じにブレイクポイント貼っていい感じに実行すればいい。
配列の定数、再定義はできないけど値の更新はできる
なんでやねん！
function kansu() {
const fruits = ["apple", "banana", "orange"];
fruits = ["one", "two", "three"];
}
Uncaught TypeError TypeError: Assignment to constant variable.
at kansu (xxxxx\model\javascript01\main.js:10:10)
いっぽうで
function kansu() {
const fruits = ["apple", "banana", "orange"];
fruits[0] = "lemon";
console.log(fruits);
}
(3) ['lemon', 'banana', 'orange']
main.js:12
0 = 'lemon'
1 = 'banana'
2 = 'orange'
length = 3
[[Prototype]] = Array(0)
[[Prototype]] = Object
なぜなの！納得いかん。が、そういうものだと現状は理解。
ちなみにpushもできる。まじかよ。
const fruits = ["apple", "banana", "orange"];
fruits.push("grape");
lengthは「要素数」。最後の要素の番号じゃない
for(let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
これはNG
i <= fruits.length
Perlあたりであったんだよな。最後の要素番号取るやつ。$#ARGVだっけ。
参考：perlにおける配列要素数の取得
コイツのせいでよくミスる。私だけじゃないはず。
forの条件式で定義した変数はループ後に解放される
function kansu() {
const fruits = ["apple", "banana", "orange"];
for(let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
console.log(i);
}
console.log(i);
}
apple
main.js:11
0
main.js:12
banana
main.js:11
1
main.js:12
orange
main.js:11
2
main.js:12
Uncaught ReferenceError ReferenceError: i is not defined
at kansu (xxxxx\model\javascript01\main.js:14:15)
オブジェクトという存在
あ、ちなみに自分、言語系の習熟ほぼ皆無です。肌でbashスクリプトとperlを身に着けている程度。
で、Java系やってるとよく聞くMapという存在。おそらくPerlでいうところのHashなんだろうけど、Progateだと「オブジェクト」っていう名前で紹介された。違うものなの？
参考：【JavaScript】これからはオブジェクトよりも Map オブジェクトを使おう！
あ、違うものなのね。積み本。
配列の中のオブジェクトの呼び出し方
なんだか「Perlで育ってきた人がJavaScriptを触るときに気をつけること」になってきたな。ニッチな需要だ。
const fruits = [
{name: "orange", color: "orange"},
{name: "apple", color: "red"}
];
console.log(fruits[1].name);
これがPerlだと$fruits[1]{name}みたいな、だっけ？そんなんになるわけだ。すっごいわかりやすいね。
オマケにオブジェクトの中のオブジェクトも同じ。
const user = {
name: "Ki2neudon",
favorite : {
food: "soba",
sport: "ランニング",
game: "ビタミーナ王国"
}
}
console.log(user.favorite.game);
めっちゃ直感的～！
アロー関数
JavaScript ES6 から導入されたらしい
const hoge = function() {
//
}
を
const hoge = () => {
//
}
って書ける…え、これ見やすい？でも覚えていないと「なぁにこれぇ」ってなりそう。
forとforEachの違い
いろいろあるんだろうけど、いったんいまの理解
const fruits = ["orange", "apple", "lemon"];
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}
const fruits = ["orange", "apple", "lemon"];
fruits.forEach((fruit) => {
console.log(fruit);
})
いちいちiを定義しなくていい。あとforEachが関数ではなくて配列のメソッド、というところ。
今回体系的にゼロから学ばないとココもぼんやり認識している程度だったんだろうなぁ