【初心者エンジニアメモ】JavaScriptで出来る事10選

JavaScriptはWebサイトやアプリケーションの開発に欠かせないプログラミング言語です。しかし、JavaScriptで具体的に何ができるのか、知っていますか？この記事では、JavaScriptで出来る事を10個紹介します。JavaScriptの魅力や可能性を知って、ぜひ学習のモチベーションにしましょう。

1. Webサイトの画面に動きを与える
- マウスオーバーでメニューを開閉する例
2. アプリケーションを作る
- お絵かきツールの作成例
3. サーバーと通信して情報を送受信する
- Ajaxを用いたデータの非同期取得と表示
4. サーバーサイドのシステム開発
- Node.jsを用いたサーバーサイド開発の例
5. スマホアプリの開発
- React Nativeを用いたスマホアプリの開発
- Ionicを用いたスマホアプリの開発
6. Googleサービスと連携したシステム開発
- Google Apps Scriptを用いた連携の例
7. ブラウザ拡張機能を作る
- ブラウザ拡張機能の基本構造
- ブラウザ拡張機能の作成手順
8. Webサイトのテストや自動化
- Seleniumを用いたWebサイトの自動化
- Puppeteerを用いたWebサイトの自動化
9. WebサービスのAPIを利用する
- Twitter APIを利用した例
- Google Maps APIを利用した例
10. マシンラーニングやAIを使う
- TensorFlow.jsを用いた機械学習の実例
- Brain.jsを用いた機械学習の実例
まとめ

1. Webサイトの画面に動きを与える

JavaScriptは、Webサイトの画面に動きを与えることができます。これにより、ユーザーはより魅力的でインタラクティブなウェブページを体験することができます。

例えば、画像がスライドして切り替わったり、マウスオーバーでメニューが開いたり、ボタンをクリックするとポップアップが表示されたりといったことが可能です。

これらの機能は、HTMLやCSSだけでは実現できません。JavaScriptはブラウザ上で動作するので、ページを読み込むだけで動きが見られます。

マウスオーバーでメニューを開閉する例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .menu {
      display: none;
    }
    .menu:hover {
      display: block;
    }
  </style>
</head>
<body>
  <div class="menu" onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </div>
</body>
</html>

上記のコードでは、マウスオーバー時にメニューが表示され、マウスが外れると非表示になります。これにより、ユーザーがメニューにマウスを置くことで、動的なメニューの開閉を実現しています。

JavaScriptを活用することで、Webサイトをより魅力的に、そしてユーザーフレンドリーにすることができます。興味を引き、ユーザーの滞在時間を増やし、効果的なコンテンツを提供することが出来ます。JavaScriptの力を活かして、インタラクティブなWebサイトを構築しましょう。

2. アプリケーションを作る

JavaScriptは、単なるウェブページの装飾や動作だけでなく、本格的なアプリケーションを作成する強力なツールとなっています。

これにより、お絵かきツールやゲームなどのインタラクティブなアプリケーションを開発することが可能になります。HTMLのcanvas要素※1を活用することで、図形や画像を描画したり、アニメーションやエフェクトを付けたりすることができます。

※1...HTMLの<canvas>要素は、静的または動的なグラフィックスや描画をウェブページ上に表示するためのHTML5の要素です。<canvas>要素は、JavaScriptを使用して、図形、画像、アニメーションなどを動的に描画するのに使用されます。

お絵かきツールの作成例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    let painting = false;

    canvas.addEventListener('mousedown', () => {
      painting = true;
    });

    canvas.addEventListener('mouseup', () => {
      painting = false;
      ctx.beginPath();
    });

    canvas.addEventListener('mousemove', draw);

    function draw(e) {
      if (!painting) return;

      ctx.lineWidth = 5;
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'black';

      ctx.lineTo(e.clientX, e.clientY);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(e.clientX, e.clientY);
    }
  </script>
</body>
</html>

このコードでは、HTMLのcanvas要素とJavaScriptを利用して、お絵かきツールを作成しています。ユーザーがマウスでドラッグすることで線を描画することができます。

JavaScriptを用いたアプリケーション開発は、ウェブサイトだけでなく、スマートフォンやタブレットなどのデバイスでも利用可能です。

3. サーバーと通信して情報を送受信する

JavaScriptは、ウェブアプリケーションにおいてサーバーとの通信を効果的に行うための強力なツールとして利用されています。

特にAjax（Asynchronous JavaScript and XML）を使用することで、ページをリロードすることなくデータを非同期でサーバーから取得し、それを表示に反映することが可能です。

