基礎文法まとめ

JavaScriptの基礎知識を簡単にまとめる。

JavaScriptの記述場所

・HTMLファイル内にscriptタグで挟んで直接記述する
・別ファイルに記述し外部ファイルとして読み込む

いずれの場合でも全ての要素を読み込んでから実行するのが良いため、bodyの閉じタグの直前に置くのがいいとされる。

ひとつでも間違えると何も表示されない

HTMLでは閉じタグがなかったり、変な記述があってもとりあえずは表示されていたが、JavaScriptはコードの中にひとつでも不備があると何も表示されないので注意が必要。

エラーがあった場合はコンソールを開くと、どこが悪いのか行数も指定してくれているのでエラーコードは読み取れるようにする。

大文字と小文字は区別される

大文字と小文字は厳密に区別され、間違って記述した場合にはエラーになるので注意。

スペースの扱い

スペースは認識されないためどれだけ多くても問題ない。

同じ値がある場合には後のものが優先される

上から順番に処理が実行されるので、同じ値があった場合は後のものが優先される。

例えばコードの中に同じ変数名が複数あり、全て違う値だった場合は一番最後の値がその変数の値となる。

ただし、同じ名前の定数が複数あった場合にはエラーとなる。定数は再代入できないため。こちらについてはまた別途。

複数の単語を名前にするときはキャメルケースで

定数名や変数名の定義、関数名の定義時に英単語をつなげたい場合にはスペースを詰めて次の単語の頭文字を大文字にするという決まりがある。

let myAge = 26;

単語をスペースで開けてしまうとエラーになるので注意。

コメントの書き方

一時的に実行をさせない、チーム開発で他の人に向けた処理のメモを残すなどで使用されるコメントアウト。書き方は２種類で一行だけの場合は//を文頭に、複数行の場合は/**/で文章を囲む。

// 単行の場合

/*
複数行のコメントアウト
複数行のコメントアウト
*/

なお、一時的にコードを実行したくないなどコメントアウトで使用した場合は、可読性を上げるために最終的に削除するのを忘れないこと。

文字列を扱う場合には ' か " で囲む

シングルクォーテーション( ' )でもダブルクォーテーション( " )で文字列を表示することができる。ただし、統一性をもたせたほうが良いのでコードを書く際にはどちらかに合わせたほうが良い。

console.log('Hello World!');

シングルクォーテーションの中でシングルクォーテーションを使用したい場合にはバックスラッシュを使用すると良い。

console.log('It\'s me, MARIO!');

上記の場合、バックスラッシュを使用すると直後の文字が特別な文字とみなされてエラーを回避できるようになる（バックスラッシュを使用しないとItで文字列を閉じてしまうためエラーが起こる）。

また、バックスラッシュはMacだとOption＋￥で入力できる（WinじゃないのでWinのひとすみません・・）。

Macのキー操作
\　＝　option　＋　￥

演算子

計算に用いる演算子は下記。計算の優先順位は算数の乗除加減と同じ。

足し算　+　
引き算　-
掛け算　*
割り算　/
あまり　%
べき乗　**

文字列として認識されている数字でも足し算以外だと計算される。

console.log("10" - 2);
// 8が出力

足し算の場合には文字列の連結になる。

console.log("10" + 2);
// 10は文字列とみなされて102と出力

扱えるデータ型

型の種類は下記。

- 文字列
- 数値
- boolean
  - 真偽値
- オブジェクト
- undefined
  - 宣言したけど値が代入されていない変数など
  - 定義されていない値（値はある）
- null
  - 値自体がない

構文について

記号の呼び方、書き方など。

if {
    構文;
}

{ }で囲まれた部分をブロックといい、ブロックの中には何行でも文を書くことができる。ブロックの後にはセミコロンはつけない。

ブロックの中は命令文の終わりごとにセミコロンをつける必要があるが、ブロックの終わりにはセミコロンは不要。

テンプレートリテラル

文字列は' か "で囲むが、文字列の中で変数を使用したい、表示させたい場合にはテンプレートリテラルを使用して特殊な方法で文字列を表現する。

let num = 1;
console.log(`${num} 回`)
// 1回

テンプレートリテラルを使用する際にはシングルでもダブルでもなく、バッククォートを使用するので注意。

Macの操作ではShift＋＠で入力できる。

Macキーの操作
`　＝　shift　＋　@

※このnoteはProgate・ドットインストール・Udemyなどの教材から学習した内容をまとめており、初心者から中級者になるレベルを目指しています。ご指摘点あればコメントにてお願いします。
+--------------------------------------------------------------------------+
しょうみゆ@WEBエンジニア
twitter@MykiiTech
インフラエンジニアとWEBマーケティングで仕事した人。日本×フィリピンのハーフ。ごはんと仕事とおしゃべりが大好き。ワンストップでサービス提供できるフルスタックエンジニアになるべく、まずはフロントエンドエンジニアから攻め中。HTML/CSSは得意。
+--------------------------------------------------------------------------+