JavaScript

出典: フリー教科書『ウィキブックス(Wikibooks)』
Hello, World!

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

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

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

目次[編集]

進捗状況の凡例

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

Javaとの関連性[編集]

JavaScriptとJavaは、名前が似ているため混同されることがありますが、実際には異なる言語です。

JavaScriptは、Webブラウザ上で動作するスクリプト言語であり、主にWebアプリケーションの開発に使用されます。JavaScriptは、ECMAScriptという標準仕様に基づいて設計されており、Webブラウザ上で実行されます。

一方、Javaは、オブジェクト指向のプログラミング言語であり、主に企業向けのアプリケーション開発に使用されます。Javaは、Java仮想マシン(JVM)上で実行されるため、プラットフォームに依存しない特徴があります。

ただし、JavaScriptとJavaはいくつかの点で関連があります。例えば、Javaアプレットを使用することで、Webページ上でJavaのアプリケーションを実行することができます。また、JavaScriptのフレームワークやライブラリには、Javaのフレームワークやライブラリに影響を受けたものがあります。

また、最近のJavaScriptの開発においては、Javaの影響を受けた構文やアーキテクチャが取り入れられることがあります。例えば、TypeScriptというJavaScriptの拡張言語は、Javaに似た静的型付けのシステムを導入しています。

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"

参考文献[編集]

標準API[編集]

関連項目[編集]

下位階層のページ[編集]

外部リンク[編集]

Wikipedia
Wikipedia
ウィキペディアJavaScriptの記事があります。
ウィキバーシティ
ウィキバーシティ
ウィキバーシティJavaScriptの学習教材があります。