Loading

  • LIGHT

  • DARK

ROUTE

ルートゼロの
アクティビティ

Node.jsとExpressで文字起こしツールをサーバー経由でブラウザに表示する

2

バックエンド開発の第一歩

バックエンド開発を始めるにあたって、「サーバーを立ち上げる」という作業は最初に学ぶべき基本の一つです。しかし、サーバーってどうやって作るのか、何を使えばいいのか分からない方も多いかもしれません。
今回は、JavaScriptを使って簡単にサーバーを立ち上げる方法をご紹介します。そのために必要なのが「Node.js」というツールと、サーバー作成を簡単にしてくれる「Express」というライブラリです。
これを理解すれば、Webアプリケーション開発の第一歩が踏み出せますよ！

Node.jsとは？

Node.jsとは？

Node.jsは、「JavaScript」を使ってサーバーを動かすためのツールです。
通常、JavaScriptはWebページを作るために使われますが、Node.jsを使うと、サーバーでもJavaScriptを使ってプログラムを作ることができるんです。
簡単に言うと、Node.jsは「JavaScriptをサーバーでも使えるようにしてくれる魔法のツール」です。

また、Node.jsは非常に「速い」と言われていて、たくさんのリクエスト（アクセス）を一度にさばくのが得意です。
これが、例えばチャットアプリやリアルタイムのゲームなど、すばやく反応する必要があるアプリケーションにぴったりな理由です。

Node.jsの導入方法

それでは、Node.jsを実際に自分のパソコンにインストールしてみましょう。インストールはとても簡単です。

Node.jsをインストールする

まずは、Node.jsの公式サイトにアクセスし、インストールを行います。

  1. Node.jsの公式サイトにアクセス。

  2. 「LTSバージョン（推奨版）」というボタンをクリックして、インストーラーをダウンロードします。

  3. ダウンロードしたファイルを開いて、画面の指示に従ってインストールします。

インストールが終わったら、ターミナル（またはコマンドプロンプト）を開いて、以下のコマンドを実行します。

node -v

このコマンドを実行すると、Node.jsのバージョンが表示されるはずです。表示されれば、インストールは成功です！

npm（エヌピーエム）を使う

Node.jsには「npm（エヌピーエム）」という便利なツールもついてきます。
npmは、JavaScriptで使うライブラリやツールを簡単にインストールできるツールです。
これを使って、後でExpressも簡単にインストールすることができます。

Expressを使ってサーバーを立ち上げよう！

Node.jsがインストールできたら、次に「Express」を使ってサーバーを立ち上げます。
Expressは、Node.jsで簡単にWebサーバーを作るためのツールです。
これを使うと、面倒な設定や作業を最小限に抑えつつ、サーバーを作成することができます。

以下は、Expressを使ってサーバーを立ち上げる手順です。

新しいプロジェクトを作成

まずは、新しいフォルダを作り、その中で作業を始めます。
ターミナル（またはコマンドプロンプト）で以下のコマンドを実行します。 

# 新しいディレクトリ「my-express-app」を作成し、その中に移動
  mkdir script-app
  cd script-app
  
  # プロジェクトの設定ファイル（package.json）を作成
  # 「-y」をつけることで、すべての質問に自動で「はい」と答えることができます
  npm init -y

Expressのインストール
次に、Expressライブラリをインストールします。
これにより、Expressを使用できるようになります。 

# Expressをインストールする
  # 「--save」をつけると、インストールしたライブラリがpackage.jsonに記録され、依存関係として追加されます
  npm install express --save

サーバーファイルの作成

次に、サーバーを実行するための「index.js」というファイルを作成し、以下のコードを追加します。

// Expressを使うために必要なモジュールを読み込む
  const express = require('express');
  
  // Expressアプリケーションを作成
  const app = express();
  
  // サーバーが動作するポートを指定（3000番ポート）
  const port = 3000;
  
  // ルート（"/"）にアクセスがあった場合に「Hello, Express!」を返す処理
  app.get('/', (req, res) => {
    res.send('Hello, Express!');
  });
  
  // サーバーを指定したポートで立ち上げる
  // サーバーが立ち上がったことをコンソールに出力
  app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
  });

サーバーを起動

最後に、サーバーを起動するためのコマンドを実行します。

# 作成したサーバーファイルを実行して、サーバーを起動
  node index.js

これで、ブラウザで http://localhost:3000 にアクセスすると、「Hello, Express!」と表示されるはずです。

これで、Node.jsとExpressを使ったサーバーの立ち上げが完了です。

HTMLを表示してみよう！

HTMLを表示してみよう！

これまでのステップでは、サーバーを立ち上げる方法を学びましたが、次は実際に文字起こしツールをブラウザで表示させる方法に進んでいきましょう！

前回の記事で作成した文字起こしツールを、サーバーを使ってブラウザで表示する方法を紹介します。先程立ち上げたサーバーに、HTMLページとしてそのツールを追加し、ブラウザで動作させることで、静的なHTMLページと動的な文字起こしツールを簡単に表示させることができます。

フォルダ構成

ここでは、作成したプロジェクトのフォルダ構成を示します。この構成を基に、必要なファイルを整理していきます。

