元IT完全未経験者がJavaScript入門講座!できることをわかりやすく解説

javascriptプログラミング
javascript

今回はJavaScriptでできることを実際にプログラムを書いて実行して解説していきたいと思います

元IT完全未経験で習得したので、わからない人でもわかりやすい内容になっているかと思います

IDE(開発環境)はVSCodeを使用します

では早速学んでいきましょう

おすすめのプログラミングスクールはこちら

JavaScriptの様々な機能及びできること

変数

変数とはデータを入れる箱です

変数を使うメリットは、データを可変にできるということです

例えば会員サイトを思い浮かべてみて下さい

会員登録した人のデータはデータベースという所に保存されているのですが、ログインした人の会員IDをデータベースから取得する場合、毎回同じ会員IDが取得されるでしょうか?

会員サイトに登録している人は何千、何万人といるわけです

なので、ログインした人の会員IDがデータベースから取得できるわけです

このように、毎回違う会員IDを取得する場合に、取得した会員IDを入れておく変数が必要なわけです

では構文から説明していきます

基本的に使う型は2つです

説明
constconst a = 1再代入不可能
letlet b = 1再代入可能

ではまずletの例から見ていきましょう

下記のようなプログラムを書いて実行してみます

このような結果になります

aにはHello、bには2を代入しました

そのaとbの変数の値をコンソールに出力した結果、代入した値が出力されました

では次にconstの例を見ていきましょう

このプログラムを実行してみます

このように再代入できないという風に怒られます

ではletにしてみましょう

プログラムを実行してみます

再代入したWorldが表示されました

配列

配列とは、1つの変数に複数のデータを格納するための型です

では実際にプログラムを書いてみます

dataという変数にデータを複数代入します

コンソールに値を出力しますが、data[1]というふうに書いています

これはindexといい、複数のデータの中の何番目なのかを指定しています

ここで注意なのが、1番目のデータは0から始まります

なので、今回1を指定しているので、2番目のデータということになります

では実行してみます

2番目のデータが出力されました

応用編としてもう1つ紹介します

それは、多次元配列です

プログラムを書いてみます

1つの変数の中に複数のデータを複数代入しています

data[0][1]というのは、1番目の配列の中の2つ目のデータを指します

ということはJavaScriptが表示されるはずです

プログラムを実行してみます

予想通りです、ではMacを表示させてみます

実行してみます

期待通りです

連想配列

配列と連想配列の違いは、配列はインデックス番号でアクセスするのに対して、連想配列はkeyでアクセスします

連想配列の作成方法は2種類あるので、1つづつ試していきます

プログラムを実行します

keyを元にその名前で格納された値を取得できました

ではもう1つの方法です

プログラムは下記の通りです

Objectをnewして、「変数名.key = データ」という形で代入しています

ではプログラムを動かしてみます

代入する値が不明な場合はこちらの方が便利そうですね

シンボル

文字列に似ていますが、文字列ではありません

シンボルとは、モノの名前を表すものです

どのように使用するのかをプログラムを書いて解説します

プログラムを実行します

これは便利ですね

よくあるのが下記のような書き方なのですが、数字が何を意味しているのかわかりずらいので、圧倒的にシンボルを使用した方が意味がわかりやすいですね

プログラムの実行結果です

おすすめのプログラミングスクールはこちら

キャスト

文字列から数字、数字から文字列へキャストする方法をご紹介します

ではまず文字列を数字に変換したいと思います

プログラムはこうです

プログラムを動かしてみます

Number.parseIntを使うことによって数字型へ変換されました

続いて数字から文字列へ変換する方法です

typeof String()を使うことによって文字列へ変換することができます

実行結果を見てみましょう

分かりづらいのでこうしてみます

これを実行してみます

変数のデータ型を判定

書き方説明
Number.isInteger整数値であるか
Number.isNaNNot a Numberであるか
Array.isArray配列であるか

※ NaN とはグローバルオブジェクトのプロパティのひとつで非数( Not A Number )を表します。 Number オブジェクトで用意されている Number.NAN も同じです。

では実際にプログラムを書いて試していきます

実行結果です

ちなみにNaNについて補足ですが、NaNを発生させる条件を簡単に言うと、ありえない数字になったりする場合です

このような場合はtrueになります

四則演算

演算子説明
+加算1 + 2
減算3 – 2
*掛け算2 * 2
/割り算4 / 2
%剰余6 % 2

説明するまでもないと思うので、実際にプログラムを書いて動かしていきます

実行結果です

比較演算子

右辺と左辺の値を比較したい時に使用します

演算子説明
==左辺と右辺の値が等しい時にtrue3 == 3 // true
!=左辺と右辺の値が等しくない時にtrue1 != 4 //true
<左辺が右辺より小さい時にtrue2 < 5 // true
<=左辺が右辺と同じもしくは小さい時にtrue3 <= 3 // true
>左辺が右辺より大き時にtrue6 > 3 // true
>=左辺が右辺と同じもしくは大きい時にtrue7 >= 3 // true
===左辺と右辺の値が等しいかつデータ型も同じ時にtrue3 === 3 // true
!==左辺と右辺の値が等しくないもしくはデータ型が異なる時にtrue3 !== 3 //false
?:「条件式 ? 式1 : 式2」条件式がtrueの場合式1、falseの場合は式2を返す(1===1) ? true : false // true

論理演算

AND条件やOR条件で処理を分けたい時に使用します

演算子説明
&&左右の式が共にtrueの場合にtrue10 == 10 && 20 == 20
||左右どちらかの式がtrueの場合にtrue10 == 10 || 10 != 20
!式がfalseの場合にtrue!( 10 < 5 )

条件によって処理を分岐したい(if-else if-else)

実際のシステム開発の現場では取得する値が可変なことは珍しくありません。

例えば、テストの点数を取得するシステムがあるとします。

そのシステムは生徒ごとの点数を取得するので、毎回違う値が取得されます。

点数ごとによって処理を変えたいような時にif文を使います

構文は以下の通りです

if (条件1) {

処理

} else if (条件2) {

処理

} else {

処理

}

else ifとelseについて補足します

最初のifの条件で引っ掛からなかった場合、次のelse ifの条件が評価されます。

trueの時はその中の処理が実行されます。

elseはどのifの条件にも当てはまらなった時に実行されます。

では実際に試してみましょう

結果を見てみましょう

コメント

error:Content is protected !!
タイトルとURLをコピーしました