ReactでSNSアイコンを表示してみた：FontAwesomeとリンクの使い方
アイコン
さあ始まりました！愛すべきこんにゃく選手権、略してアイコン！！
実況はワタクシ、灰色侍がいたします。
今宵もこんにゃく達による熱い戦いが始まります。
早速選手入場です！
赤コーナー、朱雀の方角！滝のように激しい女！糸こんにゃく！！
青コーナー、玄武の方角！転がし出したら止まらない！たまこんにゃく！！
どちらが勝つのでしょうか。全くわかりません！！
この試合は一体なんなのでしょうか！
そもそもこんにゃくとは！
ワタクシ？
ああ、今日も星が綺麗です。
......なんか掴みどころのない話になってしまった。
こんにゃくだけに。
目次
1. そもそもReactって何
Reactは、ユーザーインターフェイス（UI）を構築するためのJavaScriptライブラリです。
Facebookが開発し、2013年にオープンソース化しました。
特に、一つのページで完結するウェブサイトの作成によく使われます。
これにより、ページを切り替える時にもサクサク動き、待ち時間が少なくなります。
Reactは、ウェブサイトをコンポーネントと呼ばれる、小さなパーツ（ブロックやボタンなど）に分けて考えることで、複雑なウェブサイトも簡単に作れるようにします。
2. FontAwesomeとは
FontAwesomeは、ウェブサイトやウェブアプリケーションに簡単に組み込めるアイコンのセットです。
これは、テキストと同様に扱えるベクター画像で構成されており、サイズを自由に変更できたり、CSSでスタイルを適用できたりします。
ベクター画像は、線や形、色などの幾何学的な属性を数学的な式で表現した画像のことです。
これにより、どんなに拡大しても画質が低下しないため、ロゴやアイコン、図面など、クリアなラインが必要なデザインに適しています。
デザインの一貫性を保ちながら、ユーザーインターフェイスをより直感的で視覚的に魅力的にするためによく使われます。
3. ReactでのFontAwesomeの使い方
実際に書いてみます。
ステップ1: 新しいReactアプリケーションを作成する
まず、新しいReactアプリケーションを作成します。ターミナルを開き、以下のコマンドを実行してください。
npx create-react-app my-social-app
途中で
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)
とcreate-react-app@5.0.1をインストールするかどうか尋ねられたら、yと答えて進めます。
lsコマンドを実行して
ls my-social-app/
以下のように表示されていれば成功です。
node_modules package-lock.json package.json public README.md src
ステップ2: FontAwesomeライブラリをインストールする
アプリケーションの作成が完了したら、FontAwesomeのライブラリをプロジェクトに追加します。
先ほど作成したディレクトリへ行き、以下のコマンドを使用して、必要なパッケージをインストールします。
cd my-social-links-app
npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
ステップ3: アイコンを表示する
インストールが完了したら、src/App.jsファイルを開いて、FontAwesomeアイコンを使用するコードを書きます。
例として、Instagram、Twitter、LINEのアイコンを表示するコードは以下の通りです。
なお今回はふつうのショップさんのSNSを利用しています。
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInstagram, faTwitter, faLine } from '@fortawesome/free-brands-svg-icons';
function App() {
return (
<div style={{ marginTop: '20px', textAlign: 'center', border: '1px solid', padding: '20px', fontSize: '1.2em' }}>
<p style={{ fontSize: '2em', marginBottom: '20px' }}>公式SNS</p>
<a href="https://www.instagram.com/futsunoshop/" target="_blank" rel="noopener noreferrer" style={{ margin: '0 10px' }}>
<FontAwesomeIcon icon={faInstagram} size="2x" />
</a>
<a href="https://twitter.com/futsunoshop" target="_blank" rel="noopener noreferrer" style={{ margin: '0 10px' }}>
<FontAwesomeIcon icon={faTwitter} size="2x" />
</a>
<a href="https://futsuno.shop/shop/pages/line_campaign" target="_blank" rel="noopener noreferrer" style={{ margin: '0 10px' }}>
<FontAwesomeIcon icon={faLine} size="2x" />
</a>
</div>
);
}
export default App;
ステップ4: アプリケーションを起動する
最後に、アプリケーションを起動して、アイコンが正しく表示されるか確認します。
ターミナルで以下のコマンドを実行してください。
npm start
成功するとhttp://localhost:3000/でブラウザが自動的に開き、以下のように表示されます。
コードスニペット解説
この部分について詳しくみていきます。
<a href="https://futsuno.shop/shop/pages/line_campaign" target="_blank" rel="noopener noreferrer" style={{ margin: '0 10px' }}>
<FontAwesomeIcon icon={faLine} size="2x" />
</a>
<a>とは？
<a>タグは、HTMLでハイパーリンクを作成するために使用されます。
このタグを使うことで、ユーザーがクリックすると別のページやサイト、文書に移動することができます。
href属性には、リンク先のURLを指定します。
因みに「a」は「anchor（アンカー）」の略です。
hrefとは？
href属性は、ハイパーリンクが指す先のURLを定義します。この例では、
"https://futsuno.shop/shop/pages/line_campaign"
がリンク先として設定されており、ユーザーがアイコンをクリックするとこのURLにアクセスします。
因みに「href」は「hypertext reference」の略です。
targetとは？
target属性は、リンクをどこで開くかを指定します。
"_blank"の値は新しいタブ（またはウィンドウ）でリンクを開くようにブラウザに指示します。
これにより、ユーザーが現在のページを離れることなく、リンクの内容を確認できます。
relとは？
rel属性は、現在のドキュメントとリンク先のドキュメントとの関係を定義します。
"noopener noreferrer"はセキュリティとプライバシーを向上させるために重要です。
- noopenerの役割: 新しいタブでリンクが開かれた時、そのタブは元のページに対してwindow.openerプロパティを通じて「戻る」ことができます。
悪意のあるサイトはこのプロパティを利用して、元のページを操作する可能性があります（例えば、フィッシングサイトにリダイレクトするなど）。
noopenerを使用することで、新しいタブが元のページへの参照を持たなくなり、この種の攻撃を防ぐことができます。
- noreferrerの役割: 通常、ブラウザはリンクをクリックした時にリファラ情報（ユーザーがどのページから来たか）を送信します。
これがプライバシーの問題になることがあります。特に、センシティブな情報がURLに含まれている場合、noreferrerを使用すると、このリファラ情報の送信を防ぎ、ユーザーのプライバシーを保護します。
因みに「rel」は「relationship」の略です。
styleとは？
style属性を使用して、直接HTML要素にスタイル（CSS）を適用できます。
この例では、style属性により、リンク周囲のマージンを0にし、10pxの余白を追加しています。
これにより、アイコン間の視覚的な間隔が確保されます。
4. おわりに
ReactやJavaScriptに触れてみましたが、構造がわかりやすく、扱いやすかったです。
しかし、そのぶんタグやその意味などは豊富なので、今後も触れつつ、学んでいきたいです。