JavaScript

メインページ > 工学 > 情報技術 > プログラミング > JavaScript

本書は、JavaScriptの解説書です。JavaScriptは、ウェブページやウェブアプリケーションで広く使われているスクリプト言語であり、最も広く普及しているプログラミング言語の一つです。また、Node.jsなどのランタイム環境を使うことで、サーバーサイドでもJavaScriptを実行することができます。

本書では、初めてプログラミングをする人から、他の言語で経験を積んだ人まで、広く対象としています。基本的なJavaScriptの書き方を解説することで、読者がより深く理解できるように配慮しました。

JavaScriptは、初心者が学ぶのに最適なプログラミング言語であり、ブラウザだけで簡単にプログラムを作ることができます。言語のコア部分は、国際標準化団体であるEcmaインターナショナルによってECMAScriptとして標準化され、仕様が明確になっています。Node.jsなどのランタイム環境を使うことで、JavaScriptをより高度なアプリケーション開発にも利用できます。

はじめに
文法
1. 字句構造
2. セミコロンの自動挿入
3. 予約語
変数
演算子
オブジェクト
文字列
数値
配列
制御構造
関数
クラス
strictモード
ビット演算
例外処理
正規表現
長整数
型付き配列
Polyfill
ブラウザ
コードギャラリー
Web API — Web APIは、JavaScriptでWebブラウザを制御する標準的な手段であり、Webページに対して様々な操作（例えば、要素の追加や削除、イベントの処理、非同期通信等）を行うことができます。
1. Windowオブジェクト
2. DOM API
3. Console API
4. Canvas API
5. Fetch API
6. イベント処理
7. クッキー
改廃された技術
ライブラリ(フレームワーク)
1. ライブラリ
JSON
XML
リファレンス
1. Global
2. Array
3. BigInt
4. Boolean
5. Date
6. FinalizationRegistry
7. Function
8. Generator
9. Iterator
10. Map
11. WeakMap
12. Math
13. Number
14. Object
15. Promise
16. RegExp
17. Set
18. WeakSet
19. String
20. Symbol
21. WeakRef
22. Error
  1. EvalError
  2. RangeError
  3. ReferenceError
  4. SyntaxError
  5. TypeError
  6. URIError
23. Intl

JavaScriptの基本的なオブジェクト一覧
名称	種類	機能
`Object`	コンストラクタ関数	すべてのオブジェクトの基本となるプロトタイプを提供。
`Function`	コンストラクタ関数	関数オブジェクトを定義し、動的に関数を作成可能。
`Array`	コンストラクタ関数	順序付きリストを保持し、要素の操作をサポート。
`String`	コンストラクタ関数	文字列を扱い、各種文字列操作メソッドを提供。
`Number`	コンストラクタ関数	数値を扱い、数値演算や変換を提供。
`BigInt`	コンストラクタ関数	大きな整数 (`2^53` 以上) を扱う。
`Boolean`	コンストラクタ関数	`true` または `false` を扱う。
`Symbol`	コンストラクタ関数	一意な識別子を作成するためのプリミティブ型オブジェクト。
`Math`	グローバルオブジェクト	数学的な定数 (`Math.PI`) や関数 (`Math.sqrt()`) を提供。
`Date`	コンストラクタ関数	日時を扱い、操作・フォーマットが可能。
`RegExp`	コンストラクタ関数	正規表現を扱い、文字列検索や置換を実行。
`Error`	コンストラクタ関数	エラーオブジェクトで、例外処理用の基本クラス。
`Promise`	コンストラクタ関数	非同期処理の結果を表し、コールバックの代替として使用。
`Map`	コンストラクタ関数	キーと値のペアを保持し、キーにあらゆるデータ型を使用可能。
`Set`	コンストラクタ関数	一意の値を保持するコレクション。
`WeakMap`	コンストラクタ関数	`Map` のような構造だが、キーが弱参照される。
`WeakSet`	コンストラクタ関数	`Set` のような構造だが、オブジェクトのみを保持し、弱参照される。
`JSON`	グローバルオブジェクト	JSONのパース (`JSON.parse()`) や文字列化 (`JSON.stringify()`) を提供。
`Intl`	グローバルオブジェクト	国際化 (`Intl.DateTimeFormat` など) をサポート。
`Reflect`	グローバルオブジェクト	オブジェクト操作を動的に行うメタプログラミング用API。
`Proxy`	コンストラクタ関数	オブジェクトの動作をカスタマイズするためのインターセプターを提供。
`Atomics`	グローバルオブジェクト	`SharedArrayBuffer` を用いたスレッド間の低レベル同期を提供。
`SharedArrayBuffer`	コンストラクタ関数	複数のWeb Worker間でメモリ共有を可能にするバッファ。
`ArrayBuffer`	コンストラクタ関数	バイナリデータを固定長で扱うバッファ。
`DataView`	コンストラクタ関数	`ArrayBuffer` に対して異なるデータ型でアクセス可能なビュー。
`TypedArray`	コンストラクタ関数	型付き配列 (`Int8Array` など) を提供し、高速なバイナリデータ操作を実現。

