🍎
01）JavaScript【初級超基礎】
はじめに
現在、React を使って Web ページのフロントエンド制作に携わり、日々学びながらコードを書いています。
その中で「自分はまだ JavaScript の基礎をしっかり理解しきれていないかも…」と感じるようになりました。
そこで今回、基礎力をもっと固めるためにオンライン講義を受講することにしました。
受講内容を自分なりに解釈し、こちらに綴らせていただきます。
この記事が、同じように学習している方の参考になれば嬉しいです。
JavaScriptとは
JavaScript は、JavaScript エンジンによって 事前コンパイルなしで実行されるプログラミング言語 です。
「実行」とは、コードを機械語に変換し、それをもとに動作を表示することを指します。
- C言語の場合：コンパイラを使ってプログラムを機械語に変換してから実行する
- JavaScriptの場合：JavaScript エンジンがコードを読み取り、その場で機械語に変換して実行する
JavaScriptエンジンとは
JavaScript エンジンとは、JavaScript のコードを読み取り、機械語へ変換して実行するソフトウェア のことです。
ブラウザや Node.js の内部に組み込まれており、JavaScript が動く仕組みの “心臓部分” です。
有名な JavaScript エンジンは以下の通りです。
| エンジン名 | 使用している環境 |
|---|---|
| V8 | Chrome / Node.js |
| SpiderMonkey | Firefox |
| JavaScriptCore | Safari |
| Chakra | 旧 Microsoft Edge |
JavaScript エンジンは、コードを読み込んだあと 内部で最適化しつつ機械語へ変換して実行 します。
JavaScript は基本的にブラウザ上で実行されますが、例外があります。それが Node.js です。
Node.js を使うことで、ブラウザ以外の環境（サーバー側）でも JavaScript を実行できます。
| JavaScript（ブラウザ実行） | Node.js（サーバー実行） |
|---|---|
 |
 |
