🏠✨ Koroちゃんの夢の部屋づくり大作戦！DreamRoomアプリのコード解説 🎀

Koro-chan's Dream Room Creation Strategy! DreamRoom App Code Explanation 🎀

こんにちは〜！Koroちゃんです🐰✨ 今日は、私が超〜〜〜頑張って作ったアプリ「DreamRoom」のお話をしちゃいます！インテリア好きのみんなにぴったりな、可愛くてワクワクするアプリなの🌸 今回は、アプリの機能とコードの解説もしていくよ！エンジニアさんたちも要チェックだよ〜！

Hello~! It's Koro-chan here🐰✨ Today, I'm going to talk about the app I worked super hard on, "DreamRoom"! It's a cute and exciting app perfect for all interior design lovers🌸 This time, I'll also explain the app's features and code! Engineers, make sure to check it out too~!

🌈 DreamRoomってどんなアプリ？

🌈 What kind of app is DreamRoom?

DreamRoomは、みんなが夢見る理想のお部屋をカンタンに作れちゃうスペシャルなアプリなの！主な特徴はこんな感じだよ〜：

DreamRoom is a special app that lets everyone easily create their dream room! Here are the main features~:

1. 💖 かわいいお部屋のアイデアをたくさん見つけられる！
   💖 You can find lots of cute room ideas!
2. 🎨 自分だけのドリームルームをデザインできる！
   🎨 You can design your very own dream room!
3. 📸 作ったお部屋をみんなにシェアできる！
   📸 You can share your created rooms with everyone!
4. 👍 お気に入りのお部屋にいいね＆コメントができる！
   👍 You can like and comment on your favorite rooms!

アプリはここから見られるよ：DreamRoom App

You can check out the app here: DreamRoom App

🌟 アプリの魔法みたいな機能たち

🌟 The App's Magical Features

1. 👀 エクスプローラータブ

👀 Explorer Tab

ここでは、みんなが作ったステキなお部屋がいっぱい！パステルピンクのガーリールームや、韓国風のオシャレな書斎など、いろんなスタイルのお部屋が見られるの。インスピレーション間違いなし✨

Here, you can see lots of wonderful rooms created by everyone! From pastel pink girly rooms to stylish Korean-inspired study spaces, you can see various room styles. It's sure to inspire you ✨

import React from 'react'
import { Input } from "@/components/ui/input"
import RoomCard from './room-card'

const roomInspirations = [
  {
    id: 1,
    title: "パステルピンクの女子部屋",
    imageUrl: "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=800",
    tags: ["ガーリー", "パステル"],
    likes: 892,
    author: "Koroちゃん",
    authorAvatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/koroavalab-FODkccTtStWS1IeIojWBsA-1o39ojIO4jcgCHbrXLiPOZr6zI8r5I.png"
  },
  // ... 他の部屋のデータ ...
]

export default function ExploreTab() {
  return (
    <div className="p-4">
      <div className="flex items-center space-x-2 mb-6">
        <Input 
          type="search" 
          placeholder="お気に入りのインテリアを探す" 
          className="bg-white/80"
        />
      </div>
      <div className="grid grid-cols-1 gap-6">
        {roomInspirations.map(room => (
          <RoomCard key={room.id} {...room} />
        ))}
      </div>
    </div>
  )
}

このコードでは、roomInspirations配列に部屋のデータを格納しているよ。ExploreTabコンポーネントでは、検索バーと部屋のカードを表示しているの。map関数を使って、すべての部屋データをRoomCardコンポーネントに渡してレンダリングしているんだ🏠

In this code, we're storing room data in the roomInspirations array. The ExploreTab component displays a search bar and room cards. We're using the map function to pass all room data to the RoomCard component for rendering 🏠

2. 🏡 マイルームタブ

🏡 My Rooms Tab

自分で作ったお部屋を全部ここで管理できちゃう！それぞれのお部屋にタイトルや説明文をつけたり、いいね数も見られるよ。もちろん、いつでも編集もできるからね！

You can manage all the rooms you've created here! You can add titles and descriptions to each room, and see how many likes they've got. Of course, you can edit them anytime!

import React from 'react'
import { PlusCircle, Heart } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

const myRooms = [
  {
    id: 1,
    title: "My Dream Bedroom 2024",
    imageUrl: "https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=800",
    description: "ピンクとホワイトを基調とした、プリンセスのような空間✨",
    likes: 1289,
    date: "2024/01/15"
  },
  // ... 他の部屋データ ...
]