ポイント

Math や JSON は グローバルオブジェクト で、インスタンス化 (new Math()) できない。
Object, Array, Function などは コンストラクタ関数 で、new を使ってインスタンスを作成可能。
Promise, Map, Set なども コンストラクタ関数 で、新しいデータ構造を提供。
Reflect, Atomics は グローバルオブジェクト であり、特定のユーティリティ機能を提供。

Javaとの関連性

JavaScriptとJavaは名前が似ていますが、実際にはかなり異なるプログラミング言語です。それぞれの特徴と関連性について簡潔に説明します。

起源と命名
JavaScriptは当初、Java言語の人気にあやかって名付けられました。
しかし、両言語の開発元は異なります（JavaScriptはNetscape、JavaはSun Microsystems）。
言語の特徴
JavaScript: 主にWeb開発用の動的型付け言語。
Java: 汎用的な静的型付け言語。
実行環境
JavaScript: 主にブラウザ上で動作（Node.jsなどサーバーサイドも可能）。
Java: 主にサーバーサイドやデスクトップアプリケーションで使用。
構文
一部の構文（ループ、条件文、演算子など）に類似点がありますが、全体的な言語設計は大きく異なります。
オブジェクト指向
両言語ともオブジェクト指向をサポートしていますが、実装方法が異なります。
JavaScript: プロトタイプベースのオブジェクト指向言語。
Java: クラスベースのオブジェクト指向言語。
相互運用性
完全に別々の言語であり、直接的な互換性はありません。
用途
JavaScriptはWeb開発、特にフロントエンド開発で主に使用されます。
Javaは大規模なエンタープライズアプリケーション、Androidアプリ開発などに使用されます。

結論として、JavaScriptとJavaは名前の類似性以外に深い関連性はありません。それぞれが異なる目的と設計思想を持つ独立した言語です。

JavaScriptの応用範囲

JavaScriptは、Web開発において最も広く使用される言語の一つであり、以下のような応用範囲があります。

クライアントサイドWeb開発：JavaScriptは、Webブラウザで動作するクライアントサイドのWebアプリケーション開発に使用されます。JavaScriptを使用することで、ユーザーがWebページやWebアプリケーションを対話的に操作することができます。
サーバーサイドWeb開発：Node.jsを使用することで、JavaScriptはサーバーサイドのWebアプリケーション開発にも使用されます。Node.jsは、JavaScriptを実行するためのランタイム環境であり、サーバーサイドでのWebアプリケーションの実行や、データベースやファイルシステムなどのI/O操作を実行することができます。
モバイルアプリケーション開発：React Nativeを使用することで、JavaScriptはモバイルアプリケーション開発にも使用されます。React Nativeは、JavaScriptを使用してiOSやAndroidのネイティブモバイルアプリケーションを開発するためのフレームワークです。
デスクトップアプリケーション開発：Electronを使用することで、JavaScriptはデスクトップアプリケーション開発にも使用されます。Electronは、JavaScriptを使用して、Windows、Mac、Linuxなどのデスクトップアプリケーションを開発するためのフレームワークです。
ゲーム開発：JavaScriptは、Webブラウザ上で動作するゲーム開発にも使用されます。HTML5 CanvasやWebGLなどのWeb技術を使用することで、高品質のWebゲームを開発することができます。

