# JS/CSS コンポーネント

JS/CSS コンポーネントとは、プロジェクトに追加する JavaScript と CSS ライブラリー群 ( jQuery、jQuery mobile、Onsen UI など ) を指します。

JavaScript/CSS ライブラリーを追加する場合、次の手順に従います。

1\. Monaca クラウド IDEから  **`設定 → JS/CSS コンポーネントの追加と削除`** を選択します。

2\. `JS/CSS コンポーネントの追加と削除` 画面が表示されます。画面上では、複数のライブラリーが一覧化されています。必要なライブラリーを見つけられない場合には、検索ボックスを使用します。

![](/files/-MgzVDTLFnN4dGcKIlOp)

3\. Angularを検索する場合、`検索` ボタンをクリックすると、一致するライブラリのリストが表示されます。

![](/files/-MgzVI_A1sRha9hTfP4_)

4\. `追加` ボタンをクリックし、対象のライブラリを追加します。 次に、プロジェクトに追加するライブラリのバージョンを選択できます。

![](/files/-MgzVP94-B4CkzvOUu-X)

5\. 追加するライブラリのファイルを選択し、`インストール` をクリックします。

![](/files/-MgzVWi2x4mEOtqYwFyf)

6\. 追加したライブラリーが一覧上に表示されていることを確認します。ライブラリのバージョンと選択したファイルを変更する場合には、`設定` をクリックします。

![](/files/-MgzVhEO-q9ISEb0nOt4)

ライブラリーを追加すると、そのファイルは、`www/components` フォルダーに追加されます。また、次の JavaScript ファイルと CSS ファイルも自動的に更新されます。プロジェクトに追加したライブラリーの種類にかかわらず、こちらのファイルは、常にこのフォルダー内に置かれています。

| ファイル名        | 説明                                                    |
| ------------ | ----------------------------------------------------- |
| `loader.js`  | Monaca が JavaScript ライブラリを読み込むために使用する JavaScript ファイル |
| `loader.css` | Monaca が CSS ライブラリを読み込むために使用するスタイルシートファイル             |

![](/files/-MgzVt-EYr1q_YBX2b7z)

HTML ファイルから、上記の 2 つのファイルを参照するだけで、ライブラリーの読み込みを行うことができます。HTML ファイルの `<head>` タグ内で、次の記述を行うことで、ライブラリーを使用することができます。

```markup
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
```

## Cordova Loader (monaca-cordova-loader)

Cordova Loader (monaca-cordova-loader)は、Monacaプロジェクトにおいて、アプリケーション起動時にCordova APIを利用するために必要な`cordova.js`を読み込むためのライブラリです。

Cordovaは、HTML、CSS、JavaScriptを用いてクロスプラットフォームのモバイルアプリケーションを開発するためのフレームワークです。MonacaプロジェクトでCordovaの機能を利用するには、以下のいずれかの方法で`cordova.js`を読み込む必要があります。

1. Cordova Loaderを利用する
2. プロジェクトのエントリーファイル（通常は`index.html`）内で`cordova.js`を`<script>`タグで直接読み込む

Cordova Loaderを利用することで、`cordova.js`の読み込みを簡単に行うことができます。この方法では、Monacaが提供するCordova Loaderライブラリをプロジェクトに追加するだけで、自動的に`cordova.js`が読み込まれます。

一方、`<script>`タグを使って直接`cordova.js`を読み込む場合は、プロジェクトのエントリーファイルに以下のようなコードを追加する必要があります。

```html
<script src="cordova.js"></script>
```

## Monaca Core Utility (monaca-core-utils)

Monaca Core Utility (monaca-core-utils)は、様々なユーティリティ機能を提供するライブラリです。機能の詳細は[こちら](/reference/monaca_api/utility.md)をご確認ください。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
