質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • JavaScript

    15354questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6345questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • スライダー

    52questions

    GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQueryでスライダーを作ったのですが、一般的 or メンテしやすい書き方ありますか?

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 282

kumakuma112

score 12

SPAの開発に向けて、メンテしやすいコード作りを勉強してます。
jQueryでスライダーを作ったのですが、もっと良い書き方ありますか?
※今回はObserverの考え方は取り入れてません。

 疑問点

  • BEMベースのクラス名が長いので変数化したが、動的な部分は変数でないものもあり、混乱する
  • そもそもクラス名の付け方やタグ構造が悪いから書きづらい?
  • 最初に操作するセレクターはどこまで変数に格納すべきか
  • BEMは使いたいけど長くなる

 サンプルコード

前の質問で、アドバイスを貰い、定数のような扱いをやめました。
また動的な部分以外は、HTMLに直書きしました。
https://teratail.com/questions/126691

皆さんだったらどう書きますか?

  <div id="slider" class="slider">
    <div class="slider_view">
      <a class="slider_view_item" href="#"><img src="img/thumb-01.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-02.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-03.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-04.jpg" alt=""></a>
      <a class="slider_view_item" href="#"><img src="img/thumb-05.jpg" alt=""></a>
    </div>
    <div class="slider_nav"></div>
    <div class="slider_control">
      <button class="slider_control_item slider_control_item-prev" type="button" data-role="none" role="button"></button>
      <button class="slider_control_item slider_control_item-next" type="button" data-role="none" role="button"></button>
    </div>
  </div>
$(function(){

  var $target        = $('#slider');
  var $item          = $target.find('.slider_view_item');
  var $prev          = $target.find('.slider_control_item-prev');
  var $next          = $target.find('.slider_control_item-next');

  var index          = 1;

  function init(){

    var _navHtml = '<button class="slider_nav_item" type="button" data-role="none" role="button"></button>';
    $item.each(function(){
      $target.find('.slider_nav').append(_navHtml);
    });

    $target.find('.slider_nav_item').each(function(i){
      $(this).on("click",function(){
        view(i + 1);
      });
    });

    $prev.on("click",function(){
      view(index - 1);
    });
    $next.on("click",function(){
      view(index + 1);
    });

    view(index);

  }


  function view(val){

    index = val;

    $item.hide().each(function(i){
      if(index == i + 1){
        $(this).show();
        return false;
      }
    });

    $target.find('.slider_nav_item').removeClass('is-active').each(function(i){
      if(index == i + 1){
        $(this).addClass('is-active');
        return false;
      }
    });

    var _count = $item.length;
    $prev.show();
    $next.show();
    if(index <= 1) $prev.hide();
    if(index >= _count) $next.hide();

  }

  init();

});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

jQuery plugin 作り方 」で検索して、jQuery を用いたライブラリの作り方にあわせてみるのはどうでしょう。(下記URLは検索結果の上位を適当に並べています)


【jquery プラグイン/作成】
https://qiita.com/rorono/items/11e5dbd53cb93edb8b4d

【jQueryプラグインの作り方 | てらこや.work】
https://www.terakoya.work/jquery-build-plugin/

【はじめてのjQueryのプラグインの作り方~5ステップ | Web制作・Webシステムの株式会社ワイワイエンジン】
https://yyengine.jp/blog/jquery/jquery-plugin-5step/

【jQueryプラグインの作り方について詳しく | Developers.IO】
https://dev.classmethod.jp/slide/html5-css3-jquery-jqplugin/

【初心者でも分かる!jQueryのプラグインの作り方 | Yuuの悠々自適Blog】
https://yuu.1000quu.com/how_to_make_jquery_plugin

【【jQuery】プラグインの様々な作り方(定義パターン)】
http://matometaru.com/jquery-plugin-define-patterns/

【jQueryを使うなら知っておきたいjQueryプラグインの作り方|クロノドライブ】
https://html-coding.co.jp/knowhow/tips/jquery/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15354questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6345questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • スライダー

    52questions

    GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。