コンテンツにスキップ

JavaScript/はじめに

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

まず、簡単なJavaScript （ジャバスクリプト）のプログラムの例と、どこにプログラムを書けばいいのかを解説します。

Hello World

[編集]
Windows 10 上の Google Chrome で表示した alert("Hello World!")

Hello World ハローワールド とは、画面に「Hello World!」と表示するプログラミングの本の最初に書いてあるプログラムです。

Internet Explorer について

Windows10のInternet Explorer (IE)は、2022年6月15日にサポート終了を迎えました[1]。また、Windows11ではIEは利用できません[2]。 さらに、最新版（最終版）の Internet Explorer 11 も、下記の様にモダンブラウザとは呼べません。

  • アロー関数に対応していない[3]。
  • BigInt 型に対応していない[4]。
  • オブジェクトリテラルのメソッドの短縮記法に対応していない[5]。
  • for...of 文に対応していない[6]。

これらのことから、JavaScript を今から学習するには不向きです。 Microsoft EdgeやGoogle Chrome、Mozilla FirefoxやSafariなどのモダンブラウザ（HTML5/CSS3/ECMAScript/DOM等のウェブAPI/などの標準に準拠したブラウザの総称）を使うことを強めに推奨します。

JavaScriptのHello Worldプログラムは次のようになります。 

<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="UTF-8">
   <title>Hello World!</title>
    <script>
      alert('Hello World!');
    </script>
  </head>
</html>

上記のコードをテキストエディタで書いて hello.html の名前で保存します。 少し長めですが、これ以上省略すると有効なHTML5文書でなくなり小さな変更で予想に反した挙動をする原因になります（例えば、文字列を日本語にしたら文字化けするなど）。

hello.html のアイコンをクリックするかウェブブラウザにドロップすると、結果は右図のようにHello World! が表示された警告ダイアログがポップアップします。

解説

[編集]

上記のコードをします。 JavaScriptのプログラムはHTML文書のSCRIPT要素の開始タグ<script>からSCRIPT要素の終了タグ</script>タグの間にきます。

alertメソッドは、ウェブページ上に警告ダイアログを表示します。 

alert("Hello World!");

では、alertメソッドを例に、JavaScriptでのプログラムの記述方法を勉強しましょう。

文字列は、"または'で囲みます。"で始まったら"で終わる必要があります。'で始まったら'で終わる必要があります。

;（セミコロン）は「文の終わり」を表します。

文の終わりにセミコロンがなくても曖昧さがない場合はセミコロンを省略出来ます（自動セミコロン挿入）。

外部スクリプト

[編集]

HTMLドキュメントにJavaScriptのコードを埋め込むのではなく外部ファイルに分離できます。

hello.htmlを次のように変えます。

hello.html
<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="UTF-8">
   <title>Hello World!</title>
    <script src="./hello.js"></script>
  </head>
</html>

そして新規テキストファイルを作成し、以下のJavaScriptのコードをコピーし、hello.jsという名前でhello.htmlと同じディレクトリに保存してください。

hello.js
alert('Hello World!');

hello.htmlを開くと、警告ポップアップが出て Hello World! が表示されます。

デベロッパー ツール

[編集]
Google Chromeの例。右がデベロッパー ツール

ブラウザにはHTMLファイルを作成しなくても、JavaScriptのコードをその場で書いて実行できるデベロッパー ツールと呼ばれるツールが搭載されています[7][8]。

Microsoft Edge、Google Chrome、Mozilla Firefox、Safariなど多くのブラウザでは、

  • F12

または

  • fn+F12

を押すとコンソールが起動します。

また、Chrombook など ChromeOS の場合は、ファンクションキーそのものがないので、

  • ctrl+⇧+I

を押すとコンソールが起動します（最後の文字はI（アイ）です）。

あるいはウェブページの適当なところを右クリックして「要素を調査」を選択したり、ブラウザ上部のツール(開発)メニューをクリックしたりしてコンソールを起動できます。

