100日後にエンジニアになるキミ - 19日目 - Javascript - JavaScriptの基礎2

今日もJavaScriptの続きをやっていきましょう。

前回はこちら

100日後にエンジニアになるキミ - 18日目 - Javascript - JavaScriptの基礎1

プログラム言語の学習方法について

JavaScriptに関わらず
プログラム言語というのは文法を正しく覚えないと
プログラムを正しく動作させることができません。

まず最初はプログラム言語の文法を覚えて
プログラムを書くこと、プログラミングに慣れることを目指しましょう。

学習方法としては
1.資料を見て
2.コードを書く
3.実行してみる
4.正しい結果になっているかを確認する
5.間違っていたらコードを書き直す

を繰り返してゆきます。

これを少しづつ進めてゆき文法を覚えましょう。

ある程度覚えたらコードを書く目的を立ててみましょう
最初は軽めの目標でいいと思います。

・現在時刻を取得して、このタグに表示させる。
・BMIの計算結果を表示できるようにする。

ある程度こなせるようになったら、大きめの目標に移ります。
・WEBサイトを構築したい。
・アプリケーションを作りたい。
・データ分析したい etc

そうすると、大きめの目標を達成するための過程の中で
必ず上手くいかないところが出てきます。

試行錯誤をして、これを自分自身で解決することで
大きな成長を遂げることができます。

障害発生　→　解決する

この繰り返しで身につくのが「問題解決能力」になります。
プログラミングは問題を解決する能力を養うのに
うってつけの科目だと思いますので頑張って最後までやり遂げましょう。

まずは簡単なコードを打ち込んでみよう

JavaScriptの動かし方は前回やっているので
わからない方はそちらを参照してください。

まずは簡単なコードとして
プログラム言語は素早く四則計算を行うことができます。
検証ツールなどで試してみましょう。

2020 + 1234
3254

123456 - 789
122667

18782 * 2
37564

567 / 2
283.5

足し算と引き算は算数と同じ記号を用いますが
プログラミングになじみの無い方は
掛け算と割り算の記号を初めてみる方もいるかもしれません。

プログラム言語では、記号の一つ一つに意味があります。

上記の例で行くと、0123456789などの文字は
数値として認識されています。

ソースコードの中に直接書きこんである文字とか数字とかのことを
「リテラル」と呼んでいます。

+-*/などの記号はその中でも特別な意味を持つ記号になるため
演算子と呼ばれています。

その中でも足し算引き算などの四則計算に用いられる記号のことを
算出演算子と呼んでいます。

算術演算子

0123456789などの数字をそのまま打ち込むと
これはプログラムの中では「数値」として認識されることになり
足したり引いたりの四則計算を行うことができます。

ここに付け足して計算を行うことのできる記号が「算術演算子」です。

算術演算子は以下のようなものがあります。

色々打ち込んで試してみましょう。

-1+1
0

-10-11
-21

2*3*7
42

10/3
3.3333333333333335

5 % 3
2

3**4
81

剰余はなかなか普段使われない概念です。
除算の結果は割った際の結果を出しますが
剰余は余りの方を計算することになります。

結果が大きく異なるので違いを押さえておきましょう。
プログラミングでは多用されます。

文字列

数値を計算できることは試せました。

それでは文字列を打ち込んでみましょう。

a + b

何か赤い文章が表示されています。

プログラム上では文字列として打ち込みたい場合は

'や"で打ち込みたい文字を囲む必要があります。

"a" + 'b'
"ab"

結果が"で囲まれているのは文字列だよ、という意味です。

こうすることで文字列として打ち込みをすることができます。
文字列であれば漢字などの日本語も打ち込めます。

文字列に関しても+で計算を行うことができます。
この場合の結果は文字列の連結になります。

'こんにちは' + '乙py' + 'です。'
"こんにちは乙pyです。"

HTMLやコンソールに文字を表示させたりする場合は
文字列として打ち込みをする必要があります。

数値と文字の足し算は結果は文字の連結になります。

'a'+2
a2

変数

プログラミングで必ず用いられている概念として
「変数」というものがあります。

変数はデータを格納して使いまわすための仕組みのことで
javaScriptでは let か var というキーワードの後に
任意の名前を指定することで変数を宣言できます。

使用できる文字は英大文字小文字と数字と _ (アンダースコア) $(ドル記号)
などの文字が使えます。漢字などの日本語はダメですね。

2020/06/07修正
どうやらVer1.5でひらがなとか漢字とか、Unicodeの大部分の文字は使えるようで。
でも英大文字小文字と数字と _ (アンダースコア) $(ドル記号)だけにしておきましょう。
ダサいので。

また変数は定数宣言した名称や、予約語以外の名称を変数名として付けることが出来ます。

let v1;

JavaScriptでは行末に;(セミコロン)をつける必要があります。
コンソールでの簡易な計算時には必要ありませんが
長くコードを書く際には必要です。
ここからは;を足しておきましょう。

これで変数を作ることができました。
宣言しただけなので、まだ中身は空っぽです。

変数の中にはデータを格納することができます。
このことを「代入」と言っています。

「代入」は=(イコール記号)を用いて行います。

v1 = 1;
1

これで変数の中にデータが格納されました。
変数v1の中には数値の1が入っています。

変数に代入することで値を使いまわすことができます。
変数を用いた計算を行ってみましょう。

v1 * 10;
10

文字列を代入するには'を用いる必要があります。
文字を代入してみましょう。

v1 = '12345';

こうすると、変数v1の中身が文字列の12345に上書きされました。
中身を変えることができるので「変数」というわけです。

文字列の変数を使って計算をしてみると

v1 + 12345;
"1234512345"

数値を足していますが、文字列扱いのため結果は連結されます。

このように変数にはデータを代入して確保する仕組みと
再度呼び出した際には上書きする仕組みがあります。

一度宣言しておけば使いまわすことができます。

変数を定義するルール

変数には使える文字に制限があります。

使える文字は
英大文字小文字と数字と _ (アンダースコア) $(ドル記号)
です。

var x = 1;
var _1 = 1;

これは大丈夫です。しかし数字で始まるのはダメです。

let 1=1;
Uncaught SyntaxError: Unexpected number

これは文法上間違っているよ、というエラーメッセージになります。
途中に数字が挟まるのは大丈夫です。

let a1=10;

1文字でも変数としては機能しますが
中身に関して、どんなデータが入っているのかが
分かった方がプログラムが見やすくなります。

また、変数は「予約語」という
あらかじめプログラムで使われてしまっている
定義ずみの文字列を使うことができません。

予約語としては

break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

などがあるので、英単語1つだけだと予約語にかぶる可能性があります。
英単語を２つ以上 _ で連結するのが分かりやすいと思います。

av_getter

またローマ字でもいけますが、英語でプログラムを書く人がほとんどのなので
英単語にした方が「カッコイイ」と思います。

let oguri_syun='まーきの';

まとめ

基本的な計算の仕方と
変数の概念,書き方を覚えておこう。

君がエンジニアになるまであと81日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython