開発環境と言語の選択

Web アプリの開発を始める前に、開発言語と開発環境を決めます。

Thing-IF SDK for JavaScript では、TypeScript または JavaScript を使った開発ができます。これらの言語を使用できる開発環境やフレームワークには様々なものがありますが、このガイドで案内している開発スタイルは以下の 2 通りです。

いずれの方法も、Node.js が必要です。Node.js をあらかじめインストールして、npm コマンドを実行できる状態にしておいてください。

Node.js で TypeScript コードをビルドする場合

この方法では、Web アプリを TypeScript で実装し、Node.js によって Web ブラウザー用の JavaScript ファイルをビルドします。Kii Cloud SDK for JavaScript、Thing-IF SDK for JavaScript、関連するライブラリーなどは Node.js によってビルドされ、JavaScript ファイルにまとめられます。

開発者が TypeScript で記述した Web アプリのコードは、JavaScript のコードに変換されます。Web アプリの実装では、Web ブラウザーが対応していない import などの機能を使える一方、ビルドを行うことで Web ブラウザーが実行できる JavaScript ファイルを生成できます。

最終的に、Node.js によって生成された JavaScript ファイルは、HTML の <script> タグなどで Web ブラウザーが読み込みます。

JavaScript コードを直接記述する場合

この方法では、JavaScript で実装した Web アプリのコードを、Web ブラウザーに直接読み込ませます。

Web ブラウザーでは HTML の <script> タグなどを使って、SDK や Web アプリの JavaScript コードを読み込ませます。Thing-IF SDK for JavaScript の JS ファイルは、Node.js を使って、あらかじめ自分でビルドしておきます。Kii Cloud SDK は、依存するライブラリーのファイルを含めて 1 つの JavaScript ファイルにまとめられており、Web ブラウザーが直接解釈、実行できます。

開発者が実装した Web アプリのコードは、Web ブラウザーが直接解釈、実行するため、require() によるモジュール管理を行うことはできません。

Web アプリの実装に必要なライブラリーがあれば、HTML の <script> タグなどによって Web ブラウザーに読み込ませることができます。

サンプルコードでの表記

本ガイドでは、JavaScript と TypeScript のコードの両方をサンプルコードとして示します。

それぞれのサンプルコードは、上記の開発方法を想定した書き方で案内します。特に、名前空間については以下の点にご注意ください。

  • TypeScript

    TypeScript を利用する際は、importrequire() によって、Kii の SDK を読み込みます。

    Kii Cloud SDK の名前空間は kii を、Thing-IF SDK の名前空間は ThingIF をそれぞれ利用するものとしてサンプルコードを示します。

    例えば、TypedID クラスはサンプルコード上で ThingIF.TypedID と表現します。

  • JavaScript

    JavaScript を利用する際、記述したソースは、ビルド済みの Thing-IF SDK for JavaScript とともに Web ブラウザーで直接実行されます。

    導入手順 に従うと、Kii Cloud SDK はグローバルの名前空間を、Thing-IF SDK は名前空間 ThingIF をそれぞれ利用することになります。サンプルコードもこの状況を想定して記述しています。

    例えば、TypedID クラスはサンプルコード上で ThingIF.TypedID と表現します。

これ以外の開発方法を採用する場合は、必要に応じてサンプルコードを書き換えてください。

例えば、JavaScript でソースを記述し、Node.js を使って、Web ブラウザーが解釈できる JavaScript コードを生成することもできます。この場合、Kii Cloud SDK のクラスは、require() によって kii などの名前空間に読み込み、kii. などのプレフィックスを付けて参照する必要があります。JavaScript のサンプルコードはグローバルの名前空間を利用しているため、このケースではコードの書き換えが必要になります。