Wikibooks

JavaScript/はじめに

< JavaScript

まず、簡単な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 編集

さまざまな処理系が存在しますが、GoogleのV8エンジンをベースにした、Node.jsランタイムを利用する方法を紹介します。

インストール方法 Node.jsの公式サイトからインストーラーをダウンロードしインストールしてください。なお、Linuxでは各種パッケージマネージャを使ってもインストールできます。

Ubuntuでは次のコマンドを実行してNode.jsをインストールできます（管理者権限が必要です）。 

 $ sudo apt-get install node

です。

Fedora では 

$ sudo dnf install nodejs

です（Fedora 32 で2020年4月20日に確認）。

また、macOSではHomebrewパッケージマネージャーをインストールし、brew を使ってインストールするとよいでしょう。 

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew install node

起動 Node.jsインタプリタを起動するには、シェルでnodeコマンドを実行します。 

 $ node
 > console.log('Hello World!')
 Hello World!
 undefined
 >

Hello World! の次の undefined は console.log() メソッドの戻り値です。

Node以外の処理系 編集

Node.js/V8以外の処理系にはSpiderMonkey、Rhino、KJSなどがあります。 

$ sudo apt-get install libmozjs-24-bin rhino kdelibs-bin

スタイル 編集

JavaScriptではインデントのスペースの数、変数名の形式（例えばキャメルケース）、条件式の ) と 続くブロックの開始の { の間にスペースは必要か？そもそも次の行にすべきか？、if や while と (の間には？などのスタイルに幾つかの流儀があり、一概にどれが優れているとは言えない。ただ、1つソースプログラム、1つのプロジェクトでは一致している必要があるというのは最小限の合意事項と言える。

また、言語仕様が未だに成長途上にあるので、旧来のスタイル標準がひどく古臭くまた読みにくく感じることもある。

脚註 編集

  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=202408" より作成