GitBookjs-primerエントリーポイントエントリーポイントとは、アプリケーションの中で一番最初に呼び出される部分のことです。アプリケーションを作成するにあたり、まずはエントリーポイントを用意しなければなりません。Webアプリケーションにおいては、常にHTMLドキュメントがエントリーポイントとなります。ウェブブラウザによりHTMLドキュメントが読み込まれたあとに、HTMLドキュメント中で読み込まれたJavaScriptが実行されます。今回作成するアプリにはHTMLやJavaScriptなど複数のファイルが必要となります。そのため、まずそれらのファイルを置くためのディレクトリを作成します。いう名前で新しいディレクトリを作成します。ここからは作成したajaxappディレクトリ以下で作業していきます。このプロジェクトで作成するファイルは、必ず文字コード(エンコーディング)をUTF-8、改行コードをLFにしてファイルを保存します。HTMLファイルの用意エントリーポイントとして、まずは最低限の要素だけを配置したHTMLファイルをindex.htmlというファイル名で作成しましょう。body要素の一番下で読み込んでいるindex.jsが、今回のアプリケーションの処理を記述するJavaScriptファイルです。</body></html>次に同じディレクトリにindex.jsというファイルを作成します。index.jsにはスクリプトが正しく読み込まれたことを確認できるよう、コンソールにログを出力する処理だけを書いておきます。loaded");ここでのajaxappディレクトリのファイル配置は次のようになっていれば問題ありません。index.js次はこのindex.htmlをブラウザで表示して、コンソールにログが出力されることを確認していきます。ローカルサーバーでHTMLを確認するウェブブラウザでindex.htmlを開く前に、開発用のローカルサーバーを準備します。ローカルサーバーを立ち上げずに直接HTMLファイルを開くこともできますが、その場合はfile:///からはじまるURLになります。Policyのセキュリティ制限により、多くの場面でアプリケーションは正しく動作しません。本章はローカルサーバーを立ち上げた上で、httpスキーマのURLでアクセスすることを前提としています。コマンドラインでajaxappディレクトリへ移動し、次のコマンドでローカルサーバーを起動します。次のコマンドでは、この書籍用に作成された@js-primer/local-serverというローカルサーバーモジュールをダウンロードと同時に実行します。npxコマンドの用意ができていなければ、先にアプリケーション開発の準備を参照してください。loaded"とコンソールにログが出力されます。APIで出力したログを確認するには、ウェブブラウザの開発者ツールを開く必要があります。ほとんどのブラウザで開発者ツールが同梱されていますが、本章ではFirefoxを使って確認します。Firefoxの開発者ツールは次のいずれかの方法で開きます。Command+Option+K)を押下する詳細は"Webコンソールを開く"を参照してください。ウェブブラウザとDOMHTMLドキュメントをブラウザで読み込むとき、DOMと呼ばれるプログラミング用のデータ表現が生成されます。HTMLドキュメントのコンテンツと構造をJavaScriptから操作できるオブジェクトです。グローバルオブジェクトがあります。グローバルオブジェクトには、指定したHTML要素を取得したり、新しくHTML要素を作成するメソッドが実装されています。書かれたHTMLをJavaScriptから操作できます。body要素の子要素としてbuttonを挿入するdocument.body.appendChild(button);JavaScriptとDOMはWebアプリケーション開発において切っても切り離せない関係です。動的なWebアプリケーションを作るためには、JavaScriptによるDOMの操作が不可欠です。今回のユースケースでもGitHubのAPIから取得したデータを元に、動的にDOMツリーを操作して画面の表示を更新します。DOMは言語機能(ECMAScript)ではなくブラウザが実装しているAPIです。そのため、DOMを持たないNode.jsなどの実行環境では使えず、documentのようなグローバルオブジェクトも存在しないことには注意が必要です。このセクションのチェックリストこのセクションでは、エントリーポイントとなるHTMLを作成し、JavaScriptモジュールのエントリーポイントとなるJavaScriptファイルを読み込むところまでを実装しました。ajaxappという名前のプロジェクトディレクトリを作成したエントリーポイントとなるindex.htmlを作成したJavaScriptのエントリーポイントとなるindex.jsを作成しindex.htmlから読み込んだローカルサーバーを使ってブラウザでindex.htmlを表示したindex.jsからコンソールに出力されたログを確認したJavaScriptからHTMLドキュメントを操作するDOMについて学んだ。