これにより、Webサイトやアプリケーションはより動的でリアルタイムな情報を提供できるようになります。Googleマップなどの多くのWebサービスでAjaxが広く利用されています。

Ajaxを用いたデータの非同期取得と表示

以下は、Ajaxを使ってサーバーからデータを非同期で取得し、それをウェブページに表示する簡単な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="data-container">
    <p>ここにデータが表示されます。</p>
  </div>
  <button id="fetch-data">データを取得</button>

  <script>
    const dataContainer = document.getElementById('data-container');
    const fetchDataButton = document.getElementById('fetch-data');

    fetchDataButton.addEventListener('click', () => {
      // XMLHttpRequestを用いてサーバーからデータを取得
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/data', true);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          dataContainer.innerHTML = `<p>${data.message}</p>`;
        }
      };

      xhr.send();
    });
  </script>
</body>
</html>

このコードでは、ボタンをクリックするとJavaScriptがAjaxリクエストをサーバーに送り、サーバーからの応答を受けてデータを表示します。ここではサーバーからのJSON形式のデータを取得し、それをウェブページに挿入しています。

JavaScriptを用いたサーバーとの通信により、Webサイトやアプリケーションはユーザーに対してリアルタイムで最新の情報を提供し、動的な機能を実現することができます。これはユーザーエクスペリエンスを向上させます。

4. サーバーサイドのシステム開発

JavaScriptは、かつては主にクライアントサイドの開発言語として知られていましたが、近年ではサーバーサイドのシステム開発にも広く活用されています。

この転換の要因として、Node.jsという環境の台頭が挙げられます。Node.jsは、V8 JavaScriptエンジンに基づく非同期型のイベント駆動型の設計により、高速かつ効率的に動作する特徴を持ち、サーバーサイドの処理をJavaScriptで実行できるようにします。

Node.jsを用いたサーバーサイド開発の例

以下は、Node.jsを使って簡単なサーバーを立ち上げ、クライアントからのリクエストに応じてレスポンスを返す例です。

Node.jsのインストールとサーバーの作成

まず、Node.jsをインストールします。次に、以下のコードを含むserver.jsというファイルを作成します。

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

const PORT = 3000;
const HOST = '127.0.0.1';

server.listen(PORT, HOST, () => {
  console.log(`Server running at http://${HOST}:${PORT}/`);
});

サーバーの起動

ターミナルで以下のコマンドを実行し、サーバーを起動します。

node server.js

ウェブブラウザからアクセス

ウェブブラウザでhttp://127.0.0.1:3000/にアクセスすると、「Hello, World!」と表示されます。

この例では、Node.jsを使用してシンプルなHTTPサーバーを作成し、クライアントのリクエストに対して「Hello, World!」というレスポンスを返しています。

Node.jsは豊富なライブラリやフレームワークが提供されており、これらを活用することで、複雑なサーバーサイドのシステムやAPIを効率的に開発することができます。また、フロントエンドとバックエンドの両方をJavaScriptで統一的に開発することができるため、開発者は1つの言語でアプリケーション全体を構築することができます。これは開発効率を向上させる大きなメリットとなります。 JavaScriptのサーバーサイドでの活用は、近年ますます拡大しており、今後のWeb開発の主流となることが期待されています。

5. スマホアプリの開発

JavaScriptは、近年スマートフォンアプリケーションの開発に広く活用されています。これは、React NativeやIonicといったフレームワークが登場し、JavaScriptを用いてクロスプラットフォームのモバイルアプリケーションを開発することが可能になったからです。

クロスプラットフォーム開発では、1つのコードベースを元にiOSやAndroidなど複数のプラットフォームに対応したアプリケーションを効率的に制作することができます。

React Nativeを用いたスマホアプリの開発

React Nativeは、Facebookによって開発されたJavaScriptベースのフレームワークであり、ネイティブなモバイルアプリケーションを構築するための強力なツールとなっています。

React Nativeのセットアップ

まず、React Nativeをインストールします。

npm install -g react-native-cli

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

新しいReact Nativeプロジェクトを作成します。

react-native init MyMobileApp
cd MyMobileApp

アプリケーションの実行

React Nativeのプロジェクトを実行します。

react-native run-ios  # iOSシミュレータでアプリケーションを実行

react-native run-android  # Androidエミュレータでアプリケーションを実行

これで、React Nativeを用いたスマートフォンアプリケーションの開発が始まります。JavaScriptをベースにした開発でありながら、生成されるアプリケーションはネイティブアプリとして実行されるため、ユーザーエクスペリエンスが向上します。

