質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Reactで、FontAwesomeIconが表示されない

Shmupeiii
Shmupeiii

総合スコア73

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

1クリップ

415閲覧

投稿2021/12/31 03:03

前提・実現したいこと

Next.jsのポートフォリオを作っており、オブジェクトの要素をmapメソッドを使って、FontAwesomeIconを表示したい

発生している問題・エラーメッセージ

イメージ説明

オブジェクトの要素をmapメソッドを使って、「Skill」という部分で、FontAwesomeIconや文字などを表示しようとしています。
他の要素は表示できたんですが、FontAwesomeIconだけうまく表示されません。
色々解決をしようとしたんですが、上手くいきませんでした。
小さなミスで申し訳ないですが、よろしくお願いします。

github
https://github.com/takoyan33/nextjs-portfolio
表示(下にスクロールして頂けると、SKill部分のFontAwesomeIconが表示されていません。)
https://nextjs-portfolio-puce.vercel.app/

該当のソースコード

//main.js import Link from 'next/link'; import Image from 'next/image'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHtml5, faCss3, faReact, faJs, faWordpress } from "@fortawesome/free-brands-svg-icons"; import { faGem } from "@fortawesome/free-regular-svg-icons"; import { faCamera} from "@fortawesome/free-solid-svg-icons"; import Portfolio from "./Portfolio.js" import Skill from "./Skill.js export default function Main() { const skills = [ { skill_name: 'HTML', skill_rank: '★★★★', skill_tag: '経験年数:1年半', skill_icon: 'faHtml5' }, { skill_name: 'CSS(SCSS)', skill_rank: '★★★★', skill_tag: '経験年数:1年半', skill_icon: 'faCss3' }, { skill_name: 'JavaScript(jQuery)', skill_rank: '★★★', skill_tag: '経験年数:1年', skill_icon: 'faJs' }, { skill_name: 'Ruby on Rails', skill_rank: '★★', skill_tag: '経験年数:4ヶ月', skill_icon: 'faGem' }, { skill_name: 'React/Next.js', skill_rank: '★★★', skill_tag: '経験年数:6ヶ月', skill_icon: 'faReact' }, { skill_name: 'WordPress', skill_rank: '★★★', skill_tag: '経験年数:1年', skill_icon: 'faWordpress' }, { skill_name: 'PhotoShop/Illustrator', skill_rank: '★★★', skill_tag: '経験年数:1年半', skill_icon: 'faCamera' }, ] return ( { skills.map((skill,index) => <Skill key={index} skill_name={skill.skill_name} skill_date={skill.skill_rank} skill_tag={skill.skill_tag} skill_icon={skill.skill_icon} /> ))}

JavaScript

//Skill.js import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHtml5, faCss3, faReact, faJs, faWordpress } from "@fortawesome/free-brands-svg-icons"; import { faGem } from "@fortawesome/free-regular-svg-icons"; import { faCamera} from "@fortawesome/free-solid-svg-icons"; export default function Skill({skill_name, skill_rank, skill_tag, skill_icon}) { return ( <div className="flx_el"> <p className="tac"> <FontAwesomeIcon icon={{skill_icon}} className="size" /> </p> <p className="code_title">{skill_name} </p> <p className="code_title">{skill_rank }</p> <p className="code_title">{skill_tag}</p> </div> )

補足情報(FW/ツールのバージョンなど)

{ "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", "date-fns": "^2.11.1", "gray-matter": "^4.0.2", "next": "latest", "react": "17.0.2", "react-dom": "17.0.2", "remark": "^14.0.1", "remark-html": "^15.0.0" } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。