【デイトラ学習記録】Web制作コース初級編 DAY11&12 JavaScriptの基本文法①②

2023年8月25日2023年11月10日

こんにちは、ここぽてとです。本日は、JavaScriptの基本を学ぶということで、前半は、JavaScriptのファイルの作成手順やconsole.log();を使って、コンソール画面にテキストや数字を出力する練習をしていき、後半は、関数や条件分岐について学んでいきます。

この記事は、

・JavaScriptの基本が理解できる
・JavaScriptのファイルの作成手順がわかる
・VS.Codeのユーザースニペット（テンプレ呼び出し）の登録方法がわかる

という感じで、Web制作初心者さん向けの記事になっております。

ここぽてと

少し難しく感じるかもしれませんが、大事な所だけをまとめたので勉強しましょう！

DAY11 JavaScriptの基本を学ぼう①

JavaScriptのファイルの作成手順＋読み込み方法

作業用のフォルダを準備してVScodeで開く
「index.html」ファイルを作成する
「js」フォルダの中に「script.js」ファイルを作成する
HTMLファイルにEmmetで「!+Tab」を押して決まった型を出したら、</body>直前に、下のタグをいれ、JavaScriptファイルを読み込む。

<script src="./js/script.js"></script>
</body>
</html>

5. 「js」フォルダの「script.js」にアラートを実行するコードを書く。

alert("Hello World");

6.HTMLファイルをLive Serverで立ち上げて、アラート（Hello World)が表示されれば、JavaScriptファイルを読み込むことに成功しています！

console.log();を使って、コンソール画面にテキストや数字を出力する

ポイント
console.log();
jsファイルに書いたconsole.logは、Google Chromeの検証ツールのconsoleタグで確認ができます！

文字列の表示

console.log('"デイトラ"');
//出力結果 "デイトラ"

数字の計算

console.log( 1 + 2 );
//出力結果 3
console.log(" 1 + 2 ");
//出力結果　1 + 2 （""をつけると、文字列で出力されてしまうので注意！）
console.log( 23 * 2 );
//出力結果　46 *は掛け算
console.log( 4 % 1 );
//出力結果 1  あまりの数を求めるときに%を使う

変数と定数

数字や文字列を何を意味するデータなのかわかりやすくするのに、データにラベルをつけます。例えば、96という数字は何を表しているかわかりませんが、score:96とすると「点数が96点なんだ」ということがわかります。Javascriptでは「let」などを使って表します。

変数（let)と定数(const)の使い分け

let score = 96;
console.log(score);
// 96と表示される
score = 72;
console.log(score);
// 72に更新され、72が表示される

const score = 96;
console.log("score");
// 96と表示される
score = 72;
console.log(score);
// 72に更新したが、constにしているので、エラー
// 定数は値を書き換えられない

ポイント
・const ・・・再代入と再宣言ができない
・let 　・・・再代入ができて再宣言ができない
・var ・・・再代入と再宣言ができる

※基本はconstでの定義がおすすめだそうです。意図しない書き換えによるエラーを防ぐことができるとのこと。書き換えるときにはletで書き換えましょう！

ユーザースニペットの登録方法

スニペットとは、単語登録のように、何かの文字をキーにコード一式を登録して使い回しできる機能のことです。簡単に言うと、自分でEmmetを作成できるような感じです。下のリンクに手順が詳しく書いてあるので、それを見ながら、いろんなスニペットをVS.codeに登録してみました！以下のコードを、javascript.jsonに貼り付けることで、clと入力するだけで、console.log();が出てくるようになりました！

"Console Log": {
  "prefix": "cl",
  "body": [
    "console.log($1);",
  ],
  "description": "Console Log"
}

DAY12 JavaScriptの基本を学ぼう②

関数（function）

関数とは

関数とは処理をまとめたものをいいます。書き方はfunction 関数名（引数）という形で書きます。関数を使うと、引数を変えれば、繰り返し何度も使うことができ、見た目でもわかりやすいです。

// 関数の基本的な書き方

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

// 関数にの呼び出し
関数名(引数に受け渡しする値);

返り値(戻り値)

