JavaScript(以下、JSと呼びます)はWeb開発において必須の存在です。現在、「ライブラリ」という便利な機能を集めたものが多く開発され、世界中で利用されています。
例えば、有名なJSのライブラリやプラットフォームには「jQuery」や「React」、「Node.js」などがあります。

まずは、JSのコードを実行してみましょう。コンソールという画面に文字を出力(表示)します。
「console.log(“○○”);」というJSのコードを書くと、丸括弧の中の○○という文字がコンソールに出力されます。

それでは、早速JSを書いてみましょう。console.log()は()内に入力された値をコンソールに出力します。文字列を出力する場合はシングルクォーテーション(‘)かダブルクォーテーション(“)でその文字列を囲みます。

セミコロン

JSは文の最後はセミコロン(;)で終わります。セミコロンはなくても正常に動作する場合が多いですが、思わぬ不具合が生じる可能性があるので、忘れずにつけましょう。

コメントアウト
JSでは文頭に「//」を書くと、その行はコメントとみなされ、プログラムとしては無視されます(コメントアウトと言います)。
コメントは、どのような意味のコードであるかを記すメモとして使われます。



計算をしてみよう
数値
プログラミングでは、数値を扱うこともできます。数値は文字列と違いクォーテーションで囲みません。
数値は足し算や引き算といった計算が可能です。足し算には「+」、引き算には「-」の記号を用います。数値と記号はすべて半角で記述します。



計算をしてみよう
文字列と数値
左の図のように、console.log(5 + 2)は足し算の結果である7が出力されます。一方、「5 + 2」にクォーテーションをつけると、文字列と解釈されそのまま出力されます。プログラミングをする上では文字列と数値は明確に違うものであることを意識しましょう。




掛け算「*」、割り算「/」

プログラミングでは、足し算・引き算以外の計算も可能です。
左の図のように、掛け算は「*」(アスタリスク)、割り算は「/」(スラッシュ)という記号を用いて計算することができます。これらの記号は数学で用いるものと少し違いますので、しっかり覚えましょう。

「%」記号を使うと、割ったときの余りを求めることができます。
(プログラミングでは余りの計算を使う機会がよくありますので、しっかりと覚えておきましょう!)

文字列同士に「+」記号を用いると、文字列同士を連結することができます。左の図のように、「”にんじゃ” + “わんこ”」とすると、「”にんじゃわんこ”」という1つの文字列になります。

プログラミングでは「変数」というものがしばしば用いられます。変数は、データ(値)の入れ物です。箱についている名前が「変数名」であり、箱の中に実際の値(文字列や数値など)が入っています

変数は「let 変数名 = 値」として定義します。プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味です。「let」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入します。

変数の使い方は簡単です。左の図のように「”John”」という値が代入された変数nameを出力すると、右の図のように「”John”」という値が出力されます。
中央の図で示されているように、変数を使うと変数の部分は代入した値に置き換わります。

変数は、これまでに学習してきた「文字列」や「数値」とまったく同じように扱えます。
代入されている値が、文字列の場合は他の文字列と連結することができ、数値の場合は計算に用いることができます。

実際のプログラムの中には多くの値が登場します。プログラムを書く時は、それらの値を間違いのないように、そして値の変更に対応しやすいようにすることが求められます。それを助けるための1つの仕組みが変数です。変数には以下のようなメリットがあります。

変数は、一度代入した値を変更することもできます。一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされます。
定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更されます。


「number = number + 10」といった書き方には、省略した書き方もあります。 よく使いますので、下の図をぜひ覚えましょう。

変数とよく似たものに、定数があります。
定数はletの代わりにconstを用いて定義します。
変数と定数の違いについて、次のスライドを見ていきましょう。

定数のメリットは、「後から値を更新できない」ところにあります。
これは一見不便に感じるかもしれません。ですが、予期せぬ更新を防ぐことができ、より安全なコードを書くことができます。これはコードの量が増えるにつれて徐々にメリットとして感じると思います。
今後のProgateの演習では、基本的に変数ではなく定数を使っていきます。

これまで文字列や定数の連結には、「+」記号を用いてきました。
ES6では、それ以外の方法として「テンプレートリテラル」という連結方法があります。テンプレートリテラルを用いると、下の図のように文字列の中に定数(変数)を埋め込むことができます。詳しい書き方は次のスライドを見ていきましょう。

