【プロゲート】JavaScript ES5 JavaScript Iの学習内容まとめ
JavaScript I
1.JavaScriptに触れてみよう
JSとライブラリ
・JavaScript（以下、JS）はWeb開発において必須の存在
・現在、「ライブラリ」という便利な機能を集めたものが多く開発され、世界中で利用されている
・例えば、有名なJSのライブラリやプラットフォームには「jQuery」や「React」、「Node.js」などがある
JSを実行してみよう
・まずは、JSのコードを実行してみる
・コンソールという画面に文字を出力（表示）する
・「console.log("○○");」というJSのコードを書くと、丸括弧の中の○○という文字がコンソールに出力される
2.コンソールへの出力
console.log()
・console.log()は()内に入力された値をコンソールに出力する
・文字列を出力する場合はシングルクォーテーション(')かダブルクォーテーション(")でその文字列を囲む
セミコロン
・JSは文の最後はセミコロン（;）で終わる
・セミコロンはなくても正常に動作する場合が多いですが、思わぬ不具合が生じる可能性があるので、忘れずにつける
コメントアウト
・JSでは文頭に「//」を書くと、その行はコメントとみなされ、プログラムとしては無視される（コメントアウトと言う）
・コメントは、どのような意味のコードであるかを記すメモとして使われる
3.計算をしてみよう
数値
・プログラミングでは、数値を扱うこともできる
・数値は文字列と違いクォーテーションで囲まない
・数値は足し算や引き算といった計算が可能
・足し算には「+」、引き算には「-」の記号を用いる
・数値と記号はすべて半角で記述する
文字列と数値
・console.log(5 + 2)は足し算の結果である7が出力される
・一方、「5 + 2」にクォーテーションをつけると、文字列と解釈されそのまま出力される
・プログラミングをする上では文字列と数値は明確に違うものであることを意識する
4.様々な計算
掛け算「*」、割り算「/」
・プログラミングでは、足し算・引き算以外の計算も可能
・掛け算は「*」（アスタリスク）、割り算は「/」（スラッシュ）という記号を用いて計算することができる
・これらの記号は数学で用いるものと少し違いますので、しっかり覚える
余りの計算「%」
・「%」記号を使うと、割ったときの余りを求めることができる
（プログラミングでは余りの計算を使う機会がよくあるので、しっかりと覚えておく）
5.文字列の連結
文字列の連結
・文字列同士に「+」記号を用いると、文字列同士を連結することができる
・「"にんじゃ" + "わんこ"」とすると、「"にんじゃわんこ"」という1つの文字列になる
文字列と数値の違い
・"3" + "5"は"35"という文字列になるが、3 + 5は8になる
・「文字列と数値は別物」ということをしっかり意識する
6.変数の基本
変数とは
・プログラミングでは「変数」というものがしばしば用いられる
・変数は、データ（値）の入れ物
・箱についている名前が「変数名」であり、箱の中に実際の値（文字列や数値など）が入っている
変数の定義
・変数は「var 変数名 = 値」で定義する
・プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味
・「var」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入する
変数の使い方
・変数の使い方は簡単
・「"John"」という値が代入された変数nameを出力すると「"John"」という値が出力される
・変数を使うと変数の部分は代入した値に置き換わる
変数の注意点
・変数を呼び出すときは変数名をクォ―テーションで囲まないことに注意
・クォーテーションで囲んでしまうと、文字列として変数名がそのまま出力されてしまう
7.変数と文字列の連結
変数と文字列の連結
・変数を呼び出すと代入した値に「置き換わる」ので、文字列が入った変数は文字列とまったく同じように扱うことができる
・例えば文字列の入った変数と文字列を連結することができる
8.変数の役割
なぜ変数を使うのか
・実際のプログラムの中には多くの値が登場する
・プログラムを書く時は、それらの値を間違いのないように、そして値の変更に対応しやすいようにすることが求められる
・それを助けるための1つの仕組みが変数
・変数には以下のようなメリットがある
1.同じ値を繰り返し使える
2.変更に対応しやすい
3.値の意味が分かりやすい
変数のメリット
・「同じ値を繰り返し使える」「変更に対応しやすい」という具体例
・似た文章を何度も書くのは面倒だが、変数を使えば同じ値を繰り返し使えて、楽にコードを書くことが出来る
・また文章が後ほど変更されても、変数を用いていれば、代入する値を変更するだけですべての変更に対応できる
わかりやすい変数名
・変数には、何の値が代入されているかわかりやすい変数名をつける
・「name = "にんじゃわんこ"」の例を見ると、「にんじゃわんこ」という文字列が「名前」を表している、ということが変数名から想像できる
・値にふさわしくない変数名をつけてしまうと、その値が何の値かわからなくなることもあるので気をつける
変数名のルール
・変数名は自由に決めることができるが、JSではいくつかの命名のルールがある
・特に、2語以上を組み合わせた変数名をつけるときは「キャメルケース」を用いることは覚えておく
9.変数の更新（１）
変数の更新（１）
・変数は、一度代入した値を変更することもできる
・一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされる
変数の更新のイメージ
・プログラムは上から順に実行されるので、後で代入された値で変数の中身が更新される
10.変数の更新（２）
変数の更新（２）
・すでに定義している変数numberの値に3を足したい、というときはどのようにすればよいか
・これはnumberに3を足して、再びnumberに代入することで実現できる
・「=」の右側のnumberは値に置き換わり、計算された結果が、左のnumberに代入されている
省略した書き方
・「number = number + 3」といった書き方には、省略した書き方もある
・よく使うので覚える