エントリポイント
エントリポイントとは、アプリケーションの中で一番最初に呼び出される部分のことです。 アプリケーションを作成するにあたり、まずはエントリポイントを用意しなければなりません。
Webアプリケーションにおいては、常にHTMLドキュメントがエントリポイントとなります。 ウェブブラウザによりHTMLドキュメントが読み込まれたあとに、HTMLドキュメント中で読み込まれたJavaScriptが実行されます。
HTMLファイルの用意
エントリポイントとして、まずは最低限の要素だけを配置したHTMLファイルを作成しましょう。
body要素の一番下で読み込んでいるindex.jsが、今回のアプリケーションの処理を記述するJavaScriptファイルです。
<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には、スクリプトが正しく読み込まれたことを確認できるよう、コンソールにログを出力する処理だけを書いておきます。
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コンソールを開く"を参照してください。