WEBの仕組み
Web サイトが表示されるまでの流れは、実はとてもシンプルです。
ここでは、ユーザー → クライアント → サーバー → レスポンス → レンダリング の順です。
1. ユーザーが Web サイトを見たいと思う
まず最初に Web を使うのは ユーザー（人） です。
例：
- スマホで「検索したい！」
- パソコンで「ログインしたい！」
ユーザーは、「Web サイトが見たい」という行動を起こします。
2. クライアントがリクエストを送る
ユーザーが操作する デバイス（スマホ、パソコンなど） の中には「ブラウザ（Chrome、Safari、Edge など）」があります。
このブラウザのことを クライアント と呼びます。
クライアントは、ユーザーの代わりに Web サイトのデータを取りに行き、サーバーに リクエスト（要求） を送ります。
例：
Google.com のページをください！ログイン情報を送るので結果を返してください！
3. サーバーがリクエストを受け取る
リクエストを受け取るのが サーバー（Web サーバー） です。
サーバー側では、しばしば次の言語が使われています。
- Ruby
- Python
- PHP
- Go
- Java
- Node.js（JavaScript をサーバーで使う場合）
これらの言語がサーバー内で動き、
「どんなページを返すか？」
「ログイン情報は正しいのか？」
「データベースから必要な情報を取る」
といった処理を行います。
4. サーバーがレスポンスを返す
サーバーが処理を終えると、クライアントに レスポンス（返事） を送ります。
レスポンスの中身は：
- HTML（ページの骨組み）
- CSS（デザイン）
- JavaScript（動きをつけるためのプログラム）
などです。
5. クライアント（ブラウザ）がレンダリングする
クライアントは受け取ったレスポンスをもとに画面を描きます。
これを レンダリング（描画） といいます。
ブラウザは次の順にページを描きます：
- HTML を読み込んでページの構造を作る
- CSS で色やレイアウトを適用する
- JavaScript を実行し、動きや機能を追加する
ユーザーの画面に Web ページが表示されるまで、すべてこの流れで処理されています。
全体の流れまとめ
- ユーザー
「サイトを見たい！」 - クライアント（デバイス・ブラウザ）
リクエストを送信 → 「このページください」 - サーバー（Ruby/Python/PHP/Go など）
リクエストを処理 → HTML/CSS/JS を作成 - レスポンス
HTML・CSS・JS をクライアントに返す - レンダリング（ブラウザ）
ページを表示
ブラウザ（Chrome）でJavaScriptを実行する仕組み
Webブラウザ（例：Chrome）は、ユーザーが入力した URL に対して「リクエスト」を送り、サーバーが返す「レスポンス」（HTML/CSS/JavaScript など）を受け取り、画面に表示します。
その中で JavaScript はブラウザ内部のエンジンによって実行される という特徴があります。
1. Chrome を開く
ユーザー（あなた）が普段使っているデバイスで Chrome を起動します。
Chrome 内部には JavaScript エンジン（V8） が搭載されており、JS の処理を担当しています。
2. F12 を押して開発者ツールを開く
開発者ツールには以下の機能があります：
- Elements（HTMLの確認）
- Network（リクエスト/レスポンス確認）
- Console（JSを直接実行）
- Sources（JSファイルの確認）
- Application（CookieやStorage確認）
3. Console で JavaScript を実行してみる
Console は「JavaScript を直接入力して動かせる場所」です。
例：
console.log("Hello, JavaScript!");
Enter を押すとすぐに結果が表示されます。
仕組み
Console に書いた JavaScript は Chrome 内の V8 エンジン によって次の処理が行われます：
- コード解析（パース）
- 最適化
- 実行（マシン語に変換して CPU が処理）
つまり、ブラウザが「小さなプログラミング環境」として動いているわけです。
JavaScriptの歴史
1995
1. Netscape が JavaScript（LiveScript）を作成
Netscape 社は Web ページに動きを付けるためのスクリプト言語として LiveScript を開発しました。
この言語が後に JavaScript となります。
2. Netscape Navigator 2 に搭載
LiveScript は Netscape Navigator 2 に搭載されました。
当時 NN は シェア 80％超え の圧倒的トップブラウザでした。
3. JavaScript エンジン「SpiderMonkey」の誕生
JavaScript を動かすための最初のエンジンが SpiderMonkey です。
現在も Mozilla がメンテナンスしています。
4. Netscape の買収とオープンソース化 → 現在の Firefox へ
Netscape は買収や経営難を経て、ブラウザのコードが オープンソース化 されました。
このプロジェクトが発展し、現在の Mozilla Firefox となっています。
5. LiveScript → JavaScript に改名された理由
マーケティング戦略として、当時人気のあった Java のブランド力を利用しようと考え、Sun Microsystems から許可を得て改名 しました。
※Java と JavaScript は名前こそ似ていますが、まったく別の言語です。
1996 8月
JavaScript に焦った Microsoft は Internet Explorer 3 に、互換性を持たせた独自仕様 JScript を搭載しました。
- Netscape Navigator では JavaScript
- Internet Explorer では JScript
両社が似た仕様を使い始めたため、「ブラウザごとに動作が違う…」という不穏な空気が生まれました。
JScript と JavaScript の違い
| 項目 | JavaScript | JScript |
|---|---|---|
| 開発元 | Netscape | Microsoft |
| 登場年 | 1995（Navigator 2） | 1996（IE 3） |
| 標準化 | ECMA に提出 → ECMAScript | ECMA 標準対応だが IE 独自拡張あり |
| 動作環境 | ブラウザや Node.js | Internet Explorer 専用 |
| 互換性 | 他ブラウザでもほぼ同じ | IE 特有の動作や拡張あり |
| 現在の状況 | 標準言語として世界中で使用 | 古い IE 専用 |
- JScript は IE 専用の JavaScript 互換言語
- JavaScript は ECMA 標準に従う言語
1996 11月
Netscape は JavaScript を ECMA International に提出し、標準化を進めました。
ECMA（European Computer Manufacturers Association）
＝ ヨーロッパ電子計算機工業会
1997 6月
提出をきっかけに、JavaScript は ECMAScript として標準化されました。
ECMAScript と JavaScript の関係
-
JavaScript = 実際に動く言語
-
ECMAScript = 言語仕様書
-
JavaScript は ECMAScript に準拠して作られている
ECMAScript = 設計図 JavaScript = 実際に作られた家 -
バージョン：ES1, ES2, ES3 … ES5, ES6（2015年以降は ES2015 形式）
2008 9月
- Google Chrome と V8 エンジン のリリース
- JS の実行速度が圧倒的に速くなり、Web アプリ開発に革命が起きた
- V8 はコンパイルして最適化する方式で、ネイティブコード並みに高速
2009 3月
- Ryan Dahl が Node.js を V8 エンジン上で開発
- 従来のサーバー言語はリクエストごとにスレッドを立てる方式で負荷が大きかった
- Node.js は 非同期・イベント駆動型 で軽量・高速
- JavaScript がサーバー側でも使えるようになった
2009 12月
- ECMAScript 5（ES5） リリース
-
"use strict";、JSON、Array/Object メソッド追加 - モダンWeb開発の基盤となる
2015年以降
- バージョン表記が番号から 年号 に変更
- 例：ES2015（旧 ES6）、ES2016、ES2017…
- 年号表記により「いつ追加された仕様か」が分かりやすくなった
JavaScriptの基礎（変数,演算子,型,関数）
HTMLファイルにJavaScriptを組み込む
JavaScriptは HTMLファイルに直接書き込むこと もできますし、 外部ファイルとして読み込むこと も可能です。
1. <script> タグを使う方法
HTMLの <head> タグまたは <body> タグ内に <script> タグを入れて書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの例</title>
<script>
console.log("head内に直接書いたJavaScriptです");
</script>
</head>
<body>
<h1>JavaScriptの動作確認</h1>
<script>
alert("body内で表示されるアラートです");
</script>
</body>
</html>
ポイント：
- head内：HTMLが読み込まれる前に実行される
- body内：HTMLが表示された後に実行される
- 小規模なスクリプトなら直接書き込み、大規模な場合は外部ファイルに分けるのが一般的
2. 外部ファイルとして読み込む方法
JavaScriptコードを別のファイル（例：script.js）に書き、HTMLから読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部JSの例</title>
<script src="script.js"></script>
</head>
<body>
<h1>外部ファイルからJavaScriptを実行</h1>
</body>
</html>
script.js の中身：
console.log("外部ファイルから実行されました");
alert("外部ファイルのアラートです");
変数
JavaScriptでは、値を保存するために 変数 を使います。変数を使うと、後から値を変更したり参照したりできます。
変数の宣言と初期化
let count = 0;
ここでは count という名前の変数を宣言し、0で初期化しています。
変数を宣言するときに初期値を入れない場合、変数の値は自動で undefined（未定義）になります。
let newCount;
console.log(newCount); // undefined
セミコロンについて
JavaScriptでは文の区切りに セミコロン（;） を使います。
省略しても動く場合が多いですが、書いておいたほうが安全です。
let count = 0; // セミコロンあり
let count2 = 0 // セミコロンなしでも動く
変数への値の再代入
一度宣言した変数には、新しい値を代入することができます。
let count = 0;
count = 10;
count = 30;
console.log(count); // 30
ポイント：
-
letで宣言した変数は 再代入可能 - 同じスコープ内で同じ名前の変数をもう一度
letで宣言することはできません
let count = 0;
let count = 10; // エラーになる
新しい変数の宣言
新しい変数は同じように let を使って宣言できます。
let newCount = 0;
console.log(newCount); // 0
まとめ
-
letで変数を宣言する - 初期値を入れないと
undefinedになる - セミコロンは書いた方が安全
- 宣言後は値を自由に変更できる（再代入）
- 同じスコープ内で同じ名前の変数を
letで再宣言することはできない
定数
JavaScriptでは、値を一度決めたら変更したくない場合に 定数 を使います。
定数は const キーワードを使って宣言します。
定数の宣言と初期化
const pi = 3.14;
console.log(pi); // 3.14
ポイント：
-
constで宣言した変数は 初期化時に必ず値を入れる必要があります - 宣言後に値を変更することはできません
pi = 3.1415; // エラーになる
配列やオブジェクトと const
const は 変数自体の再代入を禁止する ものです。
配列やオブジェクトの中身は変更できます。
const numbers = [1, 2, 3];
numbers.push(4); // OK
console.log(numbers); // [1, 2, 3, 4]
numbers = [5, 6]; // エラー
const user = { name: "Alice" };
user.name = "Bob"; // OK
console.log(user); // { name: "Bob" }
user = { name: "Charlie" }; // エラー
let と const の違いと使い分け
| 項目 | let | const |
|---|---|---|
| 再代入 | 可能 | 不可能 |
| 宣言時初期化 | 必須ではない | 必須 |
| 再宣言 | 同じスコープで不可 | 同じスコープで不可 |
| 用途 | 値が変わる変数に使用 | 値が変わらない変数に使用 |
使い分けのポイント
-
値が後で変わる場合 →
let
例：カウンター、ユーザーの入力値など -
値が固定のもの →
const
例：円周率pi、設定値、API の URL など
使う状況の例
// let の例
let count = 0;
count += 1; // 値が変わる
// const の例
const API_URL = "https://example.com/data";
// URL は途中で変更しない
変数、定数の名前規則
では、この変数の命名ルールを Zenn向けに読みやすく整理 して解説します。文章を自然につなげつつ、例も入れています。
-
英字、数字、特殊文字の使用
-
使用できる文字：
- 英字（a〜z, A〜Z）
- 数字（0〜9）
- 特殊文字
$_
-
使用できない文字：
- 空白（スペース）
- 日本語や絵文字は technically 使えるが、基本は 英語で書くのが暗黙ルール
-
let $price = 100;
let _count = 5;
- 先頭に数字は使えない
let 1stItem; // エラーになる
- 予約語は使えない
const, let, if, for など、JavaScriptで元々使われている名前は変数名にできません。
let const; // エラー
- 大文字・小文字は区別される
let apple = 5;
let Apple = 10;
console.log(apple); // 5
console.log(Apple); // 10
1. キャメルケース（Camel Case） ← 推奨
- 変数名の最初の単語は小文字、その後の単語は大文字で始める
- 読みやすく、JavaScriptでは一般的
let tomatoCount = 10;
let userName = "Alice";
let totalPrice = 500;
2. スネークケース（Snake Case） ← OKだけど少し見にくい
- 単語の間を
_でつなぐ方法 - 英語圏でも使われるが、JavaScriptではキャメルケースの方が主流
let tomato_count = 10;
let user_name = "Alice";
let total_price = 500;
3. 変数名の最初を大文字にする場合
- 基本は避ける
- クラス名やコンストラクタ関数で使用することが多い
class UserAccount {
constructor(name) {
this.name = name;
}
}
演算
算術演算子
| 演算子 | 説明と例 |
|---|---|
+ |
加算 例： 5 + 3 // 8
|
- |
減算 例： 5 - 3 // 2
|
* |
乗算 例： 5 * 3 // 15
|
/ |
除算 例： 5 / 2 // 2.5
|
% |
余り（剰余） 例： 5 % 2 // 1
|
** |
べき乗 例： 2 ** 3 // 8
|
++ |
インクリメント 例： a++
|
-- |
デクリメント 例： a--
|
+（単項） |
正の値 例： +5 // 5
|
-（単項） |
負の値 例： -5 // -5
|
代入演算子
| 演算子 | 説明と例 |
|---|---|
= |
代入 例: let a = 5
|
+= |
加算して代入 例: a += 3
|
-= |
減算して代入 例: a -= 2
|
*= |
乗算して代入 例: a *= 2
|
/= |
除算して代入 例: a /= 2
|
%= |
剰余して代入 例: a %= 3
|
**= |
べき乗して代入 例: a **= 3
|
<<= |
左シフト代入 |
>>= |
右シフト代入 |
>>>= |
符号なし右シフト代入 |
&= |
AND代入 |
^= |
XOR代入 |
|= |
OR代入 |
論理代入演算子
| 演算子 | 説明と例 |
|---|---|
&&= |
AND代入 例: a &&= b
|
||= |
OR代入 例: a ||= b
|
??= |
Null合体代入 例: a ??= b
|
比較演算子
| 演算子 | 説明と例 |
|---|---|
== |
等しい（型変換あり） |
!= |
等しくない（型変換あり） |
=== |
完全に等しい（型変換なし） |
!== |
完全に等しくない |
> |
大なり |
< |
小なり |
>= |
以上 |
<= |
以下 |
? : |
三項演算子（条件式） 例: a > b ? '大' : '小'
|
論理演算子
| 演算子 | 説明と例 |
|---|---|
&& |
AND（かつ） |
|| |
OR（または） |
! |
NOT（否定） |
ビット演算子
| 演算子 | 説明と例 |
|---|---|
& |
AND |
| |
OR |
^ |
XOR |
~ |
NOT |
<< |
左シフト |
>> |
右シフト |
>>> |
符号なし右シフト |
文字列演算子
| 演算子 | 説明と例 |
|---|---|
+ |
結合 例: "Hello" + "World"
|
+= |
文字列を追加して代入 |
Null 合体演算子
| 演算子 | 説明と例 |
|---|---|
?? |
Null/Undefined のとき右を返す |
??= |
Null合体代入 |
オプショナルチェーン演算子
| 演算子 | 説明と例 |
|---|---|
?. |
安全なプロパティアクセス 例： obj?.key
|
?.() |
安全な関数呼び出し |
?.[] |
安全なインデックスアクセス |
型・判定演算子
| 演算子 | 説明と例 |
|---|---|
typeof |
型を返す |
instanceof |
インスタンス判定 |
in |
プロパティ存在確認 |
delete |
プロパティ削除 |
void |
undefined を返す |
その他の演算子（構文的演算子含む）
| 演算子 | 説明と例 |
|---|---|
new |
オブジェクト生成 |
() |
関数実行 |
[] |
インデックスアクセス |
. |
プロパティアクセス |
, |
カンマ演算子（最後の値を返す） |
... |
スプレッド/レスト |
: |
オブジェクトのキーと値 |
=> |
アロー関数 |
=（デフォルト引数） |
関数パラメータにデフォルト |
yield |
ジェネレータ |
await |
非同期待機 |
import |
ESモジュール読み込み |
export |
ESモジュール書き出し |
1. 基本の加算
| 記述 | 説明 |
|---|---|
result = result + 1 |
最も基本的な書き方。1 増える。 |
result += 1 |
上の書き方を短くしたもの。意味は同じ。 |
2. インクリメント演算子
| 記述 | 説明 |
|---|---|
result++ |
後置インクリメント。値が返された「あとで」1 増える。 |
++result |
前置インクリメント。値が返される「前に」1 増える。 |
3. console.log(result++)
| コード | 説明 |
|---|---|
console.log(result++) |
現在の値を表示 → その後に result が +1 される。 |
例
let result = 5;
console.log(result++); // 5 が表示される
console.log(result); // 6
4. 空白の有無について
JavaScript は空白を区切りとして認識できるため、次のような書き方も有効。
result ++
++ result
どちらも通常通り動作する。
5. ++++result はどう解釈されるか
結論
「++++result」は 見た目は不正っぽいが、実際には多くの JavaScript 環境で構文エラーにならず、分解可能なパターンとして解釈されることがある。
JavaScript が次のように分解するため。
++ + +result
つまり、以下と同じ意味になる。
++(+(+result))
処理の流れ
-
+result→ 単項プラス（数値化） -
+ (+result)→ もう一度単項プラス - その結果に
++（前置インクリメント）を適用
例
let result = 5;
console.log(++++result);
動作
-
resultが 6 に増える - 単項プラスで 6 のまま
- 最終的な評価結果は 6
出力例
6
6. まとめ
| 記述 | 動作 |
|---|---|
result = result + 1 |
基本の加算 |
result += 1 |
簡略形 |
result++ |
後置。値を返した後に増える |
++result |
前置。値を返す前に増える |
console.log(result++) |
表示 → 後で +1 |
++++result |
++(+(+result)) として解釈され、結果的には前置インクリメントだけ起こる |
型（Type）
1. プリミティブ型（Primitive Types）
| 型名 | 説明 | 特徴 | 代表的な値 | 型判定 (typeof) |
補足 |
|---|---|---|---|---|---|
| Number | 数値（整数・小数） | IEEE 754 64bit 浮動小数点 |
0, 1.5, Infinity, NaN
|
"number" |
NaN も number |
| BigInt | 任意精度の整数 | 末尾に n を付ける |
10n, 9007199254740993n
|
"bigint" |
Number と混在計算不可 |
| String | 文字列 | UTF-16 |
"abc", 'あ', `text`
|
"string" |
length はコードユニット数 |
| Boolean | 真偽値 | true / false のみ |
true, false
|
"boolean" |
truthy/falsy とは別概念 |
| Symbol | 一意の識別子 | 重複しない値 |
Symbol(), Symbol("id")
|
"symbol" |
直接文字列連結不可 |
| Undefined | 未定義 | 値が未設定 | undefined |
"undefined" |
宣言のみの変数のデフォルト |
| Null | 意図的な「値なし」 | 実質的に「空」 | null |
"object" |
歴史的バグで object |
2. オブジェクト型（Object Type）
JavaScript の唯一の 非プリミティブ型。
| 型名 | 説明 | 特徴 | typeof |
例 |
|---|---|---|---|---|
| Object | 複合データの集合。参照型。 | プロパティを持つ / ミュータブル / 参照渡し | "object" |
{}, [], new Date(), function() {}
|
3. 一般的なオブジェクト
| 種類 | 説明 | 例 | typeof |
|---|---|---|---|
| Plain Object | 一般的な {} を使ったオブジェクト |
{ a: 1 } |
"object" |
| Array | 順序付きリスト | [1, 2, 3] |
"object" |
| Function | 呼び出し可能なオブジェクト | function(){} |
"function"（特別扱い） |
| Date | 日付オブジェクト | new Date() |
"object" |
| RegExp | 正規表現オブジェクト | /abc/ |
"object" |
| Error | 例外情報 | new Error("msg") |
"object" |
| Map | Key-value の辞書 | new Map() |
"object" |
| WeakMap | GC 連動の辞書 | new WeakMap() |
"object" |
| Set | 集合 | new Set() |
"object" |
| WeakSet | GC 連動の集合 | new WeakSet() |
"object" |
4. 特殊オブジェクト（内部スロットを持つもの）
| 種類 | 説明 | 例 | 補足 |
|---|---|---|---|
| Promise | 非同期結果を表す | new Promise(...) |
thenable |
| Proxy | 挙動を横取りできる | new Proxy(target, handler) |
メタプログラミング |
| Generator / GeneratorFunction | 逐次実行可能 | function* () {} |
iterable |
| AsyncFunction / AsyncGenerator | async の特殊関数 | async function(){} |
await が使える |
5. 組み込みのラッパーオブジェクト（プリミティブを包む）
| ラッパー | 対応するプリミティブ | 例 | 補足 |
|---|---|---|---|
| Number | number | new Number(5) |
普段使わない |
| String | string | new String("abc") |
typeof は object |
| Boolean | boolean | new Boolean(true) |
truthy になるので注意 |
| BigInt | bigint | Object(10n) |
new での生成は禁止 |
| Symbol | symbol | Object(Symbol()) |
new Symbol は禁止 |
6. Array 系の特殊オブジェクト
| 種類 | 説明 | 例 |
|---|---|---|
| TypedArray | 高速数値配列 | Int8Array、Float32Array など |
| ArrayBuffer | バイナリバッファ | new ArrayBuffer(10) |
| DataView | ArrayBuffer を柔軟に操作 | new DataView(buffer) |
7. DOM / Web API オブジェクト（ブラウザ環境）
| 種類 | 説明 | 例 |
|---|---|---|
| Window | ブラウザの最上位 | window |
| Document | DOM ツリーの根 | document |
| Element | HTML 要素 | document.querySelector() |
| Event | イベント | new Event("click") |
| ※ JavaScript 仕様そのものには含まれないが、実際の JS 実行環境で非常に重要。 |
8. 型の階層構造まとめ（全体像）
Primitive
|-- Number
|-- BigInt
|-- String
|-- Boolean
|-- Symbol
|-- Undefined
|-- Null
Object
|-- Plain Object
|-- Array
|-- Function
|-- Date
|-- RegExp
|-- Error
|-- Map / WeakMap
|-- Set / WeakSet
|-- Promise
|-- Proxy
|-- Generator
|-- AsyncFunction など
|-- TypedArray 系
|-- ArrayBuffer / DataView
|-- DOM / Web API など（環境依存）
了解です！
「変数の埋め込み方法」 と 「改行の方法」 を 別々の表 にして、超わかりやすくまとめます。
変数の埋め込み方法一覧表
| 方法 | 記述例 | 説明 | 使用できる状況 |
|---|---|---|---|
| 文字列連結（+） | "Hello " + name |
もっとも古典的な方法。変数同士、文字列と変数を + でつなぐ。 | どこでも使えるが読みにくくなりやすい |
テンプレートリテラル（${}） |
`Hello ${name}` |
一番おすすめ。 ${} の中に変数・式を埋め込める。 |
ES6以降、もっとも一般的 |
| 文字列連結（複雑） | "合計は " + (a + b) + " です" |
() を使えば計算結果も埋め込める。 | 可読性が下がるので非推奨 |
| テンプレートリテラル（式） | `合計は ${a + b} です` |
式や関数の返り値をそのまま埋め込める。 | 複雑な文字列に最適 |
| テンプレートリテラル（関数） | `こんにちは、${getName()} さん` |
関数の結果を埋め込める。 | ロジックを含む時に強い |
const name = "太郎";
const score = 95;
console.log(`名前: ${name}
点数: ${score}
評価: ${score >= 90 ? "優秀" : "普通"}`);
改行の方法一覧表
| 方法 | 記述例 | 説明 | 使用できる状況 |
|---|---|---|---|
| \n（エスケープシーケンス） | "Hello\nWorld" |
文字列の中で改行を表す基本的な方法。 | すべての文字列で使用可能 |
| テンプレートリテラルによる改行 |
`Hello\nWorld` or actually you just press Enter |
文字列内の改行がそのまま反映される。 | ES6以降の最強の改行方法 |
HTMLの <br> |
"Hello<br>World" |
ブラウザに表示するときの改行。 | Webページの表示用 |
| console.log の複数引数 | console.log("Hello", "World") |
自動でスペースが入る。改行ではないが整形に便利。 | デバッグ用 |
| 配列＋ join() | ["A", "B", "C"].join("\n") |
複数行の文字列を生成するとき便利。 | 大量のテキスト生成に有効 |
では、提示されたコードをもとに JavaScriptでどのように型変換が行われるか を詳しく整理します。
表形式でまとめると、Zennでも読みやすい形になります。
■ JavaScript の型変換
console.log('10' + '10'); // '1010'
console.log('10' + 10); // '1010'
console.log('10' - 10); // 0
console.log('Hello' * 10); // NaN
const userInput = '10.5';
let calcResult;
calcResult = Number(userInput) + 10;
calcResult = parseInt(userInput) + 10;
calcResult = parseFloat(userInput) + 10;
calcResult = userInput + 10;
1. + 演算子（文字列結合優先）
| 式 | 型変換の流れ | 結果 | 型 |
|---|---|---|---|
'10' + '10' |
両方文字列 → 文字列結合 | '1010' |
string |
'10' + 10 |
数値 10 が文字列 '10' に変換 → 文字列結合 |
'1010' |
string |
ポイント
-
+は 文字列結合 が優先される。 - 片方が文字列の場合、もう片方も自動で文字列に変換される。
2. - 演算子（数値演算優先）
| 式 | 型変換の流れ | 結果 | 型 |
|---|---|---|---|
'10' - 10 |
'10' が数値 10 に変換 → 数値引き算 |
0 |
number |
'Hello' * 10 |
'Hello' が数値に変換できず → NaN
|
NaN |
number |
ポイント
-
-、*、/、%は数値演算しかできない → 文字列は数値に変換 - 変換できない文字列 →
NaN（Not a Number） -
NaNも Number 型として扱われる
3. 明示的な型変換
| 式 | 型変換方法 | 結果 | 型 |
|---|---|---|---|
Number(userInput) + 10 |
文字列 '10.5' → 数値 10.5 → 10 加算 |
20.5 |
number |
parseInt(userInput) + 10 |
文字列を整数に変換 → 10 加算 | 20 |
number |
parseFloat(userInput) + 10 |
文字列を浮動小数点に変換 → 10 加算 | 20.5 |
number |
userInput + 10 |
文字列 '10.5' + 数値 10 → 文字列結合 |
'10.510' |
string |
| ポイント |
-
Number()は浮動小数点も含めて完全に数値化 -
parseInt()は整数に切り捨て -
parseFloat()は浮動小数点として変換 -
+演算子は 文字列が混ざると結合される
4. 型変換のまとめルール
| 演算子 | 型変換ルール |
|---|---|
+ |
どちらかが文字列なら文字列結合。数値は文字列に変換 |
-, *, /, %
|
数値演算優先。文字列は数値に変換。失敗すると NaN
|
| 明示的変換 |
Number(), parseInt(), parseFloat() で数値化可能 |
| 結果 |
NaN も number 型として扱われる |
配列（Array）
配列の作成
let array = ['apple', 'banana', 'lemon'];
-
[]で作成、カンマで区切って要素を入れる - 要素の型は混在可能（文字列、数値、真偽値など）
array = [1, 'apple', true, array]; // 異なる型や配列を混ぜることも可能
配列のアクセス
console.log(array[0]); // 最初の要素
console.log(array[2]); // 3番目の要素
- インデックスは 0 から始まる
- 配列の長さを超えるインデックスにアクセスすると
undefined
配列の長さ
console.log(array.length); // 配列の要素数を取得
-
lengthプロパティで要素数を確認 - 空配列を作ることも可能
array = [];
console.log(array.length); // 0
配列への要素追加
array.push('apple'); // 末尾に追加
array.push('banana');
-
push()メソッドで末尾に追加 - 配列は自動的にサイズ拡張される
配列の先頭に追加・削除
array.unshift('lemon'); // 先頭に追加
array.shift(); // 先頭の要素を削除
-
unshift()は先頭に追加、shift()は先頭を削除 - 配列の順序が変わる
配列の末尾を削除
array.pop(); // 末尾の要素を削除
-
pop()は最後の要素を取り除く - 戻り値として削除された要素を返す
配列の取り出し（スライス）
let subArray = array.slice(1, 3); // 1番目から3番目の前まで
console.log(subArray);
-
slice(start, end)は元配列を変更せず部分配列を返す -
startからend-1まで
配列の結合
let fruits = ['apple', 'banana'];
let moreFruits = ['lemon', 'orange'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['apple','banana','lemon','orange']
-
concat()で複数の配列を結合 - 元の配列は変更されない
配列のループ（for）
for(let i = 0; i < array.length; i++){
console.log(array[i]);
}
- インデックスを使って順番に処理
for(const item of array){
console.log(item);
}
-
for...ofで簡単に全要素を処理可能
配列の検索
console.log(array.indexOf('banana')); // 1（存在しなければ -1）
console.log(array.includes('apple')); // true
-
indexOf()は要素のインデックスを返す -
includes()は要素があるか真偽値を返す
配列の変換・結合文字列
console.log(array.join(', ')); // 'apple, banana, lemon'
-
join(separator)で配列を文字列に変換 -
separatorは省略可能（デフォルトはカンマ）
配列の削除と置換（splice）
array.splice(1, 1); // 1番目の要素を1つ削除
array.splice(1, 0, 'grape'); // 1番目に 'grape' を追加
-
splice(start, deleteCount, items...)で削除と挿入が可能 - 元の配列を直接変更
配列の多次元利用
let multiArray = [[1,2],[3,4]];
console.log(multiArray[1][0]); // 3
- 配列の中に配列を入れることができる
- インデックスを2つ以上使ってアクセス可能
まとめ
- 配列は
[]で作成、要素は混在可能 -
lengthで要素数、push/pop/shift/unshiftで追加・削除 -
sliceで取り出し、concatで結合、spliceで削除・挿入 -
forやfor...ofでループ可能 -
indexOf/includesで検索、joinで文字列に変換 - 配列の中に配列を入れて多次元配列も作れる
辞書（Object）
オブジェクトの基本
const coffee = {
name:'chocolate Mocha',
size: 350,
isHot: true,
toppings: ['Cinnamon', 'Caramel'],
natritions: {
calories: 430,
sugars: 50
}
};
- オブジェクトは
{}で作る -
key: valueのペアでデータを格納 -
keyはプロパティ名、文字列として扱われる -
valueは任意の型（文字列、数値、真偽値、配列、オブジェクトなど）
プロパティへのアクセス
console.log(coffee.name); // 'chocolate Mocha'
console.log(coffee['size']); // 350
- ドット
.でアクセスするのが基本 - 文字列としてキーを指定したい場合は
['key']でもアクセス可能 - 存在しないプロパティにアクセスすると
undefinedが返る
プロパティの追加・変更
coffee.temperature = '75C'; // プロパティの追加
coffee.size = 400; // 既存プロパティの変更
- オブジェクトは動的にプロパティを追加可能
- 既存プロパティは代入で値を変更できる
プロパティの削除
delete coffee.isHot;
-
deleteを使うとオブジェクトからプロパティを削除できる - 削除されたプロパティは
undefinedになる
配列を含むプロパティ
coffee.toppings = ['Cinnamon', 'Caramel'];
console.log(coffee.toppings[1]); // 'Caramel'
- プロパティの値に配列を持たせることができる
- 配列の要素にアクセスする場合は
[index]を使用
オブジェクトの中にオブジェクトを入れる
coffee.nutritions = {
calories: 430,
sugars: 50
};
console.log(coffee.nutritions.calories); // 430
- ネストされたオブジェクトも作れる
- 多階層アクセスはドット
.または['key']で行う
オブジェクトのループ
for (const key in coffee) {
console.log(key, coffee[key]);
}
-
for...inでオブジェクトのプロパティをループ可能 -
keyは文字列として取得でき、値はcoffee[key]で取得
Object.keys(coffee).forEach(key => console.log(key, coffee[key]));
-
Object.keys()はプロパティ名の配列を返す -
forEachで値を順番に処理できる
オブジェクトのコピー
const coffeeCopy = {...coffee};
- スプレッド演算子
...で浅いコピーが可能 - ネストされたオブジェクトは参照がコピーされる（深いコピーには別手法が必要）
プロパティの存在確認
console.log('name' in coffee); // true
console.log(coffee.hasOwnProperty('size')); // true
-
in演算子でキーの存在を確認 -
hasOwnProperty()も自身のプロパティかどうか確認できる
オブジェクトの型と注意点
- オブジェクト自体は
typeof coffeeで'object'と判定される - 配列もオブジェクトの一種なので
typeof []は'object'になる - 本当に配列かを判定する場合は
Array.isArray(coffee.toppings)を使用
Discussion