# ページ内リンクの実装
GROWIのコメントの日付部分にアンカー機能を搭載した。

## やりたいこと
日付部分をクリックするとそのコメントに直接飛べるようにしたい。  
![Screen Shot 0002-04-12 at 23.55.01.png](/attachment/5e93c9d51100730048967801)


## アンカータグとは
アンカータグ`<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要素の追加




```jsx: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タグ辞典](https://html-coding.co.jp/annex/dictionary/html/a)  
[aタグのhref属性を理解しよう！hrefの読み方と使い方は？href ...](https://www.marorika.com/entry/href)


---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/ページ内リンクの実装
- Permalink: https://tips.weseek.co.jp/5e93c9d511007300489677ff
- Parent: [開発日記](/5e3d294bcff797004b16abba.md)
- Children: 1 total
  - [リンク先の位置調整](/5e9511cb0804c600481af4ad.md)
- Total descendants: 1
- Siblings: 20 total
  - [GROWIのAPIを使用したアプリケーション](/5e5bd0e3e7f8db0048df3a08.md)
  - [GitとGitHubの違い](/5e417dcadecd0a0049953ad7.md)
  - [LDAP攻略への道](/5e48b2561ec5e4004811d4e9.md)
  - [Migrationsファイルを作成する](/5e9d1dc7b682620049e55a64.md)
  - [QiitaでGROWIが設計書システムとして紹介されました](/5e535a04eb17ce0048b9fb13.md)
  - [UserManagement](/65069da24603e7ff39a6b3d2.md)
  - [aタグ以外での画面遷移](/5e9cfd51b682620049e55a5d.md)
  - [jestを使ったテストを初実装しました](/5ef1ed225eea4b004a1912b2.md)
  - [npm とyarn の違いを簡単に説明](/5e3e6822591d7f0048b3cc5e.md)
  - [react-card-flipを使って回転するカードレイアウトを作る](/5ebaa05ad3055000488bd526.md)
  - [throttleでスクロールイベントを間引く](/5e8de43931511b0048ecf612.md)
  - [vuepressのテンプレート内で二重波括弧をエスケープ](/5f16ecf4c2f6150048b2955b.md)
  - [なぜsetStateをComponentDidMountで使用してはいけないのか](/5eb7728458c8ea00480d0825.md)
  - [アジャイルとウォーターフォール](/5e4137d343c1c400499b6bac.md)
  - [セルフレビューはどこまで確認しようか](/5e3d2adfcff797004b16abbe.md)
  - [ソート機能の実装](/5e8aadc15245e70048c22c7c.md)
  - [タスクを円滑にこなすために必要な垂れ流しとは](/5e47a18a927c020048448a18.md)
  - [レビュー依頼する際に確認すること](/5e3ae41225751e00499297f6.md)
  - [動作確認用にページをたくさん作りたい](/5f80326633588b0048eaf865.md)
  - [間違えてマージしてさらにプッシュしちゃった](/5e9d176db682620049e55a60.md)
- Last updated: 2020-04-13T02:10:48.785Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e93c9d511007300489677ff