ドットインストールでJavaScript基礎文法編をやってみた

ドットインストール JavaScript基礎文法編です

要点だけまとめてみたので、後で振り返り用としておきます

JavaScriptを書いてみよう

Consoleの開き方(Google Chrome)

︙ ➜ その他のツール ➜ デベロッパーツール ➜ 下のウィンドウのコンソールボタン

コンソール画面にエラーメッセージ出てるんだが！？
ソースマップうんちゃらかんちゃら〜だったので調べて無効にしたら出なくなったのでとりあえずはOKということで・・・
しょーもないかもしれないけど、エラーに対応出来た感じがエンジニアぽい感じ
参考にさせて頂いた --> SourceMapソースマップエラーの対処法

'use strict'

厳密なエラーチェックをするためのもの
書いておくとエラーが発見しやすくなるので、必ず書いておく！

JSファイルの記述場所

書く場所としては、HTMLファイル内に書く or 外部ファイルに書く
基本的には後者の外部ファイルに書いて呼び出すのが良さそう

• <script src="ファイルの場所を指定"></script>
• </body> (bodyの閉じタグの前にスクリプトタグを置こう)

エラーメッセージに慣れよう

コンソールに出たエラーメッセージは重要なヒントになる
main.js:3 と書いてあれば main.jsファイルの 3行目がおかしいんだなと分かる
DeepLも上手く活用していこう

\(バックスラッシュ)の使い方

• 文字列の中で'or"を表示したい場合　
  例: 'it\'s me' もしくは "it's me"
• \n = 改行
  例: "it's \nme"
• \t = タブ
  例: "it's \tme"

varは使わない

定数 --> const　変数 --> let

変数を使った計算は省略出来る

型について学ぼう

null

typeofで調べた時にnullがobjectと出るのはJSの有名なバグ

文字列と数値について

数字からなる文字列と数字の演算は可能で、その場合、数字からなる文字列も数値に変換される
ただ、足し算だけは例外で、文字列と数値の間に＋演算子を用いた場合は文字列の連結のための演算子として扱われる

真偽値

比較演算子を含まない単一の値も真偽値で評価出来る
false <-- 0, null, undefined, 空文字列, false
true <-- それ以外

条件分岐を学ぼう

if文

• trueの場合if〜
• falseの場合else〜
• 条件が3つ以上に分岐する場合はelse if〜 * n(ifとelseの間)

条件演算子

条件式 ? trueの処理 : falseの処理

短く書ける利点の一方で、場合によってはコードが読みにくくなるという欠点がある
よく出てくる表現なので理解はしておくべきだが、読みやすさとのバランスを考えて使う必要がある

論理演算子

• && なおかつ (AND)
• || もしくは (OR)
• ! 〜ではない(NOT)
  if~に続く条件を論理演算子で繋ぐ

switchを使った条件式

=== が多く並ぶような条件式の時に使える

• switch(比較したい値)
• case~break * n
• caseが2つ以上の時は case~ * n
• どれにも当てはまらない時の処理はdefault~break

case~の最後は;ではなく:

条件の繰り返し処理

for文

• カウンターの変数名はiが慣習的に良く使われる
• 再代入するのでletを使う

テンプレートリテラル

文字列の中で定数を使用する場合に使う
console.log(hello ${i});
()の中はバッククォートと波括弧が使われる

i++ は、変数i に1を足してくださいね　という処理
インクリメントと言う(逆はデクリメント)

while文

• 指定した条件が満たしている間、特定の処理を繰り返す
• 最初から条件を満たしていないが、値を表示して欲しい時
  • do whileを使う

continue, break

• for や while 文で特定の回だけスキップしたい時
  • continue
• 特定の回で処理を終了させる時
  • break

3の倍数の時をスキップしたいなどの時の演算子
例: 3の倍数の時にスキップしたい --> i % 3 === 0
変数(i)を3で割った余りが0 --> 3の倍数(4->1, 5->2, 6->0)

関数を使って処理をまとめてみよう

関数

似たような処理を何度も書かなくて済む

function

• 書き方
  宣言 --> function 関数名() {処理}
  呼び出す時 --> 関数名();

• いくつか呼び出した処理を変えたいといった時は
  • 呼び出した関数名() <- の()内を変更出来る(実引数)
  • その場合、宣言時のfunction 関数名() <-の-()内に変数を入れる(仮引数)
    • {}の中をテンプレートリテラルを使って処理を記述する
• 関数を呼び出す時に値を渡さなかった場合のデフォルト値を変数に指定出来る
  • function(変数名 = "関数名")としておくと
  • 関数名()を呼び出した時にこちらで何も引数を渡さないと⬆("関数名")の値が使われる

関数式

上記は関数宣言と言い、その他に関数式という書き方もある
書き方は　定数に関数を代入するといった書き方になる
注意点としては代入する形になるので、{}の最後には;を付け忘れない事

アロー関数

関数式を更に短く書く書き方
const 定数 = 引数 => 引数の処理;

return

returnを使うと、関数内で処理をした結果を「戻り値」として返す事が出来る
:::note
本来returnを使わず処理を行った場合(console.log)そのまま終了となる
しかし、returnを使う事で処理を行った結果を値として返せるので、
その値を使ってさらに別の処理を続ける事ができる
:::
例: (a + b + c)と(d + e + f)が(A)と(B)として結果が出る
　　更に(A) + (B)の処理をしたい時などに利用出来るということ

スコープ

スコープとは、有効範囲という意味
ブロック(条件式)の外で定数を宣言した場合、
この定数は全ての範囲で有効で、このようなスコープをグローバルスコープと呼ぶ

同じ定数を別の場面で使いたい場合はブロックに囲ってあげる必要がある
ブロックは{}の範囲ということなので、
基本的に書いたコードはブロックで囲ってスコープを分けるという習慣を付けておくといいかもしれない

所感

HTML / CSSとは違って目に見えない部分の処理という部分でまた難しいなぁと感じました。
また、エラーにしっかり対処するという事も大事ですね。
お手本を見ながら写して居てもエラーするぐらいだから、セミコロンやコロンの記述が若干違う所にも気を配らないといけないですね。
基礎文法をある程度理解しておけば他の言語を学習する上で楽になると思うので、
やりながら分からない時にしっかり振り返って理解していこうと思います。