JavaScriptの超入門編！基本から覚えていこう（その１）

2020/05/28

JavaScript は、Webブラウザ内でプログラムを動かせる（実装できる）言語です。Web制作において、HTML、CSS、JavaScriptと勉強される方が多いと思います。
スライドショーやアコーディオンメニューなどは、jQueryのライブラリーで作られていて修正に、JavaScriptの知識が必要になってきます。
その１は、JavaScriptはどんなプログラムなのか、変数や条件分岐など紹介します。

JavaScriptは何に使われているの？

webユーザーインターフェース制作に使われることが多く、入力フォームやウェブページに動きをつけたい場合に使用されます。今では、スマートフォンアプリやSNSにも使用されるケースがあります。

環境を整える

JavaScriptの開発環境にはブラウザが必要になります。
テキストエディターを開き、”index.html”と保存しましょう。
先程、保存した”index.html”をchromeで開きます。

chromeのJavaScriptコンソール機能を使って進めていきます。
表示　→　開発/管理　→　JavaScriptコンソール　で表示されます。
表示　→　開発/管理　→　デベロッパーツール　→　表示後に「Console」に切り替えると同じように表示されます。

ショートカットの場合は「 option + command + i 」で表示されます。

よく使うので、ショートカットを覚えておくと便利です。

プログラムを動かしてみる

console.logを実行する

console.logメソッドを使用すると文字を出力し表示させることができます。
文字列は、必ず ‘ （シングルコーテーション）で囲み、文章の終わりは、;（セミコロン）をつけて終わります。

// コンソールに アイウエオ を表示する
console.log('アイウエオ');

実行すると、「アイウエオ」が2行目に表示されます。実行成功です。

値を入れて実行してみる

先程は文字列を入れて実行しましたが、今度は値を入れて実行してみましょう。
値の場合は、’ （シングルコーテーション）で囲まなくても大丈夫です。

// コンソールに値を表示する
console.log(10);

「10」と表示されています。

演算子を使って計算する

演算子を使うことで足し算や引き算など計算することができます。
足し算（+）、引き算（-）、掛け算（*）、割り算（/）を実行してみましょう。

//足し算
console.log( 7 + 20 );
//引き算
console.log( 17 - 6 );
//掛け算
console.log( 5 * 8 );
//割り算
console.log( 18 / 3 );

実行後、正しく計算されているのがわかります。

複雑な計算も可能です。

console.log( (20 + 30 ) * 20 + 18 / 3 );

正しく計算されています。

文字列と数値を連結して表示

文字列と数値の間に + を入れることで連結し表示させることができます。

console.log( 'この計算の回答は、' + (20 + 30 ) * 20 + ' です。' );

文章はそのままで、演算子のみ計算されています。

変数

変数とは、文字列や数値などのデータを入れておくための箱です。
文字列や計算された数値などの値を入れておくことで、いつでも取り出すことができます。宣言は下記の通りです。

//変数「name」に山田太郎を代入する
let name = '山田太郎';
// コンソールに値を表示する
console.log( name );

山田太郎が変数に代入され、コンソールで表示されたことがわかりました。

let を使って変数を宣言しましたが、他に、”var”、 ”const”があり、それぞれ違いがあります。ES6では、変数を宣言する手段として、letキーワードとconstキーワードの2つが新たに導入されています。

以前までの宣言方法は”var”のみでしたが、「ECMAScript2015（ES2015）」から新たに”let”と”const”が追加されました。”var”の場合、再代入や再宣言できるためバグが多く、新しく採用された”let”や”const”が使われるようになりました。Javascriptが需要が増えてきたため、進化している言語といえます。

var・・・再代入できる、再宣言できる
let・・・再代入できる、再宣言できない
const・・・再代入できない、再宣言できない

新しく採用された”let”や”const”を使用するようにしましょう。

データの型について

文字列や数値などデータの種類のことを型と言います。
文字列・・・string型
数値・・・number型

条件分岐

条件分岐とは、条件を満たす時に実行されるプログラムの流れのことです。
A、またはBの二択があるとします。条件を満たす時は「true（真）」Aに進み、条件が満たされない時は「false（偽）」Bに進ませることができます。

if文

if (条件：式や関数など){ ←ブロック始まり
　　条件が真であれば実行;
} ←ブロック終了

if文では、「{」カッコで囲んでいる部分をプロックと呼び、必ず囲んで表します。

let score = 60;
if ( score > 50 ){
    console.log( '50よりも大きい数字です' );
 }

続いて、elseを追加すると条件が偽である場合に実行できます。

if (条件：式や関数など){ ←ブロック始まり
  条件が真であれば実行;
}else{
  条件が偽であれば実行;
} ←ブロック終了

条件式、または関数が真の場合と、偽の場合の選択を増やすことができます。

let score = 30;
if ( score > 50 ){
    console.log( '50よりも大きい数字です' );
 }else{
    console.log( '50よりも小さい数字です' );
}

a < b ・・・　aはbより小さい
a <= b ・・・　aはb以下
a > b ・・・　aはbより大きい
a >= b ・・・　aはb以上
a == b ・・・　aはbは等しい
a != b ・・・　aはbは等しくない
a === b ・・・　aはbは厳密に等しい（厳密等価演算子）
a !== b ・・・　aはbは厳密に等しくない（厳密不等価演算子）

else if　を追加することでさらに条件を追加することができます。

if (条件：式や関数など){ ←ブロック始まり
　条件が真であれば実行;
}else if (条件：式や関数など){
　条件が真であれば実行;
}else{
　条件が偽であれば実行;
} ←ブロック終了

条件式、または関数が、条件が真であれば実行し、そうでなければ、次の条件式、または関数が、条件が真であれば実行し、そうでなければ、全て偽であれば実行する。

let score = 20;
if ( score > 50 ){
    console.log( '50よりも大きい数字です' );
 }else if ( score > 30 ){
    console.log( '30よりも大きい数字です' );
 }else{
    console.log( '30よりも小さい数字です' );
}

まとめ

続いて、その２では、配列や関数について説明していきます。