export default function MyRoomsTab() {
  return (
    <div className="p-4 space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-bold">My Rooms</h2>
        <Button variant="outline" size="sm">
          <PlusCircle className="w-4 h-4 mr-2" />
          新規作成
        </Button>
      </div>
      {myRooms.map(room => (
        <Card key={room.id} className="overflow-hidden">
          <CardContent className="p-0">
            <img 
              src={room.imageUrl} 
              alt={room.title} 
              className="w-full h-48 object-cover"
            />
            <div className="p-4">
              <div className="flex justify-between items-start mb-2">
                <h3 className="font-semibold text-lg">{room.title}</h3>
                <span className="text-sm text-gray-500">{room.date}</span>
              </div>
              <p className="text-gray-600 text-sm mb-3">{room.description}</p>
              <div className="flex justify-between items-center">
                <Button variant="ghost" size="sm" className="text-pink-600">
                  <Heart className="w-4 h-4 mr-1 fill-current" />
                  {room.likes}
                </Button>
                <Button variant="outline" size="sm">
                  編集する
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

In this tab, we're displaying a list of rooms created by the user. There's also a button to create a new room! Each room is displayed as a card, with an edit button and the number of likes 📝

3. 🎭 クリエイトタブ

🎭 Create Tab

ここが一番楽しいところ〜！可愛い家具やアイテムを選んで、自分だけの夢のお部屋を作っていくの。ピンクのふわふわソファにゴールドのおしゃれなデスクランプなど、アイテムは盛りだくさん！組み合わせて素敵な空間を作ってね🌟

This is the most fun part~! You can choose cute furniture and items to create your very own dream room. From fluffy pink sofas to stylish gold desk lamps, there are lots of items to choose from! Combine them to create a wonderful space 🌟

import React, { useState } from 'react'
import { Camera } from 'lucide-react'
import { Button } from "@/components/ui/button"

const furnitureItems = [
  { 
    id: 1, 
    name: "ピンクベロアソファ", 
    imageUrl: "https://images.unsplash.com/photo-1617103996702-96ff29b1c467?w=400",
    price: "¥89,000"
  },
  // ... 他の家具アイテム ...
]

export default function CreateTab() {
  const [selectedItem, setSelectedItem] = useState(null)

  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">新しいルームをデザイン</h2>
      <div className="bg-white rounded-lg shadow-md p-4 mb-4 min-h-[300px] relative">
        {selectedItem ? (
          <img 
            src={selectedItem.imageUrl} 
            alt={selectedItem.name}
            className="w-full h-full object-cover rounded-md"
          />
        ) : (
          <div className="flex flex-col items-center justify-center h-full text-gray-400">
            <Camera className="w-12 h-12 mb-2" />
            <p>アイテムを選択してデザインを始めましょう</p>
          </div>
        )}
      </div>
      <div className="grid grid-cols-2 gap-4 mb-4">
        {furnitureItems.map(item => (
          <Button 
            key={item.id} 
            variant="outline" 
            className="h-32 p-0 overflow-hidden relative group"
            onClick={() => setSelectedItem(item)}
          >
            <img 
              src={item.imageUrl} 
              alt={item.name}
              className="w-full h-full object-cover"
            />
            <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white p-2 text-sm">
              <div className="font-medium truncate">{item.name}</div>
              <div className="text-xs">{item.price}</div>
            </div>
          </Button>
        ))}
      </div>
    </div>
  )
}

このタブでは、useStateフックを使って選択されたアイテムの状態を管理しているの。ユーザーがアイテムを選ぶと、そのアイテムが大きく表示されるようになっているんだ。家具アイテムはただのボタンじゃなくて、部屋に置けるものの小さなプレビューになっているの！

In this tab, we're using the useState hook to manage the state of the selected item. When a user selects an item, it's displayed larger. The furniture items aren't just buttons, they're like little previews of what you can put in your room!

4. 🐇 プロフィールタブ

🐇 Profile Tab

自分のプロフィールをかわいくデコれちゃう！SNSのリンクやQRコードも追加できるから、お友達とも簡単につながれるよ。人気の投稿や自己紹介文も載せられるから、みんなともっと仲良くなれちゃう！

You can decorate your profile to make it super cute! You can add links to your social media and QR codes, so it's easy to connect with friends. You can also add popular posts and a self-introduction, so everyone can get to know you better!

import React from 'react'
import { Instagram } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { XLogo } from './x-logo'

export default function ProfileTab() {
  return (
    <div className="p-0">
      <div className="relative">
        <div className="h-32 bg-gradient-to-r from-pink-200 to-purple-200" />
        <div className="absolute -bottom-16 left-1/2 -translate-x-1/2">
          <a 
            href="https://note.com/korovrm/" 
            target="_blank" 
            rel="noopener noreferrer"
            className="block group transition-transform hover:scale-105"
          >
            <Avatar className="w-32 h-32 border-4 border-white group-hover:border-pink-200">
              <AvatarImage src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Koro%E3%81%A1%E3%82%83%E3%82%93%E3%81%8A%E6%B4%92%E8%90%
BD-ibN6jxwAmNUeURvwocb1sG4DIxkWxc.png" />
              <AvatarFallback>KR</AvatarFallback>
            </Avatar>
          </a>
        </div>
      </div>

      <div className="px-4 pt-20 pb-6 text-center">
        <h2 className="text-2xl font-bold mb-1">Koro</h2>
        <p className="text-gray-600 mb-4">インテリアとお菓子が大好きな女の子🎀✨</p>
        
        <div className="flex justify-center gap-3 mb-6">
          <a 
            href="https://www.instagram.com/korovrm/" 
            target="_blank" 
            rel="noopener noreferrer"
            className="inline-flex items-center px-4 py-2 text-sm font-medium border rounded-md hover:bg-accent hover:text-accent-foreground active:scale-95 transition-all"
          >
            <Instagram className="w-4 h-4 mr-2" />
            @korovrm
          </a>
          <a 
            href="https://x.com/korovrm" 
            target="_blank" 
            rel="noopener noreferrer"
            className="inline-flex items-center px-4 py-2 text-sm font-medium border rounded-md hover:bg-accent hover:text-accent-foreground active:scale-95 transition-all"
          >
            <XLogo className="w-4 h-4 mr-2 fill-current" />
            @korovrm
          </a>
        </div>

        <div className="grid grid-cols-3 gap-4 text-center mb-8">
          <div className="bg-white p-4 rounded-lg shadow-sm">
            <div className="text-2xl font-bold text-pink-600">24</div>
            <div className="text-sm text-gray-500">ルーム</div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow-sm">
            <div className="text-2xl font-bold text-pink-600">3.2k</div>
            <div className="text-sm text-gray-500">フォロワー</div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow-sm">
            <div className="text-2xl font-bold text-pink-600">1.5k</div>
            <div className="text-sm text-gray-500">いいね</div>
          </div>
        </div>

        <Separator className="mb-8" />

        <div className="space-y-6">
          <div>
            <h3 className="font-semibold mb-3">自己紹介</h3>
            <p className="text-gray-600 text-sm leading-relaxed">
              Koroちゃんです🐰<br />
              インテリアコーディネートとスイーツ作りに夢中💕<br />
              毎日の暮らしを可愛く楽しく過ごすためのアイデアを発信中✨
            </p>
          </div>

          <div>
            <h3 className="font-semibold mb-3">Follow Me!</h3>
            <div className="flex justify-center gap-4">
              <a 
                href="https://www.foriio.com/korovrm" 
                target="_blank" 
                rel="noopener noreferrer" 
                className="w-32 group"
              >
                <img 
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portforio%20QR%E3%82%B3%E3%83%BC%E3%83%89-Sk1u4Vcjw1fhp60l7lMJP3M6IrUICu.png"
                  alt="Portfolio QR Code" 
                  className="w-full rounded-lg shadow-sm group-hover:opacity-90 transition-opacity"
                />
                <p className="text-sm text-gray-500 mt-2">Portfolio</p>
              </a>
              <a 
                href="https://note.com/korovrm" 
                target="_blank" 
                rel="noopener noreferrer" 
                className="w-32 group"
              >
                <img 
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Koro%E3%81%A1%E3%82%83%E3%82%93%20note%20QR%E3%82%B3%E3%83%BC%E3%83%89.jpg-1Xswc5E6UNV51dOfmySZJalcpkgFIb.jpeg"
                  alt="Note QR Code" 
                  className="w-full rounded-lg shadow-sm group-hover:opacity-90 transition-opacity"
                />
                <p className="text-sm text-gray-500 mt-2">note</p>
              </a>
            </div>
          </div>

          <div>
            <h3 className="font-semibold mb-3">人気の投稿</h3>
            <div className="grid grid-cols-3 gap-2">
              <img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=800" alt="Popular post 1" className="w-full h-24 object-cover rounded-lg" />
              <img src="https://images.unsplash.com/photo-1585128792020-803d29415281?w=800" alt="Popular post 2" className="w-full h-24 object-cover rounded-lg" />
              <img src="https://images.unsplash.com/photo-1594026112284-02bb6f3352fe?w=800" alt="Popular post 3" className="w-full h-24 object-cover rounded-lg" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

プロフィールタブでは、グラデーションのヘッダーと大きなアバター画像を使って、ユーザーのプロフィールをおしゃれに表示しているの。SNSリンクやQRコード、自己紹介、人気の投稿なども表示して、ユーザーの個性が光るページになっているんだ✨

In the profile tab, we're using a gradient header and a large avatar image to display the user's profile in a stylish way. We're also showing social media links, QR codes, self-introduction, and popular posts, making it a page where the user's personality can really shine ✨

💕 アプリのデザインについて

💕 About the App's Design

DreamRoomは、やわらかくて温かみのある雰囲気にしたの！ピンクやパステルカラーをメインに使って、女の子が大好きな可愛らしさがいっぱい詰まったデザインになってるよ。

I made DreamRoom have a soft and warm atmosphere! Using mainly pink and pastel colors, it's a design filled with the cuteness that girls love.

例えば、こんな感じのカラーパレットを使っているの：

For example, I'm using a color palette like this:

• 背景色: #FDF8F5 (優しいベージュ)
  Background color: #FDF8F5 (soft beige)
• アクセントカラー: #E8B4B8 (柔らかいピンク)
  Accent color: #E8B4B8 (soft pink)
• テキストカラー: #614E4E (落ち着いたブラウン)
  Text color: #614E4E (calm brown)

Tailwind CSSを使って、これらの色を簡単に適用できるようにしているんだ。例えば：

I'm using Tailwind CSS to easily apply these colors. For example:

<div className="max-w-md mx-auto bg-[#FDF8F5] min-h-screen">
  <header className="bg-gradient-to-r from-[#E8B4B8] to-[#EED6D3] text-white p-4">
    <h1 className="text-2xl font-bold text-center">DreamRoom</h1>
  </header>
  
  {/* ... タブコンテンツ ... */}
  {/* ... tab contents ... */}
</div>

アプリ全体を包む要素には、優しいベージュ系の背景色（#FDF8F5）を使っているの。ヘッダーには、ピンクのグラデーションを適用して、女の子らしさを演出しているんだ🎀

For the element wrapping the entire app, I'm using a soft beige background color (#FDF8F5). For the header, I've applied a pink gradient to create a girly feel 🎀

🔧 ちょっとだけ技術的なお話

🔧 A Little Bit of Technical Talk

• Next.js App Routerを使って、最新のReactの良いところをたくさん取り入れたよ！
  I've incorporated many of the best parts of the latest React using Next.js App Router!
• Tailwind CSSでスタイリングして、どんな画面サイズでも見やすくなってるの！
  I've styled it with Tailwind CSS, so it looks good on any screen size!
• shadcn/uiというコンポーネントライブラリを使って、見た目も使い心地も最高のUIにしたんだ〜
  I've used a component library called shadcn/ui to create a UI that looks great and feels great to use~

例えば、RoomCardコンポーネントでは、shadcn/uiのCard、Button、Avatarコンポーネントを使っているの。これらのコンポーネントは、アクセシビリティや使いやすさが考慮されていて、さらにカスタマイズも簡単なんだ。

For example, in the RoomCard component, I'm using shadcn/ui's Card, Button, and Avatar components. These components are designed with accessibility and usability in mind, and they're also easy to customize.

また、状態管理には主にReactのuseStateフックを使っているよ。例えば、いいね機能はこんな感じで実装しているの：

Also, I'm mainly using React's useState hook for state management. For example, the like feature is implemented like this:

const [likes, setLikes] = useState(initialLikes)
const [isLiked, setIsLiked] = useState(false)

const handleLike = () => {
  if (isLiked) {
    setLikes(prev => prev - 1)
  } else {
    setLikes(prev => prev + 1)
  }
  setIsLiked(!isLiked)
}

これで、ユーザーがいいねボタンを押すたびに、状態が更新されて再レンダリングが行われるんだ。

With this, every time a user presses the like button, the state is updated and re-rendering occurs.

🌸 まとめ

🌸 Summary

DreamRoomは、みんなの「可愛い！」を詰め込んだ夢のようなアプリなの。インテリア好きな子はもちろん、お部屋づくりに興味がある人みんなに使ってほしいな！

DreamRoom is a dream-like app filled with everyone's "cute!" ideas. I hope not only interior design lovers but everyone interested in room decoration will use it!

コードを見てみると、React HooksやTailwind CSS、shadcn/uiなどの最新技術を使って、効率的で拡張性の高いアプリになっているのがわかるよね。これからプログラミングを勉強する人も、この記事を参考に素敵なアプリを作ってみてね！

Looking at the code, you can see that it's an efficient and scalable app using the latest technologies like React Hooks, Tailwind CSS, and shadcn/ui. For those who are just starting to learn programming, I hope you'll use this article as a reference to create your own wonderful apps!

みんなの感想、楽しみに待ってるね！素敵なインテリアライフを過ごしてね〜🏠💖

I'm looking forward to hearing everyone's thoughts! Have a wonderful interior life~🏠💖

#インテリア #アプリ開発 #React #NextJS #TailwindCSS #かわいい #ルームデザイン
#InteriorDesign #AppDevelopment #React #NextJS #TailwindCSS #Cute #RoomDesign

🐇 作者について

🐇 About Author

• Twitter: @KoroVRM
• GitHub: このプロジェクトのリポジトリ

🪄Next.js × Tailwind CSS で作る🐰
100種類の癒し系日本語&英語バイリンガルAIおみくじアプリ💝