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

CODE
Toshi
Toshi

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

 

前回の内容

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

 本記事の内容

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


概要(学習対象・準備・この記事の活用方法とは?)

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(‘ALLONESLIFE’); というようにシングルコーテーションを使っていてそこに ‘ を文字として入れたい場合があればバックスラッシュを使えば使用することが可能なので覚えておきましょう!

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

数値

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

  • 足し算 console.log(1+1);
  • 引き算 console.log(21);
  • 割り算 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}歳です。`);
  • 出力内容(ぼくの名前はJavaScript0歳です。)

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

条件分岐

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

真偽値

真偽値とは、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文の書き方は以下のようになります。

書き方1
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 < 30true
x > 25 && x < 30 …「false
||(または)
x = 20;
x < 10 && x > 30false
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;
}

まとめ

Toshi
Toshi

いかがでしたか?HTMLやCSSのようにわかりやすくはなかったかと思います。しかし、このJavaScriptを使ってWebサイトの動作やアプリケーション等が作られているため、深く知れば知るほど面白くなってきます!ぜひ、この機会にJavaScriptもマスターしてみましょう!

コメント