エントリポイント

エントリポイントとは、アプリケーションの中で一番最初に呼び出される部分のことです。 アプリケーションを作成するにあたり、まずはエントリポイントを用意しなければなりません。

Webアプリケーションにおいては、常にHTMLドキュメントがエントリポイントとなります。 ウェブブラウザによりHTMLドキュメントが読み込まれたあとに、HTMLドキュメント中で読み込まれたJavaScriptが実行されます。

プロジェクトディレクトリを作成

今回作成するアプリにはHTMLやJavaScriptなど複数のファイルが必要となります。 そのため、まずそれらのファイルを置くためのディレクトリを作成します。

ここでは ajaxapp という名前で新しいディレクトリを作成します。ここからは作成したajaxappディレクトリ以下で作業していきます。

またこのプロジェクトで作成するファイルは、必ず文字コード(エンコーディング)をUTF-8、改行コードをLFにしてファイルを保存します。

HTMLファイルの用意

エントリポイントとして、まずは最低限の要素だけを配置したHTMLファイルをindex.htmlというファイル名で作成しましょう。 body要素の一番下で読み込んでいるindex.jsが、今回のアプリケーションの処理を記述するJavaScriptファイルです。

index.html

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Ajax Example</title>
  </head>
  <body>
    <h2>GitHub User Info</h2>
    <script src="index.js"></script>
  </body>
</html>

次に同じディレクトリにindex.jsというファイルを作成します。 index.jsにはスクリプトが正しく読み込まれたことを確認できるよう、コンソールにログを出力する処理だけを書いておきます。

index.js

console.log("index.js: loaded");

ここでのajaxappディレクトリのファイル配置は次のようになっていれば問題ありません。

ajaxapp
├── index.html
└── index.js

次はこのindex.htmlをブラウザで表示して、コンソールにログが出力されることを確認していきます。

ローカルサーバーでHTMLを確認する

ウェブブラウザでindex.htmlを開く前に、開発用のローカルサーバーを準備します。 ローカルサーバーを立ち上げずに直接HTMLファイルを開くこともできますが、その場合file:///から始まるURLになります。 fileスキーマではSame Origin Policyのセキュリティ制限により、多くの場面でアプリケーションは正しく動作しません。 本章はローカルサーバーを立ち上げた上で、httpスキーマのURLでアクセスすることを前提としています。

コマンドラインでajaxappディレクトリへ移動し、次のコマンドでローカルサーバーを起動します。 次のコマンドでは、この書籍用に作成された@js-primer/local-serverというローカルサーバーモジュールをダウンロードと同時に実行します。 まだnpxコマンドの用意ができていなければ、先にアプリケーション開発の準備を参照してください。

$ npx @js-primer/local-server

起動したローカルサーバーのURL(http://localhost:3000)へブラウザでアクセスすると、"index.js: loaded"とコンソールにログが出力されます。 Console APIで出力したログを確認するには、ウェブブラウザの開発者ツールを開く必要があります。 ほとんどのブラウザで開発者ツールが同梱されていますが、本章ではFirefoxを使って確認します。 Firefoxの開発者ツールは次のいずれかの方法で開きます。

  • Firefox メニュー(メニューバーがある場合や macOS では、ツールメニュー)の Web 開発サブメニューで "Web コンソール" を選択する
  • キーボードショートカット Ctrl+Shift+K(macOS では Command+Option+K)を押下する

詳細は"Webコンソールを開く"を参照してください。

ログが表示されているWebコンソール

このセクションのチェックリスト

このセクションでは、エントリポイントとなるHTMLを作成し、JavaScriptモジュールのエントリポイントとなるJavaScriptファイルを読み込むところまでを実装しました。

  • ajaxappという名前のプロジェクトディレクトリを作成した
  • エントリポイントとなるindex.htmlを作成した
  • JavaScriptのエントリポイントとなるindex.jsを作成しindex.htmlから読み込んだ
  • ローカルサーバーを使ってブラウザでindex.htmlを表示できた
  • index.jsからコンソールに出力されたログを確認した