お知らせやコラム一覧を挿入したい

Update Information
2023年09月29日

こちらで紹介する方法はセクション単位でもページ単位でも有効な方法です。
ただし、同じページにコラム一覧を2箇所といったことはできないのでご注意ください。

一覧挿入の仕組み

まずはどのようにして一覧を挿入しているのか知ることから始めましょう。

お知らせもコラムも基本的には同じ処理をしていて挿入する要素が違うくらいなので、ここではお知らせに絞って解説します。

一覧を出力するための処理

一覧を取得する処理は/assets/js/modules/get-news-list.jsで管理しています。

処理の内容を詳しく説明するには時間と文章量がかかるので簡単に説明すると、

  • microCMSからお知らせAPIを呼び出す
  • APIをHTMLに整形する
  • 該当のid属性の要素に整形したHTMLを挿入する

といった感じです。

これがベースで、サムネイルが指定されてなかったら・・とか、カテゴリを指定したら・・とか、条件に応じて整形するHTMLを変えたり、もっとみるボタンとかページング出すとか、色々なケースを想定して書いているのでコードが長くなっています。

で、基本的にはこのファイルだけでお知らせ一覧を表示する処理が完結していて関数化までしているので、差し込みたいページのJavaScriptファイルでこの関数getNewsList()を呼び出すだけです。（※呼び出す際に引数をとるので別途説明します）

だけなんですが、ES modulesというJavaScriptの仕組みを利用しているので、関数を呼び出す際に書き方があります。

一覧を出力するための関数

getNewsList()という関数を使用するとお知らせ一覧が取得できるのですが、引数が二つ必要になります。

第一引数に、「お知らせ詳細ページまでのパス」を、第二引数に「一覧表示する記事の上限数」を指定します。

例えば、TOPページでお知らせ一覧を出力したいとします。
お知らせ詳細ページのパスはTOPから見て./news/post.htmlとし、記事の表示数を4件にしたいと思います。

これを関数で呼び出す際には以下のように書きます。

第一引数のパスを理解するのが少し難しいかもしれません。

ただ、このように詳細ページまでの途中のパスだけを指定することで、どこのページに一覧を呼び出しても、処理内容を少しも変更することなく使い回すことができるのです。

これはコラム一覧を取得する関数getColumnList()も同様の仕組みになっています。

ページに挿入するためのscript

関数の使い方がわかったところで、もう一息です。
実際にTOPページにお知らせ一覧を挿入するとしたらどう書くか。

まずはTOPページ固有のJavaScriptファイルがあるかheadタグから確認してください。
デフォルトだとcommon.jsの下にindex.jsが指定されていると思います。

なければ/assets/js/index.jsのファイルを作成して、TOPページ（/index.html）のheadタグ内、common.jsの下に以下のようにscriptを挿入します。
type="module"とdefer属性は必ず入れてください。

まとめ

長々と書いてしまいましたが、一覧を挿入する場合は以下の手順でOKです。

  1. ページ固有のjsファイルで一覧取得の関数を呼び出す（getXxxxList()）
  2. htmlで一覧を表示したい箇所に該当するid属性の要素を指定する

やっていることが理解できれば簡単に挿入できると思うので、ぜひ理解を深めながらコーディングしてみてください。


Back Column