エントリポイント

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

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

HTMLファイルの用意

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

<html lang="en">
  <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には、スクリプトが正しく読み込まれたことを確認できるよう、コンソールにログを出力する処理だけを書いておきます。

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

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

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

$ npx @js-primer/local-server

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

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

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

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