コンテンツにスキップ

JavaScript/はじめに

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


まず、簡単なJavaScriptのプログラムの例と、どこにプログラムを書けばよいかを解説します。

Hello World

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

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

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

hello.html
<!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>タグの間にJavaScriptのコードが記述されます。

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

alert("Hello World!");

次に、alertメソッドを使ったJavaScriptの記述方法を学びましょう。

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

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

文の終わりにセミコロンがなくても動作することがありますが、セミコロンを省略しても意図通りに動作しない場合があるため、習慣として書くことを推奨します（自動セミコロン挿入についても触れる）。 [2]

外部スクリプト

[編集]

HTMLドキュメントにJavaScriptコードを直接書くのではなく、外部ファイルに分けて記述することもできます。

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コードをその場で書いて実行できるデベロッパーツールが搭載されています。これにより、コードの実行やデバッグが簡単に行えます。各ブラウザにおけるデベロッパーツールの呼び出し方は以下の通りです：

  • Microsoft Edge、Google Chrome、Mozilla Firefox、Safariでは、F12キー、またはfn + F12（特にノートPCなど）を押して、デベロッパーツールを開きます。
  • Chromebookなど、ファンクションキーがないデバイスでは、Ctrl + ⇧ + Iを押してデベロッパーツールを起動します。
  • MacOSの場合は、Cmd + Option + I</kdb>を押すか、メニューバーの 表示 → 開発/デベロッパー → デベロッパー ツールを選択して開発者ツールを起動します。

デベロッパーツールにはコンソール機能があり、直接JavaScriptコードを入力して実行できます。これを使うことで、ブラウザ上でコードを即座にテストすることが可能です。

Internet Explorer について
Windows 10のInternet Explorer (IE)は、2022年6月15日にサポート終了を迎えました[3]。また、Windows 11ではIEは利用できません[4]。

さらに、最新版（最終版）の Internet Explorer 11 も、下記の様にモダンブラウザとは呼べません。

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

さらに、IE11には以下の制限もあります：

  • CSS Grid[9]やFlexbox[10]のサポートが不完全で、レスポンシブデザインやモダンなレイアウトに対応しきれない。
  • JavaScriptの非同期処理に関連するPromises[11]やasync[12]/await[13]がサポートされていない。
  • WebAssembly[14]やService Workers[15]などの最新のウェブ技術に対応していない。

これらのことから、Internet Explorerは特にJavaScriptやモダンなウェブ技術を使用した開発には不向きであり、ブラウザとしても現代のウェブ標準に追いついていないため、現在では利用を避けるべきです。

また、Microsoft Edgeが登場して以降、Internet Explorerの機能は徐々にその中に統合されており、Microsoft Edgeはより優れたパフォーマンスとセキュリティを提供するため、Windowsユーザーには推奨されています。さらに、Google Chrome、Mozilla Firefox、Safariなどのモダンブラウザ（HTML5/CSS3/ECMAScript/DOM等のウェブAPI標準に準拠したブラウザ）も、より最新のウェブ技術に対応しており、これらのブラウザを使用することを強く推奨します。

特にJavaScriptの学習や、ウェブ開発に携わる場合は、最新のブラウザを使用することで、より安定し、効率的に作業を進めることができます。ブラウザ選択は、開発者にとって重要な決断であり、モダンブラウザの使用がウェブの発展と自己成長を促進します。

脚注

[編集]
  1. ^ JavaScriptは、HTMLを使わずに実行する方法(Node.jsなどを使った方法)もありますが、今回は説明しません。
  2. ^ それぞれの行の意味について
    • <!DOCTYPE html>は、この文書がHTML5文書であることを示すものです。
    • <html lang="ja"><html>は、この文書が日本語が使われていること（内容が日本語であること）を示します。* * <head></head>は、その要素に囲まれた内容がヘッダーであることを示します。
    • <meta charset="UTF-8">は、この文書がUTF-8という文字エンコードで記述されていることを示します。
    • <title>Hello World!</title>は、この文書のタイトルがHelloWorld!であることを示します。
    • <script></script>は、その要素に囲まれた内容がJavaScriptであることを示します。JavaScriptをここに書くと、実行されるようになります。
  3. ^ Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 Japan Windows Blog, 2021-05-19
  4. ^ Internet Explorer 11 デスクトップ アプリケーションのサポート終了 – 発表に関連する FAQ のアップデート
  5. ^ https://caniuse.com/arrow-functions
  6. ^ https://caniuse.com/bigint
  7. ^ https://caniuse.com/mdn-javascript_operators_object_initializer_shorthand_method_names
  8. ^ https://caniuse.com/mdn-javascript_statements_for_of
  9. ^ https://caniuse.com/css-grid
  10. ^ https://caniuse.com/flexbox
  11. ^ https://caniuse.com/promises
  12. ^ https://caniuse.com/async-functions
  13. ^ https://caniuse.com/mdn-javascript_operators_await
  14. ^ https://caniuse.com/wasm
  15. ^ https://caniuse.com/serviceworkers
"https://ja.wikibooks.org/w/index.php?title=JavaScript/はじめに&oldid=294899" より作成