みくじょーブログ

エンジニア転職を目指す24歳の日常

JavaScriptで簡単な非同期通信を行う

こんにちは!エンジニア転職を目指す24歳みくじょーです!

 

私は、現在エンジニア転職を目指して活動しております!

こちらのブログではそんな私の考えていること、プログラミングのことなど、想いのまま書いています!

ぜひ読んで一度読んでみてください!

 

目次はこちらです

 

 

 

JavaScriptで簡単な非同期通信を行う

本日はこちらについて解説します!

 

 

まず、どう言ったもの作るのかと言うと、

現在、下記の画像のような表示になっている箇所を

 

f:id:mikujo:20201017210204p:plain

 

非同期通信にて、「編集」と「ログアウト」ボタンを作りたいと思います!

完成後はこのような形になります。

 

f:id:mikujo:20201017210730p:plain



今回やりたいことは2点です

  1. ユーザー名にマウスを乗せた時、ユーザー名の色を変える
  2. ユーザー名クリック時に、「編集」「ログアウト」のリストを表示する

 

それでは実際にやって行きます!

 

 

 

ビューの記述を変える

まずはビューです。

今回は _header.html.erb に記述して行きます。

 

元々、下記のように記述していた箇所を

 

<ul class="list">
<li class="list-content"><%= current_user.nickname %>
</li>
<li class="list-content">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
</ul> 

 

下記のように編集し、クリック時に表示するリストを作成します。

 

<div class="nickname">
<%= current_user.nickname %>
</div>
<ul class="js-lists">
<li class="js-content">
<%= link_to '編集', edit_user_registration_path(current_user) %>
</li>
<li class="js-content">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
</ul>

 

ここまでで、リストの形を作ることができました。

 

 

 

CSSを適用

先ほど作成したリストのCSSを修正します。(細かい設定は省きます)

 

  • positionの設定
  • デフォルトの状態で画面にリストを表示しない

 

という記述をして行きます。

  

まず、下記でポジションの細かい設定をし、

(親要素には position: relative; を設定)

 

position: absolute;
top: 45px;
right: 30px;

 

 

続いてデフォルトでは画面に表示されないように設定します。

 

display: none;

 

2つ合わせてこのような形です。 

 

.js-lists{
position: absolute;
top: 45px;
right: 30px;
display: none;
}

ここまででCSSの設定が完了しました。

 

 

JavaScriptを記述

そしてJavaScriptを記述します。

 

記述の準備

まず、JavaScriptを読み込むために

app / javascript / packs / application.js に下記を記述します。

 

require("../pulldown")

 

そして、

app /javascriptリポジトリにpulldown.jsを作成します。

 

IDを読み取り変数に代入する

ファイルの作成が完了したので、コードを書いて行きます。

 

まず、ページを読み込んだ際にイベントが発火すると言う記述です。

 

function pullDown(){
}
 
window.addEventListener('load', pullDown)

 

 

続いて、JavaScriptで動かす箇所を指定し、変数に代入します。

 

該当するhtmlの箇所にidを付与します。

<div class="nickname" id="name">
<%= current_user.nickname %>
</div>
<ul class="js-lists" id="pull-down>
<li class="js-content">
<%= link_to '編集', edit_user_registration_path(current_user) %>
</li>
<li class="js-content">
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
</li>
</ul>

 

今回は1行目と4行目にidを付与しました。

 

そしてpulldown.jsで変数を定義し、先ほど記述したidを読み取り、代入します。

function pullDown(){
const pullDownButton = document.getElementById("name")
const pullDownContent = document.getElementById("pull-down")
}

 

ここまででidを読み取り、変数に代入することができました。

 

 

関数を定義

ここからは実際のにクリック時やマウスを乗せた時にビューが変化するための記述をします。

 

まずは

「ユーザー名にマウスを乗せた時、ユーザー名の色を変える」

ための記述です。

 

pullDownButton.addEventListener('mouseover', function(){
this.setAttribute("style", "color:#FFBEDA;")
})

 

上記のコードは、先ほど定義した変数のpullDownButtonにマウスが乗ると、

 colorを#FFBEDAに変更する

 

というイベントが発火する記述です。

 

そして、マウスが離れた時に元に戻す記述も追記します。

 

pullDownButton.addEventListener('mouseout', function(){
this.removeAttribute("style", "color:#FFBEDA;")
})

 

こちらで「ユーザー名にマウスを乗せた時、ユーザー名の色を変える」

ことが実装できました!

 

 

続いて、

「ユーザー名をクリック時に、「編集」「ログアウト」のリストを表示する」

ための記述をします。

 

pullDownButton.addEventListener('click', function(){
if (pullDownContent.getAttribute("style") == "display:block;") {
pullDownContent.removeAttribute("style", "display:block;")
} else {
pullDownContent.setAttribute("style", "display:block;")
}
})

 

こちらはクリック時に発火されるイベントです。

if文で  display: block;  の有無による条件分岐を行いました。

 

CSSの設定で  display: none;  を設定したため、デフォルトでは

こちらの条件式はFalseとなり、 display: block;  が付与され、

リストがビューに表示ます。

 

逆に、リストが表示されている際には条件式がTrueとなるため、

display: block;  が取り除かれ、リストがビューから消えるということです。

 

 

以上で,

  1. ユーザー名にマウスを乗せた時、ユーザー名の色を変える
  2. ユーザー名をクリック時に、「編集」「ログアウト」のリストを表示する

の2つが実装されました!

 

 

最後に

今回実装したJavaScriptの全体はこちらになります。

 

function pullDown(){

const pullDownButton = document.getElementById("lists")
const pullDownContent = document.getElementById("pull-down")

pullDownButton.addEventListener('mouseover', function(){
this.setAttribute("style", "color:#FFBEDA;")
})
pullDownButton.addEventListener('mouseout', function(){
this.removeAttribute("style", "color:#FFBEDA;")
})

pullDownButton.addEventListener('click', function(){
if (pullDownContent.getAttribute("style") == "display:block;") {
pullDownContent.removeAttribute("style", "display:block;")
} else {
pullDownContent.setAttribute("style", "display:block;")
}
})

}

window.addEventListener('load', pullDown)

 

JavaScriptは個人的には内容が複雑で、結構とっつきにくいイメージがあるのですが、このような簡単な実装から、少しずつできることを増やして行きたいです!

 

 

今日の記事は以上です!!