Ionicを用いたスマホアプリの開発

Ionicは、Web技術（HTML、CSS、JavaScript）を用いてクロスプラットフォームのモバイルアプリケーションを作成するフレームワークです。

Ionicのセットアップ

Ionicをインストールします。

npm install -g @ionic/cli

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

新しいIonicプロジェクトを作成します。

ionic start MyIonicApp blank
cd MyIonicApp

アプリケーションの実行

Ionicのプロジェクトを実行します。

ionic serve  # Webブラウザでアプリケーションを実行

これで、Ionicを使用してスマートフォンアプリケーションの開発が始まります。Ionicでは、Web技術を活用して魅力的なユーザーインターフェースを持つモバイルアプリケーションを簡単に作成することができます。

JavaScriptを用いたスマートフォンアプリケーションの開発は、多くのプラットフォームに対応するアプリケーションを効率的に制作するための強力な手段となっています。

また、これらのフレームワークは豊富なコミュニティとドキュメントを提供しており、初心者から経験豊富な開発者まで幅広く活用されています。スマートフォンアプリケーションの開発において、JavaScriptはますます重要な役割を果たしています。

6. Googleサービスと連携したシステム開発

JavaScriptを用いてGoogleサービスと連携することで、便利なツールや自動化システムを開発することが可能です。

Google Apps Scriptという環境を利用することで、JavaScriptでGoogleのサービスを操作したり、データを取得したり、処理を実行したりすることができます。これは、Googleドライブ、Gmail、カレンダーなどのサービスにアクセスするための手段として非常に便利です。

Google Apps Scriptを用いた連携の例

以下は、Google Apps Scriptを使ってGoogle Sheetsにデータを書き込む簡単な例です。

Google Sheetsの新規スクリプト作成

Google Sheetsを開き、メニューから「ツール」→「スクリプトエディタ」を選択して新しいスクリプトを作成します。

スクリプトの作成

以下のようにスクリプトを作成します。

function writeToSheet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow(["John Doe", "johndoe@example.com"]);
}

このスクリプトは、現在アクティブなスプレッドシートの最終行にデータを追加するものです。

実行

スクリプトエディタで「実行」ボタンをクリックすると、スクリプトが実行されます。

このようにして、JavaScriptを使ってGoogle Sheetsにデータを書き込むことができます。これにより、Google Sheetsをデータベースのように活用することが可能となります。

JavaScriptを用いてGoogleサービスと連携することで、自動化されたプロセスや便利なツールを作成できます。例えば、特定の条件でメールを送信したり、スプレッドシートのデータを定期的に更新したりすることができます。これにより、業務効率が向上し、作業の手間を軽減することが可能です。

7. ブラウザ拡張機能を作る

JavaScriptを用いてブラウザ拡張機能を作成することで、Webブラウザの機能をカスタマイズしたり、新しい機能を追加したりすることが可能です。これにより、自分自身の好みやニーズに合わせたブラウザ環境を構築することができます。主に、ChromeやFirefox、Edgeなどのブラウザで利用される拡張機能の開発が一般的です。

ブラウザ拡張機能の基本構造

ブラウザ拡張機能は、主に以下の要素から構成されます。

マニフェストファイル（manifest.json）: 拡張機能の設定や権限、ファイルの読み込みなどを定義するJSON形式のファイル。
HTMLファイル: ユーザーインターフェースやポップアップ、オプションページなどのHTMLファイル。
JavaScriptファイル: 拡張機能の動作や挙動を制御するJavaScriptファイル。
CSSファイル: ユーザーインターフェースのスタイリングを行うCSSファイル。

ブラウザ拡張機能の作成手順

マニフェストファイルの作成

まず、拡張機能の設定を定義するマニフェストファイル（manifest.json）を作成します。

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "My custom browser extension",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

HTML、JavaScript、CSSファイルの作成

次に、拡張機能のユーザーインターフェースや機能を定義するHTML、JavaScript、CSSファイルを作成します。

popup.html（ポップアップページ）

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <button id="myButton">Click me</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('myButton').addEventListener('click', () => {
  alert('Button clicked!');
});

styles.css

body {
  width: 200px;
  height: 150px;
}

拡張機能の読み込み

ブラウザで拡張機能を読み込むために、拡張機能の設定画面からマニフェストファイルを選択します。

これで、拡張機能アイコンをクリックするとポップアップが表示され、ボタンをクリックするとアラートが表示される簡単な拡張機能が作成されました。

