QiitaAPIを使用して自分の記事をポートフォリオに掲載する

## 事前準備
下記リンクを参考にアクセストークンを取得しておく
[Qiitaのアクセストークンの取得
](https://qiita.com/miyuki_samitani/items/bfe89abb039a07e652e6#qiita%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E5%8F%96%E5%BE%97)

## POSTMANでAPIに接続してみる
POSTMANを起動して下記の通り接続してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/70dff232-e91c-8079-3dd6-7c28c606409c.png)
URLは↓
```
https://qiita.com/api/v2/authenticated_user/items
```

認証は`Authorization`タブを選択してTypeを`Bearer Token`を選択し、Tokenのhogehoge部分を先ほど取得したトークンを入力しておく

レスポンスとしてはこんな感じになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/1a455db4-37d3-af99-6a59-ccc317658b14.png)
これは僕が書いた最新の記事になる
どうやらデフォルトで`created_at`の昇順になっているみたい

## これをNext.jsを使用したポートフォリオに掲載する
余談ですがNext.jsのチュートリアルを進めていたらポートフォリオっぽくなった気がしたので個人的な事情によりNext.jsで実装する
VanillajsだったりReactだったりVueでも問題なく実装できるのでそれぞれの環境に合わせて実装すると良き

さて、Next.jsでの実装ですので静的レンダリング（以降SSG）かサーバーサイドレンダリング（以降SSR）になるが、今回はデータの更新がほぼ無いのでSSGでの実装をする

```js
export async function getStaticProps() {
  const token = 'hogehoge'
  const res = await fetch('https://qiita.com/api/v2/authenticated_user/items', {
      headers: {
          Authorization: `Bearer ${token}`,
      }
  })

  const allPostsData = await res.json()

  return {
    props: {
      allPostsData,
    }
  }
}
```
オブジェクトをjson配列にして親コンポーネントへデータを送る

```jsx
export default function Home({ allPostsData }) {
    return <Layout>
    <section>
      <h2>投稿記事（Qiitaに飛びます）</h2>
      <div className={styles.grid}>
        {allPostsData.map(({id, created_at, title, url, likes_count}) => (
          <article key={id}>
            <Link href={`${url}`} className={utilStyle.boldText} target='_blank'>
                {title}
              <br />
              <small className={utilStyle.lightText}>
                <Date dateString={created_at} />
              </small>
              <br />
              <small className={utilStyle.lightText}>
                {likes_count}いいね
              </small>
            </Link>
          </article>
        ))}
      </div>
    </section>
  </Layout>
}
```

```js
export default function Home({ allPostsData }) {
```
で先ほど送った`allPostsData`を取得する

```js
allPostsData.map(({id, created_at, title, url, likes_count}) => (
```
ここで取得したデータをmap関数で取得したデータを繰り返し使用する
引数には今回使用するカラムを指定する
実装環境に合わせてカラムを変えるのはアリ
[カラム一覧はこちら](https://qiita.com/api/v2/docs#%E6%8A%95%E7%A8%BF)

```jsx
 <article key={id}>
    <Link href={`${url}`} className={utilStyle.boldText} target='_blank'>
        {title}
      <br />
      <small className={utilStyle.lightText}>
        <Date dateString={created_at} />
      </small>
      <br />
      <small className={utilStyle.lightText}>
        {likes_count}いいね
      </small>
    </Link>
 </article>
```
jsx部分　こちらは実装に合わせて各々で実装すると良き

画面ではこのように表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/13b7b8c9-9c0f-331a-11bc-425ba23c7b0c.png)
これで自分の記事を取得し、ポートフォリオに掲載することができた


## （余談）いいね数が多い順にする
先ほどの[map関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)に[メソッドチェーン](https://shanabrian.com/web/javascript/about-method-chain.php)をする形でsort関数をくっつける
```js
allPostsData
.sort((a, b) => b.likes_count - a.likes_count)
.map(({id, created_at, title, url, likes_count}) => (
```
少し途切れてしまったが、実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/1672b4d3-ac8e-05f3-c04d-4cc6f95ed683.png)
これでいいね数が多い順になった

## （余談）いいね数が１以上の記事のみ掲載する
いいね数が0のものを表示させるのも何やら悲しい気持ちにもなってくるのでこれを表示させないようにしたい
先ほどのsort関数と同じようにメソッドチェーンを使用して[filter関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)を実装する
```js
allPostsData
.filter(post => post.likes_count >= 1)
.map(({id, created_at, title, url, likes_count}) => (
```

実行結果の最下部
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282722/425f10de-4fe6-aeb6-d1ba-e76e483eae43.png)
いいね数が0の部分は表示されずに済んだ

## おわりに
今回はQiitaAPIを使用して画面上に表示させる処理を書いてみました。
QiitaAPIもNext.jsもjsも素人ですので何かございましたらコメントいただけると幸いです。
ここまでご覧いただきありがとうございました！