Re:placement

prot01

Node.js

React

Next.js

Firebase

HighCharts

fullPage.js

HighChartsとfullPage.jsを利用したデータ連携型チャートサイト（サンプル）

このプロジェクトは、データ連携型のインタラクティブ・チャートサイトです。各ページには異なるチャートコンポーネントが配置され、ユーザーがページを移動するときにFramer Motionによるアニメーション演出が滑らかに再生されるよう設計されています。ページ構成はfullpage.jsによる縦スクロール遷移で構成され、セクションごとの動作やアニメーションが動的に制御されます。

チャート描画にはHighchartsを採用しており、各グラフ（例：折れ線グラフ、円グラフなど）は独立したReactコンポーネントとして実装されています。データはFirebase Realtime Databaseと連携しており、グラフ上のポイントをクリックすると数値がランダムに更新され、その変更がリアルタイムでFirebaseに反映されます。また、リセットボタンを押すことで、Firebase上のデータを初期状態に戻すこともできます。これにより、動的なデータ操作と可視化を簡潔なUIで実現しています。

フロントエンドはNext.js（Pages Router構成）とReactで構築されており、サーバーレス環境にも対応しています。各ページはpages/ディレクトリ配下で管理され、_app.jsや_document.jsで全体設定や共通レイアウトを制御しています。ビルド時には**Next.jsの静的エクスポート機能（output: export）**を利用して静的ファイルとして出力され、ホスティング環境に依存せず軽量に配信できる構成になっています。

prot05

Node.js

Vue.js

Vite

fullPage.js

GSAP

fullPage.jsを利用したビジュアル重視のWebサイト（サンプル）

JavaScriptライブラリページのfullPage.jsと、GSAP（GreenSock Animation Platform）を組み合わせたスライド型Webサイト（サンプル）です。ページをスクロールするとともに、セクションごとにコンテンツが遷移する設計になっています。セクション遷移時にアニメーションが開始されるため、視覚的なインパクトを提供することができます。

また、このサイトはVue.jsを使用して構築されています。Vue.jsは、リアクティブなUIを作成するための強力なフレームワークであり、コンポーネントベースのアーキテクチャを活用しています。開発効率を高めるため、Viteをビルドツールとして使用しており、Viteの高速なビルドとホットリロード機能により、開発中の作業がスムーズに進みます。

prot06

Node.js

Vue.js

Vite

Firebase

axios

Firestoreを利用した掲示板（サンプル）

Firestore (Cloud Firestore) は、Google Firebaseが提供するNoSQLデータベースです。クラウド上にデータを保存し、モバイルやWebアプリケーションでよく利用されます。

axiosは、HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリです。axiosを使ってFirestoreのREST APIを呼び出すことで、柔軟なデータ操作が可能です。

スケーラブルでリアルタイムなバックエンドを提供するFirestoreと、HTTPリクエストをシンプルに行うaxios、そして直感的なフロントエンドフレームワークであるVue.js。この組み合わせは、効率的でスムーズなWebアプリケーションを構築する際に非常に有効です。

prot08

Node.js

React

Next.js

GitHub

Vercel

Tailwind CSS

microCMS

Next.jsとmicroCMSを組み合わせた、カフェ風のWebサイト（サンプル）

Next.jsは、Reactをベースに開発された、フロントエンドフレームワークです。
レンダリング手法にSSGを用いて、ビルド時にすべてのページを事前に生成することで、ユーザーがページにアクセスした際にサーバーからのデータ取得を待つ必要がなく、非常に迅速にコンテンツが表示されます。

microCMSは、ヘッドレスCMS（Content Management System）の一種で、コンテンツ管理とAPIベースのデータ配信に特化したクラウド型サービスです。
Webhookを利用することで、microCMSでコンテンツの更新や作成があったときに、自動でビルドを開始しサイトを更新することができます。ユーザー側は技術的な作業を意識せずに管理画面のみで操作が完結します。

Tailwind CSSは、ユーティリティファースト（Utility-First）のCSSフレームワークです。 ビルドプロセスでPurgeCSS（パージ機能）が実行され、不要なCSSが含まれずに、軽量・コンパクトなファイルが生成されます。