JavaScriptは、Web技術を中心に広く使用される言語であり、多くの場面で使用されています。これらの応用範囲は、今後も拡大することが予想されます。

派生言語

JavaScriptの派生言語には、以下のようなものがあります。

TypeScript

詳細は「TypeScript」を参照

Microsoftが開発したJavaScriptのスーパーセットであり、静的型付けやクラス、インターフェースなどの機能を追加しています。

TypeScriptのコード例

functiongreet(name:string){console.log(`Hello, ${name}!`);}greet("John");

JavaScript XML

JavaScript XML（JSX）は、JavaScriptの拡張構文であり、Reactフレームワークで一般的に使用されます。JSXは、HTMLライクな構文をJavaScriptコードに埋め込むことができ、Reactコンポーネントの宣言的な記述やUIの構築を簡素化します。

JSXでは、<div>や<span>などのHTML要素をJavaScriptコード内で直接記述できます。これにより、コンポーネント階層構造を視覚的に表現し、リーダブルで保守しやすいコードを記述できます。また、JavaScriptの変数や式を{}で囲んで埋め込むことができ、動的な値をレンダリングすることができます。

例えば、以下はJSXを使用してReactコンポーネントを宣言的に記述する例です:

JavaScript XMLのコード例

importReactfrom'react';constGreeting=({name})=>{return(<div><h1>Hello,{name}!</h1><p>WelcometoJSX.</p></div>);};exportdefaultGreeting;

この例では、Greetingコンポーネントがnameプロパティを受け取り、JSX内でその値を表示しています。JSXはReactにおいて、UIを構築するためのシンタックスシュガーとして広く採用され、Reactの開発者がより効果的かつ可読性の高いコードを書くのに役立ちます。

TypeScript XML

