React ブックマークアプリを作成し、ファビコン取得したい

Question

React, JavaScript諸々初心者です。
学習のためブックマークアプリを作成しており、名前とURLを登録して、一覧表示するだけのものです。
可能であれば、一覧表示の際にファビコンを表示できたらと思いました。

ググってみたのですが、情報を見つけられなかったため、
取得？、表示の方法についてご存知でしたらコメントいただけたら助かります。

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

export default function Home(props) {
	const [bookmarks, setBookmarks] = useState([]); // <==== Bookmarks State
	const src = `https://www.google.com/s2/favicons?domain=${bookmark.url}`;

	useEffect(() => {
		(async () => {
			try {
				const response = await fetch('/api/bookmarks');
				const data = await response.json();
				setBookmarks(data);
			} catch (error) {
				console.error(error);
			}
		})();
	}, []);

	return (
		<div className="HomePage">
			<ul>
				{bookmarks.map(bookmark => {
					return (
						<li key={bookmark._id}>
							<Link to={`/${bookmark._id}`}>
								<h3>{bookmark.title}</h3>
							</Link>
							<p>
								<img
									src={`https://www.google.com/s2/favicons?domain=${bookmark.url}`}
									alt="icon"
								/>
								{bookmark.url}
							</p>
						</li>
					);
				})}
			</ul>
		</div>
	);
}

Answer 1

面倒な方法

faviconの定義

faviconは<link rel="icon" href='...'>などでHTML内部に記述されているので、これを取得すればよいということになります。
この質問ページ(Teratail)だと<link rel='icon' href='/favicon.ico'>の/favicon.icoです。

favicon定義の取得

どうやって<link rel="icon" href='...'>を取得するかですが、ブラウザ側で外部ドメインのHTMLを取得すると大抵の場合CORS policyに引っ掛かります。ですのでサーバで取得してフロントに渡す処理が必要です。

表示

表示は最も単純な形なら以下のようになるでしょう。

import React from "react";

export default function App(props) {
  const src = "https://teratail.com/favicon.ico"; //実際は直書きではなくサーバから取得
  return <img src={src} alt="teratail_icon" />;
}

簡単な方法

そんな面倒なことしなくてもGoogle Faviconクローラが取得してくれたFaviconを簡単に使用することができるので、これで試してみてください。

import React from "react";

export default function App(props) {
  const site = "https://teratail.com";
  const src = `https://www.google.com/s2/favicons?domain=${site}`
  return <img src={src} alt="teratail_icon" />;
}

Comments

[hiro_ike]

ご丁寧にありがとうございます。大変助かります。

簡単な方法を取り入れたいのですが、質問文内のコードに更新してみました。
{site}の部分は、{bookmark.url}に置き換えられるかなと思ったのですが、エラーになりまして、
もし、お時間ありましたら、誤りをご指摘頂けたら助かります。

[k_a]

それだけ言われても私には状況がわかりません。最低限エラー内容を提示してください。

[hiro_ike]

失礼しました。
const src = `https://www.google.com/s2/favicons?domain=${bookmark.url}`
としましたところ、
この行で、bookmark is not definedとエラーになりました。この場合、どのようにすると{bookmark.url}が使えるかご教授いただけますと幸いです。

[k_a]

`bookmark`はreturn内のmapで取り出した要素ですよね？
当然その外では使用できません。

回答したコードは単純な例であり、質問者様のプログラムにそのまま適用できるものでは有りません。
ただ、多分以下の書き方で良いんじゃないかと思います。
`<img src={https://www.google.com/s2/favicons?domain=${bookmark.url}} alt="icon" />`

[hiro_ike]

表示できました。大変助かりました。
ありがとうございました。