JavaScript
本書は、JavaScriptの解説書です。JavaScriptは、ウェブページやウェブアプリケーションで広く使われているスクリプト言語であり、最も広く普及しているプログラミング言語の一つです。また、Node.jsなどのランタイム環境を使うことで、サーバーサイドでもJavaScriptを実行することができます。
本書では、初めてプログラミングをする人から、他の言語で経験を積んだ人まで、広く対象としています。基本的なJavaScriptの書き方を解説することで、読者がより深く理解できるように配慮しました。
JavaScriptは、初心者が学ぶのに最適なプログラミング言語であり、ブラウザだけで簡単にプログラムを作ることができます。言語のコア部分は、国際標準化団体であるEcmaインターナショナルによってECMAScriptとして標準化され、仕様が明確になっています。Node.jsなどのランタイム環境を使うことで、JavaScriptをより高度なアプリケーション開発にも利用できます。
目次
[編集]:本文が少しあります。
:本文が半分ほどあります。
: 間もなく完成します。
: 一応完成しています。
- はじめに
- 文法
- 変数
- 演算子
- オブジェクト
- 文字列
- 数値
- 配列
- 制御構造
- 関数
- クラス
- strictモード
- ビット演算
- 例外処理
- 正規表現
- 長整数
- 型付き配列
- Polyfill
- ブラウザ
- コードギャラリー
- Web API — Web APIは、JavaScriptでWebブラウザを制御する標準的な手段であり、Webページに対して様々な操作(例えば、要素の追加や削除、イベントの処理、非同期通信等)を行うことができます。
- 改廃された技術
- ライブラリ(フレームワーク)
- JSON
- XML
- リファレンス
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
[編集]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"
参考文献
[編集]- Standard ECMA-262 5.1 Edition / June 2011 ECMAScript® Language Specification(注釈版)
- Standard ECMA-262 6th Edition / June 2015 ECMAScript® 2015 Language Specification
- Draft ECMA-262 ECMAScript® Language Specification
- ECMA-402 7th Edition / June 2020 ECMAScript® 2020 Internationalization API Specification
標準API
[編集]- Compatibility Living Standard
- Compression Living Standard
- Console Living Standard
- DOM Living Standard
- Encoding Living Standard
- Fetch Living Standard
- File System Living Standard
- Fullscreen API Living Standard
- HTML Living Standard
- Infra Living Standard
- MIME Sniffing Living Standard
- Notifications API Living Standard
- Quirks Mode Living Standard
- Storage Living Standard
- Streams Living Standard
- Test Utils Living Standard
- URL Living Standard
- URL Pattern Living Standard
- Web IDL Living Standard
- WebSockets Living Standard
- Media Session Standard
- XMLHttpRequest Living Standard Ajax
関連項目
[編集]下位階層のページ
[編集]- ""
- -0
- -Infinity
- 0
- AbortController
- AggregateError
- Array
- Array/prototype
- Array/prototype/entries
- Array/prototype/keys
- Array/prototype/values
- ArrayBuffer
- Asynchronous Module Definition
- BigInt
- BigInt/prototype
- BigInt64Array
- BigUint64Array
- Boolean
- Boolean/prototype
- Booleanとboolean
- Canvas
- CommonJS
- Console
- DOM
- DOM/Array-Likeオブジェクト
- DOM/Attribute
- DOM/Document
- DOM/Element
- DOM/Node
- DOM/NodeList
- DOM/Text
- DOM/querySelector
- DOM/querySelectorAll
- DataView
- Date
- ECMAScript Module
- ECMAScriptの変遷
- Error
- EvalError
- FinalizationRegistry
- Float32Array
- Float64Array
- Function
- Function/prototype
- Generator
- Global
- Infinity
- Int16Array
- Int32Array
- Int8Array
- Intl
- Iterator
- Iterator/prototype
- JScript
- JavaScriptのオブジェクト
- JavaScriptのクラス
- JavaScriptの型と値
- JavaScriptの型変換
- JavaScriptの演算子
- JavaScriptエンジン
- Map
- Map/prototype
- Map/prototype/entries
- Map/prototype/keys
- Map/prototype/values
- Math
- Math/PI
- Math/abs
- Math/random
- Math/sin
- Math/sqrt
- Mathオブジェクト
- NaN
- Number
- Number/isFinite
- Number/prototype
- Object
- Object.is
- Object/create
- Object/getPrototypeOf
- Object/groupBy
- Object/hasOwn
- Object/prototype
- Object/prototype/constructor
- Object/prototype/valueOf
- Object/setPrototypeOf
- Polyfill
- Promise
- Proxy
- ReferenceError
- Reflect
- RegExp
- RegExp/prototype
- RegExp/prototype/exec
- Restパラメータ
- Set
- Set/prototype
- Set/prototype/values
- SharedArrayBuffer
- String
- String/fromCharCode
- String/prototype
- String/prototype/indexOf
- String/prototype/localeCompare
- String/prototype/quote
- String/prototype/replace
- String/prototype/toLocaleLowerCase
- String/prototype/toLocaleUpperCase
- String/prototype/trim
- SuiteSparse
- Symbol
- Symbol/asyncIterator
- Symbol/iterator
- Tree Shaking
- TypedArray
- Uint16Array
- Uint32Array
- Uint8Array
- Uint8ClampedArray
- Universal Module Definition
- Vue.js
- WeakMap
- WeakMap/prototype
- WeakSet
- WeakSet/prototype
- WebSocket
- Web Worker
- Web開発におけるワークフロー管理システム
- Window
- XML
- XMLHttpRequest
- async
- async/await
- await
- bigint
- boolean
- break
- case
- catch
- class
- clearInterval
- clearTimeout
- const
- continue
- debugger
- decodeURI
- decodeURIComponent
- default
- delete
- do
- else
- encodeURI
- encodeURIComponent
- eval
- export
- extends
- false
- finally
- for
- for(;;)
- for...in
- for...of
- for await...of
- function
- function()
- function*
- globalThis
- if
- import
- in
- instanceof
- isFinite
- isNaN
- let
- new
- next()
- null
- number
- object
- parseFloat
- parseInt
- return
- setInterval
- setTimeout
- socket.io
- strictモード
- string
- super
- switch
- symbol
- this
- throw
- true
- try
- typeof
- typeof null
- undefined
- void
- while
- with
- yield
- はじめに
- イテレータプロトコル
- イテレータヘルパー
- イベント処理
- オブジェクト
- オブジェクト型
- キーワード
- クッキー
- クラス
- クロスブラウザ開発
- グローバルオブジェクト
- コンストラクタ
- コードギャラリー
- ジェネレータ
- ジェネレータオブジェクト
- ジェネレータ関数
- スプレッド構文
- セミコロンの自動挿入
- ソースマップ
- ビット演算
- フィーチャーディテクション
- ブラウザ
- ブラウザ互換性
- プリミティブ型
- プロトタイプチェーン
- プロトタイプベース
- プロパティ
- メソッド
- モジュール
- モダンJavaScript
- モダンブラウザ開発
- ライブラリ
- ラッパーオブジェクト型
- 予約語
- 予約語/break
- 予約語/const
- 予約語/continue
- 予約語/for
- 予約語/let
- 例外処理
- 分割代入
- 制御構造
- 反復可能オブジェクト
- 型付き配列
- 変数
- 字句構造
- 改廃された技術
- 数値
- 数値の区切り
- 文字列
- 文法
- 正規表現
- 演算子
- 種々雑多な知識
- 自動ボクシング
- 遅延評価メソッドチェイン
- 配列
- 長整数
- 関数
- 非同期反復可能オブジェクト