ES2015 で LazySearch のサイト内検索ライブラリを開発した
サイト内検索サービス LazySearch の課題のとして使い始めるまでに JS で処理を書く必要があり煩雑という問題があります。サイト登録まで到達した後に, さらに JSON/JSONP で Search API に問い合わせる処理を JS で書かなければなりませんでした。 JS で処理を書く, といっても検索結果のデザインやページネーションまで含めればサクッと書けるものでもありません。 そこで JSライブラリを置けばサイト内検索機能が使える を目標に JS ライブラリ lz.js を開発しています。 リポジトリ: https://github.com/fillin-inc/lazysearch-js 目標仕様 モダンブラウザ + Edge + IE10-11 をサポート JS ライブラリを配置し, form タグの hidden に指定されたパラメータを指定する 検索結果はモーダル表示 PC, タブレット, スマホでそれぞれレスポンシブに対応 開発環境 webpack + Babel css-loader + style-loader を使った CSS ロード html-loader を使った HTML テンプレートの読み込み Pure JS をベースに必要最低限のライブラリで実装 なぜ ES2015 で作ってみてどうだったか 世代的に JS を始めた頃には便利な jQuery がすでにありました。しかし, ES2015 ではより表現しやすい構文が用意され, モダンブラウザではブラウザ間の差異を(そこまで)気にする必要がなかったので苦労はありませんでした。...