prot09

Node.js

Vue.js

Vite

OpenWeather APIを利用した、都市の現在の気温を表示する機能

都市名をクリックするとその都市の天気情報を表示します。都市名を入力して追加することもできます。追加した都市は削除も可能。

OpenWeather APIという外部APIを利用して、都市の天気情報（温度、天気アイコンなど）を取得。fetchを使ってAPIからデータを取得し、その結果を表示します。

観光情報サイトにも使えそうな機能です。

prot10

Node.js

React

Next.js

GitHub

Vercel

Render

Express

JWT

cors

フロントエンドとバックエンドが独立した、セキュアな音楽ストリーミングサービス（サンプル）

ユーザーに音楽を安全にストリーミング配信することを目的としたサービスです。特定の音楽トラックをクリックすることで、ブラウザ上で直接再生できる仕組みを提供しています。このサービスの特徴は、セキュリティとユーザー体験の両方を重視した設計にあります。

まず、技術スタックとしては、Next.js（Vercelが開発したフレームワーク）を用いてフロントエンドを構築しています。また、バックエンドにはNode.jsとExpress.jsを採用し、音楽ファイルへのセキュアなアクセスを提供するAPIを構築しました。このAPIは、Renderというクラウドホスティングサービス上で動作します。フロントエンドとバックエンドが独立して運用されるため、それぞれの役割に特化した最適化が可能です。技術選定に関してはAIアシスタントの助けを借りながら行いました。

安全性に配慮した設計が、このプロジェクトのもう一つの特徴です。ユーザーが音楽トラックを選択すると、フロントエンドはバックエンドにリクエストを送信し、音楽ファイルへの一時的なセキュアリンクを生成します。このリンクはJWT（JSON Web Tokens）を用いて署名されており、トークンにはリクエストされた音楽トラックの情報や有効期限が含まれています。この仕組みにより、リンクが不正に共有されたり、長期間にわたって悪用されたりすることを防ぎます。また、CORS（Cross-Origin Resource Sharing）を適切に設定することで、不正なクロスオリジンリクエストからAPIを保護しています。

VercelとRenderを併用した理由も、このプロジェクトの設計思想を反映しています。Vercelはフロントエンドのホスティングを担当し、特にNext.jsアプリケーションとの親和性が高いため、デプロイやパフォーマンス最適化が簡単に行えます。一方、RenderはバックエンドのAPIをホスティングしています。このAPIは音楽ファイルへのリンク生成やストリーミングを管理する重要な役割を果たします。Renderを選択した理由は、持続的なサーバー動作を保証し、特に音楽ストリーミングのような継続的なリクエストに対応できるからです。（無料で出来る幅が広いのも理由の一つ）

また、開発者体験も考慮されています。フロントエンドとバックエンドが独立しているため、別々の環境で開発・テストが可能です。例えば、フロントエンドの変更がバックエンドに影響を与えることなくデプロイできます。Vercelのプレビュー環境やRenderのAPIログ機能を活用することで、チームでの効率的な開発も実現可能です。

prot11

Node.js

React

Next.js

GitHub

Vercel

Firebase

Chart.js

FirebaseとChart.jsを組み合わせた、インタラクティブなグラフ表示アプリケーション

ユーザーがデータを直感的に操作し、視覚的なフィードバックを得られるように設計されたインタラクティブなアプリケーションです。特に、月ごとにデータを追加、更新、削除し、それを視覚化する機能を提供します。この機能は、データの変化を即座に反映するリアルタイム性を重視しており、どのデバイスからアクセスしても最新の情報を正確に確認できるという利便性が特徴です。

このWebアプリケーションは、モダンなフロントエンド技術スタックを基盤としており、開発フレームワークとしてはNext.jsを採用しています。そして、バックエンドには軽量なNode.jsサーバーを利用し、データの保存にはFirebaseのRealtime Databaseを採用しました。

