【初心者のJavaScript応用】初心者でもプロフィールに実装できるJSコード

まずは、今回作成したプロフィールを見てみてください！
https://elma-yo.github.io/

# 付けた機能のイメージ
今回はプロフィールで書いたJavaScriptのコードを紹介します。
使用したJavaScriptの機能は、２つあります。
1. __写真にマウスホバーすると、tittle属性内の補助的な情報を表示します。__
1. __プロフ写真をクリックすると、写真と自己紹介の文章を切り替えます。__

▼　プロフィールを開くとの画面です。
![news_gohou.png](https://scontent-nrt1-1.xx.fbcdn.net/v/t39.30808-6/301807294_10229270394488821_3025631034824131016_n.jpg?stp=cp1_dst-jpg&_nc_cat=104&ccb=1-7&_nc_sid=730e14&_nc_ohc=pNaloDJ5LAoAX9sTFae&tn=br2KSX6jQvft6f-v&_nc_ht=scontent-nrt1-1.xx&oh=00_AT-99S7UIkFGj6eJmVOJxw9_aWoD0JrmDvwoQjwvwaw3yQ&oe=631C0EFF)
▼　写真にマウスホバーすると、tittle属性内の補助的な情報を表示します。
![news_gohou.png](https://scontent-nrt1-1.xx.fbcdn.net/v/t39.30808-6/305207544_10229270394528822_3504553250174688822_n.jpg?stp=cp1_dst-jpg&_nc_cat=106&ccb=1-7&_nc_sid=730e14&_nc_ohc=n0e49jnfEIsAX-dA1Ee&tn=br2KSX6jQvft6f-v&_nc_ht=scontent-nrt1-1.xx&oh=00_AT_UL2DR4_uA9nXv-6yLNCVKw3F-h3x3vhzKG08hm-dZpA&oe=631BD5D2)
▼　プロフ写真をクリックすると、写真と自己紹介の文章を切り替えます。
![news_gohou.png](https://scontent-nrt1-1.xx.fbcdn.net/v/t39.30808-6/302514093_10229270394768828_9209587989496800818_n.jpg?stp=cp1_dst-jpg&_nc_cat=109&ccb=1-7&_nc_sid=730e14&_nc_ohc=b1Ajm0BJwxoAX_gl1iC&_nc_ht=scontent-nrt1-1.xx&oh=00_AT9KbWIhb796qQjhv7qGw2Zf04VwBRwGj0u67T0eOCk-9g&oe=631B7BF1)

# JavaScripの構文
```js
'use strict'
{
    document.getElementById('twitter').title = "Twitter";
    document.getElementById('qiita').title = "Qiita";
    document.getElementById('github').title = "GitHub";
    
    const img = document.getElementById('trigger');
    const target = document.getElementById('target'); 
    const cTarget = document.getElementById('c-target');

    let state = true;

    function hideCTarget () { 
        cTarget.style.display = "none";
    }
    hideCTarget();

    img.addEventListener('click', () => {
        if (state === true) {
            target.style.display = "none";
            cTarget.style.display = "block";
            img.src = "img2.jpg";
            state = false;
        } else {
            cTarget.style.display = "none";
            target.style.display = "block";
            img.src = "img1.png";
            state = true;
        }
    });
}
```
HTMLとCSSのコードは、以下のGit Hubのページで見えます。
https://github.com/elma-yo/elma-yo.github.io

# コードの説明
以下は、今回付けた２つJavaScriptの機能に分けて、区切りで分かりやすく説明します。

## ホバーすると、title属性内の補助的な情報を表示
```js
    document.getElementById('twitter').title = "Twitter";
    document.getElementById('qiita').title = "Qiita";
    document.getElementById('github').title = "GitHub";
```
1. __document　オブジェクト__
JavaScriptのプログラム上でdocumentオブジェクトを使えば、HTML要素の情報を取得することや新しい要素を追加することができます。

1. __getElementById　メソッド__
getElementByIdは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。
英語でgetElementByIdとを分析すると、「get」、「Element」、「By」、「Id」４つの言葉に分けられます。「get」とは取得です。「Element」とはエレメント・要素です。「By」とは経由です。「Id」とはアイディー・識別ためのものです。
いわゆる、 __getElementById('idName')の意味はidName（idの名前はHTMLでの要素に自由に付けていい）に経由して、この要素を取得__ という意味です。

1. __title属性__
要素について補助的な情報を与えるものです。
例えば、下の画像で右側の歯車みたいなアイコンにマウスホバーすると、下に「設定」と表示しているグレイのブロックが出てきます。それはtitle属性を付けていることです。
![news_gohou.png](https://scontent-nrt1-1.xx.fbcdn.net/v/t39.30808-6/302485662_10229270886421119_727143741445150773_n.jpg?stp=cp1_dst-jpg&_nc_cat=100&ccb=1-7&_nc_sid=0debeb&_nc_ohc=2KfUKWmaAP4AX9xO2Xf&_nc_ht=scontent-nrt1-1.xx&oh=00_AT8FXDvUOFR15RLRHo3WPedhul5vul4vahQDimvyLHLC1g&oe=631CF5C0)

* __まとめ__
document.getElementById('twitter').title = "Twitter";
このコードの意味は、documentオブジェクトを通して、twitterというidを取得して、Twitterというtitle属性の内容を付けることです。

* __おまけ__
JavaScriptでのプログラミングは、CSSのように「-」ハイフンを使えることではありません。例えば、class-listというコードはハイフンがあるので、JavaScritで使えばエラーが出てしまいます。
そのため、二つ単語がある場合、二つ目の単語の頭文字は大文字にすればいいです。例えば、classListとはオッケーです。

## アイテムをクリックすると、内容を切り替えます

### 変数を作る
```js
    const img = document.getElementById('trigger');
    const target = document.getElementById('target'); 
    const cTarget = document.getElementById('c-target');

    let state = true;
```
1. __変数宣言の型の使い分け__
よく見える変数宣言の型は「var」、「let」、「const」３種類です。
「var」はJavaScriptのバージョンES6を更新した前の型ので、使用する時は注意しなかったら、エラーが出る可能性があります。そのため、__一般的に「let」、「const」２つだけ使っています__。
「let」と「const」の簡単な使い分けは、再代入・再宣言ができるかどうかとのことです。__「let」は再代入・再宣言ができます。「const」はできません。__ (詳しい説明はこの記事の最後の参考文献に見てください。)

1. __Idを取得ために、変数を作る__
HTMLでの３つId（trigger, target, c-target）を取得ために、変数<font color="Green">img</font>と変数<font color="Green">target</font>、変数<font color="Green">cTarget</font>を作りました。この３つの変数は再代入・再宣言をしないので、 __<font color="#FFCC00">const</font>__ との型を使いました。

1. __状態を定義するために、変数を作る__
後でのイベントの状態を定義するために、変数<font color="Green">state</font>を作りました。また、この変数stateは、ブーリアン型(boolean)の __<font color="#FFCC00">true</font>__ と __<font color="#FFCC00">false</font>__ ２つ状態を変更するので、変数宣言の型は「__<font color="#FFCC00">let__</font>」を使いました。

### function(関数)を作る
Javascriptのコード
```js
    function hideCTarget () { 
        cTarget.style.display = "none";
    }
    hideCTarget();
```
一部のHTMLのコード
```html
<p id="target">
    台湾出身の留学生です。<br>
    現在は神戸情報大学院大学(KIC)の院生です。<br>
    未経験ですが、Webエンジニアを目指して頑張っています。<br>
    よろしくお願いします！
</p>
<p id="c-target">
    ・2022年4月からKICというICTに関する大学院に入りました。<br>
    ・2022年6月末からプログラミング言語を勉強し始めました。<br>
    ・勉強したプログラミング言語: <br>
    &emsp;HTML, CSS, JavaScript, MySQL, PHP, Git, C。
</p>
```
プロフィールのページを開いたら、id="target"との文章だけ表示したいので、最初は__id="c-target"の文章を隠しなければいけないのです。そのために__、<font color="Green">hideCTarget</font>という関数を作りました.
関数中の「 __cTarget.style.display = "none";__ 」とのコードの意味は __変数<font color="Green">cTarget</font>に対して、要素を隠す(display = "none")とのスタイル(style)を追加する__ ことです。

最後はこの __関数を実行する__ ために、「 __hideCTarget();__ 」とのコードを書きました。

### クリックするとのイベントを作る
```js
1    img.addEventListener('click', () => {
2      if (state === true) {
3            target.style.display = "none";
4            cTarget.style.display = "block";
5            img.src = "img2.jpg";
6            state = false;
7        } else {
8            cTarget.style.display = "none";
9            target.style.display = "block";
10           img.src = "img1.png";
11           state = true;
12       }
13   });
```
1. __<font color="Green">addEventListener</font>とは__
addEventListener() とは、JavaScriptからさまざまなイベント処理を実行することができるメソッドです。
英語でaddEventListenerとを分析すると、「add」、「Event」、「Listener」３つの言葉があります。「add」とは追加です。「Event」とはイベントです。「Listener」とはリスナー・聞き手ですが、ここでの意味は追跡器です。いわゆる、 __対象要素に対して、イベントの追跡器を追加する__ ことです。
今回書いたコードは「 __img.addEventListener('click', (){});__ 」との意味は、 __変数<font color="Green">img</font>との要素に対して、<font color="#008BBB">click</font>（クリック）とのイベントを追加して、このイベントが起きたら、追跡する__ ことです。

1. __<font color="#FFCC00">if条件文</font>を作る__
ここのif条件文のためは、条件はtrue（真）の時にclickすると写真と文章は変更するのし、条件はfalse（偽）の時clickすると写真と文章は最初の状態に戻すことです。

1. __if...else...文のコードを説明する__
2行目：もし変数stateの状態はtrueの時、後ろの命令を実行することです。
3行目：変数targetに対して「非表示」とのスタイルを追加することです。
4行目：変数cTargetに対して「表示」とのスタイルを追加することです。
5行目：変数imgに対して「img2.jpg」との写真を付け替えることです。
6行目：変数stateに対して「false」に書き入れることです。
7行目：もし変数stateの状態はtrueではない（false）時、後ろの命令を実行することです。
8行目：変数cTargetに対して「非表示」とのスタイルを追加することです。
9行目：変数targetに対して「表示」とのスタイルを追加することです。
10行目：変数imgに対して「img1.png」との写真を付け替えることです。
11行目：変数stateに対して「true」に書き入れることです。
いわゆる、7~11行目のためは、もう１回クリックすると最初の状態に戻すことです。

以上のように、コードを区切るして理解すると、JavaScriptの初心者でも自分のプロフィールでJSのコードを実装できますよ！
最初にJavaScriptを触った時、ルールやコードは多くて理解できないなーという声が出るかもしれませんが、<font color="Blie">練習すれば・チャレンジすれば、誰でもできますよ！</font>
ちなみに、私もJavaScriptの初心者です。一週間だけの勉強で、以上のJsのコードと記事ができました！
おまけですが、今回は「<a href="https://dotinstall.com/lessons">ドットインストール</a>」の動画で勉強しました。おすすめです！

# 参考文献
1. <a href="https://www.sejuku.net/blog/30970">HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方</a>
1. <a href="https://www.sejuku.net/blog/27019">【JavaScript入門】getElementByIdを完全理解する3つのコツ！</a>
1. <a href="https://techacademy.jp/magazine/14872">JavaScriptで書く「var,let,const」の違いと使い分け方法</a>
1. <a href="https://www.sejuku.net/blog/57625">【JavaScript入門】addEventListener()によるイベント処理の使い方！</a>