.
  ├── public                   # 静的ファイルを格納するフォルダ
  │   └── index.html            # 文字起こしツールのHTMLファイル
  ├── index.js                  # Expressサーバーのメインファイル
  ├── package-lock.json         # npmの依存関係のロックファイル
  └── package.json              # プロジェクトの設定と依存関係を記載したファイル

  • public フォルダ: 静的なファイル（ここでは
    index.html）を格納します。ブラウザで表示されるHTMLファイルやCSS、JavaScriptファイルなどをここに保存します。

  • index.js ファイル: Expressサーバーを立ち上げ、public フォルダの中の index.html をブラウザに返す役割を担います。

  • package.json と package-lock.json: プロジェクトの依存関係や設定を管理するファイルです。npm install
    を実行すると、依存関係がここに記載されます。

このように、プロジェクトの構成を理解しておくことで、後の作業がスムーズに進みます。次に、サーバーの設定やHTMLファイルをどのように組み込んでいくかを説明していきます！

1. 文字起こしツールのHTMLファイルを作成

まずは、文字起こしツールのコードをHTMLファイルとして作成し、プロジェクト内のpublicフォルダに保存します。ファイル名は index.html
としましょう。以下のような内容です。 

<!DOCTYPE html>
  <html lang="ja">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>文字起こしツール</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .main {
          width: 100%;
          padding: 1% 5%;
          margin: 0 auto;
          max-width: 80%;
        }
        .balloon-top {
          position: relative;
          display: inline-block;
          margin: 1.5em 0;
          padding: 7px 10px;
          min-width: 120px;
          max-width: 100%;
          color: #555;
          font-size: 16px;
          background: #fff;
          border: solid 3px #555;
          border-radius: 20px;
          box-sizing: border-box;
        }
        .balloon-top:before {
          content: "";
          position: absolute;
          top: -24px;
          left: 50%;
          margin-left: -15px;
          border: 12px solid transparent;
          border-bottom: 12px solid #fff;
          z-index: 2;
        }
        .balloon-top:after {
          content: "";
          position: absolute;
          top: -30px;
          left: 50%;
          margin-left: -17px;
          border: 14px solid transparent;
          border-bottom: 14px solid #555;
          z-index: 1;
        }
        .balloon-top p {
          font-size: 20px;
          margin: 20px;
          padding: 0;
        }
      </style>
  </head>
  <body>
    <div class="main">
      <div class="speech__bubble">
        <div class="balloon-top">
          <p id="result_text"></p>
        </div>
      </div>
    </div>
  
    <script>
      window.onload = function () {
        const recognize = () => {
          const SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
          const e = document.getElementById("result_text");
          const message = document.createElement("p");
          message.textContent = "マイクの許可をしてください。";
          message.style.color = "red";
          document.body.appendChild(message);
  
          let recognition;
          let currentHTML = "";
  
          const init = () => {
            recognition = new SpeechRecognition();
            recognition.lang = "ja-JP";
            recognition.continuous = false;
            recognition.interimResults = true;
  
            recognition.onresult = (event) => {
              const text = event.results[0][0].transcript;
              e.innerHTML = currentHTML + text;
              if (event.results[0].isFinal) {
                restart();
              }
            };
  
            recognition.onspeechstart = () => {
              currentHTML = "";
            };
  
            recognition.onerror = restart;
            recognition.onsoundend = restart;
          };
  
          const restart = () => {
            recognition.stop();
            init();
            recognition.start();
          };
  
          init();
          recognition.start();
        };
  
        recognize();
      };
    </script>
  </body>
  </html>

サーバーの設定を修正

次に、index.jsで静的ファイル（HTMLファイル）を提供する設定を追加します。publicフォルダにあるindex.htmlをブラウザで表示できるようにします。

const express = require('express');
  const path = require('path');
  const app = express();
  const port = 3000;
  
  // 静的ファイルをpublicフォルダから提供する設定
  app.use(express.static(path.join(__dirname, 'public')));
  
  // ルート（"/"）にアクセスがあった場合にtranscription.htmlを返す処理
  app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
  });
  
  // サーバーを指定したポートで立ち上げる
  app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
  });

この設定により、index.htmlがブラウザに表示され、文字起こしツールが動作するはずです。

3. サーバーを再起動

サーバーの設定を変更したので、再度サーバーを起動します。

node index.js

4. ブラウザで確認

最後に、ブラウザで http://localhost:3000
にアクセスしてみましょう。すると、作成した文字起こしツールが表示され、音声認識機能が動作するはずです！

文字起こしツール_実行イメージ

最後に

これで、Node.jsとExpressを使って、文字起こしツールをブラウザで表示させる方法を学びました！サーバーの立ち上げから、静的ファイルの提供、そして音声認識を活用したツールの表示まで、バックエンド開発の基礎をしっかりと理解できたと思います。

今後は、さらに高度な機能や動的な処理を追加することで、よりインタラクティブなWebアプリケーションを作成できるようになります。例えば、データベースを使って録音した音声を保存したり、ユーザー管理機能を追加したり、さまざまな機能が広がります。

ぜひ、今回学んだ内容を活かして、自分だけのアプリケーションを作り上げていってください。次のステップへ進むための第一歩を踏み出せたことをお祝いします！次回の記事では、さらに進んだバックエンド開発に挑戦していきましょう。お疲れさまでした！

2

Follow Us

RANKINGranking-icon

LATEST POSTS

SNS Feeds

YouTube

@routezero_shinnsotsu

@routezero_shibasuke

RECRUIT

募集要項・エントリー

中途採用エントリーはこちら

2025年新卒エントリーはこちら

社長と直に面談したい!
社長に直談判

管理職を目指すあなたは
まずは岡本を倒せ!

もっとルートゼロを知りたいなら

DISCOVER MORE