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

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

サンプルサイトでは、新着情報を表示しています。

今のコードでは直接HTMLに3件記載して表示していますが、これでは以下のような問題があります。

情報の更新がある度に手作業で修正するのも、大量に情報があった時に全て手作業で追加するのも、面倒ですし、現実的ではありません。

そこで、この問題を解決するため、JavaScriptを使って新着情報のデータをサーバーから取得し、取得したデータの分だけ自動で画面に表示するよう、プログラミングします。

本内容は、1と2に分けて解説します。

1ではサーバーの環境構築、2ではサンプルサイトで新着情報を取得して表示する処理について解説します。

サーバーとは例えるなら、レストランのウェイターやキッチンをまとめたようなものです。ウェイターに注文するとキッチンから料理を持ってきてくれるような、依頼をするとデータを持ってきてくれる仕組みだとご理解頂けると良いと思います。

この後構築するサーバーを動かすために必要な環境を設定します。

こちらのサイトを参考に、node.jsをダウンロードし、インストールしてください。

ダウンロードサイトへはこちらからも直接アクセス可能です。

ご自身のパソコンのOSに合わせてnode.jsを選択し、ダウンロード、インストールをしてください。

プログラミング初心者の方は画面下部(以下キャプチャ部分)にある、インストーラをダウンロードしてインストールされることをお勧めします。

本キャプチャは2025年9月現在のダウンロード画面になります。

インストール完了後、以下のコマンドでnode.jsのバージョンとnpmのバージョンが表示されれば、成功です。

node -v
v11.11.1  // このバージョンはサンプルです

npm -v
5.55.5  // このバージョンはサンプルです

こちらのサイト（私のGitHubのリポジトリ）にアクセスしてください。

Codeのボタンをクリックし、Download ZIPをクリックします。

すると、sample-express-api-develop.zipというファイルがダウンロードされます。

ダウンロードされたファイルを任意のフォルダに配置します。

ここでは、Windowsの方向けにはCドライブ直下。Macの方向けにはホームディレクトリ直下に配置するものとします。

sample-express-api-develop.zipファイルをダブルクリックして解凍します。

解凍するとsample-express-api-developというフォルダになります。

シェルでsample-express-api-developフォルダに移動します。

Windowsの方はコマンドプロンプト、Macの方はターミナルを開き、それぞれ以下のコマンドを実行してください。

// Windows

cd C:\sample-express-api-develop

// Mac

cd ~/sample-express-api-develop

続いて、次のコマンドを実行します。

npm install

サーバーに必要な依存ライブラリがインストールされます。

ライブラリとは、開発でよく使われる便利なコードを集めたプログラムの部品やその集合体です。

もう少し分かりやすくいうと、例えば家を建てる時に、素手で木を切ったり、素手で鉄を加工して釘を作ったりするのは不便ですよね？

木を切るためのノコギリや釘はあらかじめ用意されていると便利だと思います。この例で言うところのノコギリや釘がライブラリだと思っていただければ良いと思います。

サーバーが家だとすると、そのサーバーを作るために使われている便利なコードがノコギリや釘で、それらを総称してライブラリと言います。

npm installを実行したことで、その便利なコードがインストールされたとご理解いただければ良いと思います。

シェルでsample-express-api-developフォルダに移動し、以下のコマンドを実行してください。

npm run dev

ブラウザで、「http://localhost:4000/news」にアクセスします。

以下のメッセージが表示されれば成功です。

{"message":[{"date":"20XX.XX.XX","title":"ニュース1がありました"},{"date":"20XX.XX.XX","title":"ニュース2がありました"},{"date":"20XX.XX.XX","title":"ニュース3がありました"}]}