記号の読み方

プログラミングで使う記号の読み方と、使う場所です。記号はすべて半角で書きます。全角(日本語入力の状態)で書くとエラーになります。

かっこ・引用符

記号読み方使う場所・意味例
( )かっこ(丸括弧)関数の呼び出し、if・for の条件、計算の優先順位
console.log("こんにちは");
if (score >= 80) {
{ }波かっこ(中括弧)処理のまとまり(if・for・関数)、CSSの中身、オブジェクト
if (ok) {
  console.log("OK");
}
[ ]角かっこ配列、配列の番号(添字)
const items = ["A", "B", "C"];
console.log(items[0]);
< >山かっこHTMLのタグを囲む
<h1>タイトル</h1>
" "ダブルクォーテーション(二重引用符)文字列(文字)を囲む。囲むと文字、囲まないと変数や数値
const name = "マリモ";
console.log("name");  // 文字の name
console.log(name);    // 変数の中身
' 'シングルクォーテーション(一重引用符)文字列を囲む。" " と同じ使い方
const name = 'マリモ';
` `バッククォート文字列の中に変数を入れる(${ } とセットで使う)
const score = 80;
console.log(`点数は${score}点`);

区切り

記号読み方使う場所・意味例
:コロンCSSのプロパティと値の間、オブジェクトの名前と値の間
h1 {
  color: red;
}

const p = { name: "お茶", price: 150 };
;セミコロン文の終わり(JavaScript・CSS)
let x = 5;
let y = 7;
,カンマ値と値の区切り(配列・引数・オブジェクト)
const nums = [1, 2, 3];
move(100, 200);
.ドット(ピリオド)「の」。オブジェクトや要素の中の機能を呼ぶ
console.log("A");
product.price;
result.textContent = "大吉";
/スラッシュ割り算、ファイルの場所の区切り、終了タグ
<img src="img/photo.png">
</p>
\バックスラッシュ(円マーク)特別な文字を書く(Windowsでは ¥ で表示される)
console.log("1行目\n2行目"); // \n は改行
_アンダースコア(アンダーバー)変数名やファイル名で、単語をつなぐ
let max_life = 3;
-ハイフンCSSのプロパティ名、ファイル名
background-color: red;

計算・代入・比較

記号読み方使う場所・意味例
=イコール(代入)右の値を左の変数に入れる(「等しい」ではない)
let life = 3;
life = life - 1;
+ - * /たす・ひく・かける・わる計算。+ は文字と文字をつなぐときにも使う
let total = 150 + 50;
console.log("おつり:" + change + "円");
%パーセント(剰余)割り算のあまり
console.log(7 % 3); // 1
=== !==イコール3つ・ノットイコール同じか・同じではないかを調べる
if (key === "a") {
  ...
}
< > <= >=小なり・大なり・以下・以上大きさを比べる
if (money >= price) {
  ...
}
&&アンド(かつ)両方成り立つとき
if (stock > 0 && money >= price) {
||オア(または)どちらかが成り立つとき
if (key === "a" || key === "A") {
!エクスクラメーション(否定)「ではない」。!== の一部としてよく使う
if (a !== b) {
++インクリメント1増やす(i = i + 1 と同じ)
for (let i = 0; i < 5; i++) {
=>アロー(矢印)関数を短く書く
button.addEventListener("click", () => {
  console.log("クリック");
});

コメント

記号読み方使う場所・意味例
//スラッシュ2つその行の右側をコメントにする(JavaScript)
// 変数に値を入れる
let x = 5; // 5を入れる
/* */スラッシュ・アスタリスク囲んだ範囲をコメントにする(JavaScript・CSS)
/*
  複数行の
  コメント
*/
<!-- -->コメントタグ囲んだ範囲をコメントにする(HTML)
<!-- ここにHTMLを記述します -->

HTML・CSSで使う記号

記号読み方使う場所・意味例
#シャープ(ハッシュ)CSSで id を指定、色のコード
#title {
  color: #ff0000;
}
.ドットCSSで class を指定
.note {
  color: red;
}
%パーセントCSSで親要素に対する割合
width: 80%;
&lt; &gt; &amp;エンティティHTMLの本文に < > & の文字そのものを表示したいとき
<p>1 &lt; 2</p>

よくあるミス