Node.js で地震情報の取得とか

これは 防災アプリ開発 Advent Calendar 2023 5日目の記事です。
前日 (12月4日) は Fukushimacam｜黒板ちゃん さんの「アナログ情報で防災・減災」でした。

はじめに

• 初めて記事を書いたので、誤字・脱字等が多分あります
• この記事はプログラミングはじめたてほやほやな方に向けて書いています
• わかりやすくするため、解説を雑にしたり、端折ったりしてることがあります

自己紹介

はじめまして、しろねです。
中学3年生で受験生の人です。

私は今年に入ってからプログラミングを勉強し始め、Pythonで地震情報を通知するソフトを作ったり、JavaScriptなどで地震情報の震度情報を地図に描画するWebアプリを作ったりしてました。

ですが、11月になって全くコードを書いていなかったので、この記事では初心を思い出しながら進めていこうと思います。

環境

• Windows 11
• Node.js v20.10.0 LTS

使用するAPI

地震関連の界隈では多くの人に使われているP2P地震情報の P2P地震情報 API v2 を使用します。

とりあえず環境構築

既に環境構築ができている人は飛ばしてもらって大丈夫です。

1. Node.js の導入

ダウンロード

アクセスしたら以下のような画像のサイトに飛ばされると思います。
ここでは安定版である Recommended For Most Users の方をダウンロードしましょう。
バージョンは添付画像と違うかもしれませんが、とりあえず左側のボタンをクリックすればOK！

インストール

インストーラーを起動して Next をポチポチ押しましょう！とても簡単ですね！

この画面ではネイティブモジュールの開発に必要なツール類をインストールするかどうかを選択できます。通常は不要なのでチェックを外した状態で Next を押しましょう。

インストールが完了したらコマンドプロンプトやターミナルを起動して node -v を実行しましょう。
実行して Node.js のバージョンが返されればインストールに成功しています。もし、エラーを吐いてしまったら Google 先生に聞いてください！

2. テキストエディタについて

Windowsには標準でメモ帳というテキストエディタがインストールされていますが、プログラミング向きではありません。

プログラミングに適したテキストエディタとして、Visual Studio Code や Vim、サクラエディタなどがありますが、多くの人に使われている Visual Studio Code をおすすめします。拡張機能が豊富ですし、問題が起きたときにはググればすぐに解決するからです。

なお、この記事では導入についての解説はしないため、Google先生に聞いてください！

コードを書こう！

1. 地震情報を取得する！

とても簡単に取得ができちゃいます。

async function main() {
  // 最新の地震情報が取得できるURL
  const API_URL = 'https://api.p2pquake.net/v2/history?codes=551&limit=1';

  // リクエスト
  const res = await (await fetch(API_URL)).json(); 
}

解説

3行目はAPIのURLを API_URL に代入しています。

6行目は API_URL に代入されているURLにリクエストして、レスポンスをJSON (正しくは JavaScript オブジェクト) に変換したものを res に代入しています。

fetch() とは

fetch() とは、WebブラウザやNode.jsなどの環境で利用できる、HTTPリクエストを発行するためのAPIです。
簡単に言えば、サーバーにあるデータを取得することができるものです。(たぶん)

2. 必要な情報を取り出す！

取得したJSON形式のデータから必要な情報 (今回は震央地名と深さ) を取り出します。

取得したデータは以下のようなものになっています。

震央地名は配列の1つ目の earthquake の hypocenter の name にあることがわかり、深さは同じく hypocenter の depth にあることがわかります。

さて、実際にコード書いてみましょう。

async function main() {
  // 最新の地震情報が取得できるURL
  const API_URL = 'https://api.p2pquake.net/v2/history?codes=551&limit=1';

  // リクエスト
  const res = await (await fetch(API_URL)).json();


  ///// 追加 /////

  // 震央地名
  const epicenterName = res[0].earthquake.hypocenter.name;

  // 深さ
  const depth = res[0].earthquake.hypocenter.depth;

  // コンソールに出力
  console.log(epicenterName, depth); 
}

解説

// 震央地名
const epicenterName = res[0].earthquake.hypocenter.name;

この行では、前のコードで取得した地震情報（res）から、配列の1つ目（res[0]）を取り出し、その中の earthquake の hypocenter から name を取得しています。name には震央地名が格納されています。それを epicenterName という変数に代入しています。

深さの取得についても同様です。

実行してみよう！

先ほどのコードを実行してみてください。これで震央地名と深さが出力できるはずです。

出力結果 (例)

宮城県沖 50

震央地名や深さ以外にも取り出せる情報はたくさんあるので P2P地震情報 API仕様書 を見ながら試してみてください！

最後に

最後まで読んでいただきありがとうございます！！！

今回、初めて記事を書きました。
簡単だと思っていましたが、文章を考えるってのはかなり頭使いますね…

ちなみに、今回書いたコードはフロントエンドでも使用できるので (たぶん)、興味があればWebアプリの開発に挑戦してみてください！

それでは！