Realtime Databaseは、クラウドベースでスケーラブルなデータストレージを提供するだけでなく、リアルタイムのデータ同期機能を備えています。この仕組みにより、ユーザーがデータを更新すると、他のユーザーの画面にも即座に反映されるため、データの一貫性を維持しながら高いインタラクティブ性を実現できます。

また、アプリケーションの視覚化には、グラフ描画ライブラリであるChart.jsを組み合わせて使用しています。これにより、ユーザーは入力した数値データをわかりやすいグラフ形式で確認でき、データの変化や傾向を視覚的に把握することが可能です。

さらに、フロントエンドのホスティングにVercelを利用することで、迅速かつ効率的なデプロイ環境を実現できます。セットアップは簡単で、GitHubのリポジトリにコードをプッシュするだけで自動的にデプロイが完了します。こうした機能により、リアルタイムのデータ更新が重要なこのアプリケーションにおいて、開発効率とユーザー体験を大幅に向上させることができます。

prot12

Node.js

Vue.js

Nuxt

GitHub

Netlify

Lottie

Swiper

SwiperとLottieアニメーションを組み合わせた、スライド型Webサイト（サンプル）

JavaScriptライブラリのSwiperと、Lottieアニメーションを組み合わせたスライド型Webサイト（サンプル）です。各スライドはアニメーションとコンテンツが調和し、視覚的に魅力的なエクスペリエンスを提供することを目指しています。

このサイトは、Vue.jsを基盤としたフレームワークであるNuxtを採用して開発されています。Nuxtは、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、多彩な機能を備えており、効率的でスケーラブルなWebアプリケーションを構築するための強力なツールです。

また、軽量で多機能なライブラリであるSwiperを利用して、フルスクリーンの縦方向スライダーの実装を行っています。これにより、スムーズでインタラクティブなユーザー体験を提供しています。

さらに、Lottieアニメーションを活用し、SVG形式で軽量かつパフォーマンスに優れたアニメーションを実現しています。アニメーションは初回ロード時に停止した状態で表示され、ユーザーがスライドを変更する際に対応するアニメーションが再生される仕組みです。

このプロジェクトはGitHub上で管理され、Netlifyを利用してデプロイされています。Netlifyは、高速かつ信頼性の高いホスティングソリューションを提供しており、このサイトの迅速なデプロイとスムーズな運用を支えています。

prot13

Node.js

Vue.js

Vite

Unsplash

axios

スケルトンスクリーンとUnsplash APIを組み合わせた、ギャラリー形式の写真表示サイト（サンプル）

写真とその説明を手軽に閲覧できるギャラリー形式の画像表示サイトです。写真はすべてUnsplash APIを使用して取得しており、初回ロード時には20枚の写真が一度に表示され、その後スクロール操作によって10枚ずつ新しい写真が追加されます。無限スクロールのような機能により、途切れることなく最大で100枚まで写真を表示します。

このプロジェクトの開発環境には高速なビルドツールであるViteを採用し、軽量で直感的なフレームワークであるVue.jsを使用して構築されています。また、Unsplash APIからのデータ取得にはaxiosを活用して非同期通信を簡潔かつ効率的に実現しました。さらに、ユーザー体験を向上させるため、画像の読み込み中にはスケルトンスクリーン（プレースホルダー）を表示し、画像への切り替えを滑らかに行う工夫をしています。

スケルトンスクリーンやスクロール連動のロード機能を駆使することで、読み込みの遅延や中断をなるべく感じさせずに、技術的にも視覚的にも満足度を高めることを目指しました。

prot14

Node.js

Vue.js

Vite

GSAP

Three.js

GSAPとThree.jsを組み合わせた、モダンなコーポレートサイト（サンプル）

コーポレートサイトをイメージしたサンプルデザインで、スクロール操作に応じてコンテンツが動的に表示・遷移します。3D表現にはThree.jsを活用し、インタラクティブで立体感のあるビジュアルを提供。また、GSAP ScrollTriggerを用いてスクロール操作に同期したアニメーションを実現しています。

技術スタックには、軽量かつ高性能なビルドツールであるViteを採用しています。モジュール化と再利用性を重視してVue.jsで構築されており、各コンポーネント間のアニメーションが自然でスムーズに感じられる設計が可能になっています。