ひとまずコンソールが起動できたとしましょう。

コンソールではalertメソッドを使わなくても、単にJavaScriptのコードをタイプするだけで実行結果を確認できます。

コンソールの出力例(⌨が実際に入力したコード、🖥が出力結果) 

⌨ 'Hello World!'
🖥 "Hello World!"
⌨ 1 + 1
🖥 2
⌨ Math.pow(2, 1023)
🖥 8.98846567431158e+307
⌨ 2 ** 1023
🖥 8.98846567431158e+307
⌨ 2n ** 1023n
🖥 89884656743115795386465259539451236680898848947115328636715040578866337902750481566354238661203768010560056939935696678829394884407208311246423715319737062188883946712432742638151109800623047059726541476042502884419075341171231440736956555270413618581675255342293149119973622969239858152417678164812112068608n
⌨ let x = 2
🖥 undefined
⌨ x
🖥 2
⌨ x + x === x * x
🖥 true
⌨ un-defined
🖥 VM400:1 Uncaught ReferenceError: un is not defined
🖥     at <anonymous>:1:1
🖥 (anonymous) @ VM400:1
⌨ new Date()
🖥 Tue Jun 15 2021 19:41:59 GMT+0900 (日本標準時)

コンソール上で↑キーを押すと、以前に入力したコードをもう一度編集して実行できます。

Shift+Enterを押すと改行でき、複数行のプログラムを入力できます。

console.logメソッドを使用すると、デベロッパー ツールのコンソール上に文字列を出力できます。たとえばプログラムの途中で結果を出力したり、hello.jsからコンソールに文字列を出力したりするのに使えます。 

console.log('Hello World!');

コンソールはプログラムのどの行でエラーが発生しているのかを確認するなど、JavaScriptプログラマにとって欠かせないツールです。hello.jsにプログラムを書く場合であっても、必ずコンソールを起動しエラーが出ていないかどうか確かめるようにしましょう。

プログラムは一発で完璧に書こうとするものではなく、少しずつ書いては実行しわざとエラーを出させてはそれを直すを繰り返して、「とりあえずここまではできた」「ここまでは間違っていない」という範囲を徐々に広げていって完成させるものなのでエラーを恐れないでください。

以降はコンソールにプログラムを書いても、hello.jsに書いてもかまいません。自分に合った方法でプログラミングを継続してください。

コメント

[編集]

JavaScriptでは、//から行末までの部分、および/*〜*/で囲まれた部分はコメントとして扱われます。コメントは1文字の空白とみなされるので、コードの説明など好きな文章を書くことができます。

たとえば、 

<meta charset="utf-8">
<script>
//  alert('Hello World!');
document.write("こんにちは 世界");
</script>

ならアラートは表示されず、単に「こんにちは　世界」がブラウザのウィンドウの左上に表示されます。

他の例 

/*
  1 から n までの整数の合計を求める（初期値は n = 10）

  複数行のコメントを書くことが可能
*/

var n = 10;

console.log(n * (n + 1) / 2); // 一行コメント: ガウスのアルゴリズムを使用

複数行コメントは次のようにアスタリスクを同じカラムカラムに書くとコメントの範囲がひと目で分かります。 

/**
 * @file JavaScript による円周率出力プログラム
 * @version 3.14
 * @author ウィキブックス
 * @license パブリックドメイン
 */

console.log(Math.PI);

これはJSDocと呼ばれる形式で、JavaScriptにおけるドキュメント方式の事実上の標準になっています。一般公開するプログラムでは、すべてのメソッド定義にJSDoc形式でドキュメントを書くことが推奨されます。JSDocの書き方を習得したい方は、GoogleのClosure Libraryの例をご覧ください。

JavaScriptに限りませんが、一般的に 

var x = 1; // x を 1 で初期化

のようなコードをただ日本語に翻訳しただけの無意味なコメントは冗長な上、コードの更新にコメントが追いついていない場合などは深刻な誤解を与えます（コメント通りに直しがち）。それが何のための変数なのかなどクリエイティブな構想をコメントには書くべきです。

