TypeScriptを使用してHERE Mapsを構築する

このチュートリアルでは、HERE Maps API for JavaScriptをTypeScriptおよびWebpackと統合するプロセスについて説明します。これらの手順を実行することで、TypeScriptとWebpackを使用したHERE Maps API for JavaScriptをプロジェクトで最大限に活用するための包括的な環境が設定されます。

開始する前に

システムに次のソフトウェアがインストールされていることを確認します。

Node.js - Web ブラウザーの外部で JavaScript コードを実行できる JavaScript ランタイム環境
NPM (Node Package Manager ) - Node.js プロジェクトの依存関係 (ライブラリとツール) のインストール、共有、管理を円滑にする Node.js のパッケージマネージャー

TypeScriptプロジェクトを構成する

HERE Maps API for Javascriptを含む基本的なTypeScriptプロジェクトを作成するには、次の手順を実行します。

TypeScriptプロジェクトのフォルダーを作成します。
コマンドプロンプトを開き、ディレクトリをプロジェクトフォルダーに変更します。
次のコマンドを使用して、公開されているHERE Maps API for JavaScriptリポジトリをNPM設定に追加し、NPMでHERE Maps API for JavaScriptを使用できるようにします。
```
npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/
```
次のコマンドを実行して、プロジェクトのpackage.jsonファイルを初期化します。
```
npm init
```
📘
注
Node.js環境では、コマンドラインに一連の質問を表示して、プロジェクトの基本設定を行うように求められます。この初期化プロセス中にpackage.jsonファイルをカスタマイズするための入力を提供することも、デフォルト設定を受け入れることもできます。
最終確認プロンプトでyesと入力し、package.jsonの生成を完了します。
次のコマンドを入力して、HERE Maps API for Javascriptライブラリを依存関係として含めます。
```
npm install @here/maps-api-for-javascript
```
次のコマンドを使用して、Webpackの開発依存関係をインストールします。
```
npm install --save-dev webpack webpack-cli
```
次のコマンドを入力して、TypeScriptのコンパイラとローダーをインストールします。
```
npm install --save-dev typescript ts-loader
```
プロジェクトフォルダーに、次の構造でtsconfig.jsonという名前のファイルを作成します。
```
 {
   "compilerOptions": {
     "moduleResolution": "node16",
     "target": "es2016",
     "module": "node16",
     "strict": true,
   }
 }
```
これは、@here/maps-api-for-javascript npmパッケージで問題なく動作する、最小限の構成のtsconfigです。
詳細については、tsconfigのドキュメントを参照してください。
プロジェクトフォルダーで、次のwebpack.config.jsファイルを作成します。
```
const path = require('path');

module.exports = {
    entry: './index.ts',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production',
    node: {
        global: false,
    },
    performance: {
        maxEntrypointSize: 2048000,
        maxAssetSize: 2048000
    }
};
```
このファイルは、Webpackを使用して小規模から中規模のTypeScriptアプリケーションを構築するための開始点として使用できる基本的な構成を提供します。設定は次のとおりです。
- index.tsにあるエントリーポイントでTypeScriptアプリケーションをコンパイルします。
- コンパイルされたコードをdistというディレクトリに出力します。
- 最適化にプロダクションモードを使用します。
- 大きなファイルが生成されないように、パフォーマンス制限を設定します。
詳細については、Webpackのドキュメントを参照してください。

プロジェクトフォルダーで、次のindex.tsファイルを作成します。これはTypeScriptコードのエントリーポイントです。

📘
注
apikey属性の値は、独自のHERE APIキーに置き換えてください。

// Import the HERE Maps API for JavaScript library
import "@here/maps-api-for-javascript";
// Import the Venues submodule
import "@here/maps-api-for-javascript/venues";

// Create default map layers using the HERE Maps platform
const platform = new H.service.Platform({
    apikey: 'YOUR_HERE_APIKEY',
});

// Create a new map instance with specified options
const maptypes = platform.createDefaultLayers({ppi:250});
const map = new H.Map(
    document.getElementById("mapContainer")!, // Target HTML element for the map
    maptypes.vector.normal.map, // Use the vector map type
    {
        pixelRatio: 2,
        zoom: 11,
        center: { lng: 14.3279, lat: 40.8352 },
    }
);
// Enable basic map events for user interaction
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

プロジェクトフォルダーで、次のindex.htmlファイルを作成します。
```
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta charset="utf-8">
        <style>
        #map {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <div id="mapContainer"></div>
        <script src="./dist/index.js"></script>
    </body>
</html>
```
このファイルは、Web アプリが Web ブラウザーに読み込まれるときの主要エントリーポイントです。

結果：最終的なプロジェクトフォルダー構造は、次のファイルとフォルダーで構成されます。
- project folder (root)
  - node_modules/
  - index.html
  - index.ts
  - package.json
  - package-lock.json
  - tsconfig.json
  - webpack.config.json
    
    👍
    ヒント
    HTML定義を使用すると、次の例に示すように、faviconなどの追加の参照を参照できます。
    <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
プロジェクトフォルダーで、package.jsonファイルを開き、次のコマンドをscriptsセクションに追加します。
```
"build": "webpack"
```
buildスクリプト実行コマンドを追加した後、端末でnpm run buildコマンドを実行すると、プロジェクトの設定で定義されているWebpackバンドルプロセスがbuildスクリプトによって自動的にトリガーされます。
次のコマンドを実行して、バンドルされた出力を構築して生成します。
```
npm run build
```
構築が完了すると、コマンドプロンプトに成功メッセージが表示され、マップの管理を行った JavaScript コードを含む dist フォルダーが作成されます。
プロジェクトフォルダーから Web ブラウザーページで index.html ファイルを開きます。

結果：次の例に示すように、Web ページに双方向的 HERE マップが表示されます。
基本的な HERE マップ

次のステップ

HERE Maps API for Javascriptの設計とフィーチャーの詳細については、「APIリファレンス」を参照してください。

Venuesサブモジュールの使用例を確認するには、「HERE Indoor Mapを統合する」を参照してください。