コンテンツにスキップ

JavaScript

出典: フリー教科書『ウィキブックス（Wikibooks）』
メインページ > 工学 > 情報技術 > プログラミング > JavaScript
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. 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. クッキー
    8. Audio API
  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

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

[編集]

関連項目

[編集]

下位階層のページ

[編集]

外部リンク

[編集]
Wikipedia
Wikipedia
 ウィキペディアにJavaScriptの記事があります。
ウィキバーシティ
ウィキバーシティ
 ウィキバーシティにJavaScriptの学習教材があります。
"https://ja.wikibooks.org/w/index.php?title=JavaScript&oldid=265319#Hello_world" より作成