JavaScript replaceを使ったWebアプリの実例と高校生にもわかりやすい使い方の紹介

プログラミング
2025.05.28
ハムケン
ハムケン

今回は、「おみくじ」のWebアプリの作り方を説明していきます。
JavaScriptのreplace関数を使っているので、是非解説も確認してね。

はじめに

この記事では、JavaScriptのreplace関数を使って作られた「もふもふおみくじ」というWebアプリを紹介します。高校生にも理解しやすい内容で、プログラミングの基本を学ぶのにぴったりな題材です。

【もふもふおみくじ】の動くサンプルはこちら

この記事で学べること

この記事で学べること
  • replace関数による文字列の置きかえ
  • 配列と乱数によるランダムな選択
  • HTMLとJavaScriptの連携方法
  • イベント処理（ボタンが押されたときの動作）

もふもふおみくじってなに？

「もふもふおみくじ」は、JavaScriptというプログラミング言語を使って開発された、シンプルでかわいらしいおみくじアプリです。

「おみくじを引く」ボタンを押すと、決まった文章の一部がランダムな内容に変わり、その結果が画面に表示されます。

たとえば、運勢が「大吉」や「中吉」、ラッキーアイテムが「ぬいぐるみ」や「ピンクのペン」になるといった具合です。毎回結果が変わるので、繰り返し楽しめる工夫がされています。

文字を入れかえる仕組みとは？

このアプリでは、テンプレートとして
「今日の運勢は【運勢】。ラッキーアイテムは【アイテム】です。」
という文章を使用し、【運勢】と【アイテム】の部分をJavaScriptのreplace関数でランダムな言葉に置きかえています。

replaceは、指定した文字列を別の文字列に置きかえるための関数です。
たとえば、「【運勢】」を「大吉」、「【アイテム】」を「ぬいぐるみ」に置きかえると、自然な文章が完成します。このような仕組みによって、テンプレートを元にして多様な結果を自動で生成できます。

コードを見やすく分ける工夫

アプリのコードは、HTMLとJavaScriptに分かれています。HTMLはWebページの見た目や構造を作るもので、ボタンや表示エリアなどのレイアウトが定義されています。

一方、JavaScriptはページの動きを決める役割を持ち、ボタンが押されたときに実行する処理や、乱数を使ったランダムな選択、replaceによる文字列の置きかえ処理が記述されています。

このようにコードを分けておくことで、読みやすくなり、後からの修正や機能追加も行いやすくなります。

毎回ちがう結果が出る理由

replace関数だけではなく、Math.randomなどのランダムな値を生成する関数も組み合わせて使うことで、ボタンを押すたびに違う結果が表示される仕組みになっています。

たとえば、「【運勢】」の部分に「大吉」「中吉」「凶」などからランダムに一つを選び、文章の中に埋め込むことで、毎回異なるおみくじ結果を表示できます。このように、ランダム性と置きかえ機能を組み合わせることで、動きのあるインタラクティブなアプリが完成します。

高校生におすすめの学習素材

「もふもふおみくじ」は、プログラミングを学び始めたばかりの高校生にとって理想的な練習素材です。特別なツールや難しいライブラリを使わず、基本的なJavaScriptだけで構成されているため、初心者にも扱いやすい構成になっています。

さらに、見た目を自分好みにカスタマイズすることで、デザインのセンスも養えます。友達や家族に見せて楽しんでもらうことで、達成感も得られるでしょう。

ソースコードを書こう

それでは、HTMLとJavaScriptのソースコードを実際に書いていきましょう。今回は公開するソースコードをコピペするだけで大丈夫です。

また、HTMLとJavaScriptはそれぞれ、テキストファイルに記載してファイル名の拡張子を.htmlと.jsに変更してください。

HTMLを作ろう

HTMLファイルの全文はこちらになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>もふもふおみくじ</title>
  <style>
    body {
      font-family: 'Hiragino Maru Gothic ProN', sans-serif;
      background: #fffaf5;
      text-align: center;
      padding: 40px;
    }
    h1 {
      color: #d35d7c;
    }
    .omikuji-box {
      margin-top: 20px;
      background: #ffeef0;
      border: 3px solid #f7c5cc;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    button {
      background: #f7c5cc;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
    }
    button:hover {
      background: #f49ba0;
    }
  </style>
</head>
<body>

  <h1>もふもふおみくじ</h1>
  <button onclick="drawOmikuji()">おみくじを引く</button>

  <div class="omikuji-box" id="result">
    結果がここに表示されます。
  </div>

  <script src="script.js"></script>
</body>
</html>

基本構造

<!DOCTYPE html>
<html lang="ja">

この部分でHTML文書の種類と使用言語（日本語）を定義しています。

ヘッダー内の要素