種々雑多な知識

[編集]

REPL

[編集]

REPL(read–eval–print loop)とは、キャラクター指向の対話的な実行方式であり、コマンドプロンプトがその代表である。しかし、オンラインサービスにはキャラクター指向は馴染みにくく、TEXTAREA要素に代表されるFORMに複数行のテキストを書き、「実行」に類するイベント発火で評価する形式が取られるようになった[9]2021年6月現在、様々なオンラインサービスとして提供されている。

BabelのREPLやCode Beautifier - HTML Viewer使うと上記のHello Worldプログラムを簡単に動かすことができます。

特に、Code Beautifier - HTML Viewerでは、HTML文書に含まれたJavaScriptをウェブブラウザでの表示そのままに再現できローカルファイルにHTML文書を用意する必要がなく、スマホートフォンやタブレットなどでの利用に適している。

ブラウザ以外の実行環境

[編集]

ブラウザを使うのではなく、JavaScriptの処理系をインストールしてシェル(ターミナル)でJavaScriptを実行できます。シェルを使える方にはこの方法をおすすめします。

後述のNode.jsのほか、SpiderMonkey、Rhino、KJSなどがあります。

Node.js

[編集]
Wikipedia
Wikipedia
 ウィキペディアにNode.jsの記事があります。

Node.jsはJavaScriptをサーバーサイドで実行するオープンソースのランタイム環境で、V8 JavaScriptエンジンを採用し、非同期イベント駆動の特徴を持っています。高いパフォーマンスとスケーラビリティを提供し、広くウェブアプリケーション、API、マイクロサービスの開発で活用されています。Node.jsはnpmと呼ばれるパッケージ管理ツールを通じて多数のサードパーティのモジュールやライブラリが利用可能で、フロントエンドとの一貫性を図ることができます。

詳細は「Node.js」を参照

Node以外の処理系

[編集]

Node.js以外にも、JavaScriptを実行するための異なる処理系が存在します。ここでは、いくつかの代表的な処理系について紹介します。

ブラウザ環境

[編集]

JavaScriptの最も一般的な実行環境はウェブブラウザです。各ブラウザには独自のJavaScriptエンジンが組み込まれており、以下がその例です。

  • Google Chrome: V8エンジン
  • Mozilla Firefox: SpiderMonkeyエンジン
  • Safari: JavaScriptCoreエンジン（別名Nitro）
  • Microsoft Edge: 以前はChakraエンジン、現在はChromiumベースのV8エンジン

これらのエンジンは、ウェブページ上で動的なコンテンツを生成したり、ユーザーのインタラクションに応答するためにJavaScriptを実行します。

Deno

[編集]

Denoは、Node.jsの生みの親であるライアン・ダール（Ryan Dahl）によって開発されたJavaScript/TypeScriptランタイムです。Denoの特徴は、セキュリティを重視した設計と、モジュールのインポートに標準でURLを使用する点です。以下がDenoの主な特徴です。

  • セキュリティ: デフォルトでファイルシステムやネットワークへのアクセスが禁止されており、必要に応じて明示的に許可する必要があります。
  • TypeScriptサポート: TypeScriptをネイティブにサポートしており、追加の設定やツールが不要です。
  • モジュール管理: npmの代わりに、ESモジュールとURLを使用してモジュールを管理します。

JScript

[編集]

JScriptは、Microsoftが開発したJavaScriptの実装で、主にInternet Explorerで使用されました。以下がJScriptの特徴です。

  • ActiveXとCOM: JScriptはActiveXコントロールやCOM（Component Object Model）オブジェクトとの統合が強力で、これによりWindows環境での高度な操作が可能です。
  • Windows Script Host (WSH): JScriptはWSH上でも実行可能で、Windowsの管理タスクをスクリプトで自動化するために使用されます。

しかし、Internet Explorerのシェアが減少するにつれ、JScriptの使用も減少しており、現在ではほとんどの開発者が標準のJavaScriptを使用しています。

