2re blog

タグ: Next.js

  • 個人開発ECサイト「SoraStore」を公開しました｜Next.js×Railsで作る会員制ストア

    2re funの新しいプロジェクトとして、コーヒー・紅茶・雑貨を扱うオンラインストア「SoraStore」を公開しました。今回は、SoraStoreがどんなコンセプトのサイトなのか、どんな技術スタックで作っているのか、開発でこだわったポイントは何かを、この2re blogでまとめておきます。

    SoraStoreとは

    SoraStoreは、「暮らしを豊かにする、こだわりの逸品を。」をコンセプトにした、コーヒー・紅茶・雑貨などを扱う会員制のオンラインショップです。産地や製法にこだわった商品だけを取り扱う、という架空のECサイトを題材に、実際に動く会員登録・ログイン機能を備えたストアとして構築しました。(rail-order.2re.fun)

    単なるデザインカンプではなく、会員登録・ログインをした上で商品を注文できる、実際に触れる状態までドメインを取得して公開しているのが2re funの各プロジェクトに共通するこだわりで、SoraStoreも例外ではありません。

    サイトの特徴

    SoraStoreでは、実際のECサイトを意識して次の3つの特徴を持たせています。

    • 厳選された商品:産地や製法にこだわった、上質な商品だけを取り揃えるという世界観でストアを設計
    • 会員限定のご注文:注文には会員登録・ログインが必須で、ログイン後はマイページから注文状況を確認できる導線を用意
    • 丁寧な梱包でお届け:商品ページやトップページの文言で、購入後の体験まで含めた安心感を伝える設計にした

    トップページでは「無料で会員登録」「ログイン」の2つの導線を上部に配置し、初めて訪れたユーザーがまず会員登録に進むか、既存ユーザーとしてログインするかを迷わず選べるようにしています。

    技術スタック

    SoraStoreは、次の技術スタックで構築しています。

    フロントエンド

    • Next.js
    • TypeScript

    バックエンド・インフラ

    • Ruby on Rails(会員登録・ログイン・注文管理などのAPI)
    • Docker / Docker Compose

    2re funの他プロジェクト同様、フロントエンドとバックエンドを分離した構成にしており、会員登録・ログイン・注文状況の確認といった、実際のECサイトで必要になる機能をひと通り実装しています。

    開発でこだわったポイント

    SoraStoreの開発では、次の2点を特に意識しました。

    会員登録必須の注文フロー
    実務のECサイトでよくある「会員登録・ログインをしないと注文できない」という制約をあえて設け、認証まわりの実装(サインアップ・ログイン・マイページでの注文状況確認)を一通り作り切ることをテーマにしました。

    落ち着いたトーンのUIデザイン
    コーヒーや紅茶といった商品の世界観に合わせて、ストーン系の落ち着いた配色とシンプルなレイアウトを採用しました。「厳選された商品」「会員限定のご注文」「丁寧な梱包でお届け」という3つの特徴を3カラムで並べ、サイトの価値がひと目で伝わる構成にしています。

    他のプロジェクトと同じく、企画・設計からClaude Codeを開発パートナーとして活用し、人気の高い技術構成をリサーチした上で実装・インフラ構築・ドメインでの公開までを一人で進めています。開発の進め方の詳細は「2re fun はHPやシステムを公開します。」でも紹介しています。

    今後の展望

    現時点のSoraStoreは、トップページと会員登録・ログイン・商品一覧の基本的な導線までを公開している段階です。今後は、商品詳細ページやカート機能、注文履歴の表示などを充実させ、より実際のECサイトに近い形に育てていく予定です。

    SoraStoreを含む2re funの各プロジェクトはhttps://2re.fun/から一覧できます。開発の進捗や技術的な意思決定については、引き続きこの2re blogで発信していきますので、あわせてチェックしてみてください。

  • 2re fun はHPやシステムを公開します。

    2re funは、Claude Codeなどを使いながら人気のある開発構成をリサーチし、HP(ホームページ)やWebシステムのテーマを決めて実際に作り、デプロイしたものを公開していく個人開発ポートフォリオです。企画から設計・実装、インフラ構築、本番運用まで、すべて一人で手がけています。https://2re.fun/

    まだたくさん作ったのですが、サーバーのリソースと手間が間に合っていないため、公開するペースは時間とお金の相談になりそうです。この記事では、2re funがどんなコンセプトで動いているのか、どんな技術スタックでプロジェクトを作っているのか、実際にどんなHP・システムを公開しているのかを詳しくまとめておきます。

    2re funとは

    2re funは、「個人開発者として、企画から本番運用まで一人で作り切るシステム開発」をコンセプトにしたポートフォリオサイトです。フロントエンドからバックエンド、データベース設計、Dockerによるインフラ構築、VPSでの本番公開まで一貫して手がけ、実際に稼働しているシステムをサイト内の「Projects」で紹介しています。

    単なる制作実績の紹介にとどまらず、「実際に本番で動いているかどうか」にこだわっているのが2re funの特徴です。デザインカンプだけで終わらせず、ドメインを取得し、Dockerでインフラを組み、実際にユーザーが触れる状態までデプロイしてはじめて1つのプロジェクトとして公開しています。

    一人で企画から本番運用までを担う開発スタイル

    2re funの開発では、要件定義やテーマ決めの段階からClaude CodeのようなAIコーディングツールを活用しています。まず世の中で人気のある開発構成やアーキテクチャをリサーチし、作るHP・システムのテーマや技術選定を決めます。その後、実装・インフラ構築・デプロイまでを一人称で進め、実際に動くサービスとして公開する、という流れです。

    一人で担当する分、企画の意図とコードの実装がぶれにくいというメリットがある一方、サーバーのリソースや運用の手間には限界があります。そのため、どのプロジェクトをどこまで本番運用として維持するかは、常に時間とお金のバランスを見ながら判断しています。

    2re funで採用している技術スタック

    2re fun自体、そして公開している各プロジェクトも、次のような技術スタックで構築しています。人気の高い構成を意識しつつ、プロジェクトの性質に応じてバックエンドの言語やフレームワークを使い分けているのがポイントです。

    フロントエンド

    • Next.js
    • TypeScript
    • React
    • Tailwind CSS

    バックエンド

    • Go(REST API)
    • Node.js
    • プロジェクトによってはPHP・Spring Boot・Ruby on Railsなども採用

    データ・インフラ

    • MySQL(database/sql)
    • Docker / Docker Compose
    • Caddy
    • VPS運用

    このブログ(2re blog)自体もWordPress+Docker Composeで構築しており、技術構成の詳細は「2re blogの技術構成｜WordPress・Docker・MySQLで作る個人ブログ基盤」で紹介しています。

    2re funで公開しているプロジェクト

    2026年8月時点で、2re funでは次のようなHP・Webシステムを実際に本番環境で公開しています。それぞれ業種やユースケースを変えながら、技術構成も意図的に変えて作っているのが特徴です。

    • とびうお:立ち食い鮨店向けの注文・会員管理システム。スマホから注文でき、購入履歴に応じたスタンプ特典を自動計算します。Node.js / TypeScript / MySQL / Dockerで構築。(tobiuo.2re.fun)
    • ボナンザ株式会社:清掃会社向けの企業サイト。Next.js製のフロントエンドとPHP製のAPIサーバーで構築。
    • Order System:厳選した商品を会員限定で販売するオンラインストア。会員登録することで注文・購入履歴の管理ができます。Next.js / TypeScript / Spring Boot / Docker。(order.2re.fun)
    • SoraStore:コーヒー・紅茶・雑貨など、産地や製法にこだわった商品を届けるオンラインショップ。会員登録した上で注文でき、マイページから注文状況を確認できます。Next.js / TypeScript / Rails / Docker。(rail-order.2re.fun)
    • 青葉葬儀社:葬儀社向けの企業サイト(サンプル)。プラン・料金の紹介や電話でのお問い合わせ導線を備えています。(aosy.top)
    • 2reブログ:システム開発の成長記録を発信する個人ブログ。学習の過程や進捗を記事として公開しています。WordPressで構築。(blo.2re.fun)

    2re.fun自体のお問い合わせフォームも、Go製のAPIサーバー経由でMySQLに保存する構成になっており、ポートフォリオサイト自体がフルスタック開発の実例になっています。

    Claude Codeを活用した開発の進め方

    2re funの各プロジェクトは、Claude Codeを開発パートナーとして使いながら進めています。具体的には、以下のような流れです。

    1. 作りたいHP・システムの業種やユースケースを決める
    2. その領域で人気のある開発構成・技術スタックをリサーチする
    3. Claude Codeと一緒にフロントエンド・バックエンド・データベースの設計を進める
    4. Docker Composeでインフラをまとめ、VPS上に本番環境として構築する
    5. 実際に動く状態までデプロイし、2re funやこのブログで公開する

    単に「作って終わり」ではなく、実際にドメインを取得し、独自のサブドメイン(tobiuo.2re.fun、order.2re.funなど)で公開するところまで含めて1つのプロジェクトと考えているのが、2re funのこだわりです。

    現在の課題:サーバーリソースと時間・費用のバランス

    2026年8月時点で、公開・検証待ちのプロジェクトはすでにいくつも溜まっています。ただし、すべてを同時に本番運用するにはサーバーのリソースが足りず、監視や運用の手間も追いついていないのが正直なところです。

    そのため、今後どのプロジェクトを優先的に公開・維持していくかは、サーバー費用と自分の作業時間を天秤にかけながら決めていくことになりそうです。無理に全部を本番公開するのではなく、記事として構成やコードを紹介するだけにとどめるプロジェクトも出てくる可能性があります。

    今後の展望

    2re funでは今後も、実務でよく使われる技術構成を試しながら、業種の異なるHP・Webシステムを作り、実際にデプロイして公開していく予定です。開発の過程や技術的な意思決定については、この2re blogで随時アウトプットしていきます。

    2re funの最新の公開プロジェクトはhttps://2re.fun/から、開発の裏側やアップデートは2re blogから確認できますので、あわせてチェックしてみてください。