【受講記録】デイトラWeb制作コース初級編DAY14

2024-10-312024-12-04

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

この記事はこんな人に参考になるかも？

これからデイトラWEB制作コースの受講を考えている方
　実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！

現在進行形でWEB制作コース受講中の方
　一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！

卒業生の先輩方
　懐かしんでいただければ・・・笑　
　　自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。

初級編DAY14の押さえておきたいポイント

関数（function）

関数とは、処理をまとめたもの。
引数とは、関数に受け渡す値。

関数は定義しただけでは実行されない。
関数を呼び出し（実行）する必要がある。

関数の基本的な書き方
function 関数名(引数) {
　　処理を書く
}

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

実際に書くとこんな感じ

function showMessage(message) {
    console.log(message);
}

showMessage("おもち食べたい");

関数を使うメリット

コードが整理されて見やすくなる。
定義した関数は使い回しができる。

返り値（戻り値）

関数が実行されて返された値。
return文を使う。

関数を実行して処理した結果を返してほしい場合に使う。

複数の引数

複数の引数を定義する場合には、カンマで区切る。
呼び出しをするときも同様にカンマで区切ればOK。

function say(firstName, lastName) {
    console.log(`${firstName} ${lastName}`);
  }
  
  say("デイトラ", "太郎");
  //出力結果 デイトラ 太郎

スコープ

スコープとは、プログラムの中で変数や関数が使える範囲のこと。
変数・関数が使用できる有効範囲。

グローバルスコープ：どの関数からでも呼び出しができる範囲のこと。
関数スコープ：その関数内でしか利用できない範囲のこと。

コードの可読性や保守性を保つために、変数や定数はなるべく最小スコープで定義するようにする！

条件分岐（if）

条件分岐の基本（XXの場合YYする）
If(条件){
　//処理
}

条件はboolean（ture/false）に基づいて処理がされる。
boolean型のif文は、条件がtrue(真)のときのみ処理が実行される。
比較演算子（<、>、===、!===など）を使って、条件を書いていく。

複雑な条件分岐

AND演算　&&　〜かつ（AND）

OR演算　　||　〜または（OR）

else文

if文の後ろに、else、else if 文をつなげることで、falseの場合の処理をつけてあげることができる。

例
スコアが1の場合”1”
それ以外の場合で、スコアが2の場合は”2”
それ以外の場合で、スコアが10の場合は”10”
それ以外の場合は、”その他”

let 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("その他");
}

//出力結果 10

Switch文

if文をもう少し見やすく書く方法。
break は処理を抜けるという意味で、記述し忘れると条件が一致していても処理が続いてしまうので注意が必要！

前述のif文をswitch文で書き直すと以下になる。

let 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("その他");
        break;
}

//出力結果 10

===がたくさんあるようなif文はswitch文にした方が可読性がよくなる。

Trial and Error memo

JavaScriptの処理が動いてない

やってみよう！と思い、動画の解説を思い出しながら書いたJavaScript。
よし！できた！・・・と、思ったのにコンソール画面で結果が返らず。

動画を振り返ってコードを確認するも全部合っているように見えた・・・

結論。
HTML側でJavaScriptの呼び出しが定義されていなかった・・・
そりゃ動かないよ・・・
今回はHTMLを作り直したのに、呼び出しを入れ漏れていました。

CSSやJavaScriptが動かないときはコードを見直すことも重要だけれど、
HTMLから呼び出されているか、
呼び出されているファイルがあってるか、パスがあってるか、
その辺りも確認するようにしよう。