JavaScriptを用いてブラウザ拡張機能を作成することで、広告の非表示、カスタム機能の追加、テーマの切り替えなど、ブラウザをより便利に、自分好みにカスタマイズすることができます。 JavaScriptを活用して、自分だけのブラウザ環境を構築してみましょう。

8. Webサイトのテストや自動化

JavaScriptを用いることでWebサイトのテストや自動化することが出来ます。SeleniumやPuppeteerといったツールは、ブラウザを制御して自動化されたテストやタスクを実行することができ、これにより開発者はコードの品質を保ちながら開発効率を向上させることができます。

Seleniumを用いたWebサイトの自動化

Seleniumは、ブラウザを自動で制御して動作させるためのツールであり、多くのプログラミング言語で利用可能です。以下ではJavaScriptを使ったSeleniumの簡単な例を示します。

Seleniumのインストール

まず、Node.jsを使ってSelenium WebDriverをインストールします。

npm install selenium-webdriver

Webサイトの自動操作

以下のコードはGoogleのトップページを自動で開き、検索ボックスにキーワードを入力して検索する例です。

const { Builder, By, Key, until } = require('selenium-webdriver');

async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('https://www.google.com');
    await driver.findElement(By.name('q')).sendKeys('Selenium', Key.RETURN);
    await driver.wait(until.titleIs('Selenium - Google Search'), 1000);
  } finally {
    await driver.quit();
  }
}

example();

このスクリプトは、Googleのトップページを開いて検索ボックスに"Selenium"と入力し、検索を実行します。

Puppeteerを用いたWebサイトの自動化

Puppeteerは、ヘッドレスブラウザを制御することでWebサイトの自動化を行うためのツールであり、Googleが提供しています。

Puppeteerのインストール

Node.jsを使ってPuppeteerをインストールします。

npm install puppeteer

Webサイトの自動操作

以下のコードはGoogleのトップページを自動で開き、検索ボックスにキーワードを入力して検索する例です。

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await page.type('input[name="q"]', 'Puppeteer');
  await page.keyboard.press('Enter');
  await page.waitForSelector('h3');

  const links = await page.evaluate(() => {
    const anchors = Array.from(document.querySelectorAll('h3'));
    return anchors.map(anchor => {
      const title = anchor.textContent;
      const url = anchor.parentElement.href;
      return `${title} - ${url}`;
    });
  });

  console.log(links.join('\n'));
  await browser.close();
}

run();

このスクリプトは、Googleのトップページを開き、検索ボックスに"Puppeteer"と入力して検索を実行し、検索結果のタイトルとURLを取得して出力します。

JavaScriptを使ったWebサイトの自動化にはさまざまな可能性があります。これにより、テストの自動化やタスクの自動化、スクレイピングなどを行うことで、品質の向上や効率化を実現できます。自動化の導入により、開発者はより効率的に作業を進めることができ、プロジェクト全体の品質向上に寄与します。

9. WebサービスのAPIを利用する

JavaScriptを用いてWebサービスのAPIを利用することで、他のサービスの機能やデータを取得・操作することができます。APIは、アプリケーション同士がデータや機能を共有するための架け橋であり、開発者はこれを活用することで効率的にサービスを拡張することができます。

Twitter APIを利用した例

Twitter APIを利用して、特定のユーザーの最新のツイートを取得する例を示します。

Twitter Developer アカウントの作成

Twitter Developer ポータルでアカウントを作成し、APIキーとアクセストークンを取得します。

JavaScriptでAPIを利用する

以下のようなJavaScriptコードで、Twitter APIを利用して特定のユーザーの最新のツイートを取得することができます。

const axios = require('axios');

const bearerToken = 'YOUR_BEARER_TOKEN';  // 取得したBearer Tokenを設定
const userId = 'USER_ID';  // 取得したいユーザーのIDを設定

const apiUrl = `https://api.twitter.com/2/tweets?user_id=${userId}&tweet.fields=text,created_at`;
const headers = {
  'Authorization': `Bearer ${bearerToken}`
};

axios.get(apiUrl, { headers })
  .then(response => {
    const tweets = response.data.data;
    tweets.forEach(tweet => {
      console.log(`Tweet: ${tweet.text} | Created at: ${tweet.created_at}`);
    });
  })
  .catch(error => {
    console.error('Error fetching tweets:', error);
  });

このコードでは、axiosを利用してTwitter APIにリクエストを送信し、特定のユーザーの最新のツイートを取得してコンソールに表示します。

Google Maps APIを利用した例

