Wikibooks

JavaScript/はじめに

< 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 編集

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

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

詳細は「Node.js」を参照

Node以外の処理系 編集

Node.js以外にも、JavaScriptを実行するための異なる処理系が存在します。例えば、ブラウザのJavaScriptエンジン（V8、SpiderMonkey、Chakraなど）は、クライアントサイドで動作します。また、DenoはNode.jsと同様にサーバーサイドでのJavaScript実行環境ですが、セキュリティの向上や標準モジュールの改良などがあります。ブラウザ以外では、RhinoやNashornがJava上でJavaScriptを実行します。さらに、JScriptはWindows Script Hostで利用されます。これらの処理系はそれぞれ異なる特性や利用ケースに適しており、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=241440" より作成