小学生からわかるプログラミング JavaScript(ES6)初級編

Toshi

「小学生からわかるプログラミング」ということで、以前は「HTML&CSS」について勉強していきました！今回は「Progate」の「JavaScript初級編」で「JavaScript」の基本を学んでいきます。JavaScriptの「ES6」の基本的なコードの書き方について学んでいきましょう！

前回の内容

小学生からわかるプログラミング HTML&CSS初級編

小学生からわかるプログラミング、ということで今回から「Progate」というプログラミング学習サイトを利用して一緒に勉強していきましょう。まずは、基礎の「HTMLとCSS」について学んでいきましょう！これを学ぶとWebページが作れます！

今回解説していく内容は以下です！

本記事の内容

・概要（学習対象・準備・この記事の活用方法とは？）
・プログラムを実行してみよう
・文字列と数値
・変数・定数
・条件分岐

概要（学習対象・準備・この記事の活用方法とは？）
プログラムを実行してみよう
文字列と数値
1. 文字列
2. 数値
変数・定数
テンプレートリテラル
条件分岐
まとめ

概要（学習対象・準備・この記事の活用方法とは？）

JavaScriptとは、Webに動作をつける役割をしてくれています。

学習対象者

・小学生〜大人まで
・Webページを作成したい方
・JavaScriptを学びたい方

準備

・「Progate」の「学習コース JavaScript Ⅰ」を開く

このページの活用方法は？

・実際の作業は「Progate」の「学習コース JavaScript Ⅰ」で行ないますがこの記事はそのレッスンのまとめ
といった感じです。そのためサクッとどんなことをしているのか参考にしたい方は記事をみるだけでも構いません！
※また、自分のわかる範囲で詳しく「Progate」では説明がないとこまで補足しています。

では、さっそくJavaScriptについて一緒にみていきましょう！

プログラムを実行してみよう

JavaScriptの動作確認をする場合は、コンソールというものを必ず使うようになります。プログラムに「バグ（エラー）」がないかどうか？を確認する時にも使うので、必ず使い方を押さえておきましょう！

See the Pen
JavaScript 初級編 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

文字列と数値

では続いて、console.logでの文字列と数値の確認をおこなってみます！コメントの付け方はCSSと同じで複数行のコメントは「/**/」を使用し、一行であれば「//」を使用します！また、文の最後は必ず半角のセミコロン（ ; ）で終わります。

See the Pen
JavaScript初級編1 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

文字列

console.log(“ダブルクォーテーション“); もしくは console.log(‘シングルクォーテーション‘); で表します。もし、console.log(‘ALLONE‘SLIFE’); というようにシングルコーテーションを使っていてそこに ‘ を文字として入れたい場合があればバックスラッシュを使えば使用することが可能なので覚えておきましょう！

console.log(‘ALLONE‘SLIFE’);

console.log(‘ALLONE\’SLIFE’);

数値

数値の計算は以下のようになります！

足し算 console.log(1+1);
引き算 console.log(2–1);
割り算 console.log(4/2);
掛け算 console.log(5*2);
余り console.log(9%2);

となります。

変数・定数

文字列と数値の扱い方についてはなんとなく、理解できたのではないでしょうか？では続いて変数と定数をみていきましょう！

変数

変数とは、ある特定の値をボックスに入れていつでも使えるようにしておくイメージで使い方は let 変数名 = 値 となります。例を出した方がわかりやすいと思うので例を出してみます！

例

let message = “元気ですか？”;

console.log(“佐藤さん” + message);
console.log(“斎藤さん” + message);
console.log(“田中さん” + message);

これで「〇〇さん元気ですか？」という内容が出力できます。ということで変数のメリットをおさえると

メリット
・同じ値が繰り返し使える
・変更に対応しやすい
・値の意味がわかりやすい

です。

変数更新

もし、変数を更新する場合は以下のような指定方法になります。

let message = “元気ですか？“;

console.log(“佐藤さん” + message);
出力内容（佐藤さん元気ですか？）

message = “ですか？”;

console.log(“佐藤さん” + message);
出力内容（佐藤さんですか？）

ポイントとしては上から下にどんどん値が変わっていきます。

let message = “おはようございます”;
message = “こんにちは”;
message = “こんばんは”;

console.log(message);
出力内容（?）

この場合、一番下でconsole.logを使って出力した場合のメッセージは（こんばんは）となります！

定数

定数とは、値の変わらないものだと思ってください。使い方は const 定数名 = 値 となります！

メリット
・プログラムが長くなっても値が変わらない

変数と定数の使いわけは？

変数は値は値の変更がありえそうなもの。定数とは値が絶対変わらないもの。を設定しておきましょう！

テンプレートリテラル

テンプレートリテラルとは 「＋」を使わない連結方法です。全体をバッククォート（`）で囲んで${定数}で表すことができます。

const name = “JavaScript”;
const age = 0;

console.log(`ぼくの名前${name}で${age}歳です。`);
出力内容（ぼくの名前はJavaScriptで0歳です。）

なんかプログラミングやってる。って感じになってきましたね！

条件分岐

条件分岐とは、一定の条件を与えてそれが正しければ〇〇間違っていれば××という値を返すような条件を組むことができます。まずは真偽値についてみてみましょう！

真偽値

真偽値とは、const number = 10; という値があった時にその値は 10 よりも大きいのか、小さいのか以下のように確認することができます。

console.log(number < 20);
出力内容（true）
console.log(number > 20);
出力内容（false）
console.log(number === 10);
出力内容（true）
console.log(number !== 15);
出力内容（false）

値が正しい場合はtrue、値が間違っている場合はfalseで返ってきます。

if

if文の書き方は以下のようになります。

書き方１
if(条件式){
条件が「true」の時の処理
}else{
条件が「false」の時の処理
}

書き方2
if(条件式1){
条件式1が「true」の時の処理
}else if(条件式2){
条件式1が「false」、条件式2が「true」の時の処理
}else{
どちらの条件も「false」の時の処理
}

例
// ageの値が10以上20未満のとき、「私は20歳未満ですが、10歳以上です」と出力したい場合
const age = 17;
if (age >= 20) {
console.log(“私は20歳以上です”);
} else if(age >= 10){
console.log(“私は20歳未満ですが、10歳以上です”);
} else {
console.log(“私は10歳未満です”);
}

&&（かつ） ||（または）

条件式を組む時に、 && や || を使用する場面もあります。 && の場合は、両方があっている場合のみ「true」で返し || の場合は、どちらか一方が一致していれば「true」で返します。

例

&&（かつ）
x = 20;
x > 10 && x < 30 …「true」
x > 25 && x < 30 …「false」

||（または）
x = 20;
x < 10 && x > 30…「false」
x > 25 && x < 30 …「true」

swich

if文以外の条件分岐の方法として、switch文というものがあります。

書き方
swich(条件の値){
case 値1:
「条件の値」が「値1」と等しい時の処理
break;
case 値2:
「条件の値」が「値2」と等しい時の処理
break;

例
//信号機の色で判断
const color = “赤”;
swich(color){
case “赤”:
console.log(“ストップ！”);
break;
case “黄”:
console.log(“要注意”);
break;

const rank = 5;
switch (rank) {
case 1:
console.log(“金メダルです！”);
break;
case 2:
console.log(“銀メダルです！”);
break;
case 3:
console.log(“銅メダルです！”);
break;
default: //どのcaseにも該当しないときは「default」を使う！
console.log(“メダルはありません”);
break;
}