JavaScript②
エラーを自力で解決するための方法
Googleデベロッパーツールのconsoleを使ったエラーの確認
- エラーメッセージを読む
- 英語が理解できない場合はGoogle翻訳に掛ける
- エラーメッセージをGoogleで検索して情報を得る
MDNにJavaScriptエラーリファレンスというページがある
どのようなエラーメッセージがあるか一覧を確認して詳細を表示することができる
クリックするとエラーの原因など詳細を確認することができる
サンプルコードを使ったトラブルシューティング
- よく見比べる
- サンプルコードを実行。エラーが再現するか確認
- 差分（diff）を表示する
代表的な差分を表示するツール
macOSであれば、diffコマンド、BBEdit
🔰初心者におすすめ
お手軽に2つのコードの差分を比較できるウェブサービス Mergely
〜使い方〜
左側にサンプルコード（お手本）
右側に自分で書いたコードをコピペすると差分が可視化される！
⚠️コピペの元となるコードを間違えて迷宮入りしないよう、慎重に操作する！
参考サイト
プログラムの間違いを自分で見つけられるようになり、
誰にも依存しないでコードを書けるようになろう！
コメントを使おう
JavaScriptのコメント
1行の時は// を先頭につける
例）//コメントしたいテキスト
複数行の時はコメントしたい箇所を/* */で囲う
1行の時のように//を使ってもOK🙆🏻好みの問題！
/*
コメントしたい行１
コメントしたい行２
*/
コメントアウトのショートカットキー
command+/
演算をしよう
四則演算と余り
// 足し算 「+」
console.log(10 + 3);
// 引き算 「-」
console.log(10 - 3);
// 掛け算 「*」
console.log(10 * 3);
// 割り算 「/」
console.log(10 / 3);
// 余り 「%」
console.log(10 % 3);
変数（定数）の宣言
let 変数を宣言
const 定数を宣言
変数とは
- 値に名前を付けてデータを一時的に保持できる入れ物のこと
- 値の変更が可能
- 数値だけでなく文字列も保持できる
定数とは
- ”変化しない値”に名前を付けて一時的に保持できる入れ物
- 値の変更は不可
- 数値だけでなく文字列も保持できる
変数
let x;
console.log(x);
x = 1;
console.log(x);
x = 2;
console.log(x);
変数を宣言し、console.logで変数xの内容を出力する
変数Xに値を代入することができる
再代入もできる
⚠️再宣言はエラーになる
変数の宣言と同時に初期値をセットすることが出来る
let y =10;
console.log(y);
y = 11;
console.log(y);
変数には文字列を入れることも出来る
let str = 'Hello JavaScript';
console.log(str);
文字列は’’か””で囲むが、使い分けが必要になってくる場合もある
複数の変数を宣言する場合
１個ずつ宣言することもできる
// let i;
// let j;
// let k;
カンマ区切りで複数を一度に宣言することもできる
let i, j, k;
変数の宣言にConstキーワードを使い変数aを宣言する
定数＝const
固定されて変化しない値
letと基本的な動作は同じだが再代入出来ないという特徴がある
宣言と同時に初期化する
初期化の時以外に代入が出来ないため
const a =1;
console.log(a);
文字列を入れることも出来る
const prefecture = "Tokyo";
console.log(prefecture);
変数を宣言する際に再代入することが想定されないことがわかっている場合は
積極的にconst宣言を利用するようにするとベター!!
変数の宣言方法２種類（旧：１種類）
| キーワード | 再代入 | 再宣言 | 備考 |
|---|---|---|---|
| let | ○ | × | |
| const | × | × | 定数（再代入できない変数） |
| var | ○ | ○ | 古い（ES5）の書き方。新規利用は推奨されない。 |
補足：定数とは
変化しない値を保持しておく
代入は一度きり
let、var、constの使い分け方法
-
基本はconstで定義
constは再宣言と再代入ができないため、意図せず値を書き換えることによるエラーを未然に防ぐことができる -
繰り返し構文のみletを定義
繰り返し構文では、ブロックスコープなので管理がしやすいletの利用が適している！
letは再代入ができて再宣言できないため、varに比べて変数宣言でエラーする可能性を減らせるのが特徴 -
varは使わない方がよい
varはJavaScriptで使える変数の中で最も影響範囲が広いのが特徴
さまざまな場面で利用できる反面、意図しない再宣言や再代入によってエラーにつながる可能性がある
今日はここまで！
とりあえず今のところ大丈夫だけど
数学苦手だから演算とか出てきてちょっとビビってる〜😇
でもやっぱり新しいことを学び続けるのって大事だし楽しいね
もう今年もそろそろ終わりに近づいてるな〜〜
来週も悔いのないように、頑張っていこう！
パワー💪🏻💪🏻
Discussion