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

はじめに

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

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

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

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

JavaScriptとは

フロントエンド言語とよばれるもので、HTMLやCSSに動きをつけることができる

動きがあるとユーザにとって便利で使いやすい
ユーザにとって便利で使いやすいことは、そのサイトの評価や売上に直結する

JavaScript練習準備

JavaScriptのファイルは、拡張子を.jsにする。

CSSの読み込みではlinkタグを利用していたが、JavaScriptのファイルの読み込みには scriptタグを利用する。
書く場所（読み込みする）は、bodyタグの閉じタグの直前にいれる。

文字列を表示

コンソール画面とはJavaScriptを入出力できる場所のことで、エラーのデバックや、JavaScriptのテスト環境として使用される。

console.log(”おはよう”);

文字列を表示させるためには、”ダブルクォーテーション”で文字列を囲えば良い。

複数の文字列をつなげたければ””で囲った文字を+でつなげばよい。
（”ダブルコーテーションはシングルコーテーション’でもよい）

もし、文字列の中にダブルクォーテーションそのものを入れたい場合は、シングルクォーテーションで囲えばよい。逆もしかり。

数字の計算

加算+、減算ｰ、乗算*、除算/、()をつかった計算、余りを求める計算%はできる

変数と定数

• 定数
  const ・・・再代入と再宣言ができない
• 変数
  let ・・・再代入ができて再宣言ができない
  var ・・・再代入と再宣言ができる

変数を定義することを代入するという。

変数を使う時に””ダブルクォーテーションで囲ってしまわないように注意！文字列として認識されてしまう！

変数名のルール

アルファベットと数値で書くこと。
ただし、変数名の先頭はアルファベットにしないといけない。
先頭は小文字にすること。

変数と定数の違いは書き換えができるかできないか。定数は書き換えができない。
（書き換えしようとするとエラーになる）

意図しない書き換えミスを防ぐため、基本はconst(定数)を利用するのがおすすめ。
どうしても書き換えが発生する場合はletで変数を定義する。

変数を文字列へ埋め込む

バッククォーテーションの中に定義した変数を埋め込むことができる。
${}をつけて中に変数をつける。

let firstname = "太郎";
let lastname = "山田";
console.log(`${lastname} ${firstname}さん`);

↓これでも同じ結果にはなるが、埋め込んだ方が記述量も少なくなるのでおすすめ。

console.log(lastname + " " + firstname + "さん");

バッククォーテーションの入力方法
キーボードの1のとなり、 escキーの下に
〜（チルダ）と｀（バッククォーテーション）が入力できるキーあり！！！！！

初級編DAY13の追加で調べたいことメモ

• varとletの違い、使い分けについて知りたい。

初級編DAY13の感想と記録

初歩の初歩だからか、久しぶりにすんなり終わった気がする！！
（今日の１番の収穫はキーボードにバッククォートとチルダを打てるキーが存在していることを知ったことかもしれない・・・笑）

 変数のvarについての解説がなかったのでちょっと気になったけれど次回以降で出てくるのかな・・・？
いったん調べずに先に進もうと思います。

DAY13 完了日　：　2024年10月31日（木）
DAY13 所要時間　：　1h
Web制作コース 初級編Total ：　27h