TypeScript XML(TSX）は、Reactアプリケーションのためのファイル拡張子で、TypeScriptを使用してReactコンポーネントを記述するための構文です。TSXファイルは、JSX（JavaScript XML）とTypeScriptの機能を組み合わせたもので、静的型チェックとReactコンポーネントの記述を同時に行うことができます。

TSXでは、Reactコンポーネントを定義するために、JSXの構文を使用します。この構文は、HTMLライクな要素構造をJavaScriptやTypeScriptのコード内に埋め込むためのもので、UIを宣言的かつコンパクトに記述できます。また、TypeScriptの型システムを活用して、コンポーネントのプロパティやステートに関する型情報を提供できます。

例えば、以下は簡単なReactコンポーネントを含むTSXファイルの例です:

TypeScript XMLのコード例

importReact,{useState}from'react';interfaceCounterProps{initialValue:number;}constCounter:React.FC<CounterProps>=({initialValue})=>{const[count,setCount]=useState(initialValue);constincrement=()=>setCount(count+1);constdecrement=()=>setCount(count-1);return(<div><p>Count:{count}</p><buttononClick={increment}>Increment</button><buttononClick={decrement}>Decrement</button></div>);};exportdefaultCounter;

この例では、CounterコンポーネントがCounterProps型のプロパティを受け取り、ステートとしてcountを持っています。JSX内で{}を使用してJavaScriptやTypeScriptのコードを埋め込むことができ、動的なUIを構築できます。

CoffeeScript

JavaScriptの文法をより簡潔にした言語で、コードを読みやすくするための構文糖衣を提供します。

CoffeeScriptのコード例

greet=(name) ->console.log"Hello, #{name}!"greet"John"

参考文献

標準API

下位階層のページ

グローバルインスタンス

グローバルインスタンス一覧
名称	タイプ	解説
`AbortController`	function	非同期操作を中止するためのコントローラー
`AbortSignal`	function	中止シグナル^[1]
`AggregateError`	function	複数のエラーをまとめたエラーオブジェクト
`Array`	function	配列オブジェクト
`ArrayBuffer`	function	一般的な固定長バイナリデータバッファ
`Atomics`	object	共有メモリ上での原子的操作を提供するオブジェクト
`BigInt64Array`	function	符号付き64ビット整数配列
`BigInt`	function	任意の精度の整数
`BigUint64Array`	function	符号なし64ビット整数配列
`Blob`	function	不変の生のデータオブジェクト^[2]
`Boolean`	function	真偽値オブジェクト
`BroadcastChannel`	function	ブラウザコンテキスト間のブロードキャスト通信^[3]
`Buffer`	function	Node.jsにおけるバイナリデータバッファ^[4]
`ByteLengthQueuingStrategy`	function	ストリームのキューイング戦略(バイト長)^[5]
`CompressionStream`	function	圧縮ストリーム^[6]
`CountQueuingStrategy`	function	ストリームのキューイング戦略(カウント)
`Crypto`	function	暗号関連機能を提供するオブジェクト
`CryptoKey`	function	暗号鍵
`CustomEvent`	function	カスタムイベント
`DOMException`	function	DOM操作に関連する例外
`DataView`	function	ArrayBuffer上のデータへの低レベルアクセス
`Date`	function	日付と時刻オブジェクト
`DecompressionStream`	function	展開ストリーム
`Error`	function	一般的なエラーオブジェクト
`EvalError`	function	eval()に関連するエラー
`Event`	function	イベントオブジェクト
`EventTarget`	function	イベントターゲット
`File`	function	ファイルオブジェクト
`FinalizationRegistry`	function	オブジェクトのガベージコレクション通知
`Float32Array`	function	32ビット浮動小数点数配列
`Float64Array`	function	64ビット浮動小数点数配列
`FormData`	function	HTMLフォームデータ
`Function`	function	関数オブジェクト
`Headers`	function	HTTPヘッダー
`Infinity`	number	無限大
`Int16Array`	function	符号付き16ビット整数配列
`Int32Array`	function	符号付き32ビット整数配列
`Int8Array`	function	符号付き8ビット整数配列
`Intl`	object	国際化関連機能を提供するオブジェクト
`Iterator`	function	イテレーター
`JSON`	object	JSON関連機能を提供するオブジェクト
`Map`	function	マップオブジェクト
`Math`	object	数学関連機能を提供するオブジェクト
`MessageChannel`	function	メッセージチャネル
`MessageEvent`	function	メッセージイベント
`MessagePort`	function	メッセージポート
`NaN`	number	非数 (Not-a-Number)
`Navigator`	function	ブラウザナビゲーション関連機能
`Number`	function	数値オブジェクト
`Object`	function	オブジェクト
`Promise`	function	Promiseオブジェクト
`Proxy`	function	プロキシオブジェクト
`RangeError`	function	範囲エラー
`ReadableByteStreamController`	function	ReadableByteStreamのコントローラー
`ReadableStream`	function	読み取り可能ストリーム
`ReadableStreamBYOBReader`	function	ReadableStreamのBYOBリーダー
`ReadableStreamBYOBRequest`	function	ReadableStreamのBYOBリクエスト
`ReadableStreamDefaultController`	function	ReadableStreamのデフォルトコントローラー
`ReadableStreamDefaultReader`	function	ReadableStreamのデフォルトリーダー
`ReferenceError`	function	参照エラー
`Reflect`	object	リフレクション関連機能を提供するオブジェクト
`RegExp`	function	正規表現オブジェクト
`Request`	function	HTTPリクエスト
`Response`	function	HTTPレスポンス
`Set`	function	セットオブジェクト
`SharedArrayBuffer`	function	共有ArrayBuffer
`String`	function	文字列オブジェクト
`SubtleCrypto`	function	暗号関連機能(Subtle)
`Symbol`	function	シンボル
`SyntaxError`	function	構文エラー
`TextDecoder`	function	テキストデコーダー
`TextDecoderStream`	function	テキストデコーダーストリーム
`TextEncoder`	function	テキストエンコーダー
`TextEncoderStream`	function	テキストエンコーダーストリーム
`TransformStream`	function	変換ストリーム
`TransformStreamDefaultController`	function	変換ストリームのデフォルトコントローラー
`TypeError`	function	型エラー
`URIError`	function	URIエラー
`URL`	function	URLオブジェクト
`URLSearchParams`	function	URL検索パラメータ
`Uint16Array`	function	符号なし16ビット整数配列
`Uint32Array`	function	符号なし32ビット整数配列
`Uint8Array`	function	符号なし8ビット整数配列
`Uint8ClampedArray`	function	符号なし8ビット整数配列(クランプ)
`WeakMap`	function	WeakMapオブジェクト
`WeakRef`	function	WeakRefオブジェクト
`WeakSet`	function	WeakSetオブジェクト
`WebAssembly`	object	WebAssembly関連機能を提供するオブジェクト
`WebSocket`	function	WebSocketオブジェクト
`WritableStream`	function	書き込み可能ストリーム
`WritableStreamDefaultController`	function	書き込み可能ストリームのデフォルトコントローラー
`WritableStreamDefaultWriter`	function	書き込み可能ストリームのデフォルトライター
`atob`	function	Base64デコード
`btoa`	function	Base64エンコード
`clearImmediate`	function	setImmediateのキャンセル
`clearInterval`	function	setIntervalのキャンセル
`clearTimeout`	function	setTimeoutのキャンセル
`console`	object	コンソール関連機能を提供するオブジェクト
`crypto`	object	暗号関連機能を提供するオブジェクト
`decodeURI`	function	URIデコード
`decodeURIComponent`	function	URIコンポーネントデコード
`encodeURI`	function	URIエンコード
`encodeURIComponent`	function	URIコンポーネントエンコード
`escape`	function	文字列エスケープ
`eval`	function	文字列をJavaScriptコードとして実行
`fetch`	function	HTTPリクエスト
`global`	object	グローバルオブジェクト(Node.js)
`globalThis`	object	グローバルオブジェクト
`isFinite`	function	有限数判定
`isNaN`	function	NaN判定
`navigator`	object	ブラウザナビゲーション関連機能を提供するオブジェクト
`parseFloat`	function	浮動小数点数パース
`parseInt`	function	整数パース
`performance`	object	パフォーマンス関連機能を提供するオブジェクト
`process`	object	Node.jsプロセス関連機能を提供するオブジェクト
`queueMicrotask`	function	マイクロタスクキューへの追加
`setImmediate`	function	即時実行(Node.js)
`setInterval`	function	定期実行
`setTimeout`	function	遅延実行
`structuredClone`	function	構造化クローン
`undefined`	undefined	未定義値
`unescape`	function	文字列アンエスケープ

外部リンク

Wikipedia

ウィキペディアにJavaScriptの記事があります。

ウィキバーシティ

ウィキバーシティにJavaScriptの学習教材があります。

JavaScript - MDN

[1] DOM: https://dom.spec.whatwg.org/#interface-AbortSignal

[2] File API: https://w3c.github.io/FileAPI/#blob-section

[3] HTML: https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts

[4] Node.js: https://nodejs.org/api/buffer.html

[5] Streams: https://streams.spec.whatwg.org/#blqs-class

[6] Compression: https://compression.spec.whatwg.org/#compression-stream

[1]