返り値とは、関数が実行されて返された値（関数を使った結果）のことで、returnで表します。下のコードは、上が普通に計算したもので、下が関数を使ってまとめたものになりますが、関数の方が引数を変えれば、何度も繰り返し使えるので、便利です。

// 円の面積を求める計算
let radius = 6;
//半径は変わるのでlet(変数)
const pai = 3;
//円周率は変わらないのでconst(定数)
let area = radius * radius * pai;
console.log(area);
//出力結果 108

// 関数にまとめると
function calCircleArea(radius) {
  const pai = 3;
  let area = radius * radius * pai;
  return area;
}

console.log(calCircleArea(6));
//出力結果 108

引数は複数使えます。下のように、コンマで引数を区切ることで、複数使用ができます。

function say(firstName, lastName) {
  console.log(`${firstName} ${lastName}`);
}

say("山田", "太郎");
//出力結果 山田 太郎

スコープ

スコープとは、変数(let)や定数(const)の有効範囲を示すものです。有効範囲内で、定義されていないとエラーが発生します。

// 関数内で定義した変数や定数は、関数の外では使用できません
function hello() {
  const message = "こんにちは";
}

console.log(message);
// エラー

条件分岐

「〇〇の場合、■■する」というのを条件分岐と言います。まずは条件分岐の書き方について説明します。

条件分岐の書き方

if(条件）{
//処理を書く
}

主なデータ型の種類

Boolean型 …true or false
String型　…文字列
Number型　…数字

“true”か”false”を判定するためには、boolean(ブーリアン)型を使います。

いろんな条件分岐　AND演算とOR演算

『比較演算子』…数値の大きさを比較したり、文字列が同じ文字なのか比べたりして、「真」(true)か「偽」(false)を戻す処理を行うことです。

AND演算（＆＆を使う）…且つ

let score = 89;
//スコアが20より大きく且つ90より小さい
if(score > 20 && score < 90){
console.log("20より大きく90未満");
}

OR演算（||を使う）…または

let score = 89;
//スコアが89または0
if(score === 20 || score === 90){
console.log("20または0");
}

!== 一致していないという意味
(例　score !== 89 scoreは89ではない)
=== 一致しているという意味
(例　score === 89　scoreは89である)

ここぽてと

ちなみに、|は、パイプと読むそうです。

いろんな条件分岐　if文とelse とelse if

if文を使うことで、「もし〇〇ならこの処理」「そうでなければこの処理」というように条件によって処理を分けられます。else ifは ifにもelseにも当てはまらない複数条件の分岐に使用します。

//scoreが89よりも上のときは「頑張ったね」と表示
if(score > 89){
console.log("頑張ったね");
//それ以外のときは「頑張ろう」と表示
}else{
console.log("頑張ろう");
}

//scoreが89よりも上のときは「頑張ったね」と表示
if(score > 89){
console.log("頑張ったね");
//scoreが30よりも大きく、89よりも小さいときは「まあまあ」と表示
}else if(score>30){
console.log("まあまあ");
//それ以外のときは「頑張ろう」と表示
}else{
console.log("頑張ろう");
}

条件に範囲を指定したい場合は、下のように入れ子で書くと範囲が指定できます！

//scoreが0以上且つ100以内でスコアが89の時は「頑張ったね」それ以外は「頑張ろう」
if(score >= 0 && score <= 100){
//scoreが89よりも上のときは「頑張ったね」と表示
if(score > 89){
console.log("頑張ったね");
//それ以外のときは「頑張ろう」と表示
}else{
console.log("頑張ろう");
}
}

switch文

switch文とは、複数の値の中のいずれかと一致するか調べる構文です。複数の選択肢がある場合は、if文よりもswitch文の方が適しているといえます。

switch (score) {
//scoreが1(score===1)のとき「１」と表示
    case 1:
        console.log("1");
//break;をつけることで処理を抜けることができる
        break;
//scoreが1(score===2)のとき「2」と表示
    case 2:
        console.log("2");
        break;
//scoreが1(score===10)のとき「10」と表示
    case 10:
        console.log("10");
        break;
//scoreがそれ以外の数字のとき「その他」と表示
    default:
        console.log("その他");
        break;
}

ポイント
break;をつけないと処理が続くので、絶対に付けること！
===が何度も続く場合は、switch文で書くと、とても見やすくなります。