環境はWindows(WSL)

面白かったのが、その会社の開発環境がWindows(WSL)ということ
Node.js(というかモダンなウェブ系システム開発)はMacのほうが向いていそうな気がするけど、そういうわけでもないのか

ということで、今回は珍しくWindowsでウェブ開発です
まずはWSLを起動してみます

自分のマシンにはインストール済みなので、もし未インストールであれば以下のコマンドでインストールします

Power Shellを管理者権限で開いて以下を実行
wsl --install

起動すると以下のようになりました

以下の方法でWSLにNode.jsをインストールします
(記事執筆時点の最新版はv0.40.7でした)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash
source ~/.bashrc
nvm install --lts
node -v
npm -v 

インストールが完了し、各バージョンが表示されればNode.jsのインストールは完了です

次にプロジェクトフォルダを作成します

mkdir ~/express-hello
cd ~/express-hello
npm init -y 

ちなみに、作成したディレクトリにエクスプローラーからアクセスする場合は、以下のパスをエクスプローラーに直接貼り付けて移動します

WSLのファイルは仮想ドライブに保存されるようで、エクスプローラーから直接参照する場合はUNCパスを使用するようだ

\\wsl.localhost\Ubuntu\home\[ユーザー名]

次にフレームワークであるExpressをインストールします

npm install express

次に「index.js」を作成しますが、ここでVSCodeとWSLを連携できるように設定しておきます

まずはVSCodeの拡張機能をインストールします

その後、WSLから「code .」を実行します
VSCodeが自動で立ち上がり、ファイルが連携されます

以下のように「index.js」を作成しました

const express = require('express');

const app = express();
const port = 3000;

app.get('/', (req, res) => {
	res.send('Hello World!');
});

app.listen(port, () => {
	console.log(`Example app listening at http://localhost:${port}`);
});

※ちなみにHello WorldコードはAI生成です・・・

実際に起動させます

node index.js

上記表示が行われたのち、「http://localhost:3000」にアクセスすれば、「Hello World」が表示されます

おまけで、Hello WorldのTypeScript版
これから開発を行うのであれば、TypeScriptを利用しない理由はないでしょう

import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (_req: Request, res: Response) => {
	res.send('Hello World!');
});

app.listen(port, () => {
	console.log(`Example app listening at http://localhost:${port}`);
});

TypeScriptを使用する場合は、コンパイルしてから実行する

npm run build
npm start

以上

ということで、とりあえずWindowsからExpressを触ってみる内容でした
環境周りの設定はWindowsだと苦戦する印象でしたが、Node.jsの導入からVSCode連携までかなりスムーズに設定できました

何となくWeb開発はMacという印象でしたが、ここまで簡単に環境構築できるのであれば、Windows機での開発も悪くないかもしれません
(自宅PCの場合、遊び用：Windows、開発用：MacBookで明確に役割を分けてしまっているから、個人開発は今後もMacです)

作りながら学ぶWebプログラミング実践入門 一冊で学ぶフロントエンドHTML／CSS JavaScript ReactバックエンドNode.js Express

created by Rinker

