ReactでオシャレなプロフィールWebサイトを作成してみた【初心者向け】

# はじめに

こんにちは！今回は、**React**を使って簡単かつオシャレなプロフィールWebサイトを作成する方法をご紹介します。プロフィールサイトを手軽に作りたい方や、Reactを使ってみたい初心者の方に向けた内容です。

## 使用技術
- **React**
- **styled-components**（CSS-in-JSで簡単にスタイルを適用）
- **Node.js**（Reactアプリの作成）

---

## 完成イメージ
![スクリーンショット 2024-09-30 18.30.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/2f3f5e52-b6b7-de26-ee20-9ee7ba9d9bc2.png)


## プロジェクトの作成手順

まずは、Reactアプリを作成していきます。

### 1. Reactプロジェクトのセットアップ
```bash
npx create-react-app profile-website
cd profile-website
npm install styled-components
npm start
```

上記のコマンドを実行することで、Reactプロジェクトが作成され、開発サーバーが起動します。これで準備完了です！

---

### 2. プロフィールWebサイトの作成

次に、オシャレなプロフィールページを作成していきます。今回は、**styled-components**を使ってスタイルを管理します。

#### `src/App.js`のコード

```javascript
import React from 'react';
import styled from 'styled-components';

// スタイリング
const ProfileContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f8ff;
  height: 100vh;
  font-family: 'Arial', sans-serif;
`;

const ProfileCard = styled.div`
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  text-align: center;
`;

const ProfileImage = styled.img`
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
`;

const ProfileName = styled.h1`
  font-size: 2em;
  margin: 20px 0 10px;
`;

const ProfileJob = styled.h2`
  font-size: 1.2em;
  color: #888;
  margin-bottom: 20px;
`;

const ProfileDescription = styled.p`
  font-size: 1em;
  color: #555;
  line-height: 1.5;
`;

const SocialLinks = styled.div`
  margin-top: 20px;
  display: flex;
  gap: 15px;
`;

const SocialIcon = styled.a`
  font-size: 1.5em;
  color: #888;
  transition: color 0.3s ease;
  
  &:hover {
    color: #000;
  }
`;

function App() {
  return (
    <ProfileContainer>
      <ProfileCard>
        <ProfileImage src="https://via.placeholder.com/150" alt="Profile" />
        <ProfileName>Anonymous User</ProfileName>
        <ProfileJob>Web Developer</ProfileJob>
        <ProfileDescription>
          I am passionate about creating modern web applications using React. Always eager to learn new technologies and improve my skills!
        </ProfileDescription>
        <SocialLinks>
          <SocialIcon href="https://github.com" target="_blank">🐱 GitHub</SocialIcon>
          <SocialIcon href="https://twitter.com" target="_blank">🐦 Twitter</SocialIcon>
          <SocialIcon href="https://linkedin.com" target="_blank">🔗 LinkedIn</SocialIcon>
        </SocialLinks>
      </ProfileCard>
    </ProfileContainer>
  );
}

export default App;
```

### 3. スタイリングのポイント
- **ProfileContainer**: Webページ全体を中央揃えし、背景色を設定。
- **ProfileCard**: プロフィール情報をカード形式で表示し、ボックスシャドウで立体感を演出。
- **ProfileImage**: 円形に切り取ったプロフィール画像を表示。
- **SocialLinks**: GitHub、Twitter、LinkedInなどのアイコンをホバーすると色が変わるアニメーションを設定。

### 4. 実行結果

このコードを実行すると、写真、名前、職業、自己紹介、そしてソーシャルメディアへのリンクが表示されたオシャレなプロフィールWebサイトが完成します。

---

## カスタマイズのアイデア

- **プロフィール写真の変更**: `src="https://via.placeholder.com/150"` の部分を、自分のプロフィール画像のURLに変更してください。
- **色やフォントのカスタマイズ**: `styled-components` を使って、自由にスタイルを調整できます。背景色やフォントサイズを変更して、自分好みのデザインにしましょう！
- **ソーシャルリンクの追加**: 必要に応じて、他のSNSアイコンを追加することもできます。

---

## まとめ

Reactとstyled-componentsを使うことで、簡単にオシャレなプロフィールWebサイトを作成することができました。初心者の方でも簡単に作成できるので、ぜひ挑戦してみてください！

Reactの学習を進めて、さらにカスタマイズしたり、他の機能を追加したりすることで、独自のプロフィールサイトを完成させましょう。

それでは、良いReactライフを！

--- 

この記事が参考になったら、ぜひ「LGTM」をお願いします！