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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

2回答

1121閲覧

Javascriptのコードを短くしたい

tomi-hashi

総合スコア11

JavaScript

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

0グッド

0クリップ

投稿2019/07/23 08:58

教えて頂きたいこと

Javascript書き始めの初心者です。
タッチアクションを作成したのですが、ものすごく長くなってしまいました。
もっと実践的にこれを短くできる書き方があれば教えていただきたく質問いたします。

該当のソースコード

Javascript

const touchaction1 = document.getElementById('touchaction1'),touchaction2 = document.getElementById('touchaction2'),touchaction3 = document.getElementById('touchaction3'),touchaction4 = document.getElementById('touchaction4')
,touchaction5 = document.getElementById('touchaction5'),touchaction6 = document.getElementById('touchaction6'),touchaction7 = document.getElementById('touchaction7');

//ボタン1タッチアクション
touchaction1.addEventListener('touchstart',function(){
touchaction1.classList.toggle('colorchangemove')
});
//ボタン1クリックアクション
touchaction1.addEventListener('click',function(){
touchaction1.classList.toggle('colorchange');
});

//ボタン2タッチアクション
touchaction2.addEventListener('touchstart',function(){
touchaction2.classList.toggle('colorchangemove');
});
//ボタン2クリックアクション
touchaction2.addEventListener('click',function(){
touchaction2.classList.toggle('colorchange');
});
//ボタン3タッチアクション
touchaction3.addEventListener('touchstart',function(){
touchaction3.classList.toggle('colorchangemove');
});
//ボタン3クリックアクション
touchaction3.addEventListener('click',function(){
touchaction3.classList.toggle('colorchange');
});
//ボタン4タッチアクション
touchaction4.addEventListener('touchstart',function(){
touchaction4.classList.toggle('colorchangemove');
});
//ボタン4クリックアクション
touchaction4.addEventListener('click',function(){
touchaction4.classList.toggle('colorchange');
});
//ボタン5タッチアクション
touchaction5.addEventListener('touchstart',function(){
touchaction5.classList.toggle('colorchangemove');
});
//ボタン5クリックアクション
touchaction5.addEventListener('click',function(){
touchaction5.classList.toggle('colorchange');
});
//ボタン6タッチアクション
touchaction6.addEventListener('touchstart',function(){
touchaction6.classList.toggle('colorchangemove');
});
//ボタン6クリックアクション
touchaction6.addEventListener('click',function(){
touchaction6.classList.toggle('colorchangemove');
});
//ボタン7タッチアクション
touchaction7.addEventListener('touchstart',function(){
touchaction7.classList.toggle('colorchangemove');
});
//ボタン7クリックアクション
touchaction7.addEventListener('click',function(){
touchaction7.classList.toggle('colorchangemove');
});

目的

●7つのナビゲーションボタンに対して、スマホ用のタッチアクションとPC用のクリックアクションを作成しました。
###試したこと
ググってみたのですが初心者向けの情報が少なく、わかりませんでした。

補足情報(FW/ツールのバージョンなど)

HTMLと CSSを記述しておきます。
【HTML】

<nav class="bf_navi"> <a id="touchaction1" href="#nosalt"><li>食塩不使用バター</li></a> <a id="touchaction2" href="#fermented"><li>発酵バター</li></a> <a id="touchaction3" href="#salted"><li>加塩(有塩)バター</li></a> <a id="touchaction4" href="#newitem"><li>新商品</li></a> <a id="touchaction5" href="#grassfed"><li>グラスフェッド</li></a> <a id="touchaction6" href="#foreignmade"><li>外国産バター</li></a> <a id="touchaction7" href="#another"><li>バター以外</li></a>
</nav>

【CSS】
.colorchange{
background-image: none;
background-color: #FFEB3B;
border: 5px solid #ffd553;
border-radius: 100px;
}
.colorchangemove{
background-image: none;
background-color: #FFEB3B;
border: 5px solid #ffd553;
border-radius: 100px;
transform: rotate(360deg);
}

どうぞよろしくお願いいたします。

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

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

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

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

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

tomi-hashi

2019/07/29 00:13

ご指摘ありがとうございます。 次回から気をつけます!
m.ts10806

2019/07/29 00:21

質問は編集できますので、コードだけでも対応してもらえたらと(あとからこの質問を参考にする人のために)
guest

回答2

0

teratail内の効果的な検索方法を知っているのも1つの技術です。

teratail:[短く tag:JavaScript is:accepted] の検索結果: 186件

ほぼ同じようなコードで「短くしたい」という質問は見たことがあるので、探せばあると思います。

投稿2019/07/23 09:07

編集2019/07/23 09:09
m.ts10806

総合スコア80765

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

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

tomi-hashi

2019/07/29 00:14

ありがとうございます。 他の解答例も参考にしてみます。
guest

0

ベストアンサー

こんにちは

いろいろな書き方ができそうですが、以下、その一例です。

javascript

1const mapEventToClazz = { 2 touchstart: 'colorchangemove', 3 click: 'colorchange' 4}; 5 6const addListeners = (link) => { 7 Object.entries(mapEventToClazz).forEach(([event, clazz]) => { 8 link.addEventListener(event, () => link.classList.toggle(clazz)); 9 }); 10}; 11 12[...document.getElementsByTagName('a')].forEach(addListeners); 13

以下は、動作確認のため、修正前(ご質問に挙げられているコードそのまま)と、上記の修正後のものをjsFiddle に上げたものです。

   

何か意図通りになっていないことがあれば、コメントからお知らせください。
以上参考になれば幸いです。

投稿2019/07/23 10:36

jun68ykt

総合スコア9058

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

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

tomi-hashi

2019/07/29 00:13

こんなに短くなるのですね。 シンプルなコード、ありがとうございます!大変勉強になりました。
jun68ykt

2019/07/30 01:25 編集

どういたしまして。そう仰って頂けますと回答者冥利に尽きます。回答のコードには、コードを短くしたり、まとめたりするための、便利な道具をいろいろ詰め込みましたが、一度に覚える必要はなく、手に馴染むもの(=頭に入ってき易いもの)から使っていけばよいかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問