私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
  1. チュートリアル
  2. JavaScript 言語
  3. JavaScript の基礎
2021年2月14日

Hello, world!

このチュートリアルは、プラットフォームに依存しないJavaScriptのコアについてです。もっと先に、Node.jsや他のプラットフォームについて学びます。

しかし、私たちは今スクリプトを動かすための動作環境が必要です。ちょうどこのチュートリアルはオンラインなので、ブラウザが良い選択肢です。もしも別の環境( Node.js など)に集中する予定がある場合に時間を費やさないように、ここでは、ブラウザ固有のコマンド(alertのような)が最小限になるようにします。チュートリアルの次のパート では、ブラウザの JavaScript に焦点を当てます。

では最初に、どうやってWebページにScriptを付け加えるか見てみましょう。サーバサイドでは、Node.jsの場合 "node my.js" のようにコマンドと一緒に実行するだけです。

“script” タグ

JavaScriptプログラムは、<script> タグを使用してHTML文書の任意の部分に挿入できます。

例:

<!DOCTYPE HTML>
<html>

<body>

  <p>Before the script...</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>...After the script.</p>

</body>

</html>

右上の “Play” ボタンをクリックすることでサンプルを実行することができます。

<script> タグはブラウザがこのタグを見つけたときに自動的に実行される JavaScript コードを含んでいます。

最新のマークアップ

<script> タグには最近ではほとんど利用しない属性がいくつかあり、古いコードの中で見つけることができます:

type 属性: <script type=…>

古い標準であるHTML4はこのタイプを持つことを必須としました。通常は type="text/javascript"でした。今は必須ではありません。また、現在の標準ではこの属性の意味が完全に変わっています。現在は JavaScript モジュールとして使用することができます。ただ、これは高度なトピックであり、これに関してはチュートリアルの別の部分で説明します。

language 属性: <script language=…>

この属性はスクリプトの言語の表示を意味するためのものでした。JavaScript がデフォルトの言語であるため、この属性に意味はなく、これを使う必要はありません。

スクリプトの前後のコメント

本当に昔の書籍やガイドでは、このような<script>の中にコメントがある場合があります:

<script type="text/javascript"><!--
    ...
//--></script>

それらのコメントは<script>タグを知らなかった古いブラウザでコードを隠すためのものです。しかし、過去15年以上で生まれた全てのブラウザはこのような問題は持っていません。このようなコメントはサインとして使えるので、私たちはここで言及します。もしもどこかでこれを見たら – そのコードは恐らく本当に古いか、調べる価値がないでしょう。

外部スクリプト

多くのJavaScriptコードを持っている場合、別々のファイルに置くことができます。

スクリプトファイルは、src 属性でHTMLに記述します。

<script src="/path/to/script.js"></script>

ここで /path/to/script.js はスクリプトファイルの絶対パスです(サイトルートからの)。また、現在のページからの相対パスで指定することもできます。例えば、src="script.js" は現在のフォルダにある "script.js" を意味するでしょう。

完全なURLも同様に可能です。たとえば:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

複数のスクリプトを使う場合は、複数のタグを使います:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
注意:

原則として、最もシンプルなスクリプトだけをHTML内に置きます。より複雑なものは別のファイルに置きます。

ファイル分割のメリットは、ブラウザがダウンロードしてそれをブラウザのキャッシュに保存するためです。

以降、同じスクリプトが必要な他のページは、ダウンロードする代わりにキャッシュから取得します。そのため、ファイルは実際には一度だけダウンロードされます。

これはネットワーク通信量を節約しページをより速くします。

もし src が設定された場合, スクリプトの中身は無視されます。

1つの <script> タグは src 属性と中身のコード両方を持つことはできません。

これは動作しません:

<script src="file.js">
  alert(1); // src が設定されているので、このコンテンツは無視されます。
</script>

外部の <script src="…"> もしくは、通常のコードをもつ <script> のどちらか一方にしなければなりません。

上の例は、2つのスクリプトに分けることで動作させることができます。:

<script src="file.js"></script>
<script>
  alert(1);
</script>

サマリ

  • ページにJavaScriptコードを追加するには、<script> を利用します。
  • type と language 属性は必要ありません。
  • 外部ファイルのスクリプトは、<script src="path/to/script.js"></script> で挿入できます。

ブラウザスクリプトやそれらとWebページとのやり取りについては、学ぶことがまだまだあります。しかし、このチュートリアルのこのパートは JavaScript 言語に専念していることに留意してください。JavaScriptを実行するための方法としてここではブラウザを使っており、オンラインでの読み込みではとても便利ですが、数ある実行方法の1つでしかありません。

タスク

alert を表示しましょう

重要性: 5

メッセージ “I’m JavaScript!” を表示するページを作ってください。

サンドボックスの中、もしくはあなたのハードドライブどちらでも構いません。動作することを確認してください。

新しいウィンドウでデモ

サンドボックスで解答を開く

外部スクリプトで alert を表示しましょう

重要性: 5

以前のタスク alert を表示しましょう の解決策を使ってください。スクリプトの内容を同じフォルダにある外部ファイル alert.js に抽出して変更します。

ページを開いて alert が機能することを確認してください。

The HTML code:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

同じフォルダにある alert.js フォルダ:

alert("I'm JavaScript!");
前のレッスン次のレッスン
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。

チャプター

レッスンナビゲーション

シェア
GitHubで編集