コンテンツ
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScriptの書き方と用語解説

JavaScriptの書き方と用語解説

JavaScript
目次

Scriptタグ

scriptタグは、HTMLにJavaScriptを読み込ませるためのタグです。

<script src="main.js"></script>

script は「この中（またはこのファイル）にJavaScriptが書いてあります」という意味です。
src は「読み込むファイルの場所」を指定します。

Console（コンソール）

Consoleとは、JavaScript専用の「確認用メモ帳」のようなものです。
画面には表示されないけれど、開発者が動作確認するために使います。

console.log("こんにちは");

console.log は「コンソールに表示する」という命令です。

ブラウザで
右クリック → 検証 → Console
を開くと表示されます。

エラーが出たときも、必ずConsoleに表示されます。

コメント

コメントは、プログラムの説明を書くためのメモです。
実行されません。

// これは1行コメント

/*
  これは
  複数行コメント
*/

自分の理解を整理したり、後から見返すために使います。

変数（let / const）

変数は、データを一時的に保存する箱です。

let count = 1;
const name = "太郎";

let
あとで中身を変える可能性がある箱

const
一度入れたら中身を変えない箱（基本はこれ）

データ型

データ型とは、データの種類のことです。

const text = "りんご";   // 文字列
const price = 120;       // 数値
const isOpen = true;     // 真偽値

文字、数字、true / false などで扱い方が変わります。

配列（Array）

配列は、複数のデータを順番にまとめたものです。

const fruits = ["りんご", "バナナ", "みかん"];

0から数えるのがルールです。

fruits[0]; // りんご

オブジェクト（Object）

オブジェクトは、名前つきのデータの集まりです。

const user = { name: "太郎", age: 28 };

取り出すときはドットを使います。

user.name;

条件分岐（if）

条件分岐は「もし〇〇なら」という判断です。

if (score >= 80) {
  console.log("すごい");
}

条件が true のときだけ中が実行されます。

繰り返し（for / forEach）

繰り返しは、同じ処理を何度も行う仕組みです。

for

for (let i = 0; i < 3; i++) {
  console.log(i);
}

決まった回数だけ処理するときに使います。

forEach

fruits.forEach((fruit) => {
  console.log(fruit);
});

配列の中身を1つずつ取り出します。

関数（function）

関数は、処理をまとめたものです。

function greet(name) {
  return `こんにちは、${name}`;
}

呼び出すときは名前を書きます。

greet("太郎");

アロー関数（=>）

アロー関数は、関数を短く書く方法です。

const greet = (name) => {
  return `こんにちは、${name}`;
};

今のJavaScriptではよく使われます。

DOM（ドム）

DOMとは、HTMLをJavaScriptから操作できる形にしたものです。
「HTMLの設計図」のようなイメージです。

querySelector

querySelectorは、HTML要素を取得する命令です。

document.querySelector("#title");

「#」は idを、「.」 は class を表します。

イベント（Event）

イベントとは、ユーザーの操作のことです。
クリック、入力、スクロールなどがあります。

addEventListener

addEventListenerは、イベントを監視する命令です。

btn.addEventListener("click", () => {
  console.log("クリックされた");
});

click はクリックされた瞬間を意味します。

textContent

textContentは、要素の文字を変更するためのものです。

title.textContent = "変更後の文字";

よく出るエラー用語

Error
プログラムが正しく動かなかった状態

undefined
値が存在しない

SyntaxError
書き方のルール違反

JavaScript
目次