【初心者でも簡単！】JavaScriptで始める簡単プログラミング｜音声文字起こしツール作成ガイド

はじめに

プログラミングに興味があるけれど、何から始めたらいいのか迷っていませんか？
この記事では、初心者でも扱いやすいプログラミング言語「JavaScript」に注目し、その魅力や可能性をお伝えします。

JavaScriptは、Webサイトやスマホアプリ、シンプルなゲームなど、身近なものを作るのに使われるプログラミング言語です。
これからプログラミングを始めたいけれど、「何から手をつければいいのかわからない…」そんなあなたに向けて、この記事では次のポイントをご紹介します！

JavaScriptを使ってどんなものが作れるのか
初心者でも取り組みやすいプロジェクト例
学び始めるための具体的なヒント

JavaScriptは、簡単なコードでパッと見てわかる成果が出せるので、プログラミングを始めるのにピッタリの言語です！
この記事を読んで、「これなら自分にもできそう！」と感じてもらえるきっかけになれば嬉しいです。

JavaScriptを使ってどんなものが作れるのか

JavaScriptは、私たちの生活の中でよく使われているアプリケーションやツールを作るための、汎用性の高いプログラミング言語です。
たとえば、以下のようなものを作ることができます。

・Webサイト
ボタンをクリックしたときの動きや、入力フォームのチェックなど、Webページに動きをつけることができます。
（例：ショッピングサイトの検索機能）

・スマホアプリ
JavaScriptはスマホアプリ開発にも利用できます。フレームワークを使えば、iOSやAndroidアプリを簡単に作成可能です。

・ゲーム
シンプルなブラウザゲームや、アニメーションを駆使したゲームもJavaScriptで作れます。
（例：パズルゲームやシューティングゲーム）

・ツールやガジェット
簡単な計算機やToDoリストなど、日常生活を便利にするツールも作れます。

JavaScriptは、初心者でも扱いやすいだけでなく、Webからモバイル、ツール開発まで幅広い用途で活躍します。
特別な環境を用意しなくても、ブラウザさえあればすぐに始められる手軽さも魅力です！

初心者でも取り組みやすいプロジェクト例

初心者でも取り組みやすいプロジェクト例：音声文字起こしツール

JavaScriptを使うと、話した言葉をリアルタイムで文字に変換する音声文字起こしツールを簡単に作れます。
このプログラムでは、ブラウザの音声認識APIを利用して、以下を体験できます。

・HTMLとCSSで吹き出し風のデザインを作成
・JavaScriptで音声認識機能を実装し、話した内容を画面に表示

ブラウザで動作するシンプルなツールなので、コードをコピーして試すだけで楽しめます。
短時間で「作る楽しさ」を感じられるプロジェクトです！

音声文字起こしツールを作る手順

1. HTMLファイルを作成する

まず、コードを記述するためのHTMLファイルを作成します。

パソコンの任意のフォルダに移動します。
テキストエディタ（例：メモ帳、VS Code）を開きます。
次の手順でHTMLファイルを保存します：
メニューから「名前を付けて保存」を選択。
ファイル名を speech-to-text.html とし、ファイルの種類を「すべてのファイル」に設定。
文字コードを UTF-8 にして保存。

2. コードをコピーして貼り付ける

以下のコードをコピーして、speech-to-text.html に貼り付けます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>文字起こし</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .main {
        width: 100%;
        padding: 1% 5%;
        margin: 0 auto;
        max-width: 80%;
        max-height: 20%;
      }
      .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: 40px;
        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>

3. ブラウザでファイルを開く

保存した speech-to-text.html を右クリックして、「プログラムから開く」→「Google Chrome」や「Microsoft Edge」を選択します。
ページが表示されたら、ブラウザからマイクの許可を求められるので「許可」をクリックします。

4. 動作を確認する

マイクに向かって話すと、画面上にリアルタイムで文字が表示されます。
話し終わると、音声認識が自動的に再起動して、次の入力が可能になります。

このツールを使えば、JavaScriptでプログラムを作る楽しさを実感できるはずです。コードを編集するうちに、「どうやってこれをもっと良くできるだろう？」と自然に考えるようになり、学びが深まります。

では、次に何を学べばよいのでしょうか？ここからは、JavaScriptをさらに活用してスキルを伸ばすための具体的なヒントをいくつかご紹介します。

学び始めるための具体的なヒント

ブラウザで簡単に試せる環境を活用する

特別なツールをインストールしなくても、ブラウザとテキストエディタだけでJavaScriptの学習が可能です。例えば、Chromeの「デベロッパーツール（F12キー）」を使って、コードを実験できます。

小さな目標を設定して練習する(最も重要！)

ボタンを押すと色が変わるページを作る
入力した名前を画面に表示する
このように簡単な機能から始めると、達成感を味わいながら進められます。

実際に手を動かして学ぶ(最も重要！)

「作りながら覚える」ことが上達の近道です。今回の音声文字起こしツールをアレンジして、自分なりにカスタマイズすることで理解が深まります。

身近なアイデアをプログラムにする

日常で使いたい小さなツールやアプリを作ってみましょう。例えば、「計算機」「簡単なメモアプリ」など、役に立つものを作ると学習意欲が湧きます。

おわりに

この記事では、JavaScriptで作れることや初心者向けの音声文字起こしツールを紹介しました。JavaScriptは、簡単なコードで実用的なものを作れる上、幅広い用途に活用できる初心者に最適な言語です。

初めてのプログラミングは不安もありますが、シンプルなプロジェクトから始めることで、楽しさを実感しながらスキルを伸ばせます。失敗を恐れず、少しずつ目標を積み重ねていきましょう。

ぜひ、この記事をきっかけにコードを書き始めて、「プログラミングって楽しい！」と感じる体験をしてみてください。次の一歩を応援しています！

ROUTE

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

【初心者でも簡単！】JavaScriptで始める簡単プログラミング｜音声文字起こしツール作成ガイド

はじめに

JavaScriptを使ってどんなものが作れるのか