サイト構成としては、最初にスクロール連動型のアニメーションセクションが登場し、次にThree.jsを活用した3Dカルーセルが続きます。最終セクションでは、左右から入ってくるテキストとともにコピーライトがフェードインし、黒背景の落ち着いた印象で締めくくられます。

prot15

Node.js

Vue.js

Vite

Tailwind CSS

GSAP

Three.js

GSAPとThree.jsを活用した、ページ遷移アニメーションを備えたSPA

動的な背景色と滑らかなページ遷移を組み合わせたシングルページアプリケーション（SPA）です。3ページで構成されており、それぞれのページに特有の背景色が設定されています。ユーザーがページを移動する際、背景色がシームレスに変化するだけでなく、Three.jsを用いたインタラクティブな3Dオブジェクトが各ページに配置され、視覚的な魅力を高めています。

Three.jsを使用して構築された3Dコンテンツは、ブラウザ内でリアルタイムにレンダリングされ、ページごとに異なるデザインやアニメーションを提供します。また、アニメーションの管理にはGSAP（GreenSock Animation Platform）を採用し、ページ遷移時の動きや3Dオブジェクトのトランスフォーメーションをスムーズに制御しています。GSAPのパワフルなタイムライン機能を活用することで、複雑なアニメーションシーケンスを直感的に実装しました。

開発には、Vue.jsをフレームワークとして採用し、Vue Routerでページ間のルーティングを実現しました。<router-view>と<transition>を組み合わせることで、各ページへの切り替え時に背景色やコンテンツのアニメーションが連動する仕組みを構築しています。また、ビルドツールにはViteを使用し、モジュールバンドルを効率化しています。CSSフレームワークとしてTailwindCSSを活用し、ヘッダーやレイアウトのデザインを効率よく実現しました。

prot17

WordPress

Docker

Node.js

Sass

開発にDockerを活用したWordPressサイト（サンプル）

コーポレートサイトとして機能するWordPressのオリジナルテーマの開発を目的としたプロジェクトです。開発環境の構築にはDockerを活用しています。開発環境の構築においてwp-envを使用する方法もありますが、本プロジェクトではdocker-compose.ymlを採用しています。これにより、ローカル環境でも本番環境と同じ構成を再現でき、開発の効率と再現性を向上させています。

また、CSSの管理にはSassを導入し、スタイルの記述を効率化しました。SassのコンパイルにはNode.js（npm）を利用し、以下のスクリプトをpackage.jsonに追加しています。

"scripts": {
  "watch": "sass --watch wp-content/themes/prot17/assets/scss/style.scss wp-content/themes/prot17/style.css",
}

このスクリプトを実行することで、Sassの変更が即座にCSSへ反映される仕組みを構築しています。圧縮CSSを生成する場合、以下のスクリプトをpackage.jsonに追加。

"scripts": {
  "build": "sass assets/scss/style.scss assets/css/style.css --style=compressed",
}

投稿やページにカスタムフィールドを追加できるプラグインMeta Boxを使用しています。functions.phpに記述を追加し、投稿ページや固定ページで『キービジュアル画像（アイキャッチとは別）』『導入テキスト』『よくある質問（FAQ）』を設定できるようにしました。管理画面からすぐに入力・更新ができるようになるなど、運用の担当者がHTMLを意識せずに作業できる設計を目指しました。

デプロイ環境について、サイトがレンタルサーバーで運用され、FTPでのファイルアップロードが行われることを想定しています。また、ドキュメントルート直下ではなくサブディレクトリ（https://replacement.jp/den/prot17/）に設置されることを前提に構築されています。

prot19

Node.js

gulp

Sass

gulpとesbuildで構築した、クライアントサイド完結型のWebP画像変換・ダウンロードツール

JPGやPNG形式の画像をWebP形式に変換し、個別またはZIPで一括ダウンロードできるツールです。画像の変換はすべてクライアントサイドで完結し、アップロードされた画像が外部に送信されることはありません。そのため、セキュリティやプライバシーの面でも安心して利用できる構成となっています。

