コンテンツにスキップ

JavaScript

出典: フリー教科書『ウィキブックス（Wikibooks）』
メインページ > 工学 > 情報技術 > プログラミング > JavaScript
Image
Hello, World!

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

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

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

目次

[編集]
進捗状況の凡例
Image 数行の文章か目次があります。
Image:本文が少しあります。
Image:本文が半分ほどあります。
Image: 間もなく完成します。
Image: 一応完成しています。
  1. はじめに
  2. 文法
    1. 字句構造
    2. セミコロンの自動挿入
    3. 予約語
  3. 変数
  4. 演算子
  5. オブジェクト
  6. 文字列
  7. 数値
  8. 配列
  9. 制御構造
  10. 関数
  11. クラス
  12. strictモード
  13. ビット演算
  14. 例外処理
  15. 正規表現
  16. 長整数
  17. 型付き配列
  18. Polyfill
  19. ブラウザ
  20. コードギャラリー
  21. Web API  — Web APIは、JavaScriptでWebブラウザを制御する標準的な手段であり、Webページに対して様々な操作（例えば、要素の追加や削除、イベントの処理、非同期通信等）を行うことができます。
    1. Windowオブジェクト
    2. DOM API
    3. Console API
    4. Canvas API
    5. Fetch API
    6. イベント処理
    7. クッキー
  22. 改廃された技術
  23. ライブラリ(フレームワーク)
    1. ライブラリ
  24. JSON
  25. XML
  26. リファレンス
    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は名前が似ていますが、実際にはかなり異なるプログラミング言語です。それぞれの特徴と関連性について簡潔に説明します。

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

const Greeting = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to JSX.</p>
    </div>
  );
};

export default Greeting;

この例では、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のコード例
import React, { useState } from 'react';

interface CounterProps {
  initialValue: number;
}

const Counter: React.FC<CounterProps> = ({ initialValue }) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

この例では、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
Wikipedia
 ウィキペディアにJavaScriptの記事があります。
ウィキバーシティ
ウィキバーシティ
 ウィキバーシティにJavaScriptの学習教材があります。
  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
"https://ja.wikibooks.org/w/index.php?title=JavaScript&oldid=301323" より作成