🦁

rails JavaScript使ってタブ切り替え

2022/01/21に公開約5,200字

1.はじめに

今回はruby on rails のHTML/CSSを通して、タブのページ切り替えを行なっていきます。
今後もJavaScriptをデザインに適応させていくための糧にすることが今回のGoalです。

2. JavaScriptを導入する環境を作ります。

最初にVSCodeで自分のアプリケーションファイルを開きます。
app/views/layouts/application.html.erbを開きます。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Tweets</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

上記のコードの上に下記のコードをコピペします!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

これでJavaScriptを導入することができます!

これで事前準備は完了です。

3. ここからは、HTML/CSSにコードを書いていくよ!

今回はTweetsコントローラーでアプリケーションを作成しています。
ちなみに投稿分類も起こっています。

コントローラーの記述は以下のようになっています。

app/controllers/tweets_controller.rb
class TweetsController < ApplicationController

  def index
    @tweets = Tweet.all
  end

  def new
    @tweet = Tweet.new
  end

  def create
    tweet = Tweet.new(tweet_params)
    if tweet.save
      redirect_to :action => "index"
    else
      redirect_to :action => "new"
    end
  end

  private
  def tweet_params
    params.require(:tweet).permit(:body, :category)
  end
end

4. HTMLを書いていきましょう。

app/views/tweets/index.html.erb

<body>
  <div class="wrapper">
    <ul class="tab">
      <li><a href="#dog">イヌ</a></li>
      <li><a href="#cat">ネコ</a></li>
      <li><a href="#bear">クマ</a></li>
    </ul>

      <div id="dog" class="area">
        <h2>イヌ</h2>
        <ul>
          <% @tweets.each do |t| %>
            <% if t.category == "イヌ" %> 
              <div class="tweet">
                <li><%= t.body %><br><%= t.created_at %></li>
              </div>
            <% end %>
          <% end %>
        </ul>
      </div>

      <div id="cat" class="area">
        <h2>ネコ</h2>
        <ul>
          <% @tweets.each do |t| %>
            <% if t.category == "ネコ" %> 
              <div class="tweet">
                <li><%= t.body %><br><%= t.created_at %></li>
              </div>
            <% end %>
          <% end %>
        </ul>
      </div>
      <div id="bear" class="area">
        <h2>クマ</h2>
        <ul>
          <% @tweets.each do |t| %>
            <% if t.category == "クマ" %> 
              <div class="tweet">
                <li><%= t.body %><br><%= t.created_at %></li>
              </div>
            <% end %>
          <% end %>
        </ul>
      </div>
  </div>
</body>

5. CSSを記述していきます。

app/assets/stylesheets/application.scss

@charset "UTF-8";

* {
  padding: 0;
  margin: 0;
}

.tab {
  display: flex;
  flex-wrap: wrap;
}

.tab li a {
  display: block;
  background:#ddd;
  margin:0 2px;
  padding:10px 20px;
}

.tab li.active a {
  background:#fff;
}

.area {
  display: none;
  opacity: 0;
  background: #fff;
  padding:50px 20px;
}

.area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

body {
  background:#eee;
}

ul {
  list-style:none;
}

a {
  color:#333;
  text-decoration: none;
}

.wrapper {
  width:100%;
  max-width: 960px;
  margin:30px auto;
  background:#fefefe;
}

.area h2 {
  font-size:1.3rem;
  margin:0 0 20px 10px;
}

.area li {
  padding: 10px; 
  border-bottom: 1px solid #ddd;
}

6. ここからはJavaScriptを記述していくよ!

JavaScriptはJavaScriptファイルの中に書き込むのではなく、
HTMLファイルに書き込んでいきます!

<script></script>の中に書き込みます!

app/views/tweets/index.html.erb

#割愛

#追加箇所
<script>
  function GethashID (hashIDName){
    if(hashIDName){
      $('.tab li').find('a').each(function() {
        var idName = $(this).attr('href');
        if(idName == hashIDName){ 
          var parentElm = $(this).parent();
          $('.tab li').removeClass("active");
          $(parentElm).addClass("active");
          $(".area").removeClass("is-active");
          $(hashIDName).addClass("is-active"); 
        }
      });
    }
  }

  $('.tab a').on('click', function() {
    var idName = $(this).attr('href');
    GethashID (idName);
    return false;
  });

  $(window).on('load', function () {
      $('.tab li:first-of-type').addClass("active");
      $('.area:first-of-type').addClass("is-active");
    var hashName = location.hash;
    GethashID (hashName);
  });
</script>

#ここまで

ここまで記述ができていれば下記の画像のように表示されていると思います!

スクリーンショット 2021-11-18 20.35.23.png

スクリーンショット 2021-11-18 20.35.37.png

スクリーンショット 2021-11-18 20.35.52.png

7.これで以上です!

みなさんここまでお疲れ様でした!
これからJavaScriptを使ってより良いwebサイトを作っていってください!!!!!

Discussion

ログインするとコメントできます