Google Maps APIを利用して、地図を表示する例を示します。

Google Cloud Platform アカウントの作成

Google Cloud Platformでアカウントを作成し、APIキーを取得します。

JavaScriptでAPIを利用する

以下のようなJavaScriptコードで、Google Maps APIを利用して地図を表示することができます。

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps API Example</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 400px;"></div>

  <script>
    function initMap() {
      const location = { lat: 37.7749, lng: -122.4194 };  // サンフランシスコの座標
      const map = new google.maps.Map(document.getElementById('map'), {
        center: location,
        zoom: 12
      });

      const marker = new google.maps.Marker({
        position: location,
        map: map,
        title: 'San Francisco'
      });
    }
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

このコードでは、Google Maps APIを読み込み、サンフランシスコの地図を表示し、マーカーを設定しています。

このように、JavaScriptを用いてWebサービスのAPIを利用することで、他のサービスの機能やデータを取得・操作することができます。

10. マシンラーニングやAIを使う

JavaScriptを用いてマシンラーニングやAIを活用することで、高度な分析、予測、生成などの機能を実現することができます。特に、TensorFlow.jsやBrain.jsといったライブラリを利用することで、JavaScriptを介して機械学習モデルを作成・実行することが可能です。これにより、様々なタスクにおいてAIの恩恵を受けることができます。

TensorFlow.jsを用いた機械学習の実例

TensorFlow.jsは、Googleが開発した機械学習ライブラリであり、JavaScript上で機械学習モデルを構築・トレーニング・実行することができます。以下では、簡単なニューラルネットワークを使った手書き数字の認識を行う例を示します。

TensorFlow.jsのインストール

まず、TensorFlow.jsをインストールします。

npm install @tensorflow/tfjs

ニューラルネットワークの構築

以下のようなコードで、単純なニューラルネットワークを構築します。

import * as tf from '@tensorflow/tfjs';

const model = tf.sequential();
model.add(tf.layers.dense({ units: 128, activation: 'relu', inputShape: [784] }));
model.add(tf.layers.dense({ units: 10, activation: 'softmax' }));

model.compile({
  optimizer: 'adam',
  loss: 'sparseCategoricalCrossentropy',
  metrics: ['accuracy']
});

データの準備とモデルのトレーニング

手書き数字のMNISTデータセットを利用してモデルをトレーニングします。

// データの読み込みと前処理は省略

const numEpochs = 10;
const batchSize = 32;

await model.fit(trainImages, trainLabels, {
  epochs: numEpochs,
  batchSize,
  validationData: [valImages, valLabels],
  callbacks: tf.callbacks.earlyStopping({ monitor: 'val_loss', patience: 2 })
});

予測

トレーニングされたモデルを用いて手書き数字の認識を行います。

const prediction = model.predict(inputData);

Brain.jsを用いた機械学習の実例

Brain.jsは、JavaScriptで実装された機械学習ライブラリであり、ニューラルネットワークを構築することができます。以下では、Brain.jsを使った単純なチャットボットを作成する例を示します。

Brain.jsのインストール

まず、Brain.jsをインストールします。

npm install brain.js

データとモデルの準備

チャットボットのためのデータセットとモデルを準備します。

const data = [
  { input: 'こんにちは', output: 'こんにちは！' },
  { input: 'ありがとう', output: 'どういたしまして！' },
  // 他の会話ペアも同様に追加
];

const net = new brain.recurrent.LSTM();
const trainingData = data.map(item => ({
  input: item.input,
  output: item.output
}));

net.train(trainingData, { iterations: 2000 });

チャットボットの利用

トレーニングされたモデルを使ってチャットボットを利用します。

const output = net.run('こんにちは');
console.log(output);  // 'こんにちは！'

以上のように、JavaScriptを利用してTensorFlow.jsやBrain.jsといったライブラリを活用することで、機械学習やAIの機能を組み込んだアプリケーションを開発することができます。これにより、画像認識や自然言語処理、チャットボットなど幅広い分野でAIの能力を活用したアプリケーションを作成することが可能となります。

まとめ

JavaScriptはWebサイトやアプリケーションの開発に欠かせないプログラミング言語です。この記事では、JavaScriptで出来る事を10個紹介しました。JavaScriptは画面に動きを与えたり、サーバーと通信したり、さまざまなデバイスやサービスと連携したり、マシンラーニングやAIを使ったりすることができます。JavaScriptは多様な分野で活躍するプログラミング言語です。ぜひJavaScriptの魅力や可能性を知って、学習のモチベーションにしましょう。