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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

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

JavaScript

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

jQuery

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

Q&A

2回答

1658閲覧

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

kumakuma112

総合スコア21

スライダー

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/05/18 10:03

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

疑問点

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

サンプルコード

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

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

HTML

1 <div id="slider" class="slider"> 2 <div class="slider_view"> 3 <a class="slider_view_item" href="#"><img src="img/thumb-01.jpg" alt=""></a> 4 <a class="slider_view_item" href="#"><img src="img/thumb-02.jpg" alt=""></a> 5 <a class="slider_view_item" href="#"><img src="img/thumb-03.jpg" alt=""></a> 6 <a class="slider_view_item" href="#"><img src="img/thumb-04.jpg" alt=""></a> 7 <a class="slider_view_item" href="#"><img src="img/thumb-05.jpg" alt=""></a> 8 </div> 9 <div class="slider_nav"></div> 10 <div class="slider_control"> 11 <button class="slider_control_item slider_control_item-prev" type="button" data-role="none" role="button"></button> 12 <button class="slider_control_item slider_control_item-next" type="button" data-role="none" role="button"></button> 13 </div> 14 </div>

JS

1$(function(){ 2 3 var $target = $('#slider'); 4 var $item = $target.find('.slider_view_item'); 5 var $prev = $target.find('.slider_control_item-prev'); 6 var $next = $target.find('.slider_control_item-next'); 7 8 var index = 1; 9 10 function init(){ 11 12 var _navHtml = '<button class="slider_nav_item" type="button" data-role="none" role="button"></button>'; 13 $item.each(function(){ 14 $target.find('.slider_nav').append(_navHtml); 15 }); 16 17 $target.find('.slider_nav_item').each(function(i){ 18 $(this).on("click",function(){ 19 view(i + 1); 20 }); 21 }); 22 23 $prev.on("click",function(){ 24 view(index - 1); 25 }); 26 $next.on("click",function(){ 27 view(index + 1); 28 }); 29 30 view(index); 31 32 } 33 34 35 function view(val){ 36 37 index = val; 38 39 $item.hide().each(function(i){ 40 if(index == i + 1){ 41 $(this).show(); 42 return false; 43 } 44 }); 45 46 $target.find('.slider_nav_item').removeClass('is-active').each(function(i){ 47 if(index == i + 1){ 48 $(this).addClass('is-active'); 49 return false; 50 } 51 }); 52 53 var _count = $item.length; 54 $prev.show(); 55 $next.show(); 56 if(index <= 1) $prev.hide(); 57 if(index >= _count) $next.hide(); 58 59 } 60 61 init(); 62 63}); 64

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

タグの構造に関しては問題ないかと思います。
BEMの書き方に関してですが、経験上プロジェクトで使い方がカスタマイズされていることがほとんどです。ただelementを明確にするうえで、単語をアンスコ一個で繋げていくのは、避けた方がいいかと思います。
私は
・blockはハイフンなしも可。
・elementの「__」以降、単語がつながるときは「_」を利用。
・modifierはクラス名「is-***」で記述。cssのマルチクラスセレクタでの指定を許容。
というルールを提案し、採用されることが多いです。

html

1<div id="slider" class="slider"> 2 <div class="slider__view"> 3 <a class="slider__view_item" href="#"><img src="img/thumb-01.jpg" alt=""></a> 4 <a class="slider__view_item" href="#"><img src="img/thumb-02.jpg" alt=""></a> 5 <a class="slider__view_item" href="#"><img src="img/thumb-03.jpg" alt=""></a> 6 <a class="slider__view_item" href="#"><img src="img/thumb-04.jpg" alt=""></a> 7 <a class="slider__view_item" href="#"><img src="img/thumb-05.jpg" alt=""></a> 8 </div> 9 <div class="slider__nav"></div> 10 <div class="slider__control"> 11 <button class="slider__control_item is-prev" type="button" data-role="none" role="button"></button> 12 <button class="slider__control_item is-next" type="button" data-role="none" role="button"></button> 13 </div> 14</div>

という感じでしょうか。絶対の正解はないかと思います。重要なのはチームでルールを決めてしっかりと順守することです。cssに関しても守るべきルールがありますのでこちらで確認してみてください。

[一番詳しいCSS設計規則BEMのマニュアル]
https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1

jsに関して、当方、マークアップ寄りのエンジニアなのでjsの技術は中の下程度ですが、こんな私でもさっと見たときにやっていることがなんとなく分かるので、可読性という点ではそれほど悪くないと思っています。
変数汚染を防ぐ理由でも、即時関数を利用して処理をまとめることと、view()の処理をちょっと変えました。

jQuery

1// 即時関数でラップして $ を引数にするとパフォーマンスが上がります 2;(function($){ 3 4 $(function(){ 5 6 // BEMの長くなるクラス用 7 const prefixSlider = '.slider'; 8 9 var $target = $('#slider'); 10 var $item = $target.find( prefixSlider + '__view_item'); 11 var $prev = $target.find( prefixSlider + '__control_item.is-prev'); 12 var $next = $target.find( prefixSlider + '__control_item.is-next'); 13 var $pagerItem; 14 15 var index = 0; 16 // スライダーの長さは最初に取得 17 var maxSize = $item.length; 18 19 // コンストラクタ 20 var init = (function(){ 21 22 // pagerの生成 23 var createPager = (function(){ 24 var _navHtml = '<button class="slider__nav_item" type="button" data-role="none" role="button"></button>'; 25 $item.each(function(){ 26 $target.find('.slider__nav').append(_navHtml); 27 }); 28 $pagerItem = $target.find('.slider__nav_item'); 29 }()); 30 31 // event一覧 32 var myEvent = (function(){ 33 $pagerItem.on("click",function(){ 34 index = $(this).index(); 35 view(index); 36 }); 37 $prev.on("click",function(){ 38 view('prev'); 39 }); 40 $next.on("click",function(){ 41 view('next'); 42 }); 43 }()); 44 45 // 描画 46 var drawing = (function(){ 47 view(index); 48 }()); 49 50 }()); 51 52 53 function view( direction ){ 54 55 if( direction === 'next' ){ 56 // 進む 57 index = ( index >= (maxSize-1) ) ? 0 : ++index; 58 }else if( direction === 'prev' ){ 59 // 戻る 60 index = ( index <= 0 ) ? (maxSize-1) : --index; 61 }else{ 62 // 番号指定 63 index = direction; 64 } 65 66 // 指定番号を表示、ほかの兄弟要素非表示 67 $item.eq(index).show().siblings().hide(); 68 // 指定番号をアクティブ、ほかの兄弟要素非アクティブ 69 $pagerItem.eq(index).addClass('is-active').siblings().removeClass('is-active'); 70 71 } 72 73 }); 74 75}($)); 76

ループを計算する処理は、view()の最初の処理でやりました。pager押された時の番号指定も雑ですが、同じif文の中で処理しています。

投稿2019/05/31 08:42

hirahiro

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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/

投稿2018/05/18 11:15

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問