この研修では、JavaScript→1-2というフォルダの中にindex.html と main.js を作成してください。
表示の確認はブラウザを更新して、検証ツールの「Console」に表示されるものを見て確認します。
変数・定数とは？
変数とは、 データを入れる箱のようなものです。
数字や文字等のさまざまなデータを入れることができ、入れたデータを書き換えることもできます。
定数とは、変数と同様に データを入れる箱のようなものですが、
一度入れたデータを書き換えることができません。
何かの拍子に書き換えられては困るデータは定数にしておくと良いでしょう。
例）メールアドレス、エラーメッセージ、ファイルパスなど…
プログラミングにおける「＝」は等しいという意味ではなく 「右辺を左辺に代入する」 という意味で使用します。
この場合は、変数 nameを定義して hogeという文字列を代入しているので、今後は name というのは「hoge」として扱われます。
let name = "hoge";
//nameと書いたのに、hogeと出力されるはずです
console.log(name);変数として使用する場合は、そのまま変数名を記述するだけで大丈夫です。
定数を定義する場合はletの部分をconstに変えると定数になります。
ちなみに、
console.log("name");このようにダブルクォーテーションで囲ってしまうと、変数ではなく 文字列 として認識されてしまい、コンソールには 「name」 と出力されてしまうので注意してください。
変数宣言時のルール
-
【ルール①】
変数名を決めるとき、先頭が数字だとエラーになる等の細かいルールがあります。
せっかくなので MDN – 変数で確認してみてください。
（全部読む必要はなく、知りたいことだけ確認できればOKです）
基本的には、一目で何のデータが入っているのか分かりやすいように、 データに関連した変数名 にすることが多いです。
例：動物なら「animal」、果物なら「fruits」、車の名前なら「carName」etc… -
【ルール②】
同じ変数名で2重に定義しようとするとエラーになります。
let name = "hoge";
console.log(name);
let name = "fuga";
console.log(name);上記のコードでブラウザを更新すると、Consoleには
Uncaught SyntaxError: Identifier 'name' has already been declared というエラー出ています。
「 その変数はすでに宣言してますよ 」という意味ですね。
letを使った変数は、中身を書き換えることができます。
では「hoge」という文字が入ってる変数nameを「huga」という文字に書き換えたいといった場合はどうすればいいのでしょうか？
2回目の再代入のときは、以下のようにletは書かずに 変数名だけ 書いてください。
let name = "hoge";
console.log(name);
name = "fuga";
console.log(name);また変数は、 文字列や 数字と同じように扱うことができます。
以下の記述で確認してみてください。
let name = "池田";
console.log(name + "くん");
let number = 10;
console.log(number * 3);
console.log(`${name}くんは${number}月生まれです`);最後に書いたような記述方法はテンプレートリテラルと呼びます。
文字列全体を「 ` 」(バッククォート)で囲み、変数名は「 ${ } 」で囲むことで 一つの文字列の中に変数や定数を埋め込む ことができます。
こうすると、文字列と変数を + で繋ぐ必要が無いので見やすくなります。
テンプレートリテラルを書くとき、文字列を囲むのはダブルクォートではなく バッククォートであることに注意してください。
letとvarの違い
変数はletと紹介しましたが、実はもう一つ変数を定義できるvarというものがあります。
使い方は同じでvar name = "hoge";といった書き方で使用できます。
この２つはいくつか違いがあります。違いとしては、
var ➡ 再代入できる。再定義できる。
let ➡ 再代入できる。再定義できない。
となります。
基本的にこれからは var は使用せず、 let を使っていきましょう！
詳しくはletとvarの違いを参照してみてください。
よく出るエラーメッセージの種類について
is not defined ＝ まだ定義されてないですよ
以下コードを書くと、consoleには次のようなエラーメッセージが出ます。
let name = 'iwasaki';
console.log(age);
「age is not defined」＝「ageという変数が定義されてないのに使われてますよ」 という意味ですね。
is not defined が出る時は、ほとんどの場合 「定義したつもりがスペルミスで認識されていない」 ことが多いです。
このエラーが出たら、まずスペルミスを疑ってみるのも良いですね！
SyntaxError ＝ 構文エラー（文法的に間違いがありますよ）
文法的にエラーということは、次のように書き方のルールに違反している状態です。
let name = 'iwasaki';
let name = 'tanaka';
console.log(name);
英語で書いてある通り「nameはすでに宣言されていますよ」と、そのままですね。
let で再代入する時は 2度目に出てくる let は不要のはずです。
エラーメッセージは、問題解決に重要なヒントを教えてくれるものです。
エラー文の意味が分からなければ、そのまま貼り付けて検索すると解決することが良くあります。
検索して解決策を見つける能力は身に着けておくと後々かなり大きな武器になるので、
今のうちに調べる癖をつけておくと良いですよ！
課題
理解度チェック
出力の結果はconsole.logで表示してください。
問1：次のコードを実行すると、エラーになります。エラー箇所を特定して、200と1000が出力されるように修正してください。
const price = 100;
console.log(price * 2);
price = 500;
console.log(price * 2);