Rhino

[編集]

Rhinoは、Javaで書かれたJavaScriptエンジンで、Javaプラットフォーム上でJavaScriptを実行するために使用されます。以下がRhinoの特徴です。

  • Javaとの統合: RhinoはJavaアプリケーションに組み込むことができ、JavaとJavaScriptの相互運用が可能です。
  • サーバーサイドスクリプト: Rhinoはサーバーサイドでのスクリプティングにも使用され、Javaベースのサーバーアプリケーションでスクリプトを実行するために利用されます。

Nashorn

[編集]

Nashornは、Java 8以降に導入されたJavaScriptエンジンで、JVM上でJavaScriptを実行するために使用されます。Nashornの特徴は以下の通りです。

  • 高速な実行: Nashornは、JavaのJITコンパイル技術を利用して高速にJavaScriptを実行します。
  • Javaとのシームレスな統合: Nashornは、Javaのクラスやオブジェクトを直接操作でき、JavaとJavaScriptの統合が容易です。

Nashornは、Java 11のリリースに伴い非推奨になり、JDK 15以降から削除されました。

まとめ
[編集]

このように、Node.js以外にも多くのJavaScript実行環境が存在し、それぞれに特徴や利点があります。開発者は、用途や環境に応じて最適な処理系を選択することが重要です。

スタイル

[編集]

JavaScriptのコーディングスタイルは個々の開発者やプロジェクトによって異なりますが、以下は一般的なガイドラインのいくつかです。

  1. インデントとスペース: インデントにはスペースを使用し、通常は2つか4つのスペースが推奨されます。
  2. セミコロンの使用: セミコロンは文の終わりに必要です。自動セミコロン挿入があるため、省略しても動作しますが、クリアなコードを書くためにセミコロンの使用が一般的です。
  3. クォートの使用: シングルクォート(')またはダブルクォート(")のどちらを使用しても構いませんが、統一性が重要です。
  4. 変数命名: キャメルケース（例: myVariable）が一般的です。定数は通常大文字とアンダースコアを組み合わせて表現します（例: MAX_VALUE）。
  5. 関数命名: 関数名もキャメルケースが一般的です。関数は通常動詞で始まります（例: calculateTotal()）。
  6. コメント: コードの理解を助けるコメントを追加しますが、明らかな場合や適切な命名ができている場合は不要です。
  7. ブラケットの位置: インデントと同じ行にブラケットを配置するか、新しい行に配置するかに関しては異なるスタイルがあります。一貫性が重要です。
  8. オブジェクトリテラル: オブジェクトリテラルのプロパティはカンマで区切り、行末にはカンマが付かないようにします。
// 例
function calculateTotal(price, quantity) {
    return price * quantity;
}


これらのガイドラインは一般的なものであり、特定のプロジェクトやチームによっては異なることがあります。プロジェクト内で一貫性を保つことが重要で、コーディングスタイルガイドを文書化して共有することが良い実践です。

脚註

[編集]
  1. ^ Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 Japan Windows Blog, 2021-05-19
  2. ^ Internet Explorer 11 デスクトップ アプリケーションのサポート終了 – 発表に関連する FAQ のアップデート
  3. ^ https://caniuse.com/arrow-functions
  4. ^ https://caniuse.com/bigint
  5. ^ https://caniuse.com/mdn-javascript_operators_object_initializer_shorthand_method_names
  6. ^ https://caniuse.com/mdn-javascript_statements_for_of
  7. ^ Microsoft Edge：ウェブ開発ツール、Google Chrome：デベロッパー ツール、Mozilla Firefox：ウェブ開発ツール、Safari：開発ツール
  8. ^ ブラウザによって呼び方が異なりますが、基本的な機能的は共通しています
  9. ^ 。1970年代のコンピューティング環境を知っている人にとってはTSSからIBM 3270端末への先祖がえりと感じられるかもしれない。
"https://ja.wikibooks.org/w/index.php?title=JavaScript/はじめに&oldid=251916" より作成