~Qiitaを愛する者へ~ 自分のQiitaの記事をポートフォリオに持ってくる方法【JavaScriptでQiitaAPIを叩いてみた】

# はじめに
私はアウトプットの方法としてQiitaをよく利用させていただいています。自分のエンジニア生活の中でQiitaはかけがえのないものとなっています。そこで、自分のポートフォリオにQiitaの記事を持ってきてしまおうと思ったがきっかけで、その方法をシェアしようと思いこの記事を書いています。

# 実装
以下のコードを既存のコードに加えるだけで
`<div id="qiita-articles"></div>`
の中に自分の記事が反映されます。

```html
<body>
    <main>
        <h1 class="title">Qiita</h1>
        <div id="qiita-articles"></div>
    </main>

    <script>
        fetch('https://qiita.com/api/v2/items?query=user%3Abearl27')
            .then(response => response.json())
            .then(data => {
                const articlesContainer = document.getElementById('qiita-articles');
                data.forEach(article => {
                    const articleElement = document.createElement('div');
                    articleElement.className = 'article-block';
                    articleElement.innerHTML = `
                        <div class="article-date">${new Date(article.created_at).toLocaleDateString()}</div>
                        <div class="border-line"></div>
                        <div class="article-title">${article.title}</div>
                        <div class="article-good">♡ : ${article.likes_count}</div>
                    `;
                    articleElement.addEventListener('click', () => {
                        window.open(article.url, '_blank');
                    });
                    articlesContainer.appendChild(articleElement);
                });
            });
    </script>
</body>
```
参考までにstyleをいかに貼り付けます
<details><summary>style.css</summary>

```style.css
.title{
    text-align: center;
    font-size: 30px;
    color: #333;
    padding-top:20px;
    padding-bottom:20px;
}

.article-block {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin:10px;
}
.article-block:hover {
    background-color: #f0f0f0;
}

.article-date {
    font-size: 12px;
    color: #999;
}

.border-line{
    margin:10px 0px;
    width: 10px;
    border-bottom: 1px solid #ccc;
}

.article-title {
    font-size: 15px;
    margin-bottom: 10px;
    color: #333;
}
.article-good {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}
```
</details>

# 実行結果

## HTMLだけ
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748983/eb72b0ea-7383-0b7b-902b-72341a0ff31b.png)


## CSS反映
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748983/ffb009a9-6c27-2cee-942c-8a772812f019.png)

 ### hover時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748983/b35343d0-b673-614f-4848-9aa599ab5c5c.png)



# Qiita API連携の実装説明

## 概要
Qiita APIを使用して特定ユーザーの記事を取得し、ページに動的に表示するコードについて説明します。

## HTMLの基本構造
```html
<main>
    <h1 class="title">Qiita</h1>
    <div id="qiita-articles"></div>
</main>
```
記事を表示するための空のコンテナ（`qiita-articles`）を用意します。

## 処理の詳細説明

### 1. APIリクエスト
```javascript
fetch('https://qiita.com/api/v2/items?query=user%3A<user_name>')
```
QiitaのAPIエンドポイントにGETリクエストを送信する。
`<user_name>`の部分を対象ユーザー名に置き換えて使用すると対象ユーザーのQiitaのデータが取得できる。取得できるデータの詳細は[こちら](https://qiita.com/api/v2/docs#get-apiv2items)

<details><summary>例</summary>

```javascript
fetch('https://qiita.com/api/v2/items?query=user%3Abearl27')
```
</details>


### 2. データ処理
```javascript
.then(response => response.json())
```
- APIからのレスポンスをJSON形式に変換
- このJSONデータには記事のタイトル、作成日時、いいね数などの情報が含まれる

### 3. 記事の表示処理
```javascript
.then(data => {
    const articlesContainer = document.getElementById('qiita-articles');
    data.forEach(article => {
        const articleElement = document.createElement('div');
        articleElement.className = 'article-block';
```
2のJSON形式に変換された記事データの配列を`data`として命名して、 
配列の中の1つ1つの記事オブジェクトを`article`と命名する。
`articlesContainer`: HTMLの`qiita-articles`要素を取得しておく。
`data.forEach`で取得した記事データを1つずつ処理し、各記事ごとに新しい`div`要素を作成し、`article-block`クラスを付与する。

### 4. 記事の内容構築
```javascript
articleElement.innerHTML = `
    <div class="article-date">${new Date(article.created_at).toLocaleDateString()}</div>
    <div class="border-line"></div>
    <div class="article-title">${article.title}</div>
    <div class="article-good">♡ : ${article.likes_count}</div>
`;
```
各記事(articleElement)に以下の要素を追加する。
- 投稿日: `article.created_at`をブラウザの地域設定に応じた日付形式に変換
- 区切り線: 見た目を整えるための装飾要素
- タイトル: `article.title`から記事のタイトルを表示
- いいね数: `article.likes_count`からいいね数を表示し、ハートマーク(♡)を付与

### 5. クリックイベントの追加
```javascript
articleElement.addEventListener('click', () => {
    window.open(article.url, '_blank');
});
```
記事要素をクリックした時の動作の定義をしている。
- `window.open()`: 新しいタブで記事を開く
- `article.url`: 記事のQiitaページURL
- `'_blank'`: 新しいタブで開くことを指定

### 6. DOMへの追加
```javascript
articlesContainer.appendChild(articleElement);
```
作成した記事要素（`articleElement`）をコンテナ（`articlesContainer`）の子要素として追加する。
これにより実際にページ上に記事が表示される！


# 最後に
ポートフォリオにQiitaの記事を表示する方法を説明しました。みなさんもQiitaをたくさん書いてポートフォリをいい感じにしましょう^ ^
それではみなさんいいエンジニアライフを〜👋

# 参考資料
https://qiita.com/api/v2/docs#get-apiv2items