IonicでjQuery/jQueryプラグインを従来通り使う方法

Happy Halloween!
もう2017年も終わろうとしている頃ではありますが、「WebデザイナーがIonicを使えるというなら、いつも使っているjQueryの使い方も教えて欲しい」と言われたのでご紹介します。

<h2>jQueryだけ使いたい</h2>
jQueryのセレクター指定（`$`）やアニメーションなどの基本的な機能を使いたい人向け。

<h3>1. jQueryのファイルをダウンロードしてくる</h3>
[jQuery公式サイト](https://jquery.com/download/)からjQueryのminifyされたファイルをダウンロードしてきます。記事執筆段階では`Download the compressed, production jQuery 3.2.1`をクリックしたらOKです。自動的にファイルのダウンロードがはじまり、ローカルディレクトリに`jquery-3.2.1.min.js`がダウンロードされます。
そのファイルは、Ionicプロジェクトの`src/assets/`に`plugin`フォルダをつくり、その中に配置します。（`src/assets/plugin/jquery-3.2.1.min.js`）

<h3>2. index.htmlで読み込む</h3>
`src/index.html`で、jQueryファイルを読み込みます。`<script src="build/main.js"></script>`の下に、以下を追記します。

```index.html
<script src="assets/plugin/jquery-3.2.1.min.js"></script>
```

<h3>3. 型定義ファイルを設置</h3>
Ionicでは、TypeScriptという型のあるJavaScriptを採用しています。そのため、jQueryの定義している関数（みなさんが何度も書く）`$`を使うためには、その型を定義してあげる必要があります。
型定義するファイルを設置するために、`src/`に`declarations.d.ts`を新規作成します。そして、以下を入力下さい。

```declarations.d.ts
declare const $: Function;
```

`$`は関数で定義してますよ、という一行となります。これを定義づけることによって、jQueryをIonic上のコードで扱うことができるようになります。
これで、使う用意は完了です。

なお、作業はGitHubでも公開しています。
https://github.com/Ionic-jp/ionic-jquery/commit/5e227e4061ba53a7bed5672ff5c3c38b459ee5f0


<h2>jQueryプラグインを使いたい</h2>
jQueryプラグインのひとつとして、[jQuery DrawSVG](http://leocs.me/jquery-drawsvg/)をサンプルに解説します。なお、「前述した`jQueryだけ使いたい`」を実装した次の話になります。

<h3>ダウンロードして、index.htmlで読み込む</h3>
[jQuery DrawSVG](http://leocs.me/jquery-drawsvg/)にアクセスして、`Download(zip)`からファイルをダウンロードします。そのフォルダにある`src/jquery.drawsvg.js`がプラグイン本体になりますので、それをIonicプロジェクトに移動します。さきほどのjQuery本体をいれたフォルダと同じ場所に移動します。（`src/assets/plugin/jquery.drawsvg.js`）

`src/index.html`で、jQueryファイルを読み込みます。jQuery本体読み込みの下に、以下を追記します。

```index.html
<script src="assets/plugin/jquery.drawsvg.js"></script>
```

<h2>プラグインを使う</h2>
使ってみましょう。特にIonicのスターターキットの指定はありませんが、仮に`blank`ではじめているとすると、以下のように追記します。

```src/pages/home/home.html
<ion-content padding style="background-color: #673ab7;">
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>

<!-- ここから追記 -->
  <div class="wrapper">
    <svg viewBox="0 0 175 256" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="175" height="256">
      <g stroke="#FFF" stroke-width="2" fill="none">
        <path d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" />
        <path d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" />
        <path d="M103.302 33H157v45H19V33h52.72" />
        <path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" />
        <path d="M18.696 103h137.896v.17" />
        <path d="M18.738 127h42.64v.308" />
        <path d="M18.738 155h137.854v.068" />
        <path d="M18.738 178h137.854v-.006" />
        <path d="M18.696 227h137.868v-.21" />
      </g>
    </svg>
  </div>
<!-- ここまで追記 -->
</ion-content>
```

追記したのは、`jQuery DrawSVG`のデモで使われているSVGパスです。[Simple usage](https://codepen.io/lcdsantos/pen/zvGXbr)からみることができます。
また、このSVGパスは白で、このままだと背景と同化してみえないの`<ion-content>`に背景色を設定しています（`<ion-content padding style="background-color: #673ab7;">`）

次に、jQueryプラグインの実行コードを書きます。

```src/pages/home/home.ts
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
  // ここから追記
  ionViewDidEnter(){
      $('p').text('Hello jQuery!');

      setTimeout(()=>{
          const $svg = $('page-home svg').drawsvg();
          $svg.drawsvg('animate');
      },100);
  }
  // ここまで追記
}

```
`ionViewDidEnter()`は、このページが表示される時に自動実行されるLifeCycleと呼ばれるメソッドです。これが実行されたら、jQueryのコードが実行されるようになっています。
`$('p').text('Hello jQuery!');`は、pタグの中を`Hello jQuery!`に書き換えます。表示してみると、書き換わっているのが確認できます。

```
setTimeout(()=>{
    const $svg = $('page-home svg').drawsvg();
    $svg.drawsvg('animate');
},100);
```

は、先ほど用意したSVGに、`jQuery DrawSVG`をつかってアニメーションを加えています。`setTimeout`で時間をずらしているのは確認しやすくするためなので、くくらなくても大丈夫です。

この変更も[GitHub](https://github.com/Ionic-jp/ionic-jquery/commit/e5d18dc8663e8dd20fc0a246f477e20a344cce48)でまとめています。

<h2>まとめ</h2>
以上で、IonicでjQueryとjQueryプラグインを使って実装しました。Ionic本体に多くのUIコンポーネントとアニメーションがあり、jQueryをわざわざ使わないといけない場面は限りなく少ないですが、Ionicを使う入り口になればと思います。

また入り口として、2018年1月（予定）に、Ionicの入門書もでますのでぜひご利用ください。

- [Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉 単行本（ソフトカバー）](http://amzn.to/2hriitD)

それでは、また。