React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには

TypeScriptで記述しているReactアプリケーションをWebpackでビルドしている開発環境で、jQueryライブラリをあわせて使う構成について調べたことをまとめてみました。

ここでは、前回の記事 「TypeScript,WebPackを利用したReactJS開発環境セットアップまとめ」で構築したプロジェクトに、jQuery Bootstrapを追加してみます。

jQueryは、TypeScriptのコンパイルはimportで通りますが、そのままでは、jQueryがbundle.jsに含まれません。
jQueryをbundle.jsに含めるためには、ProvidePluginを利用することで解決できます。
また、jQuery本体については、CDNからjsを含めても依存の問題は発生しにくいので、scriptタグで指定してしまうのが良い気もします。

ReactでBootstrapを使いたい場合は、React-Bootstrapを使うほうが筋が良いと思いますが、ここではあえて本家のBoostrapを利用してみます。

パッケージのインストール

jqueryとbootstrap、その型定義をインストールします
また、bootstrapのPopoverはpopper.jsに依存しているのでpopper.jsも追加しておきます

$ npm install --save jquery @types/jquery bootstrap @types/bootstrap popper.js

“React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには” の続きを読む

JsRender – jQueryとの組み合わせで使うテンプレートエンジン

jQueryをそのまま利用しているWebアプリでは、クライアント側のテンプレートエンジンはしばらくjQuery Templateを使っていましたが、いつのまにかjQueryのテンプレートエンジンはJsRenderというテンプレートエンジンに移行していました。

経緯は「Dancing with Data: jQuery Templates and JsViews: The Roadmap」に書いてあります。

Github: https://github.com/borismoore/jsrender

使い方はリファレンスに詳しい説明があるので、ここではJsRenderを使い始める手順についてデモのサンプルコード01_inserting-data.htmlを使って説明します。
“JsRender – jQueryとの組み合わせで使うテンプレートエンジン” の続きを読む

bootstrap-datepicker使い方まとめ

DatePickerコンポーネントは、Bootstrapの標準のJavascriptコンポーネントに含まれていませんので、DatePickerを使いたい場合はbootstrap-datepickerを追加する必要があります。
bootstrap-datepicker

bootstrap-datepickerはオリジナルのものと機能強化されたものがあるようですが、私は後者を使っています。

オリジナル: Datepicker for Bootstrap, from Twitter
上記の機能強化版:
Webサイト: bootstrap-datepicker — bootstrap-datepicker documentation
Github: https://github.com/eternicode/bootstrap-datepicker

“bootstrap-datepicker使い方まとめ” の続きを読む

Bootstrap でオートコンプリート検索付きプルダウンリストを実装するには typeahead.js が便利

Bootstrapで、オートコンプリートで絞り込む検索ボックスを実装しようと思ってプラグインを探したところ typeahead.js がよく使われていそうな感じだったので試してみました。

先に説明用のコード全体を貼りました。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/typeahead.css">
  </head>
  <body>

  <div class="container">
    <div class="form-group">
      <label>Station</label>
      <input type="text" class="form-control">
    </div>
  </div>

  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/typeahead.bundle.min.js"></script>
  <script>
    var engine = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: [{ value: '東京' }, { value: '新宿' }, { value: '池袋' }, { value: '渋谷' }]
    });

    engine.initialize();

    $(':input').typeahead(null, {
      name:'stations',
      source: engine.ttAdapter()
    })
  </script>
  </body>
</html>

ブラウザで表示するとこんな感じです。

typeahead-example

  1. 必要なフィアルの読み込み

上記の例では、スタイルシートは css ディレクトリに、Javascriptは js ディレクトリに入れています。

typeahead 本体のjsは、Githubリポジトリ から取得した typeahead.bundle.js を js ディレクトリに置いています。

ところで、typeaheadのリポジトリにはなぜか、cssが含まれていません。
検索すると、Bootstrap3 用の typeahead.js のCSSはいくつか見つかるので、とりあえず hyspace / typeahead.js-bootstrap3.less を試しました。
typeahead.js-bootstrap3.less から typeahead.css を追加しています。

  1. テキストボックスに対して Typehead を有効にする
  $(':input').typeahead(null, {
    name:'stations',
    source: engine.ttAdapter()
  })

typehead の第1引数は、オプションを指定します。全部デフォルトの場合は null を指定しておきます。

第2引数は、データセット のオプションを指定します。

  • name: プルダウンのclass名に使われます。
  • displayKey: デフォルトでは、プルダウンオプションの値とラベルはどちらも value が使われますが、表示用フィールドを別にしたい場合は displayKey で指定できます。
  • source: 第1引数にtypeaheadを有効にしたテキストボックスに入力された文字列、題2引数にコールバックが渡される関数を指定します(例: examplesのThe Basic)。または、パッケージに含まれるスジェッションエンジン Bloodhound を利用することもできます。上記の例では Bloodhound を使っています。
  1. Bloodhoundを初期化

source に直接関数をしていするよりも、機能が豊富な Bloodhound を利用する方がおすすめです。

  var engine = new Bloodhound({
    datumTokenizer: function(d){ return d.value },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [{ value: '東京' }, { value: '新宿' }, { value: '池袋' }, { value: '渋谷' }]
  });

初期化のオプション
以下の項目を押さえれば後は、Githubのドキュメントやソースをみれば応用できると思います。

  • datumTokenizer: 必須です。Javascriptオブジェクトの配列(Datums)の各要素を引数に取り、検索対象のプロパティを返す関数を指定します。
  • queryTokenizer: 必須です。テキストボックスに入力された文字列を引数に取り、適当に文字列を分割した配列を返します。英語だと空白で分割してさらに絞り込みとかできますが、日本語だとあまり使えなさそう。
  • local: 最初に保持しておく、Datums
  • prefetch: 最初にAjaxでロードするDatums
  • remote: local または prefetch で最初に用意したデータで間に合わなくなった場合に、さらにAjaxでDatumsをロードする場合に指定します。

今回は、検索対象がデータベースで、それなりに量が多かったので、remoteを指定してサーバーから候補を取得するように実装しましたが、リクエストのタイミングも良きに計らってくれるのでとても便利です。

参考:
ちょっと古いのでscript側は使えませんが、サーバー再度まで含めた例が参考になります。
Bootstrap Auto Complete in php mysql | jQuery Auto Suggest