今回は仕事でも使う事になってきたJavascriptについて学習していきたいと思います。
最近だとkintoneでJavascriptを利用してますね。
では早速スタートです。
JavaScript(ES6)とは
JavaScript(以下、JSと呼びます)はWeb開発において必須の存在です。
現在では、ほぼ全てのWebサイトでJSが使用されています。
今回学習するES2015(ES6)は、JSの新しい仕様(バージョン)で、
従来のJSより効率的にコードが書けることから近年注目を浴びています。
実行について
まずは、ES6のコードを実行してみましょう。コンソールという画面に文字を出力(表示)します。
「console.log("○○");」というコードを書くと、()の中の○○という文字がコンソールに出力されます。
console.log()
コードの書き方をより詳しく見ていきましょう。console.log() は丸括弧 () 内に入力された文字をコンソールに出力します。
また「Hello World」のような文字のことを文字列と呼びます。文字列は、左の図のようにシングルクォーテーション( ' )か
ダブルクォーテーション( " )で囲む必要があるので注意しましょう。
文の最後はセミコロン(;)で終わります。セミコロンはなくても正常に動作する場合が多いですが、
思わぬ不具合が生じる可能性があるので忘れずにつけましょう。
コメントアウト
文頭に「//」を書くと、その行はコメントとみなされます。そのため、プログラムとしては無視され、
実行されません。(コメントアウトと言います)コメントは、どのような意味のコードであるかを記すメモとして使われます。
数値と計算
プログラミングでは、数値(数字)を扱うこともできます。数値は文字列と違いクォーテーションで囲みません。
数値は足し算や引き算といった計算もすることができます。足し算には「+」、引き算には「-」の記号を用います。
数値と記号はすべて半角で記述することに注意しましょう。
文字列と数値
左の図のように、console.log(5 + 2);は足し算の結果である7が出力されます。
一方、「5 + 2」にクォーテーションをつけると、文字列と解釈されそのまま出力されます。
文字列と数値は明確に違うものであることを意識しましょう。
掛け算と割り算
足し算・引き算以外の計算の方法も学んでみましょう。
左の図のように、かけ算は「*」(アスタリスク)、割り算は「/」(スラッシュ)という記号を用いて計算することができます。
これらの記号は一般的な算数で用いるものと少し違うので、しっかり覚えましょう。
余りの計算
さらに、「%」記号を使うと、割ったときの余りを求めることができます。
プログラミングでは余りの計算を使う機会がよくありますので、しっかりと覚えておきましょう。
文字列の連結
「+」記号を用いると、文字列同士を連結することができます。左の図のように、
「"にんじゃ" + "わんこ"」とすると、「"にんじゃわんこ"」という1つの文字列になります
文字列と数値の違い
ここでも文字列と数値の違いを確認しましょう。
"3" + "5" は「"35"」という文字列になりますが、3 + 5 は「8」になります。
「文字列と数値は別物」ということをしっかり意識しましょう。
変数の利用
ここからは変数について学習します。
変数は、データ(値)の入れ物(箱)です。箱についている名前が「変数名」であり、
箱の中に実際の値(文字列や数値など)が入っています。
具体的な使い方は次のスライドで見てみましょう。
変数の定義
変数は「let 変数名 = 値」として定義します。プログラミングの「=」は「等しい」という意味ではなく、
「右辺を左辺に代入する」という意味です。「let」は「これから変数を定義します」という宣言で、
その後ろに変数名を書き、値を代入します。
変数と文字列
これまで見てきたように、変数はクォーテーションで囲みません。
「console.log("name");」のように変数名をクォーテーションで囲むと、nameが変数ではなく「文字列」として認識され、
「name」とそのまま出力されてしまうので注意しましょう。
変数の特徴
変数は、これまでに学習してきた「文字列」や「数値」とまったく同じように扱えます。
代入されている値が、文字列の場合は他の文字列と連結することができ、数値の場合は計算に用いることができます。
なぜ変数を使うのか
変数のメリット
「同じ値を繰り返し使える」「変更に対応しやすい」という具体例を見てみましょう。
左の図のように似た文章を何度も書くのは面倒ですが、変数を使えば同じ値を繰り返し使え、
楽にコードを書くことが出来ます。また文章が後ほど変更されても、変数を用いていれば、代入する値を変更するだけで
全ての変更に対応できます。
変数の命名ルール
変数名(変数の名前)は自由に決めることができますが、できるだけ分かりやすい名前をつけるようにしましょう。
また、ES6では変数の名前にいくつかのルールがあります。以下の図を参考に、適切な変数名を付けるように意識しましょう。
良い例
下は悪い例
変数の更新
変数は、一度代入した値を変更することもできます。一度値を代入した変数に、その後再び値を代入すると、
後に代入した値で変数の中身が上書きされます。
定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更されます。
変数の更新イメージ
下の図で変数の更新のイメージを見てみましょう。
プログラムは上から順に実行されるので、後で代入された値で変数の中身が更新されます。
変数自身の更新
すでに定義している変数numberの値に3を足したい、というときはどのようにすればよいでしょうか。
これは左の図のようにnumberに3を足して、再びnumberに代入することで実現できます。
「=」の右側のnumberは値に置き換わり、計算された結果が、左のnumberに代入されています。
変数自身に代入するイメージ
省略した書き方
「number = number + 10」といった書き方には、省略した書き方もあります。 よく使いますので、下の図をぜひ覚えましょう。
定数について
変数とよく似たものに、定数があります。
定数はletの代わりにconstを用いて定義します。
変数と定数の違いについて、次のスライドを見ていきましょう。
定数と変数の違い
左の図のように、変数は1度代入した値を更新することができましたが、定数は値を更新することはできません。
右の図のように定数の値を更新しようとすると、コードを実行した際にエラーが発生してしまうので気をつけましょう。
変数 let
定数 const → 値の更新ができない
定数のメリット
定数のメリットは、「後から値を更新できない」ところにあります。
これは一見不便に感じるかもしれません。ですが、予期せぬ更新を防ぐことができ、より安全なコードを書くことができます。
これはコードの量が増えるにつれて徐々にメリットとして感じると思います。
今後のProgateの演習では、基本的に変数ではなく定数を使っていきます。
テンプレートリテラル
これまで文字列や定数の連結には、「+」記号を用いてきました。
ES6では、それ以外の方法として「テンプレートリテラル」という連結方法があります。テンプレートリテラルを用いると、
下の図のように文字列の中に定数(変数)を埋め込むことができます。詳しい書き方は次のスライドを見ていきましょう。
テンプレートリテラルの書き方
左の図のように、文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。
この時、文字列全体をバッククォーテーション(`)で囲む必要があります。
また、右の図のように複数の変数や定数を埋め込むことも可能です。
バッククォーテーションの書き方
バッククォーテーションは以下の図のように出力します。
USキー(アメリカなどで使用されているキーボード)とJISキー(日本のキーボード)によって出力方法が異なるので注意してください。
条件分岐について
次に、プログラミングにおいて重要な条件分岐について学びましょう。
プログラミングを学んでいると「ある条件が成り立つときだけある処理を行う」という場面が出てきます。
このようなプログラムを条件分岐と言います。
if文の書き方
if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になります。ifの後ろに条件式を書き、
それが「成り立つ」場合の処理を{ }の中に書きます。下の図でif文の書き方のイメージを掴みましょう。
if文のレコード
実際のコードを見てみましょう。
まず左の図は条件式の一例です。「number > 10」の部分は「定数numberの値が10より大きい」という意味の条件になります。
定数numberには12が代入されているので、この条件は成り立ち、処理が実行されています。
if文を書くときは、インデントをするようにしましょう。
インデントとは日本語で「字下げ」を意味します。きれいにインデントするとコードが見やすくなります。
下図のようにインデントを入れることでifの処理がどこからか一目でわかります。
tabキーを1回押すと、半角スペース2つ分インデントすることができます。
条件式の出力
if文を使うことができました。次は条件式の部分を詳しく見てみましょう。右の図のように、
先ほどのif文の条件式の部分を出力してみると、「true」が出力されています。このtrueとは一体なんでしょうか?
真偽値
先ほどの例で出力された「true」は真偽値と呼ばれるものです。真偽値にはtrueとfalseという2つの値しか存在しません。
条件式は、成り立つと「true」、成り立たなければ「false」という真偽値に置き換わります。
よって下の図のように条件式を出力してみると、trueやfalseが出力されています。
if文と真偽値
前のスライドで、条件式は真偽値で置き換えられることがわかりました。
このことから、if文は条件式がtrueであれば処理が実行され、falseであれば実行されないということがわかります。
if文の条件式がtrueの処理の流れを、下の図で確認しておきましょう。
大小を比べる演算子
条件式に使った「>」は比較演算子と呼ばれる、大小比較の記号です。
「a < b」は、aの方がbより小さいときtrue, 大きいときfalseになります。
また「a <= b」とすると、aの方がbより小さいまたは等しい(つまりb以下)のときtrueになります。
これは数学で用いる「≦」という記号と似ています。
比較演算子
比較演算子には、左と右の値が等しいかを調べるものもあります。
「a === b」はaとbが等しければtrue、等しくなければfalseになります。
「a !== b」はその逆です。
この記号は数値だけでなく、文字列同士の比較にも使えます。
条件式が成り立たない場合
if文の条件式が成り立たない場合に、別の処理を行いたい場合があります。例えば下図のように、
numberの値が10より大きくない場合には「10以下です」と出力する方法を学んでみましょう。
elseの書き方
下の図のように、if文に「else」を組み合わせると「もし〇〇なら●●を行う、そうでなければ■■を行う」
という処理ができるようになります。if文の条件がfalseの場合、elseの処理が実行されます。
elseのコード
elseを使った実際のコードを見てみましょう。
左の図は、numberの値が10より大きいかどうかで処理を分けたい場合にif文のみを使用した例です。
この場合、2つのif文を作成する必要があります。
一方、右の図のようにelse文を用いると、1つの条件分岐で同じことを実現できます。
条件を追加する
ifとelseだけでなく、さらに条件を追加したい場合の方法を見てみましょう。
例えば下図のように「10より大きい」という条件を満たさない中で、「5より大きい」という条件で処理を分岐する方法を学んでみます。
else ifの書き方
以下の図のように、ifとelseの間に「else if (条件)」を追加することで、if文に条件分岐を追加することができます。
具体的な使い方は次のスライドで見てみましょう。
「else if」を使った実際のコードを確認してみましょう。
図では条件式2がtrueなので「else if」の中の処理が実行され、コンソールには図のようになります。
かつ &&
複数の条件を組み合わせる方法を学びましょう。まずは「かつ」についてです。「かつ」は「&&」で表します。
「条件1 && 条件2」は「条件1かつ条件2」という意味で、複数の条件がすべてtrueならtrueになります。
右の図の「10より大きいかつ30より小さい」は、「10 < x < 30」と書くことは出来ません。このようなときは「&&」を使いましょう。
または ||
次は「または」を表す記号です。
「または」は「||」で表します。「条件1 || 条件2」は「条件1または条件2」という意味です。
この場合は、複数の条件のうち1つでもtrueならtrueになります。
組み合わせの具体例
if文を使った「かつ」の具体例を見てみましょう。
左の図では、「number >= 10」も「number < 100」もともにtrueなので、処理が実行されています。
switch文とは
if文以外の条件分岐の方法として、switch文というものを学んでみましょう。
以下のイラストは、信号機の色を表す定数colorの値によって処理を分岐したい、という例です。
このように、ある値によって処理を分岐する場合にswitch文を用いることができます。
具体的な書き方は次のスライドでみてみましょう。
switch文の書き方
それではswitch文の書き方を見ていきましょう。
左の図のように、「switch(条件の値){ 処理 }」とすることでswitch文を書くことができます。
図は定数colorを定義したうえで、switch文を使ってcolorの値によって処理を分岐させていく例です。
switch文の中にcaseを追加することで処理を分けることができます。
右の図では、定数colorの値が「赤」であるときに「ストップ!」という文字列が出力されるようになっています。
breakについては後ほど説明します。
switch文では分岐の数だけcaseを追加していきます。
図では2つ目のcaseの値に「黄」が指定されており、定数colorの値が「黄」である場合には「要注意」と出力されるようになっています。
注意点
また、switch文ではbreakが非常に重要です。breakとはswitch文を終了する命令です。
breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまいます。
そのため、switch文を使うときにはbreakを忘れないように気をつけましょう。
default文について
先ほど学習したように、switchの条件の値がcaseの値と一致したとき、その部分の処理が実行されます。
caseのどれにも一致しなかった時、defaultのブロックが実行されます。defaultはif文のelseに似たようなものです。
このようなswitch文の性質を利用すると、if, elseifによる分岐が多く複雑な場合、
switch文で書き換えるとシンプルで読みやすいコードにできます。
学習①は以上になります。
お疲れ様でした!