[progate] JavaScript コースⅠ 「文字列と数値」のまとめ

2021年10月19日[progate] JavaScript Ⅰ,progate,レビュー

JavaScript コースⅠの導入となります。簡単なJavaScriptをコーディングすることで以降のセクションをスムーズに進めることができます。

JavaScript コースⅠの構成での「文字列と数値」の位置付け

文字列と数値　← 今回はここ
変数と定数
条件分岐

1. まとめ
2. 「文字列と数値」の解説
3. 「文字列と数値」では学ばないこと

まとめ

簡単なプログラムのソースコードを書いて実行することを体験することができます。
数行のプログラムを使って、プログラミングの基本的な書き方を体験することができます。
簡単な四則演算の結果や文字列を表示することができます。

導入部だから仕方ないけども、屈指の内容の薄さですね・・・・

「文字列と数値」の解説

本セクションでは、JavaScriptについての導入部として、プログラミングの基礎について学んでいきます。

JavaScript(EC6)を学ぼう
console.log()
計算してみよう
計算してみよう(2)
文字列の連結

JavaScript(EC6)を学ぼう

ボタンを１つ押すだけとか・・・・このセクションについて何か書くのはとても難しいです。

とはいえ、このセクションはたった一つの重大な気づきをくれます。

「書いたプログラムってどうやって動かすの？」

ここでは、「コンソール」の「自分のコードを実行する」をクリックすることで動きます。

WebページでJavaScriptを動かす場合、画面なしのプログラムの場合、それぞれの動かし方があります。

自分が作っているプログラムの種類、その動かし方を意識してみてください。

学習文法/用語

特になし・・・

console.log()

プログラムから簡単な文字列をコンソールへと出力とコメントアウトを学習します。

ここではプログラミング初心者の友とも呼べるコンソールを学びます。

コンソールとは、プログラマがプログラムとの入力/出力をやり取りする画面です。

ほとんどのプログラム言語がコンソール（名前は変わりますが）を有しており、JavaScriptではconsoleが該当します。

使用するWebブラウザによって差異はありますが、Webページ上で動作する際にもコンソールが用意されています。

Chromeを使われている場合は、その他のツール→ディベロッパーツールを開くと右下のエリアにコンソールの結果が出力されます。

プログラミングをしていると、書いていることに自信が持てなかったり、思うように動かなくなることが多いと思います。

その時には、「console」に調べたい内容を出力しましょう。きっと大きな助けになってくれるはずです。

console.log(“困ったらここになんでもここに置くと良いです");

ちなみにこんな時に使ってみると良いでしょう。

・繰り返しの処理中の値がどのように変化するのか知りたい

・変数を使った条件文がうまく動作しないので、直前の値を知りたい

実際のソースは今の所ピンとこないと思うので、そういうこともなるのかな？くらいで良いと思います。

学習文法/用語

consoleオブジェクト

計算してみよう/計算してみよう(2)

プログラム内で四則演算（加算、減算、乗算、割算）について学習します。

いやシンプルすぎるだろう・・・とお思いの皆さん。

しかしここでは大事なことをサラッと説明されているのです！具体的な事例を使って説明したいと思います。

// 20から8を引いた値を出力してください
console.log(20 - 8);

ここでは、console.logの括弧内で計算をしています。

小学生の算数でも習う通り、括弧内は優先的に計算、あるいはプログラムが実行されます。つまりここでは

20 – 8を計算し、12を求める。
12の値をconsole.logに引き渡す
console.logが12を表示する。

というような流れとなります。プログラムはこのような法則を使うことで、引き渡す前に計算したり、文字列を成形したり様々なことを行います。

みなさんもこのようなやり方を頭のどこかに残して、学習してみてください。

文字列の連結

プログラム内で文字列と文字列を結合するとどのようになるを学習します。

四則演算の記号である、「+-*/」についてはつまづくことなく理解できたかと思います。

// 文字列の「20」と「15」を連結してコンソールに出力してください
console.log("20" + "15");

しかしここではダブルクォーテーションに挟まれた数字がまずでてきます。

これは何でしょうか？

ダブルクォーテーションで囲まれた文字は、数字として扱われず、文字として扱われる。
文字と数字、文字と文字は計算せず、前後の文字を結合してしまう。
+にいろんな役割を与えがちなので、使うプログラミング言語を調べておくこと！

// 文字列の「20」と「15」を連結してコンソールに出力してください
console.log(“20" + “15"); ・・・　"15″は"20”の後ろにつなげる

どうでしょうか？流してしまうとそこまでなのですが、隠れた意味が多すぎてびっくりしますよね・・・

Progateでは、テンポよく進んでもらうことを重要視しているらしく、こういう情報が説明されないのです（泣

Try it!

各セクションで是非チャレンジしてみてください。

スライド	Try
console.log()	consoleオブジェクトの他のメソッドを使ってみましょう。好きな全角文字や半角英数字、記号などを入力してみましょう。
計算してみよう/計算してみよう(2)	括弧をつけて、どのようになるか計算してみましょう。 etc. (-15+13)×(27-24) %（モジューロ演算子）など調べて使ってみましょう。演習の値を0で割るとどのような結果になるでしょうか？
文字列の連結	3つの文字列を結合すればどうなるでしょうか？好きな全角文字や半角英数字、記号の文字列結合をしてみましょう。 +の代わりに"-“などを使うとどのようになるでしょうか？ “20" – “15" をコンソールに出力してみてください。