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
[編集]- HTML Living Standard
- DOM Living Standard
- Console Living Standard
- XMLHttpRequest Living Standard Ajax
- Fetch Living Standard
- Fullscreen API Living Standard
- Infra Living Standard
- Compatibility Living Standard
- Storage Living Standard
- Streams Living Standard
- Encoding Living Standard
- MIME Sniffing Living Standard
- Notifications API Living Standard
- URL Living Standard
- Media Session Standard
関連項目
[編集]下位階層のページ
[編集]- JavaScript
- JavaScript/Array
- JavaScript/Array/prototype
- JavaScript/BigInt
- JavaScript/BigInt/prototype
- JavaScript/Boolean
- JavaScript/Boolean/prototype
- JavaScript/Canvas
- JavaScript/Console
- JavaScript/DOM
- JavaScript/Date
- JavaScript/ECMAScriptの変遷
- JavaScript/Error
- JavaScript/FinalizationRegistry
- JavaScript/Function
- JavaScript/Function/prototype
- JavaScript/Global
- JavaScript/Intl
- JavaScript/JScript
- JavaScript/Map
- JavaScript/Map/prototype
- JavaScript/Math
- JavaScript/Math/PI
- JavaScript/Math/abs
- JavaScript/Math/random
- JavaScript/Math/sin
- JavaScript/Math/sqrt
- JavaScript/NaN
- JavaScript/Number
- JavaScript/Number/prototype
- JavaScript/Object
- JavaScript/Object/prototype
- JavaScript/Polyfill
- JavaScript/Promise
- JavaScript/ReferenceError
- JavaScript/RegExp
- JavaScript/RegExp/prototype
- JavaScript/Set
- JavaScript/Set/prototype
- JavaScript/String
- JavaScript/String/fromCharCode
- JavaScript/String/prototype
- JavaScript/String/prototype/indexOf
- JavaScript/String/prototype/localeCompare
- JavaScript/String/prototype/quote
- JavaScript/String/prototype/replace
- JavaScript/String/prototype/toLocaleLowerCase
- JavaScript/String/prototype/toLocaleUpperCase
- JavaScript/String/prototype/trim
- JavaScript/Symbol
- JavaScript/Vue.js
- JavaScript/WeakMap
- JavaScript/WeakMap/prototype
- JavaScript/WeakSet
- JavaScript/WeakSet/prototype
- JavaScript/Window
- JavaScript/XML
- JavaScript/XMLHttpRequest
- JavaScript/decodeURIComponent
- JavaScript/strictモード
- JavaScript/はじめに
- JavaScript/イベント処理
- JavaScript/オブジェクト
- JavaScript/クッキー
- JavaScript/クラス
- JavaScript/コードギャラリー
- JavaScript/セミコロンの自動挿入
- JavaScript/ビット演算
- JavaScript/ブラウザ
- JavaScript/プロトタイプベース
- JavaScript/ライブラリ
- JavaScript/予約語
- JavaScript/予約語/break
- JavaScript/予約語/const
- JavaScript/予約語/continue
- JavaScript/予約語/for
- JavaScript/予約語/let
- JavaScript/例外処理
- JavaScript/制御構造
- JavaScript/型付き配列
- JavaScript/変数
- JavaScript/字句構造
- JavaScript/数値
- JavaScript/文字列
- JavaScript/文法
- JavaScript/正規表現
- JavaScript/演算子
- JavaScript/配列
- JavaScript/長整数
- JavaScript/関数