> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/components.md).

# JS/CSS コンポーネント

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

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

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzUpD-jJN7RGxKJ_N0%2F-MgzVDTLFnN4dGcKIlOp%2Fimage.png?alt=media\&token=3b1dad1e-7c17-4ac8-9529-1817fe7b3501)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzUpD-jJN7RGxKJ_N0%2F-MgzVI_A1sRha9hTfP4_%2Fimage.png?alt=media\&token=559ad6e6-3bee-4450-968f-0992bc14d16d)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzUpD-jJN7RGxKJ_N0%2F-MgzVP94-B4CkzvOUu-X%2Fimage.png?alt=media\&token=8ad4fb1a-ffd8-40d3-ac0e-489273ec64a1)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzUpD-jJN7RGxKJ_N0%2F-MgzVWi2x4mEOtqYwFyf%2Fimage.png?alt=media\&token=1f3dece3-7eb7-4aca-8ab2-9b1f5c264e30)

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzUpD-jJN7RGxKJ_N0%2F-MgzVhEO-q9ISEb0nOt4%2Fimage.png?alt=media\&token=0033cbb2-0051-4195-b9cb-c7ca994982a2)

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

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

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzUpD-jJN7RGxKJ_N0%2F-MgzVt-EYr1q_YBX2b7z%2Fimage.png?alt=media\&token=fbc1495b-da28-4567-8cbb-68491ae0f5fe)

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)をご確認ください。