¥3,168 (2026/11/05 21:37:01時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

Web Development with Node and Express Leveraging the JavaScript Stack【電子書籍】[ Ethan Brown ]

created by Rinker

¥3,890 (2026/11/05 21:37:01時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 WindowsでExpressを動かしHello Worldを表示する は Sheltie Garage Tech に最初に表示されました。

OGPタグはなぜ必要？

XServerさんの説明はこちら
https://www.xserver.ne.jp/bizhp/open-graph-protocol/

ざっくりな内容として「SNSなどにリンクをシェアしたときに、タイトルや画像を表示するための仕組み」です
今回、趣味開発しているWebアプリに「SNSで投稿内容をシェアするためのURLを発行する」機能を追加するにあたり、X(Twitter)などに画像やタイトルを表示させる必要があったため、OGPタグを追加することにしました。
(ちなみに、自分が作成しているサイトはライダー向けツーリングスポット共有サイトで、マップ上にスポットを投稿できるようなWebサイトです)

↓こんな感じで、Xポスト内に投稿した内容が画像付きで表示されるようになります

ヤギ！柵まで近づいてきてくれて可愛かった！
https://t.co/YMV9Hki6hV #ProjectRIDE #ツーリング

— ProjectRIDE (@ProjectRID46883) October 1, 2025

Next.jsでOGPタグを返却する仕組み

Next.jsで開発するアプリでOGPタグを返却する場合、以下の2通りの方法が利用できます

• metadataオブジェクトを定義し、固定値を返却
• generateMetaData関数を定義し、動的な値を返却

metadataオブジェクトを使用する場合

固定ページなど、動的に情報を取得する必要がない場合metadataオブジェクトをlayout.jsやpage.jsに定義してメタデータ(OGPタグなど)を返却することができます
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields

動的な取得が必要なければ、こちらを利用するのが簡単そうですね!

generateMetada関数を使用する場合

例えば、ユーザーの投稿内容を表示するなど、内容を動的に取得する必要がある場合は「generateMetadata」ファンクションを使用する必要があります
https://nextjs.org/docs/app/api-reference/functions/generate-metadata

自分のサイトでは以下の方法で実装しています。実装先はapp/page.tsxになります

type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

// SNSシェアリンク用のOGP生成処理
// https://www.project-ride.com/content_id=1 でアクセスされたときに実行される
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  
  const resolvedSearchParams = await searchParams
  const contentId = resolvedSearchParams.content_id
  const wwwBaseUrl = process.env.NEXT_PUBLIC_WWW_BASE_URL ?? ""
  const defaultImageUrl = `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL ?? ""}${process.env.NEXT_PUBLIC_NO_IMAGE ?? ""}`  

  // もし content_id が URL にあれば...
  if (typeof contentId === 'string') {
    const content = await getContent(contentId);

    if (content) {
      const imageUrl = content.image_url
        ? (process.env.NEXT_PUBLIC_IMAGE_BASE_URL ?? "") + content.image_url
        : defaultImageUrl;

      const title = content.message.replace(/<br\s*\/?>/gi, '').substring(0, 30) + '...';
      const description = content.message;

      return {
        title: title, // タイトル用にメッセージを短縮
        description: description,
        openGraph: {
          title: title,
          description: description,
          url: `${wwwBaseUrl}?content_id=${contentId}`,
          images: [{ url: imageUrl }],
        },
        twitter: {
          card: 'summary_large_image',
          title: title,
          description: description,
          images: [imageUrl],
        }
      }
    }
  }

  // 有効なコンテンツが見つからない場合、デフォルト内容を返却
  return {
    title: 'RIDE-Mono',
    description: 'バイク乗りのためのおすすめスポット共有サイト',
    openGraph: {
      title: 'RIDE-Mono',
      description: 'バイク乗りのためのおすすめスポット共有サイト',
      url: wwwBaseUrl,
      images: [{ url: "" }], // デフォルト画像
    }
  }
}

スクリプト内のgetContent関数でユーザー投稿内容を取得し、メタデータを設定しています

注意点としてgenerateMetadata関数はサーバーコンポーネントで実行する必要があります
自分が最初作成したとき、クライアントコンポーネントにてページを作成していたため、generateMetadata関数を利用するために、既存のページ内容を別途クライアントコンポーネントのファイルに別出しして対応を行いました

export default function Home() {
  return (<TopPage />);
}

もともと記載していた内容をTopPageコンポーネントに分離しています
TopPageコンポーネントでは、’use client’を利用し、クライアントコンポーネントとして動作させています

プレビューが出ない時がある

生成したリンクをX(Twitter)に貼り付けたときにプレビューが表示されたり、されなかったりといった症状がでてデバッグに苦戦しました
実際には投稿後に正しくOGPの内容が表示されたので、投稿前のプレビューの精度は参考程度に考えていたほうが良いのかもしれません(逆に投稿したのに、想定したOGPの内容が表示されない場合は、何かを間違えている可能性が高い)

以上です

ということでNext.jsからMetadata(OGPタグ)を返却する方法でした
SPAだとどうやってMetadataを返却しているのか正直謎でしたが、調べてみるときちんと仕組みが備わっているんですね！

Metadataを生成することで、SNSシェア以外にもクローラー対応など、色々できることが増えそうです

投稿 Next.jsでMetatag(OGPタグ)を返却する は Sheltie Garage Tech に最初に表示されました。

早速ですが、コードです

    // Axiosインスタンスを作成
    const apiClient = axios.create({
      withCredentials: true, // クッキーを含める設定
    });

    // レスポンスインターセプターを設定
    apiClient.interceptors.response.use(
      (response) => {
        // 成功時の処理
        return response;
      },
      (error) => {
        if (error.response && error.response.status === 401) {
          // 401エラー時の独自の処理
          console.error('認証に失敗');
        }
        return Promise.reject(error);
      }
    );

    // APIを実行
    apiClient
      .post(registerURL, registerParam)
      .then((response) => {
        console.log('認証に成功');
      });

apiClient.interceptors.response.useを利用してHTTPステータスに対応した独自の処理を作成できます。
上記の例では401ステータスが返却された場合の処理が定義されています。

今作成しているアプリでは、ログインの認証に失敗すると401エラーが返却されるので、その場合は「ログインID,パスワードが違います」といったようなエラーメッセージを設定するような処理を行っています。

以上

短いですが、AxiosでHTTPステータスに応じた処理を実行する方法を記載しました。
HTTPステータスは色々種類があるため、エラーの状況に応じて適切なHTTPステータスを返却するように処理を作り込んでいこうと思います。

REST API Design Rulebook Designing Consistent RESTful Web Service Interfaces【電子書籍】[ Mark Masse ]

created by Rinker

¥906 (2026/11/05 08:01:45時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

HTTPの教科書 強靱な技術力と柔軟な思考を味方にするWebプロトコ [ 上野宣 ]

created by Rinker

¥2,860 (2026/11/06 01:02:57時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 AxiosでHTTPステータスに応じた処理を実行する は Sheltie Garage Tech に最初に表示されました。

個人的にAmazon検索の隠しパラメータを手軽に利用できる拡張機能を作って公開してみました
https://chromewebstore.google.com/detail/amazon%E8%A3%8F%E6%8A%80%E6%A4%9C%E7%B4%A2/gbgfbnmcnkhddoahjhehomlccblhbedi?hl=ja&utm_source=ext_sidebar

Chrome拡張機能の概要

Chromeには様々な拡張機能を追加できます。

Chromeの拡張機能はJavaScriptで作成できるので、意外と気軽に作成出来ます。
今回は特定のURLを開くとポップアップが表示される拡張機能を作ります。

Chrome拡張機能の最低限の構成

Chrome拡張機能で最低限必要なのは以下の2ファイルになります

それぞれのファイルの中身は以下のとおりです。

manifest.jsonの中身

{
    "name": "MinimalProject",
    "version": "1.0.0",
    "manifest_version": 3,
    "description": "ダイアログを表示します",
    "permissions": [],
    "content_scripts": [{
      "matches": ["https://www.google.co.jp/*"],
      "js": [
        "content.js"
      ]
    }]
}

content.jsの中身

window.alert('google.co.jpを開きました');

以上です。これだけで拡張機能として動作します。

Chromeに開発中の拡張機能をインストールする

開発中の拡張機能をChromeにインストールします。
まずは拡張機能の管理画面を開きます。

右上にあるデベロッパーモードをONにします

「パッケージ化されていない拡張機能を読み込む」をクリックします

ディレクトリの選択画面が表示されるので、manifest.jsonとcontent.jsが入っているディレクトリを選択します

拡張機能が追加されたことを確認します

動作確認を行う

今回作成した拡張機能は「https://www.google.co.jp」にアクセスしたときにポップアップ(アラート)を表示する設定になっています。
拡張機能を有効化した状態でgoogle.co.jpにアクセスしてください。

ポップアップが表示されました

以上です

以上で最低限のChrome拡張機能の作成と動作確認まで紹介しました。
意外と手軽に作成できることがおわかりいただけたかと思います。
今回は特定のURLにアクセスしたときに動作するタイプの拡張機能となりますが、他にもいろいろなタイプの拡張機能が作成出来ます。
JavaScriptの知識があれば開発することができるので、ぜひ挑戦してみてください。

Chrome・Chromebook定番「拡張機能」セレクションズ【電子書籍】[ 武井 一巳 ]

created by Rinker

¥660 (2026/11/05 08:22:47時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

改訂3版JavaScript本格入門 [ 山田 祥寛 ]

created by Rinker

¥3,520 (2026/11/05 08:22:47時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

投稿 Chromeブラウザの拡張機能を作ってみる は Sheltie Garage Tech に最初に表示されました。