<head>
  <meta charset="UTF-8">
  <title>もふもふおみくじ</title>

文字コードはUTF-8で、日本語の表示に対応。ブラウザのタブに表示されるタイトルは「もふもふおみくじ」です。

CSSスタイル

<style> タグ内に記述されたCSSにより、ページの見た目が柔らかくかわいらしく装飾されています。

ポイント
  • body：全体に丸ゴシック系フォントを適用し、背景色はベージュ系。
  • h1：タイトルの色をピンク系に。
  • .omikuji-box：結果表示用の枠を淡いピンクで囲み、影をつけて立体感を出しています。
  • button：背景ピンク、丸みを帯びたボタンで、ホバー時に色が少し濃くなります。

本文（<body>）内の構成

タイトル

<h1>もふもふおみくじ</h1>

中央に大きく表示されるアプリのタイトルです。

ボタン

<button onclick="drawOmikuji()">おみくじを引く</button>

クリックされると drawOmikuji() というJavaScript関数が実行されます（詳細は script.js に記述されています）。

結果表示エリア

<div class="omikuji-box" id="result">
  結果がここに表示されます。
</div>

この div 要素にJavaScriptの処理によってランダムなおみくじの結果が表示されます。

外部JavaScriptファイルの読み込み

<script src="script.js"></script>

script.js という別ファイルに記述されたJavaScriptコードを読み込んでいます。このファイルにランダムな文字列置換処理などが実装されており、ユーザーの操作に応じて画面が変化する動的な動作を可能にしています。

JavaScriptを作ろう

JavaScriptファイルの全文はこちらになります。

function randomFrom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function drawOmikuji() {
  const template = "今日の運勢は【運勢】。ラッキーアイテムは【アイテム】です。";
  const unseiList = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];
  const itemList = ["ぬいぐるみ", "肉まん", "ピンクのペン", "もふもふクッション", "猫のキーホルダー"];

  const result = template
    .replace("【運勢】", randomFrom(unseiList))
    .replace("【アイテム】", randomFrom(itemList));

  document.getElementById("result").textContent = result;
}

関数①：randomFrom(arr)

function randomFrom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}
ポイント
  • 役割：配列 arr の中からランダムに1つ要素を選び、それを返す関数です。
  • Math.random() は 0 以上 1 未満の小数を返す関数。
  • Math.floor() は小数点以下を切り捨てる関数。
  • arr.length は配列の長さ。
    → 組み合わせることで、arr のインデックス範囲からランダムな整数を取得できます。

この関数は、運勢やラッキーアイテムをランダムに選ぶために使用されています。

関数②：drawOmikuji()

function drawOmikuji() {
  const template = "今日の運勢は【運勢】。ラッキーアイテムは【アイテム】です。";
ポイント
  • template は、おみくじのベースとなる定型文です。
  • 【運勢】 と 【アイテム】 の部分が後ほど置き換えられます。
const unseiList = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];
  const itemList = ["ぬいぐるみ", "肉まん", "ピンクのペン", "もふもふクッション", "猫のキーホルダー"];
ポイント
  • unseiList：運勢を表す候補のリスト
  • itemList：ラッキーアイテムの候補リスト
const result = template
    .replace("【運勢】", randomFrom(unseiList))
    .replace("【アイテム】", randomFrom(itemList));
ポイント
  • replace() を2回使って、それぞれのキーワードをランダムに選ばれた値に置換。
  • randomFrom() 関数を用いて、それぞれの配列から1つずつ選択しています。
document.getElementById("result").textContent = result;
ポイント
  • HTML内の id="result" を持つ要素（結果表示ボックス）に対して、生成された文章 result をテキストとして表示します。

replaceの応用アイデア

replace関数は、おみくじのようなアプリ以外にもさまざまな場面で使えます。

応用サンプル
  • 毎日のテンプレートを使った日記自動作成アプリ
  • 顔文字や絵文字の自動変換機能
  • NGワードを伏せ字や別の言葉に変換するフィルター

このように、アイデア次第でreplace関数は実用的にも娯楽的にも活用できます。今回紹介した「もふもふおみくじ」の仕組みを応用して、自分だけのオリジナルアプリを作ってみるのもおすすめです。

おわりに

JavaScriptのreplace関数は、使い方が簡単でありながら、幅広い応用ができる便利な機能です。「もふもふおみくじ」のように、テンプレートの一部を置きかえるだけで、楽しいWebアプリを作ることが可能になります。

このアプリを通して、プログラミングの基本に触れ、自分のアイデアを形にする楽しさを感じてください。まずは身近なところからはじめて、楽しみながらスキルを伸ばしていきましょう！

作り方が知りたいWebアプリがあればコメントください♪
出来る範囲で解説していきたいと思います😸

コメント

タイトルとURLをコピーしました