デイトラ中級Day1：JavaScriptの基本文法

chapter1 : JavaScriptとは

JavaScript(以下JS)はフロントエンドで使う言語の一つで、HTMLやCSSに動きをつけたりすることができます。
最近ではJSを使ってアプリケーションを作ったりも出来るそうです。

「フロントエンドって何？」という方は以下の記事を見てみてください。

フロントエンドエンジニアとは？フロントエンジニアの仕事内容と年収

JSを実際に書いて練習したい方は以下のURLに飛ぶだけで記述できます。

jsconsole

※コードがいっぱいになってきたら「cmd + R」を押してリロードすればリセットすることができます。

JSの書き方の基本は「console.log("××××××")」

[JS]
console.log("うんちしたい")

[result]
うんちしたい

かっこもダブルクオテーションも全部半角入力しないといけません。
計算式に用いる基本的な書き方は以下の通りです。

(足し算)[JS(足し算)]
console.log(3 + 3)

[result]
6

[JS(引き算)]
console.log(3 - 3)

[result]
0

[JS(割り算)]
console.log(3 / 3)

[result]
1

[JS(掛け算)]
console.log(3 * 3)

[result]
9

[JS(余りを求める)]
console.log(5 % 2)

[result]
1

chapter2 : 定数と変数

「定数・変数ってなに？」という方はまずは以下の記事をご覧ください。

【今さら聞けない】JavaScriptの変数・定数 let / var / const の使い分け方 | 北海道札幌市のホームページ・Web制作・システム開発会社｜株式会社マーベリックス

●変数を定義する

let score = 96

●定数を定義する

const score = 96

変数はあとから値を変更できる。
定数は変更できない。

<変数を定義するときのルール>
・アルファベットか数字
・小文字からスタート
・数字を先頭につけない

●変数または定数を定義したらこんな感じで使える

[JS]
let name = "うんち"
console.log(name)

[result]
うんち

●こんな使い方もできる。(これはよく使うから覚えておいた方がいい)

[JS]
let name = "うんち"
console.log(`${name}　でそう`)

[result]
うんちでそう

chapter3 : function関数

関数とは、特定の処理をまとめたものです。
function関数の形はこちら。

function 関数名(引数){
　//処理
}

「関数を使うとこんなに便利だよ」の例を解説します。
円の面積を求める式を書くとこうなります。
※radius→半径、pai→円周率

[JS]
let radius = 6
let pai = 3
let area = radius * radius * pai
console.log(area)

[result]
108

半径が6、円周率が3、これを用いて変数areaに6*6*3を入れると108。
こういう意味になります。まあそんなに難しいもじゃあないです。

でも円の面積を5個も10個も求めないといけない場合、この式を何回も書くのは面倒ですよね。そこで便利なのが関数なんです。

[JS]
function calCircleArea(radius){
  let pai = 3
  let area = radius * radius * pai
  return area
}

calCircleArea(5)

[result]
75

calCircleArea(6)

[result]
108

まず関数を定義して、引数に半径の数値を指定するだけでいとも簡単に縁の面積を導き出してくれます。

chapter4 : 条件分岐

条件分岐は「もし〜〜なら〜〜」のやつです。
形はこちら。

if(条件){
　//処理
}

また、条件分岐で大事な考え方がBoolean(ブーリアン)。
※Boolean→true or falseになる考え方です

let score = 89

if(score >= 90){
  console.log("もっとがんばろう")
}

例えば上記のような条件分岐があるとします。これは
「スコアが89点とする。
もしスコアが90点以下なら"もっとがんばろう"と表記して。」
という意味になります。

なのでこの条件分岐の結果は

[result]
もっとがんばろう

になります。

条件分岐においての基本的な記号はこちらです。
まだ基本を学んだだけなので数個のご紹介になりますが、多分他にももっとあると思います。

< : 小なり
> : 大なり
>= : 以上
<= : 以下
=== : 等しい
!== : 等しくない
&& : または
|| : かつ

条件分岐にはif以外にも「else if」と「else」があります。
if分だけだと『もし〜〜なら〜〜』の定義しかできませんが、else ifとelseを使うことで『もし〜〜なら〜〜。そうじゃなければ〜〜。』みたい感じで条件を追加していくことができます。

let score = 30

if(score > 89){
  console.log("がんばったね")
} else if(score > 29) {
  console.log("まあまあだね")
} else {
  console.log("だめだめだね")
}

このコードの意味はこんな感じです。
「スコアを30点とする。
もし89点よりも高い場合は"がんばったね"と表記。
そうじゃなかった場合もし29点よりも高い場合は"まあまあだね"と表記。
その他の場合は"だめだめだね"と表記」

なのでこの条件分岐の結果は

[result]
まあまあだね

となります。

chapter5 : switch文

switch文は複雑なif文をちょっと見やすくしてくれたりします。

例えばif文を使ったこんなコードがあるとします。

const score = 10

if (score === 1){
console.log("1")
} else if (score === 2){
console.log("2")
} else if (score === 10){
console.log("10")
} else {
console.log("その他")
}

[result]
10

わかるっちゃわかりますけど何か複雑ですよね。
これをswitch文を用いて書くとこうなります。

const score = 10

switch (score){
case 1:
  console.log(“1”)
  break
case 2:
  console.log(“2”)
  break
case 10:
  console.log(“10”)
  break
default:
 console.log(“その他”)

[result]
10

スコアが1の場合は1を
スコアが2の場合は2を
スコアが10の場合は10を
表記してください。

という意味になります。
もし〜〜じゃなければ〜〜。そうじゃなければ〜〜〜。そのほかは〜〜。
よりもすっきりしてると思いませんか？

ちなみにcaseごとに「break」をつけてあげないと、別のcaseに干渉してしまうので忘れないように表記しましょう。

それでは今回はこの辺で終わりにします。
ありがとうございました。
けけ丸