toggleを使用した要素の表示、非表示の実装

Ruby,Rails初学者の私が今日悩んだ点、最近分かったことなど知識をまとめています

目的:

• 自己理解
• 情報共有
• 情報整理

トピックス

• ログイン、ログアウト時のviewの実装
• toggleを使用した要素の表示、非表示の実装

ログイン、ログアウト時のviewの実装

deviseでログイン機能が実装されており、ログインボタンを押すとログインボタンがユーザのアイコンになる仕様になる。

作業の過程



1. まずは取り掛かり安さでユーザアイコン用のhaml,scssを実装(ファイルは新しく作らず、ログイン機能ボタンのあるviewファイル内で作業をし、コメントアウトなどを活用しいつでも戻せる状態を保ちました。)


2. ユーザがログインしていない時はunless user_signed_in?をログインボタンの直前に実装、ログインしているときはif user_signed_in?を実装した。



toggleを使用した要素の表示、非表示の実装

ログインしているときのユーザアイコンをクリックした時にメッセージやログアウトなどのリンクが表示されるパネルをjQueryのtoggleメソッドを使用し実装



1. アイコンの要素に対しクリックメソッドを追加した。
index.html.haml

$(function(){
  $('img').click(function(){})
})

2. クリックした時にパネルの要素が表示され、サイドクリックすると隠れる機能をtoggleを使用し実装した。
index.html.haml

$(function(){
  $('img').click(function(){
     $('.header__right-panel').toggle();
  })
})

実装の感想〜toggleにたどり着くまで

• 実装自体は大したコードではないのですが、たどり着くまでにきづいたら1日費やしていました。
• ログイン、ログアウトの実装はどこに対して何を変化させたいのかを改めて紙に書いたりして考えました。
• jQueryを使った実装では、gemやっていファイルの記述、bundle install して、、など実装周りの調査、実装時のメソッドでremove, append, hidden, unwrap... どれ使えばいいんだなど。なのでtoggleを発見したときは凄いメソッドキタ！て思いました。。

to be continued...

”この瞬間から集中する”みたいな集中する時間を意識的に作り、疲れるまで考え、休む。とことんできないことで落ち込んだりしてまた考える...といった風に効率よく作業をしていきたいです。 :)