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

こちらで紹介する方法はセクション単位でもページ単位でも有効な方法です。
ただし、同じページにコラム一覧を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件にしたいと思います。

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

getNewsList('./news/', 4)
          
            
          
        

お知らせページで一覧を表示する場合、お知らせページから見た詳細ページのパスは./post.htmlです。
表示件数を8件にしたければ、以下のように書きます。

getNewsList('./', 8)
          
            
          
        

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

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

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

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

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

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

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

<script type="module" src="./assets/js/index.js" defer></script>
          
            
          
        

そしてindex.jsに以下のように書きます。

import { getNewsList } from "./modules/get-news-list.js";

$(function () {
  // ----------------------------------------------
  // TOPページ
  // ----------------------------------------------

  // お知らせ一覧を取得
  getNewsList("./news/", 4);
});
          
            
          
        

ここで1行目のimport { ... } from " ~ "が初めてでてきました。

これはES modulesというJavaScriptの仕組みで、fromで指定されたファイルから、{ }で指定された名前の関数を呼び出すためのものです。
これを書かないとgetNewsList()は使えないので注意してください。

これでTOPページに一覧を表示する準備ができました。
まだ終わりではありません。

一覧を挿入するためのHTMLを指定する

JavaScriptによって一覧を挿入する準備ができました。
残るはどこに表示するか？ですが、これはHTMLを用意するだけです。

一覧を取得するための処理が記載されている/assets/js/modules/get-news-list.jsを見ましょう。
141行目あたりでHTMLに整形して実際に挿入するように書いているのですが、そこで指定しているセレクタは#js-getNewsListです。

// ページに挿入
$("#js-getNewsList").append(insertHtml);
          
            
          
        

つまり、一覧を表示させたいところに以下のようにhtmlを書けばOKです。

<div id="js-getNewsList"></div>
          
            
          
        

記事数が指定した表示件数よりも多くなった場合、もっと見るボタンを出したければHTMLに以下も追加します。

<div id="js-getNewsList"></div>    <!-- 記事一覧 -->
<div id="js-newsMoreButton"></div> <!-- もっと見るボタン -->
          
            
          
        

これで記事が表示されていると思います。

コラムの場合も同じ仕組みですが、id属性や関数名、jsのファイル名などは違うので、実際にファイルを辿ってみてみてください。

まとめ

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

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

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