左の図のように、文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。
この時、文字列全体をバッククォーテーション(`)で囲む必要があります。
また、右の図のように複数の変数や定数を埋め込むことも可能です。

バッククォーテーションは以下の図のように出力します。
USキー(アメリカなどで使用されているキーボード)とJISキー(日本のキーボード)によって出力方法が異なるので注意してください。

次に、プログラミングにおいて重要な条件分岐について学びましょう。
プログラミングを学んでいると「ある条件が成り立つときだけある処理を行う」という場面が出てきます。このようなプログラムを条件分岐と言います。

if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になります。ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }の中に書きます。
下の図でif文の書き方のイメージを掴みましょう。

実際のコードを見てみましょう。
まず左の図は条件式の一例です。「number > 10」の部分は「定数numberの値が10より大きい」という意味の条件になります。
定数numberには12が代入されているので、この条件は成り立ち、処理が実行されています。

比較演算子には、左と右の値が等しいかを調べるものもあります。
「a === b」はaとbが等しければtrue、等しくなければfalseになります。
「a !== b」はその逆です。
この記号は数値だけでなく、文字列同士の比較にも使えます。

elseを使った実際のコードを見てみましょう。
左の図は、numberの値が10より大きいかどうかで処理を分けたい場合にif文のみを使用した例です。この場合、2つのif文を作成する必要があります。
一方、右の図のようにelse文を用いると、1つの条件分岐で同じことを実現できます。

「else if」を使った実際のコードを確認してみましょう。
左の図では条件式2がtrueなので「else if」の中の処理が実行され、コンソールには右の図のようになります。

if文を使った「かつ」の具体例を見てみましょう。
左の図では、「number >= 10」も「number < 100」もともにtrueなので、処理が実行されています。

switch文では分岐の数だけcaseを追加していきます。右の図では2つ目のcaseの値に「黄」が指定されており、定数colorの値が「黄」である場合には「要注意」と出力されるようになっています。

先ほど学習したように、switchの条件の値がcaseの値と一致したとき、その部分の処理が実行されます。caseのどれにも一致しなかった時、defaultのブロックが実行されます。defaultはif文のelseに似たようなものです。

このようなswitch文の性質を利用すると、if, elseifによる分岐が多く複雑な場合、switch文で書き換えるとシンプルで読みやすいコードにできます。

「いつまで繰り返すか」を指定するための条件式を追加しましょう。
今回は「変数numberが100以下」の間に処理を繰り返したいので、左の図のような条件式を書きます。
まず条件式の判定が行われ、trueの時のみ{}の中で処理が1度実行されます。その後、再び条件式がtrueかどうかチェックされ、trueであればもう一度処理が実行されます。

for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書きます。括弧の中ではそれぞれをセミコロン(;)で区切ります。
左の図がwhile文、右の図がfor文のコードになっています。下線が引いてある部分を中心に、見比べてみましょう。

「number += 1」は「number ++」のように省略して書くことができます。また、引き算の場合にも、「number -= 1」を「number –」と省略することができます。
while文やfor文では、この省略した書き方を使ってコードを短くすることができますので、覚えておきましょう。

最後に、for文を用いて繰り返し処理の応用問題に挑戦してみましょう。
右の図のように、1から100の数字を出力してください。ただし、3の倍数の時は「3の倍数です」と出力してください。

複数の値をまとめて管理するには、配列というものを用います。
配列は、[値1, 値2, 値3] のように作ります。配列に入っているそれぞれの値のことを要素と呼びます。
配列を使うと、右の図のように複数の文字列や数値をまとめて書くことができます。

配列も1つの値なので、定数に代入することができます。
このとき、配列を代入する定数名は、慣習上複数形にすることが多いので覚えておきましょう。
左の図のように、「console.log(定数名)」とすると、配列がコンソールに出力されます。

インデックス番号を用いて配列の要素を取得してみましょう。
配列[インデックス番号]とすることで配列の要素を取得することができます。
例えば「apple」の取得は、左の図のように、appleのインデックス番号である0を用いてfruits[0]とすることで可能です。

配列は左の図のように、要素に値を代入することでその要素を上書きすることができます。

配列fruitsの要素数が3の場合、すべての要素を出力するには、左の図のように書かなけばなりません。
これをfor文で書き直すと右の図のようになります。このようにすれば配列の中に格納されているすべての値を簡単に出力することができます。
この際、変数の値は0から始めることに注意しましょう。

左の図のように配列.lengthとすることで、配列の要素数を取得できます。
また、lengthを用いれば、前の演習のfor文の条件式を右の図のように書き換えることができます。配列の要素数が変わっても問題なく繰り返すことができるので便利です。これは配列の繰り返し処理でよく使う書き方ですので、覚えておきましょう。

ここからは、「オブジェクト」について学んでいきます。
オブジェクトは配列と同じく複数のデータをまとめて管理するのに用いられます。
配列は複数の値を並べて管理するのに対して、オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理します。

配列の中のオブジェクトのプロパティの値を取り出すには、
「配列[インデックス番号].プロパティ名」と書きます。
やや複雑になってきましたが、これまでの知識の組み合わせですので、わからない箇所はこれまでのスライドで復習してみましょう。