ページ内リンクの実装

GROWIのコメントの日付部分にアンカー機能を搭載した。

やりたいこと

日付部分をクリックするとそのコメントに直接飛べるようにしたい。

アンカータグとは

アンカータグ<a>~</a>
Webページにリンクを貼り、そのページとリンク先のページを繋ぐ。

<a>タグはインライン要素で、アンカー(Anchor)の略。
リンクの出発点を示す場合は、href属性（エイチレフ属性）でリンク先を指定することができる。また、到達点を示す場合は、name属性やid属性を使用する。

<a href="リンク先のURL">クリックされる文字</a>

id属性

ジャンプ先となる部分には要素にidをつける ページ内の特定要素を指定した場合、指定した先にジャンプすることができる。 記述の仕方は、id="# + 設定したid"

href属性

リンク元にはhref="# + 設定したid"を指定してあげる。

hrefは、hypertext referenceの略で、「ハイパーテキストの参照」と言う意味。 ハイパーテキストとは、通常の文字の機能を超えた文字のこと。 hrefに着地点のidを指定してあげることで、指定された部分に飛ばすことができる。

やったこと

1. リンク先要素にidを付与
2. aタグ、href要素の追加

Comment.jsx
<div id={commentId} className={rootClassName}> //idに{commentId}を付与

   //...((省略))... 
   
   <div className="page-comment-body">{commentBody}</div>
   <div className="page-comment-meta">
      
      　　//commentedDateはブラウザに表示されるコメントした時の日付
         //それをaタグで囲み、hrefにはその日付が書かれたcommentIdを指定
         //ここではidに関数を使用しているので、``で囲んであげる
        <span><a href={`#${commentId}`}>{commentedDate}</a></span>
        
   //...((省略))...

   </div>
</div>

これで、日付部分をクリックすると、URLに #~~~が追加される。そのURLを他ページで検索すると、そのコメントを直接参照できる。(そのコメントをページ内で探す必要はない)

参照

aタグとは｜コーディングのプロが作るHTMLタグ辞典 external_link
aタグのhref属性を理解しよう！hrefの読み方と使い方は？href ... external_link