今あなたが見ているWebサイトは動的に見えて実は静的？

フロントエンド技術が変える静的Webサイトの世界（3）―検索機能を持った静的Webサイトの実装―

2022年1月26日情報通信研究部藤本悠希

前回は、既存のコンテンツ配信型Webサイトにインタラクティブな機能を組み込むための準備としてプロジェクトテンプレートと環境構築方法について説明しました。

今回は、いよいよ、簡易検索機能の組み込みについて説明します。

前提

本記事を執筆するにあたっては、以下の環境で動作確認を行っています。前回と同様です。

OS: Windows 10 (21H1)
Node.js 14.17.6
Webブラウザー: Google Chrome 93.0.4577.82または、Microsoft Edge 94.0.992.31

ベースとするWebページ

ある会社のWebサイトのコラム一覧を表示する既存のページに簡易検索機能を追加します。Webサイトのサンプルコードは、以下からダウンロードしてください。

サンプルコード1（zip/15KB）

このWebサイトは、単一のページからなり、過去に発信されたコラムのタイトルが日付順に一覧表示されています。各コラムは「IT」、「環境・エネルギー」、「社会・経済・科学」の分野のいずれかに分類されています。また、各コラムのタイトルには該当コラムページへのリンクが設置されています。

本Webページは以下の2つのファイルで構成され、コラム一覧は、HTMLファイル中に、table要素として記述されています。

- index.html
- css/style.css

プロジェクトテンプレートへのベースWebページの取り込み

前回紹介したプロジェクトテンプレートの仕組みを活用して、Webページをテンプレートに取り込みます。

まず、上記の2ファイルをdistフォルダにコピーします。元々のdist/index.htmlは、上書きして構いません。

- dist/index.html
- dist/css/style.css

次に、index.htmlにmyfunctionを使用する記述を追加します。head要素の最後に、以下のようにscript要素を追記してください。


<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/myfunction.js"></script>
    <script>
      myfunction();
    </script>
</head>

以上で、ページ表示時にmyfunctionが実行されるようになります。前回紹介した通り、npm startコマンドを実行した上で、index.htmlをブラウザーで表示してみてください。編集前のベースWebページと同様の内容が表示され、かつ、「Hello, frontend!」や「under construction」といったメッセージが表示されるはずです。

コラム一覧表のReact化

プロジェクトテンプレートでは、Reactを用いることでインタラクティブな機能を実装することができます。手始めに、index.htmlに直接記述していたコラム一覧表を、Reactにより構築するよう、変更します。サンプルコードを以下からダウンロードし、

サンプルコード2（zip/46KB）

以下のようにファイルを配置してください。dist/index.html、src/index.jsは上書きして構いません。

- dist/index.html
- src/App.js
- src/articles.csv
- src/index.js
- webpack.common.js

次のコマンドを実行し、追加で必要となるパッケージをインストールします。
もし、前項からnpm startコマンドを実行中の場合は、一旦終了してから実行してください。

npm install csv-loader@3.0.3

npm startコマンドを再度実行し、index.htmlをブラウザーで表示すると、これまでと同様の表示がされるはずです。見た目は変わりませんが、ここで表示されているコラム一覧表は、前項と異なり、Reactにより構築されたものです。

Reactによる処理が記述されているのは、App.jsです。興味がある方は、React公式サイトのチュートリアル等を参考に、App.jsの記述を確認してみてください。

検索機能の実装

次に、コラム一覧表に検索機能を追加します。サンプルコードを以下からダウンロードし、

サンプルコード3（zip/46KB）

以下のファイルを上書きしてください。

- src/App.js

再度npm startを実行した上で、index.htmlをブラウザーで表示してください。すると、コラム一覧の直前に、検索ボックスと分野選択肢が表示されます。

*npm startを実行したままファイル上書きした場合、ファイルの変更が検知されない場合がありますので、一旦コマンドを終了後、再度実行してください。

検索ボックスに文字列を入力すると、タイトルに検索文字列が含まれるものが絞り込み表示されます。また、分野の選択肢を変更すると、コラムの分野によって絞り込みが行われます。

検索機能を追加するにあたってApp.jsに追加したコードは、数十行程度です。興味がある方は、どのようなコードが追加されたのか、上書き前後のファイルを比較して確かめてみてください。

おわりに

今回は、既存のコンテンツ配信型Webサイトをベースとして、Webフロントエンド技術を用いてインタラクティブな検索機能を実装する例について、説明しました。検索機能の中核となるファイル、App.jsは、全体でも100行程度です。簡単な検索機能程度であれば、Webフロントエンド技術を用いることで小規模なプログラムで実現することができます。

この連載により、静的なコンテンツしか扱えないからと、ご自身や組織のWebサイトにインタラクティブな要素を取り込むのを諦めていた方に、新たな選択肢を与えることができれば幸いです。また、現在Webフロントエンド技術について勉強されている方に、この記事が役立つことがあれば、嬉しく思います。

*今回利用したReactに関しては、インターネット上に多くの有用な情報やサンプルがありますが、後半2回の記事は、既存のWebサイトにReactの要素を取り入れるという視点で書いており、オーソドックスなReactに関する記事とは、少し毛色が異なります。React経験者の方にとっても、React活用方法のひとつとして参考になるものであることを願っています。

*本コラムに記載の製品、サービス名は各社の商標または登録商標です。