開発においては、CSSプリプロセッサとしてSASSを導入し、保守性と記述性の高いスタイル設計を実現しました。JavaScriptのモジュール管理にはES Modulesを採用し、バンドルには高速なビルドが可能なesbuildを使用しています。WebpackやViteといった主流のバンドラーを使用せず、gulpとesbuildの組み合わせにより構築しています。

gulpは、開発フローを自動化するタスクランナーとして導入し、SASSファイルのコンパイルやCSS/JSのminify、esbuildによるモジュールのバンドルといった処理を担っています。特に、gulp単体ではES Modulesに対応しきれない課題があったため、esbuildと連携させる構成にすることで、軽量かつ柔軟な開発環境を実現しました。また、CSSについても、SASSで記述したスタイルをgulp経由でビルドし、最終的に圧縮されたCSSとして出力しています。

なお、本アプリケーションでgulpを使用していることを明確に示すため、gulpタスクやesbuildの設定を含めたソースコードをGitHub上に公開しています。

prot

Node.js

Webpack

EJS

Sass

Swiper

Fancybox

株式会社フロム・ソフトウェアのコーポレートサイトを模倣し、PC/SP対応UIやロードモアを再現した静的サイト（サンプル）

このサイトは、株式会社フロム・ソフトウェアのコーポレートサイトの仕組みを参考に、リバースエンジニアリングのような形で模倣して制作したサンプルです。実際のサービスやデータを利用しているわけではなく、技術的な検証・ポートフォリオ用の学習成果物として構築しています。登場する名称等は架空のものです。

トップページは、PCとスマートフォンで異なるUIを採用しています。PC版では、ゲームタイトルの一覧から項目をクリックすると、右側にその詳細情報や動画が切り替わって表示される仕組みになっています。ページ遷移を伴わず、シングルページ的に情報を展開できるため、ユーザーは途切れのない体験を得られます。スマートフォン版では、Swiperを用いたスライドUIを実装しています。各スライドをタップするとFancyboxのモーダルが開き、動画や説明をそのまま閲覧できます。

ニュースページは「ロードモア方式」を採用していて、最初は記事が6件だけ表示されます。「もっと見る」ボタンをクリックすることで、次の6件が段階的に追加表示されていきます。記事データはすでにJavaScript内に用意されており、サーバーへの追加リクエストは発生しません。つまり、非同期通信（Ajaxなど）は行わず、すべてクライアントサイドで動的に描画しています。

さらにこのページでは「カテゴリ切り替え機能」も備わっています。画面上部にあるタブやセレクトボックスからカテゴリ（「NEWS」「EVENT」「RELEASE」など）を選ぶと、該当する記事だけが一覧に再構成されます。これもサーバー通信を伴わないクライアントサイド処理であり、あらかじめ読み込まれた記事データの中から条件に一致するものだけを抽出・再描画しています。そのため、カテゴリを切り替えても瞬時に表示が切り替わり、スムーズなユーザー体験が実現されています。

本番環境ではサブディレクトリ（/den/prot20/）に配置しても正しく動作するよう、構成を工夫しています。開発時はWebpack Dev Serverのルートで動作しますが、本番ではURL階層が異なるため、それに対応できるようにしました。具体的には、WebpackのpublicPathを環境ごとに切り替え、本番用には絶対パス（/den/prot20/）を設定しています。これにより、出力されるHTML内のJS/CSSの参照パスが常に正しくなるよう制御されています。

また、テンプレートエンジンとしてEJSを導入し、HTMLテンプレート内で <%= PUBLIC_PATH %> のように変数を埋め込むことで、環境に応じた動的なパス指定が可能になっています。これにより、手動で相対パスを修正する手間を省き、保守性が向上しました。さらに、_sidemenu.html のような共通部品のパス指定にも同じ仕組みを活用し、開発環境でも本番環境でも同じHTMLテンプレートで共通UIを正しく読み込むことができます。

アクセスいただきありがとうございます。青く光っている部分が、一番見ていただきたいページです。

このモーダルウィンドウを閉じてご確認ください。