はじめに
私はアウトプットの方法としてQiitaをよく利用させていただいています。自分のエンジニア生活の中でQiitaはかけがえのないものとなっています。そこで、自分のポートフォリオにQiitaの記事を持ってきてしまおうと思ったがきっかけで、その方法をシェアしようと思いこの記事を書いています。
実装
以下のコードを既存のコードに加えるだけで
<div id="qiita-articles"></div>
の中に自分の記事が反映されます。
<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をいかに貼り付けます
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;
}
実行結果
HTMLだけ
CSS反映
hover時
Qiita API連携の実装説明
概要
Qiita APIを使用して特定ユーザーの記事を取得し、ページに動的に表示するコードについて説明します。
HTMLの基本構造
<main>
<h1 class="title">Qiita</h1>
<div id="qiita-articles"></div>
</main>
記事を表示するための空のコンテナ（qiita-articles）を用意します。
処理の詳細説明
1. APIリクエスト
fetch('https://qiita.com/api/v2/items?query=user%3A<user_name>')
QiitaのAPIエンドポイントにGETリクエストを送信する。
<user_name>の部分を対象ユーザー名に置き換えて使用すると対象ユーザーのQiitaのデータが取得できる。取得できるデータの詳細はこちら
例
fetch('https://qiita.com/api/v2/items?query=user%3Abearl27')
2. データ処理
.then(response => response.json())
- APIからのレスポンスをJSON形式に変換
- このJSONデータには記事のタイトル、作成日時、いいね数などの情報が含まれる
3. 記事の表示処理
.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. 記事の内容構築
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. クリックイベントの追加
articleElement.addEventListener('click', () => {
window.open(article.url, '_blank');
});
記事要素をクリックした時の動作の定義をしている。
-
window.open(): 新しいタブで記事を開く -
article.url: 記事のQiitaページURL -
'_blank': 新しいタブで開くことを指定
6. DOMへの追加
articlesContainer.appendChild(articleElement);
作成した記事要素（articleElement）をコンテナ（articlesContainer）の子要素として追加する。
これにより実際にページ上に記事が表示される！
最後に
ポートフォリオにQiitaの記事を表示する方法を説明しました。みなさんもQiitaをたくさん書いてポートフォリをいい感じにしましょう^ ^
それではみなさんいいエンジニアライフを〜👋
参考資料