フロントエンドエンジニア養成所

サーバーから新着情報を取得する Part2

前回の記事の続きになります。

こちらの記事では、サンプルサイトで新着情報を取得して表示する処理について解説していきます。

コーディング

前提として、サーバーを動かしているものとします。(手順はPart 1の記事を参照)

サンプルサイトのindex.htmlにある、埋め込みのニュースは不要になるので削除します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>サンプルサイト</title>
    <link rel="stylesheet" media="all" href="css/style.css" />
    <link rel="stylesheet" media="all" href="css/reset.css" />
    <script src="./js/index.js"></script>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-top">
                <h1 class="logo"><a href="index.html">Sample</a></h1>
                <label for="toggle" class="toggle-btn-open" onclick="onClickToggle()">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
                <div class="toggle-btn-close" onclick="onClickToggle()"></div>
                <div class="tel">TEL：00-0000-0000</div>
            </div>
            <div class="nav">
                <ul class="nav-list" role="list">
                    <li class="nav-item"><a href="#">ホーム</a></li>
                    <li class="nav-item"><a href="#">会社概要</a></li>
                    <li class="nav-item"><a href="#">事業内容</a></li>
                    <li class="nav-item"><a href="#">採用情報</a></li>
                    <li class="nav-item"><a href="#">お問い合わせ</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div>
        <img src="img/mainimg.png" alt="メイン画像" class="main-img">
    </div>
    <div class="content">
        <div class="container">
            <div class="sidebar">
                <ul role="list">
                    <li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
                    <li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
                    <li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
                </ul>
            </div>
            <div class="news">
                <h2 class="h2">新着情報</h2>
                <ul role="list">
                    <!-- ここから -->
                    <li>20XX.XX.XX　〜なニュースがありました</li>
                    <li>20XX.XX.XX　〜なニュースがありました</li>
                    <li>20XX.XX.XX　〜なニュースがありました</li>
                    <!-- ここまで削除してください -->
                </ul>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <a href="index.html" class="logo">Sample</a>
                <div class="copyright">Copyright © SAMPLE</div>
            </div>
        </div>
    </footer>
</body>
</html>

次に、サンプルサイトのindex.jsに以下の処理を追加します。

window.onload = async function() {
    await fetch("http://localhost:4000/news").then(res => {
        return res.json();
    }).then(res => {
        const news = document.querySelector('.news ul');
        const fragment = document.createDocumentFragment();
        res.message.forEach(function(item) {
            const liElement = document.createElement('li');
            liElement.textContent = `${item.date}　${item.title}`;
            fragment.appendChild(liElement);
        });
        news.appendChild(fragment);
    });
}

処理の流れ

window.onload = async function() { ... }
「ページが全て読み込まれてから、この処理を実行してください」 という意味です。
- window → 今開いているブラウザのページ全体のこと
- onload → ページが読み込み終わったときに動くイベント
- function() { ... } → 実際に動かしたい処理を書いた部分(関数)
つまり、
「ページのHTMLや画像など、すべて準備ができたら、この中の処理を動かす」
という役割を持っています。

async という言葉がついていますが、これは関数の中で await を使うためにつけています。
await は「データが返ってくるまで待ってから次の処理をする」という意味です。

このコードでは サーバーにデータを取りに行く処理（fetch） がありますので、
サーバーからデータが返ってくるまで待つ必要があります。よって、async、 await を使っています。

レストランで例えるなら、「ご飯を食べる」という行動をするために店員さんにメニューを注文します。
ご飯を食べるという行動をするためには、料理人の人が料理を作って店員さんが料理を持ってくるのを待たなければいけません。
この「料理人の人が料理を作って店員さんが料理を持ってくるのを待つ」部分がawaitの部分になります。
fetch("http://localhost:4000/news")
→ サーバー（http://localhost:4000/news）にデータを取りに行きます。
.then(res => res.json())
→ サーバーから返ってきたデータを「JSON形式」に変換します。
JSONはプログラムで扱いやすいデータの形とご理解いただければと思います。
.then(res => { ... })
→ JSONに変換されたデータを受け取って処理します。
res の中にサーバーから送られたニュースの一覧が入っています。
const news = document.querySelector('.news ul');
→ index.htmlの中にある「.news ul（class="news"の中のulタグ）」を探して変数に入れます。

ニュースのリストをここに追加する準備です。
const fragment = document.createDocumentFragment();
→ まとめて要素を追加するための「入れ物」を作ります。
これを使うと効率よくHTMLに要素を追加できます。
res.message.forEach(function(item) { ... })
→ サーバーから受け取ったニュース一覧を1つずつ取り出して処理します。
- document.createElement('li') → <li>タグを作る
- liElement.textContent = ... → <li>に「日付とタイトル」の文字を入れる
- fragment.appendChild(liElement) → 作った要素をまとめておく「入れ物」に追加する
news.appendChild(fragment);
→ 最後に、7でまとめて作った <li> のリストをindex.htmlの5で取得したnewsに追加します。
結果として、画面にニュース一覧が表示されます。

動作確認

サンプルサイトを開き、動作を確認してみましょう。

以下のキャプチャのように表示されていれば成功です。

前のページ次のページ

サーバーから新着情報を取得する Part2

コーディング

処理の流れ

動作確認

このサイトを運営している人